مهمة : تنسيق موقع فيتامن واو

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#1 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
     <title>فيتامين واو</title><link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=El+Messiri|Tajawal&display=swap" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
		
      <style>
body{background-color:#171a29;margin:0px;
      color:#ffffff;}
	  
header{background:#252a3d;padding-top:10px;height:40px;
        text-align:center;font-size:10px;
		line-height:40px;
		margin-bottom:30px;}
		
header h1{margin:0px;
           font-family: 'El Messiri', sans-serif;}

main{text-align:center;
	  margin:80px 200px 110px 200px;}
	  
	  main h2{font-family: 'Tajawal', sans-serif;}
	  
	  main p{ font-weight:normal;}

main img{
	width: 600px;
	height: 210px ;
	margin-top:30px;
    margin-bottom:50px;}

main a{display:block;background:#3b7c3a;text-decoration:none;
  padding:10px 10px 10px 10px;color:#ffffff;
  width:100px;
    height:30px;
    line-height:30px;
	margin-left:auto;
   margin-right:auto;}
  
  footer{background:#11111d;
       text-align:center;
	   color:#999;
	   height:30px;
	   line-height:30px;}
	 
        </style>
  </head>
	
 <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
      		 <p>إحتياجك لهذا الفيتامينات أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسمك بالقوة </p>
			 <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>
1 Like
#2

مية مية كل مضبوط :clap:

#3