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


#1

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

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

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

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

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

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

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


#2
<!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>

#3

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


#4

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


#5

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

<!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


#6

عمل جميل :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:


#7

انا دائما مندفعة ولا اركز :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


#8

:joy:

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


#9

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

<!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>


#10

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


#11

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

<!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>

#12

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

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

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

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

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

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

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


#13

تنسيقات تطبيق فيتامين واو :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>

#14

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


#15
<!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>


#16
<!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>

#17

عمل ممتاز :muscle:


#18

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


#19

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


#20

عملي

       <!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>