<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>login</title>
<link href="https://fonts.googleapis.com/css?family=Cairo|Lalezar" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lalezar" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-rtl.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body class="rtl">
<!-- create small navbar -->
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary" style="background-color: #32234b !important;">
<div class="container">
<a href="../" class="navbar-brand">اسم الموقع</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="themes">المقالات <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="themes">
<a class="dropdown-item" href="../default/">تصنيف المقالات</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../cerulean/">السياسة</a>
<a class="dropdown-item" href="../cosmo/">الإقتصاد</a>
<a class="dropdown-item" href="../cyborg/">الصحة</a>
<a class="dropdown-item" href="../darkly/">الرياضة</a>
<a class="dropdown-item" href="../flatly/">التكنولوجيا</a>
<a class="dropdown-item" href="../journal/">سوق العمل</a>
<a class="dropdown-item" href="../litera/">علم الفلك</a>
<a class="dropdown-item" href="../lumen/">الدين</a>
<a class="dropdown-item" href="../lux/">المجتمع</a>
<a class="dropdown-item" href="../materia/">الثقافة</a>
<a class="dropdown-item" href="../minty/">القوة العسكرية</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../help/">اتصل بنا</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://blog.bootswatch.com">من نحن</a>
</li>
<li>
<form class="form-inline my-2 ">
<input class="form-control mr-sm-2 " type="search" placeholder="كلمة البحث" aria-label="Search">
<button class="btn btn-warning my-2 my-sm-0" type="submit">إبحث</button>
</form>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="http://builtwithbootstrap.com/" target="_blank">وضع مقال جديد</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">تسجيل الدخول</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
</div>
</div>
<!-- end small navbar-->
<div class="container">
<div class="row rows">
<div class="main">
<h3>من فضلك سجل الدخول أو <a href="#">إفتح حساب </a></h3>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="#" class="btn btn-lg btn-primary btn-block my-2">Facebook</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="#" class="btn btn-lg btn-info btn-block my-2">Google</a>
</div>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">أو</span>
</div>
<form role="form">
<div class="form-group">
<label for="inputUsernameEmail">اسم المستخدم</label>
<input type="text" class="form-control" id="inputUsernameEmail">
</div>
<div class="form-group">
<label for="inputPassword">كلمة السر</label>
<input type="password" class="form-control" id="inputPassword">
<a class="pull-right" href="#">نسيت كلمة السر؟</a>
</div>
<br/>
<div class="checkbox pull-right">
<label>
<input type="checkbox">
احتفظ بالبيانات </label>
</div>
<button type="submit" class="btn btn btn-primary">
الدخول
</button>
</form>
</div>
</div>
</div>
</body>
</html>
body{
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: 'Cairo', sans-serif;
}
p, a, .h2, .h4, .h5, .h6{
font-family: 'Cairo', sans-serif;
line-height: 1.9em;
}
.h1{
font-family: 'Cairo', sans-serif !important;
}
.h4{
font-family: 'Cairo', sans-serif !important;
}
.h5{
font-family: 'Cairo', sans-serif !important;
}
.h6{
font-family: 'Cairo', sans-serif !important;
font-size: 12px !important;
}
.pr2{
font-size: 12px;
}
.pr{
font-size: 15px !important;
line-height: 1.8em !important;
}
.pr1{
font-size: 17px !important;
line-height: 1.7em !important;
font-family: 'Cairo', sans-serif !important;
line-height: 2em !important;
}
.pr3{
font-size: 20px !important;
line-height: 1.7em !important;
font-family: 'Cairo', sans-serif !important;
line-height: 2em !important;
margin-bottom: 2em !important;
}
.row{
font-family: 'Cairo', sans-serif;
}
.container{
width: 95%;
margin: auto;
}
/*navbar*/
.navbar .bg-primary {
background-color: #32234b !important;
}
.navbar-dark .navbar-brand{
font-family: 'Lalezar', cursive;
font-size: 35px ;
}
.card{
border:none !important;
}
.display-4{
font-family: 'Lalezar', cursive;
}
.form-inline{
margin-right: 5em;
}
.form-control .btn{
color: #f5f5f5;
background-image: none;
border-color: #28a745;
}
.first-row{
margin-top: 10em;
}
.hr{
border-top: 1px solid rgb(178, 211, 246);
}
.dropdown-item:hover{
background-color: #32234b !important;
color: #fff !important;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff !important;
}
/*end navbar*/
/*jubotron*/
.jumbotron {
background-color: #e8f3ec !important;
}
.list-unstyled{
display: inline-flex;
}
.list-unstyled li{
margin-right: 2.5em;
}
.fa, .fas {
font-size: 2em;
}
/*end jubotron*/
/*********footer*******************/
footer{
background-color:#fff;
padding: 60px 0px;
}
footer ul{
list-style:none;
margin:0 auto;
display:inline-block;
padding-top:50px;
}
footer ul li{
float:left;
}
footer ul li a:hover{
color:#7dabdb;
text-decoration:none;
}
.footer-top .fa{
font-size:18px;
color: #FFF;
padding-right:10px;
}
.footer-top a{
color:#FFF;
text-decoration:none;
}
.footer-top .col-lg-2:hover .fa , .footer-top .col-lg-2:hover a{
color:#7dabdb;
}
.copyright{
background-color:#f0f0f0;
}
.copyright p{
font-size:12px;
padding:15px 0 10px 0;
}
footer ul li a {
color: #545453;
padding: 20px;
}
.div{
float: left;
}
/* end footer */
/*login*/
.main {
max-width: 320px;
margin: 0 auto;
}
.login-or {
position: relative;
font-size: 18px;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
background-color: #cdcdcd;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
h3 {
text-align: center;
line-height: 300%;
}
.rows{
margin-top: 10em;
}
.btn-primary {
float: left !important;
}
h3, .h3 {
font-size: 1.2rem !important;
}
/* end login*/
/*nav*/
nav{
margin-top: 5em;
}
.imgg{
max-height: 50px !important;
min-height: 50px !important;
max-width: 57px !important;
}
/*list groupe*/
.list-group-item {
border:none !important;
}
.list-group-item:hover{
background-color: #eee !important;
transform: scale(1) rotate(2deg) ;
}
/*end list groupe*/
/* end nav*/
