نعم بالضبط كما أشرتي، راح نتطرق لطرق جعله ملتصق في نهاية الصفحة في الوقت المناسب
2 Likes
شكرا جدا لحضرتك على الملاحظه
هكذا كان الكود مكتوب على google fonts
هل اخد فقط الجزء الذي يخص الfont المطلوب
2 Likes
هل اخد فقط الجزء الذي يخص الfont المطلوب
نعم
اخترتي أكثر من خط وفي الأخر لن يتم تطبيق الإ الخط الذي بأخر خاصية كما ستتعرفي على ذلك في دروس ورشة عمل القوائم.
font-family: 'Amiri', serif;
font-family: 'Artifika', serif;
font-family: 'Schoolbell', cursive;
font-family: 'Tajawal', sans-serif;
لذا بإمكانك مسح الجميع والإبقاء على الخاصية الأخيرة:
font-family: 'Tajawal', sans-serif;
ايضاً إزالتها من كود الـ CDN الخاص بقوقل والإبقاء على المستخدم
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
2 Likes
تمام سأقوم بالتعديل
جزاك الله خيرا
2 Likes
OK, thank you for your advice
2 Likes
–أولا أعتذر على عدم تنظيم الكود 
– لتنسيق هذه الصفحة أخذ أكثر من ساعتين معايا 
– رجاء إن تم ملاحظة خطأ في كود تنبيهي و شكرا للجميع مقدما…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>فيتامين واو</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<style>
body {
background-color: #171a29;
color: #fff;
font-family: 'Tajawal', sans-serif;
text-align: center;
margin: 0;
}
header {
background-color: #212639;
height: 80px;
}
header h1 {
color: #fff;
line-height: 80px;
margin: 0;
}
main h2 {
font-size: 30px;
margin-top: 50px;
margin-bottom: 15px;
}
main p {
width: 600px;
margin-left: auto;
margin-right: auto;
}
main img {
width: 600px;
height: 240px;
margin-top: 30px;
margin-bottom: 30px;
}
div a {
background-color: #3b7c3a;
color: #fff;
display: block;
width: 200px;
height:40px;
margin-left: auto;
margin-right: auto;
line-height: 40px;
text-decoration: none;
margin-bottom: 50px;
margin-top: 20px;
}
footer {
background-color: #0f121b;
color: #707281;
height: 60px;
line-height: 60px;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<div>
<h2>سنجعلك في المقدمة إن تأخرت</h2>
<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
</div>
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" width="600" height="250">
<div>
<a href="#">إطلب وساطة</a>
</div>
</main>
<footer>
<p>© جميع الحقوق محفوظة لفيتامين واو 2019</p>
</footer>
</body>
</html>
2 Likes
ممتاز لا يوجد أي خطأ 
2 Likes
تنسيق موقع فيتامين واو
<!DOCTUPE html>
<html>
<head>
<meta charset="utf-8">
<title>فيتامين واو</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
<style>
body{
background-color: #171a29;
color: #fff;
font-family: 'Tajawal', sans-serif;
margin: 0;
}
header{
background-color: #212639;
height: 45px;
margin: 0;
}
header h1{
margin-top: 0;
text-align: center;
font-size: 20px;
line-height: 50px;
}
main h2{
text-align: center;
margin-top: 60px;
}
main p{
font-size: 14px;
text-align: center;
margin: 10px auto 50px auto;
width: 600px;
}
main div img{
width: 600px;
height: 210px;
margin-left: auto;
margin-right: auto;
display: block;
}
main a{
background-color: #3b7c3a;
color: #fff;
width: 150px;
height: 40px;
display: block;
text-align: center;
text-decoration: none;
font-size: 12px;
line-height: 40px;
margin: 50px auto 80px auto;
}
footer{
background-color: #0f121b;
color: #707281;
height:40px;
margin-bottom: 0;
}
footer p{
margin: 0;
text-align: center;
font-size: 12px;
line-height: 40px;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<h2>سنجعلك فى المقدمة ان تأخرت</h2>
<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك</p>
<div>
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
</div>
<a href="#">اطلب وساطة</a>
</main>
<footer>
<p>©جميع الحقوق محفوظة لفيتامين واو2018</p>
</footer>
</body>
</html>
التصميم
ناتج الكود
ارجو ان ينال الاستحسان
2 Likes
أنت من أكثر من يهتموا بالتفاصيل، أحييك على مجهودك الطيب عزيزي طارق
2 Likes
من فضلك من دون احراج
1 Like
بدون أي احراجات
1 Like
لسه ابدأ التعليم
تلميذك
1 Like
لسه واصلنى اشعار
1 Like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>فيتامين واو</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
<style>
body,
header,
main,
footer,
h1,
h2,
div,
img,
p {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
font-family: 'Tajawal', sans-serif;
background-color: #171a29;
color: #fff;
font-size: 16px;
}
header {
text-align: center;
background-color: #212639;
height: 50px;
line-height: 50px;
}
header h1 {
font-size: 20px;
}
main {
text-align: center;
width: 640px;
margin: 50px auto;
padding: 20px;
}
main h2 {
font-size: 23px;
}
main p {
padding: 10px 10px 20px;
line-height: 24px;
}
.banner img {
width: 600px;
height: 210px;
margin: 20px 0;
}
.request-btn {
background-color: #3b7c3a;
text-decoration: none;
display: block;
margin: 20px auto 0;
width:150px;
height: 35px;
line-height: 35px;
color: #fff;
}
footer {
background-color: #0f121b;
color: #707281;
text-align: center;
padding: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<h2>سنجعلك في المقدمة إن تأخرت</h2>
<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
<div class="banner">
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="فيتامين واو">
</div>
<a href="#" class="request-btn">اطلب وساطة</a>
</main>
<footer>
<p>©2018 جميع الحقوق محفوظة لفيتامين واو</p>
</footer>
</body>
</html>
2 Likes
أحسنتي @Radwa العمل مية مية.
body,
header,
main,
footer,
h1,
h2,
div,
img,
p {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
أقترح عليك إستخدام الـ selector نجمة * وسيقوم بتحديد كل العناصر بدلاً من كتابتها واحد تلو الأخر
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
2 Likes
- تعتبر لاختصار الكود
1 Like
النجمة تستهدف جميع العناصر في لغة الـ html
1 Like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vitamin Wow</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
<style>
body{
margin:0;
background-color:#171a29;
color:#fff;
font-family: 'Tajawal', sans-serif;
}
header{
background-color:#212639;
}
header h1{
margin-top:0;
height:60px;
line-height:60px;
text-align:center;
}
main{
width:600px;
margin-right:auto;
margin-left:auto;
margin-top:70px;
text-align:center;
}
main h2{
font-size:30px;
font-weight:600;
}
main p{
font-size:16px;
font-weight:500;
}
main img{
margin-top:30px;
width:600px;
height:210px;
}
main a{
background-color:#3b7c3a;
color:#fff;
text-decoration:none;
width:200px;
height:45px;
display:block;
line-height:45px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
font-weight:900;
}
footer{
background-color:#0f121b;
height:50px;
margin-top:60px;
}
footer p{
color:#707281;
text-align:center;
line-height:50px;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<h2>سنجعلك في المقدمة إن تأخرت</h2>
<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
<div>
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
</div>
<a href="#">أطلب وساطه</a>
</main>
<footer>
<p>©جميع الحقوق محفوظه لفيتامين واو 2018</p>
</footer>
</body>
</html>
2 Likes
ممتاز فاتن شغلك نظيف 
2 Likes