مرحباً جميعاً
المهمة المطلوبة:
طريقة مشاركة الأكواد التي قمت بكتابتها:
قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات
```
هنا ضع الأكواد
```
شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق
قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات
```
هنا ضع الأكواد
```
شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>فيتامين واو</title>
<style>
body {
background-color: #171a29;
color: #ffffff;
}
header {
background-color: #212639;
width: 100%;
height: 60px;
}
main img {
width: 600px;
height: 210px;
}
main a {
background-color: #3b7c3a;
color: #ffffff;
}
footer {
background-color: #0f121b;
color: #707281;
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<h2>سنجعلك في المقدمة إن تأخرت</h2>
<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الأخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
<div>
<a href="#">إطلب وساطة </a>
</div>
</main>
<footer>
<p>©2018 جميع الحقوق محفوظة لفيتامين واو</p>
</footer>
</body>
</html>
الله عليك ي أماني
العمل على التنسيقات
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>فيتامين واو</title>
<style>
header{background-color: #212639;
width: 100%;
height: 60px;
}
body{background-color: #171a26;
color: #ffffff;
}
a{background-color: #3b7c3a;
color: #ffffff;
}
footer{background-color: #0f121b;
color: #707281;
width: 100%;
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" "width=100%" "height= 60px">
</div>
<a href="#">أطلب وساطة</a>
</main>
<footer>
<p>© جميع الحقوق محفوظة لفيتامين واو2018</p>
</footer>
</body>
</html>
استاذ @Alhakem
عمل جميل لدي بعض الملاحظات:
العنصر header
العنصر body
فقط ركزي على كود اللون المطلوب للخلفية وقومي بتعديلة للقيمة الصحيحة
العنصر footer
العنصر a
قمتي بالمطلوب فقط ملاحظة واحدة في متطلبات المهمة تم ذكر التالي:
1- قم بإستهداف الرابط الذي بداخل القسم main فقط
طريقة إستهدافك للعنصر تقوم بتحديد كل العناصر a التي بداخل الصفحة بينما نريد ان يتم تحديد العناصر التي بداخل العنصر main فحسب، قومي بالمحاولة ومراجعة الدرس إستهداف عناصر تنحدر تحت أخرى في الورشة.
العنصر img
لم تقومي بإضافة التنسيقات الية كما هو محدد في المهمة
تنسيق الصورة img بداخل القسم main:
1- قم بإستهداف الصورة التي بدأخل القسم main فقط (إستهداف عنصر يندرج تحت أخر)
2- قم بتحديد عرض العنصر بالقيمة600px
3- قم بتحديد إرتفاع العنصر بالقيمة210px
بإنتظار الكود الخاص بك بعد التعديلات
انا دائما مندفعة ولا اركز اسفة
والان هل الكود صحيح
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>فيتامين واو</title>
<style>
header{background-color: #212639;
width: 100%;
height: 60px;
}
body{background-color: #171a29;
color: #ffffff;
}
main img{width: 600px;
height: 210px;
}
main a{background-color: #3b7c3a;
color: #ffffff;
}
footer{background-color: #0f121b;
color: #707281;
width: 100%;
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>
جميل الان كل شئ بالشكل المطلوب، احسنتي
العمل علي التنسيقات
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>فيتامين واو</title>
<style>
body{
background-color: #171a29;
color: #ffffff;
}
header{
background-color: #212639;
width: 100%;
height: 60px;
}
main img{
width: 600px;
height: 210px;
}
main a{
background-color: #3b7c3a;
color: #ffffff;
}
footer{
background-color: #0f121b;
color: #707281;
width: 100%;
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>
جميل، كما هو مطلوب
أساتذتنا هذا هو عملي
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: #171a29;
color: #ffffff;
width: 100%;
height: 50px;
}
header{
background-color: #212639;
width : 100%;
height:60px;
}
main div img {
width : 600px;
height:210px;
}
footer{
background-color: #0f121b;
color: #707281;
width : 100%;
height: 40px;
}
</style>
</head>
<body>
<header><h1> فيتاميــن واو</h1></header>
<main>
<p>سنجعلك في المقدمة إن تأخرت</p>
<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>© جميع الحقوق محفوظة لفيتامين واو</p>
</footer>
</body>
</html>
رائع أحسنتي
عندي بعض ملاحظات
تنسيقات العنصر body
عودي للمهمة وتأكدي من التنسيقات المطلوبة واعملي التعديلات اللازمة
تنسيقات العنصر header
تنسيقات العنصر img
تنسيقات العنصر footer
تنسيقات العنصر a
ارجعي للمهمة وتأكدي انك قمتي بتنسيق كل العناصر المطلوبة
تنسيقات تطبيق فيتامين واو
<html>
<head>
<meta charset="utf-8">
<title>فيتامين واو</title>
<style>
body{
background-color: #171a29;
color: #fff;
}
header{
background-color: #212639;
width: 100%;
height: 60px;
}
main img {
width: 600px;
height: 210px;
}
main a {
background-color: #3b7c3a;
color: #fff;
}
footer {
background-color: #0f121b;
color: #707281;
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<header>
<h1>فيتامين واو</h1>
</header>
<main>
<h2>سنجعلك في المقدمة إن تأخرت</h2>
<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
<div>
<a href="#">اطلب وساطة</a>
</div>
</main>
<footer>
<p> © 2018 جميع الحقوق محفوظة لفيتامين واو</p>
</footer>
</body>
</html>
الله عليك التنسيقات بيرفكت
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>فيتامين واو</title>
<style>
body {
background-color: #171a29;
color: #fff;
}
header {
background-color: #212639;
width: 100%;
height: 60px;
}
main img {
width: 600px;
height: 210px;
}
main a {
background-color: #3b7c3a;
color: #fff;
}
footer {
background-color: #0f121b;
color: #707281;
width: 100%;
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" alt="فيتامين واو">
</div>
<a href="#">اطلب وساطة</a>
</main>
<footer>
<p>©2018 جميع الحقوق محفوظة لفيتامين واو</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Starter Template for Bootstrap</title>
<style>
body {
background-color: #171a29;
}
p, h1, h2, h3, h4, h5, h6, a {
color: #ffffff;
}
header {
background-color: #212639;
width: 100%;
height: 60px;
}
main img {
width: 600px;
height: 210px;
}
main a {
background-color: #3b7c3a;
}
footer p {
background-color: #0f121b;
color: #707281;
width: 100%;
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" alt="">
<div>
<a href="#">اطلب وساطة</a>
</main>
<footer>
<p> © 2018 جميع الحقوق محفوظه لفيتامين واو </p>
</footer>
</body>
</html>
عمل ممتاز
عمل جميل عزيزي نزار
استاذ سوف أقوم بعمل التنسيقات المطلوبة
عملي
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color:#171a29;
color : #ffffff;
}
header{
background-color: #212639;
width:100%;
height:60px;
}
main img{
width:600px;
height:210px ;
}
main a {
background-color:#3b7c3a;
color:#ffffff;
}
footer{
background: #0f121b;
color:#707281;
width:100%;
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>© جميع الحقوق محفوظة لفيتامين واو</p>
</footer>
</body>
</html>