مشاركة حلول: التدرب على لغة التنسيقات CSS

مرحباً جميعاً

المهمة المطلوبة:

بإمكانك الإطلاع عليها من هنا

طريقة مشاركة الأكواد التي قمت بكتابتها:

قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات

```
هنا ضع الأكواد
```

شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق

4 Likes
<!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>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
4 Likes

الله عليك ي أماني :muscle::clap:

2 Likes

يعطيك العافية استاذ @Alhakem :smiley:

2 Likes

العمل على التنسيقات

<!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>&copy; جميع الحقوق محفوظة لفيتامين واو2018</p>  
		</footer>
	</body>
</html>

استاذ @Alhakem

3 Likes

عمل جميل :clap: لدي بعض الملاحظات:

العنصر header :ballot_box_with_check:

العنصر body :ballot_box_with_check:
فقط ركزي على كود اللون المطلوب للخلفية وقومي بتعديلة للقيمة الصحيحة

العنصر footer:ballot_box_with_check:

العنصر a
قمتي بالمطلوب فقط ملاحظة واحدة في متطلبات المهمة تم ذكر التالي:

1- قم بإستهداف الرابط الذي بداخل القسم main فقط

طريقة إستهدافك للعنصر تقوم بتحديد كل العناصر a التي بداخل الصفحة بينما نريد ان يتم تحديد العناصر التي بداخل العنصر main فحسب، قومي بالمحاولة ومراجعة الدرس إستهداف عناصر تنحدر تحت أخرى في الورشة.

العنصر img
لم تقومي بإضافة التنسيقات الية كما هو محدد في المهمة

تنسيق الصورة img بداخل القسم main:
1- قم بإستهداف الصورة التي بدأخل القسم main فقط (إستهداف عنصر يندرج تحت أخر)
2- قم بتحديد عرض العنصر بالقيمة 600px
3- قم بتحديد إرتفاع العنصر بالقيمة 210px


بإنتظار الكود الخاص بك بعد التعديلات :star_struck::muscle:

3 Likes

انا دائما مندفعة ولا اركز :sweat_smile: اسفة
والان هل الكود صحيح

<!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>&copy; جميع الحقوق محفوظة لفيتامين واو2018</p>  
		</footer>
	</body>
</html>

@Alhakem

3 Likes

:joy:

جميل الان كل شئ بالشكل المطلوب، احسنتي :clap:

2 Likes

العمل علي التنسيقات

<!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>&copy; 2018 جميع الحقوق محفوظة لفيتامين واو</p>
  </footer>
</body>
</html>

3 Likes

جميل، كما هو مطلوب :smiley::clap:

3 Likes

أساتذتنا هذا هو عملي

<!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>&copy; جميع الحقوق محفوظة لفيتامين واو</p>  
    </footer>
 </body>     
    
</html>
3 Likes

رائع أحسنتي :clap:

عندي بعض ملاحظات

تنسيقات العنصر body
عودي للمهمة وتأكدي من التنسيقات المطلوبة واعملي التعديلات اللازمة

تنسيقات العنصر header :ballot_box_with_check:

تنسيقات العنصر img :ballot_box_with_check:

تنسيقات العنصر footer :ballot_box_with_check:

تنسيقات العنصر a :no_entry_sign:
ارجعي للمهمة وتأكدي انك قمتي بتنسيق كل العناصر المطلوبة

2 Likes

تنسيقات تطبيق فيتامين واو :v:

<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> &copy 2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
4 Likes

الله عليك التنسيقات بيرفكت :smiley:

3 Likes
<!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>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

2 Likes
<!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> &copy; 2018 جميع الحقوق محفوظه لفيتامين واو  </p>
    </footer>
    
  </body>
  
</html>
2 Likes

عمل ممتاز :muscle:

1 Like

عمل جميل عزيزي نزار :clap:

1 Like

استاذ سوف أقوم بعمل التنسيقات المطلوبة

1 Like

عملي

       <!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>&copy; جميع الحقوق محفوظة لفيتامين واو</p>  
    </footer>
 </body>     
    
</html>

    

2 Likes