مشاركة حلول: مهمة تنسيق تطبيق فيتامين واو

ورشات الواجهات الأمامية Frontend أساسيات تطوير واجهات الويب
#109

هذا ما استطعت التوصل اليه بعد شغل 4 ساعات
لا مكان لليأس -_*

<!DOCTYBE html>
<html>
    <head>
        <meta charset="utf=8">
        <title>vitamen oaaao</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        
        <style>
            header{
                background-color: #212639;    
            }
            body{
                margin: 0;
                background-color: #171a29;
                color: #fff;
            
            }
            header  h1{
             margin: 0;
             color: #fff;   
             font-family: 'Tajawal', sans-serif; 
             text-align: center;
             padding:2% 0 2% 0;
            }
            header {
                background-color: #212639;
            }
            main {
                text-align: center;
                font-family: 'Tajawal', sans-serif;     
            }
            main h2{
              margin-top: 50px;
                
                
            }
           
            main div img {
            margin: 40px ;
            width:600px;
             
         } 
          main  a{
             color: #fff;
             width:200px;
             background-color:#3b7c3a;
             text-align:center;
             text-decoration: none;
             padding: 10px 20px 10px 20px;
             margin: 0 auto 80px auto;
             display: block
             
         }  
        footer  {
             background-color:#0f121b;
             margin:0;
             padding:4px;
         }
         footer{
             color:fff;
             font-family: 'Tajawal', sans-serif;
             text-align:center; 
             
             
             
             
         }
         
            }
        </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>![%D8%B3%D8%B3|471x466](upload://zqW2kfOmqCftD7EvBphIhNnF8OC.jpeg) 
```![%D8%B3%D8%B3|471x466](upload://bVO3Rv0ChMkl4MM3jlcX9hXHpGs.png)
1 Like
#110

%D8%B3%D8%B3

1 Like
#111 
<!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{
                    margin:0;
                    background-color:#171a29;
                }
                header{
                   background-color:#212639;
                   height:50px;
                   
                }
                header h1{
                    font-size:20px;
                    font-family: 'Tajawal', sans-serif;
                    text-align:center;
                    line-height:50px;
                   color:#fff;
                   margin:0;
                }
                main{
                    
                    margin-left:auto;
                    margin-right:auto;
                    text-align:center;
                    
                }
                main img{
                    width:600px;
                    height:210px;
                }
                main h2{
                    color:#fff;
                    font-family: 'Tajawal', sans-serif;
                    font-size:20px;
                    margin-top:60px;
                }
                main p{
                    color:#fff;
                    font-family: 'Tajawal', sans-serif;
                    font-size:15px;
                    margin-bottom:40px;
                    width:600px;
                    margin-right:auto;
                    margin-left:auto;
                }
                main a{
                    display:block;
                    text-decoration:none;
                    color:#fff;
                    background-color:#3b7c3a;
                    height:40px;
                    width:160px;
                    margin-top:80px;
                    margin-left:auto;
                    margin-right:auto;
                    font-family: 'Tajawal', sans-serif;
                    line-height:40px;
                }
                footer{
                    background-color:#0f121b;
                    height:40px;
                    margin-top:40px;
                }
                footer p{
                    color:#707281;
                    text-align:center;
                    line-height:40px;
                    margin:0;
                }
            </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>
1 Like
#112

styling%20vitamine%20waw
styling vitamine waw.png985×571 117 KB

1 Like
#113

عمل جميل ي بسام كل شئ مضبوط معك بس قوس { زايد في نهاية اكواد الـ CSS.

#114

مية مية عمل ممتاز

#115 
<!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{
                margin: 0;
                background-color: #171a29;
                color: #fff;
                font-family: 'Tajawal', sans-serif;
            }
            header{
                background-color: #212639;
                height: 60px;
            }
            header h1{
                margin: 0 0 80px 0;
                text-align: center;
                line-height: 60px;
                font-size: 22px;
            }
            main{
                margin: 60px auto 60px auto;
                text-align: center;
            }
            main h2{
                font-size: 20px;
            }
            main p{
                font-size: 12px;
                font-weight: 400;
                width: 450px;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }
            main div{
                margin-top: 40px;
                margin-bottom: 40px;
            }
            main img{
                width: 600px;
                height: 210px;
            }
            main a{
                color: #fff;
                background-color: #3b7c3a;
                text-decoration: none;
                width: 130px;
                height: 40px;
                display: block;
                margin-left: auto;
                margin-right: auto;
                line-height: 40px;
                font-size: 15px;
            }
            footer{
                background: #0f121b;
                margin-top: 45px;
            }
            footer p{
                color: #707281;
                text-align: center;
                height: 40px;
                line-height: 40px;
                font-size: 15px;
                margin: 0;
            }
        </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>
1 Like
#116

مية مية :+1:

1 Like
#117

المشروع معا بعض التعديلات :grin:

998Z
Firefox_Screenshot_2019-09-09T18-13-43.998Z.jpg1349×761 133 KB 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap&subset=arabic" rel="stylesheet">
        <style>
            body{
                color:gold;
                margin:0;
                text-align:center;
                font-family: 'Tajawal', sans-serif;
            }
            h1{margin:0}
            header{
                background-color:#212639;
                height:66px;
            }
            header h1{
                line-height:50px;
            }
            main{
                background-color:#171a29;
                height:635px;
            }
            main h1{
                padding:55px 0 20px;
            }
            main p{
                width: 600px;
                margin:0 auto 53px;
                line-height: 30px;
                font-weight: 700;
            }
            main img{
                border: 2px solid;
                width:600px;
                height:210px;
            }
            main div{
                margin:52px auto 0;
                width:190px;
                line-height:54px;
                border: 2px solid;
                background-color:#11111d;
            }
            main div a{
                text-decoration:none;
                color:gold;
                font-size: 20px;
            }
            footer{
                background-color:#11111d;
            }
            footer p{
                margin:0;
                line-height:60px;
                color:#999;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h1>سنجعلك في المقدمة إن تأخرت </h1>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="فيتامين واو">
            <div>
                <a href="#">اطلب وساطه</a>
            </div>
        </main>
        <footer>
            <p>&copy; 2019 جميع الحقوق محفوظه لفيتامين واو</p>
        </footer>
    </body>
</html>
1 Like
#118

عمل رائع :ok_hand::clap:

1 Like
#119 
<!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{
                    margin:0;
                    background-color:#171a29;
                }
                header{
                    background-color:#212639;
                    height:50px;
                }
                header h1{
                    color:#fff;
                    font-family: 'Tajawal', sans-serif;
                    text-align:center;
                    line-height:50px;
                    font-size:20px;
                    margin:0;
                }
                main{
                    color:#fff;
                    font-family: 'Tajawal', sans-serif;
                    margin-left:auto;
                    margin-right:auto;
                    text-align:center;
                }
                main h2{
                    margin-top:90px;
                    font-size:25px;
                }
                main p{
                    font-size:15px;
                    width:600px;
                    height:50px;
                    margin-left:auto;
                    margin-right:auto;
                }
                main img{
                    margin:30px;
                    width:600px;
                    height:210px;                    
                }
                main a{
                    color:#fff;
                    background-color:#3b7c3a;
                    width:150px;
                    height:50px;
                    display:block;
                    margin-left:auto;
                    margin-right:auto;
                    margin-top:60px;
                    margin-bottom:60px;
                    font-weight:bold;
                    font-size:15px;
                    line-height:50px;
                    text-decoration:none;
                    font-family: 'Tajawal', sans-serif;
                }
                footer{
                    background-color:#0f121b;
                }
                footer p{
                    color:#707281;
                    text-align:center;
                    height:50px;
                    line-height:50px;
                    margin:0;
                }
            </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="راحت الصورة ههههه" width="600" height="300">
                </div>
                <a href="#">اطلب وساطه</a>
            </main>
            <footer>
                <p>&copy;جميع الحقوق محفوظة لفيتامين واو 2018</p>
            </footer>
        </body>
    </html>
1 Like
#120

%D8%B9
ع.png1364×575 92.6 KB

1 Like
#121

عمل ممتاز ي ناصر :+1:

ملاحظات:

  • في قاعدة header كتبت الخاصية hieght بشكل خاطئ بدلاً منها ضع height

  • في قاعدة main p وقاعدة footer p قمت بكتابة قيمة الخاصية height كقيمة رقيمة فقط بدون وحدة الـ px

ثم بأخذ هذه الملاحظات في عين الإعتبار وما سواها رائع

1 Like
#122

الترميز في الصورة التي اخذتها فيه مشكلة بينما انت قمت بتحديدة بشكل صحيح في الكود

<meta charset="utf-8">

لذا من غير المتوقع أن تظهر النصوص بهذا الشكل.

هل كتبت الأكواد في بيئة العمل الخاصة بكورتابز ام من جهاز الكمبيوتر الخاص بك في المفكرة او محرر أخر؟

#123

بيئة العمل

1 Like
#124

تم التعديل :heart:

1 Like
#125

ان شاءالله كل شيء تمام :grin:

Unddtitled
Unddtitled.png1336×702 180 KB 

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>Bribe</title>
         <link href="https://fonts.googleapis.com/css?family=Merriweather:400i,700|Tajawal&display=swap" rel="stylesheet"> 
		 <style>
		  body{
             margin:0;
             background-color:#171a29;
		    }
		    header{
                  background-color:#212639;
                  border-bottom: 2px dotted #707281;
				  height:55px;
			}
			header h1{
                    font-family: 'Tajawal', sans-serif;  
                    text-align:center;
                    color:#ffffff;
                    line-height:55px;
                    margin: 0;
                    font-size:30px;
			}
            main{
                width:600px;
				text-align:center;
                margin-left: auto;
                margin-right: auto;
				margin-bottom:49px;
				margin-top:49px;
                font-family: 'Tajawal', sans-serif;
                color:#fff;   
				
            }
            main h2{
			       height:55px;
			       margin-bottom:20px;
				   line-height:65px;
				   font-size:30px;
				    
            }		 
			main p{
			      
				  font-size:16px;
			      margin-bottom:40px;
				  line-height:1px;
				  
			}
			main div{
			       margin: auto 20px 45px auto;
				  display:inline-block;
				   
			}
			main img{
			        display:inline-block;
			        width:600px;
					height:210px;
			}
			main a{
			      display:block;
				  margin-bottom:45px;
				  background-color:#3b7c3a;
				  width:145px;
				  height:45px;
				  color:#fff;
				  text-align:center;
				  text-decoration:none;
                  margin-left:auto;
                  margin-right:auto;
                  font-size:20px;				  
			      line-height:40px;
				  font-family: 'Tajawal', sans-serif;
			}
			footer{
			      background-color:#0f121b;
				  margin: 0;
				  height:50px;
			}
			footer p{
			        line-height:50px;
			        color:#707281;
			        text-align:center;
					font-family: 'Tajawal', sans-serif;
					font-size:15px;
					border-top: 2px dotted  #707281;
			}
		 
		 </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="600" height="200">
             </div>
             <a href="#">اطلب وساطة</a>
         </main>
         <footer>
             <p>&copy;جميع الحقوق محفوظة لفتامين واو 2018 </p>
             
         </footer>
     </body>
 </html>
1 Like
#126

كل شئ تمام ومية مية :muscle:

بعض الملاحظات البسيطة:

  • في القاعدة main p عملتي الخاصية line-height بقيمة سالبة وذلك غير مسموح.

  • في القاعدة main img إستخدمتي الخاصية display بالقيمة block-line وهذه القيمة غير موجودة في لغة الـ CSS بالأصح هي inline-block

  • في القاعدة main a عملتي القيمة الخاصة بالـ height = 45x نسيتي الـ p في الوحدة px

  • في وسم الصورة img أضفتي لها الـ width و الـ height بوحدة قياس بالشكل التالي: 200px و 600px بينما في هذه الـ attributes المطلوب قيمة بدون وحدة بحيث تكون بالشكل التالي:

<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" width="600" height="200">

فإفتراضياً يتم إعتبار تلك القيم بالوحدة px

1 Like
#127

شكرا على الملاحظات , تم التعديل

1 Like
#128 

<!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{
				margin: 0px;
				}
			header{
				margin: -15px;
				height: 60px;
				background-color: #212639;
				padding: 0px;
				line-height:40px;
				}

			header h1{
				font-family: 'Tajawal', sans-serif;
				font-size: 20px;
				
				color: #fff;
				text-align: center;
				font-weight: bold;
				}
			main{
				background-color:  #171a29;
				 font-family: 'Tajawal', sans-serif;

				color: #fff;
				text-align: center;
				padding: 60px;
				}
			main div{
				width: 600px;
				margin-left: auto;
				margin-right: auto;
				}

			div img{
				width: 600px;
				height: 210px;
				margin: 30px 0px 30px 0px;
				}
			main div a{
				display: block;
				text-decoration: none;
				width: 160px;
				height: 35px;
				background-color: #3b7c3a;
				margin-left: auto;
				margin-right: auto;
				color: #fff;
				font-size: 17px;
				line-height: 35px;
				margin-top: 15px;



				}

			footer{
				background-color: #0f121b;
				height: 50px;
    			display: block;
    			font-size:14px;
    			text-align: center;
				color: #707281;
				line-height: 50px;
				font-family: 'Tajawal', 	sans-serif;
		
			}



		</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">

				</div>
			
				<a href="#"> اطلب وساطه</a>
			</div>
		</main>
		<footer>
			&copy; 2018 جميع الحقوق محفوظة لفيتامين واو
		</footer>

	</body>
</html>
1 Like