تحميل كتب ebook pdf: تصميم قالب لموقع شخصي بالhtml وcss من الصفر

بعد أن رأينا الكثير من قواعد تصميم المواقع بلغتي html و css في دورة تصميم مواقع الإنترنت للمبتدئين، اليوم سنقوم بتطبيق هذه القواعد لعمل قالب لموقع شخصي من الصفر.

هذا الدرس يهم كل شخص لديه معرفة مسبقة بتصميم المواقع ولو قليلا. أما بالنسبة لمن لا يعرف شيئا حول هذا الأمر بعد. المرجو مراجعة هذه الدروس:

شكل القالب

دروس تعلم أساسيات html

دروس تعلم أساسيات css

هذا التصميم بسيط وأردنا أن نبين فيه طريقة تطبيق كل ما رأيناه في الدروس الماضية. يمكنكم تحميل القالب كاملا من هنا. وغليكم الأكواد والتي تبدو قليلا مختلفة عما في الفيديو لأني قمت ببعض التحسينات عليه:

كود html:

<!DOCTYPE html>
<html>
<head>
<title>الموقع الشخصي لإبراهيم زكاغ</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<nav id="menu">
<ul>
<li><a href="#">السيرة الذاتية</a></li>
<li><a href="#">للتواصل</a></li>
<li><a href="#">خدمات</a></li>
</ul>
</nav>
<div id="logo">
<h1>إبراهيم زكاغ</h1>
<p>مدون وكاتب محتوى على الإنترنت.</p>
</div>
</header>
<main id="container">
<h2>المهارات</h2>
<a href="#">
<div class="box">
<img src="images/webd.jpg"/>
<h3>تصميم المواقع</h3>
<p>إنشاء وعمل تصميمات متميزة ومتفردة.</p>
</div>
</a>
<a href="#">
<div class="box">
<img src="images/content.jpg"/>
<h3>تحرير المحتوى</h3>
<p>كتابة مواضيع حصرية وتنافسية على الإنترنت.</p>
</div>
</a>
<a href="#">
<div class="box">
<img src="images/marketing.jpg"/>
<h3>سيو وتسويق</h3>
<p>تقنيات الإعلان على الشبكات الإجتماعية ومحركات البحث.</p>
</div>
</a>
</main>
<footer id="bottom">
<ul>
<li><a href="#"><img src="images/facebook.png"/></a></li>
<li><a href="#"><img src="images/google.png"/></a></li>
<li><a href="#"><img src="images/twitter.png"/></a></li>
</ul>
</footer>
</body>
</html>

كود css:

body{
text-align: right;
background: #000000;
background-image: url("images/back.png");
background-repeat: no-repeat;
}

@font-face{
font-family: myHeadings;
src:url(fonts/myh.ttf);
}

@font-face{
font-family: myTexts;
src:url(fonts/myt.ttf);
}
a{
text-decoration: none;
}
ul li{
list-style: none;
}

#menu ul li{
display: inline;
margin-right: 10px;
padding: 8px;
background: #E1E4EB;
}

#menu ul li:hover{
border-radius: 5px;
}

#menu ul li a{
font-family: myTexts;
font-size: 30px;
color: #000;
}
#menu ul li a:hover{
color: #BCBAC0;
font-size: 33px;
}

#logo h1{
color: #BCBAC0;
font-size: 100px;
margin: 0;
padding:0 50px 0 0;
font-family: myHeadings;
}
#logo p{
font-size: 30px;
font-family: myTexts;
color: #E1E4EB;
padding:0 100px 0 0;
margin:0;
direction: rtl;
}

#container{
margin-top: 80px;
}
#container h2{
font-size: 60px;
color: #BCBAC0;
font-family: myHeadings;
margin: 0;
padding:0;
}
.box{
width: 400px;
margin-left: 20px;
float: right;
border: 1px solid #BCBAC0;
padding: 5px;
}

.box:hover{
border: 3px solid #BCBAC0;
}

.box img{
float: right;
margin: 13px 0 0 10px;
}

.box h3{
padding:0;
margin: 0;
color: #BCBAC0;
font-family: myHeadings;
font-size: 38px;
}

.box p{
color: #E1E4EB;
font-family: myTexts;
font-size: 26px;
margin: 0;
padding:0;
line-height: 1.2em;
}

#bottom{
clear: both;
padding-top: 20px;
text-align: center;
}
#bottom img{
max-width: 20px;
}
#bottom ul li{
display: inline;
margin-left: 10px;
}

تصميم قالب لموقع شخصي بالhtml وcss من الصفر

دروس تعلم أساسيات html

دروس تعلم أساسيات css

شرح طريقة عمل وتصميم قالب لموقع ويب شخصي