السلام عليكم اخوانى
انشاء الله نبدأ سلسلة تنفيذ ل Template
اليوم اول تصميم بسيط جدا وانشاء الله يتبعه تصميمات ممكن يكون فيها شغل اكتر
نبدأ مرحلة الاكواد
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Our Template</title>
<!--very nice reset-->
<link rel="stylesheet" href="css/normalize.css">
<!--font icon library-->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<!--google web font-->
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/droid-arabic-kufi" type="text/css"/>
<!--if IE 9-->
<script src="js/html5shiv.min.js"></script>
</head>
<body>
<div class="container">
<!--start header-->
<header>
<div class="logo"><img src="images/logo.png" alt="Logo"></div>
<nav>
<ul>
<li>الرئيسية</li>
<li>عنا</li>
<li>خدمات</li>
<li>الشركة</li>
<li>راسلنا</li>
</ul>
</nav>
</header>
<!--end header-->
<!--start content-->
<div class="content">
<div class="sidebar">
<!--start normal widget-->
<div class="widget">
<div class="title">قائمة الاقسام</div>
<div class="data">
<ul>
<li>الرئيسية</li>
<li>عنا</li>
<li>خدمات</li>
<li>الشركة</li>
<li>راسلنا</li>
</ul>
</div>
</div>
<!--end normal widget-->
<!--start product widget-->
<div class="widget">
<div class="title">منتج عشوائي</div>
<div class="data">
<img src="images/book1.jfif" alt="book1 product">
</div>
</div>
<!--end product widget-->
<!--start social widget-->
<div class="widget">
<div class="title">المواقع الاجتماعية</div>
<div class="data">
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i>
</div>
</div>
<!--end social widget-->
</div>
<div class="products">
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
<div class="product">
<img src="images/book.jfif" alt="product">
<span>More Info</span>
</div>
</div>
</div>
<!--end content-->
<!--start footer-->
<footer>
<div class="info">
<div class="box">
<h3>أقسام الموقع</h3>
<ul>
<li>الرئيسية</li>
<li>عنا</li>
<li>خدمات</li>
<li>الشركة</li>
<li>راسلنا</li>
</ul>
</div>
<div class="box">
<h3>أقسام الموقع</h3>
<ul>
<li>الرئيسية</li>
<li>عنا</li>
<li>خدمات</li>
<li>الشركة</li>
<li>راسلنا</li>
</ul>
</div>
<div class="box">
<h3>أقسام الموقع</h3>
<ul>
<li>الرئيسية</li>
<li>عنا</li>
<li>خدمات</li>
<li>الشركة</li>
<li>راسلنا</li>
</ul>
</div>
</div>
<div class="copyright">جميع الحقوق محفوظة For Tarek</div>
</footer>
<!--end footer-->
</div>
<!--jquery library-->
<script src="js/jquery-3.4.1.min.js"></script>
<!--my is plugins-->
<script src="js/plugins.js"></script>
</body>
</html>
كود css
/*start style rules*/
body{
background-color: #ddd;
font-family: 'DroidArabicKufiRegular';
direction: rtl;
}
.container{
width: 940px;
margin: 20px auto;
background: #fff;
}
ul,ol{
margin: 0;
padding: 0;
list-style: none;
}
/*end style rules*/
/*start header*/
header{
min-height: 100px;
background: #f6f6f6;
overflow: hidden;
}
header .logo{
width: 20%;
float: right;
}
header .logo img{
width: 100px;
margin: 20px 20px 20px 0;
}
header nav{
width: 80%;
float: left;
}
header nav ul{
margin: 50px 50px 0 0;
font-weight: bold;
font-size: 18px;
}
header nav ul li{
display: inline-block;
padding: 10px;
margin: 5px;
}
/*end header*/
/*start content*/
.content{
min-height: 500px;
background: #bbb;
overflow: hidden;
}
.content .sidebar{
float: right;
width: 25%;
margin-left: 1%;
}
.content .sidebar .widget{
width: 90%;
background: #fff;
border: 1px solid #ccc;
margin: 10px auto;
}
.content .sidebar .widget .title{
background: #222;
color: #fff;
padding: 5px 0;
text-align: center;
}
.content .sidebar .widget .data{
text-align: center;
padding: 5px 0;
}
.content .sidebar .widget .data ul{
text-align: right;
}
.content .sidebar .widget .data ul li{
padding: 10px;
}
.content .sidebar .widget .data img{
max-width: 80%;
margin: 10px auto;
}
.content .products{
float: left;
width: 74%;
padding: 0 0 20px 0;
}
.content .products .product{
width: 22%;
margin-left: 3%;
margin-top: 20px;
float: right;
background: #fff;
text-align: center;
}
.content .products .product img{
width: 100%;
}
/*end content*/
/*start footer*/
footer{
min-height: 100px;
background: #ccc;
}
footer .info{
background: #767676;
overflow: hidden;
}
footer .info .box{
width: 30%;
float: right;
margin-left: 3%;
}
footer .info h3{
border-bottom: 1px solid #555;
}
footer .info ul{
margin: 10px 10px 0 0;
}
footer .copyright{
background: #333;
padding: 10px 0;
color: #999;
text-align: center;
}
/*end footer*/
سكرين للموقع قبل التصميم والتلوين
سكرين للموقع
ملفات المشروع
Template
ارحب بتعليقاتكم
