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

Alhakem · 26 مايو 2019، 8:06م

الله يسلمك.

هكذا هو الحال في هذا المجال، قد يستخدم كل واحد طريقة مختلفة حسب طريقة تفكيرة وحلة للمشاكل وفي نفس الوقت تكون النتيجة واحدة.

قد تلاحظي البعض قاموا بإعطاء الصورة إرتقاع بالقيمة auto في هذه الحالة سيقوم المتصفح بإحتساب إرتفاعها بما يتناسق مع عرضها وسنحصل على نفس النتيجة.

في الجانب الأخر قام البعض بإعطاء الصورة أقصى ارتفاع ممكن لها بالخاصية max-height بقيمة 210 في هذه الحالة أيضاً سيقوم المتصفح بإختساب إرتقاعها بما يتناسب مع عرض الصورة المحددة ولكنه سيحرص على الا يتعدى إرتفاعها القيمة 210.

لكن في حال ما إن قام شخص بإعطاء الصورة إرتفاع محدد بقيمة ثابته مثلاً height:210px; في هذه الحالة سيضل إرتفاع الصورة ثابت مهما قل عرضها مما قد يسبب تشوة في أبعاد الصورة. عشان تتضح لك الصورة أكثر شوفي الفرق بين الصورتين التاليتين:

الصورة التالية في حال إعطاء الصورة إرتقاع ثابت

هذه الصورة في حال تم إعطاء الصورة ارتفاع بالقيمة auto او إستخدم max-height

في الوقت الحالي نستخدم صورة بأبعاد معروفة مسبقاً والصورة مقصوصة بهذا الحجم الي هو 600*210 لهذا لا تتضح الفكرة بشكل يعكس لك حاجتنا لعمل حساب لأبعاد الصورة بحيث لا تتشوة مهما كان حجمها وإنما نعتبرة مدخل لدرس سنناقش فيه هذه التفاصيل وراح يكون كل شئ واضح مع كثر التطبيقات المختلفة

Faten · 27 مايو 2019، 1:38ص

أيـوه فـهـمـت أنـا مـا فـكـرت الا بـالـ max-height مـافـكـرت أنـو مـمـكـن أخـلـيـهـا auto الأن فـهـمـت تـسـلـم …

abdallahmiri · 8 يونيو 2019، 12:41م

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
    </head>
    <style>
        body {
            margin: 0;
            background-color: #171a29;
            font-family: 'Tajawal', sans-serif;
        }
        header h1{
            text-align: center;
            background-color: #212639;
            margin: 0;
            color: #fff;
            padding: 15px;
            font-size: 20px;
        }
        main {
            max-width: 600px;
            margin: 60px 20px 60px 20px;
            color: #fff;
            background-color: #171a29;
        }
        main h2 {
            text-align: center;
            margin-right: auto;
            margin-left: auto;
        }
        main p {
            
            text-align: center;
            margin-right: auto;
            margin-left: auto;
            
        }
        main img {
            display: block;
            margin: 50px auto;
            width: 100%;
            max-width: 600px;
            
        }
        main a {
            display: block;
            text-decoration: none;
            text-align: center;
            margin: 60px auto 0 auto;
            color: #fff;
            background-color: #3b7c3a;
            width: 110px;
            padding: 8px;
            font-size: 12px;
            transition-duration: 0.4s;
        }
        main a:hover {
            width: 120px;
            background-color: #36E7E6;
        }
        footer {
            text-align: center;
            background-color: #0f121b;
            color: #707281;
            height: 40px;
            line-height: 40px;
        }
    </style>
    <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" alt="صورة-فيتامين واو">
            <a href="#">اطلب وساطه</a>
        </main>
        <footer>
            <p>&copy; 2018 جميع الحقوق محفوظه لفيتامين واو </p>
        </footer>
    </body>
</html>

abdallahmiri · 8 يونيو 2019، 12:49م

هناك خطأ فى

main {
            max-width: 600px;
            margin: 60px 20px 60px 20px;
            color: #fff;
            background-color: #171a29;
        }

max-width
اعطاها لل

main p {
            max-width: 600px;
            text-align: center;
            margin-right: auto;
            margin-left: auto;
            
        }

Alhakem · 8 يونيو 2019، 1:03م

كل شئ ممتاز ومضبوط 100% فقط خذ بعين الإعتبار توسيط الـ main بإستخدام الـ margin من اليمين واليسار بالقيمة auto

main {
    max-width: 600px;
    margin: 60px auto 60px auto;
    color: #fff;
    background-color: #171a29;
}

abdallahmiri · 8 يونيو 2019، 3:18م

سوف تلتصق الصورة

 main {
            margin: 60px auto;
            color: #fff;
            background-color: #171a29;
        }

Alhakem · 8 يونيو 2019، 3:33م

في هذه الحالة ستقوم بإعطاء الصورة margin او padding من اليمين واليسار.

او بإمكانك اعطاء القسم main حاشية (padding) من اليمين واليسار.

abdallahmiri · 8 يونيو 2019، 3:49م

تمام كدة

main {
            margin: 60px auto;
            padding: 0 10px;
            color: #fff;
            background-color: #171a29;
        }

Alhakem · 8 يونيو 2019، 5:27م

نعم هكذا ممتاز ويحقق المطلوب

duaa_aloudat · 9 يونيو 2019، 2:22ص

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>فيتامين واو</title>
        <style>
            body{
                background-color: #171a29;
                color: #fff;
                font-family: 'Tajawal', sans-serif;
                margin: 0 auto; 
            }
            
            header{
                background-color: #212639;
                text-align: center;
                height: 60px;
                line-height: 60px;
            }
            header h1{
                margin-top: 0px;
            }
            main{
                text-align: center;
                margin-bottom: 80px;
                margin-top: 80px;
            }
            main h2{
                margin-bottom: 40px;
            }
            p{
                margin: 0px;
            }
            main img{
                max-width: 100%;
                width: 600px;
                height: 210px;
                margin: 40px auto;
            }
            main a{
                background-color: #3b7c3a;
                color: #fff;
                height:40px;
                width:120px;
                line-height: 40px;
                display: block;
                text-decoration: none;
                text-align: center;
                margin: 0 auto; 
                transition-duration: 1s;
            }
            main a:hover{
                background-color:cornflowerblue;
                width: 140px;
            }
            footer{
                background-color: #0f121b;
                color: #707281;
                text-align: center;
                margin-bottom: 0;
                height: 60px;
                line-height: 60px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p id="pargraph1">إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب </p>
            <p id="pargragh2">ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="واسطة">
            <br>
            <a href="#">اطلب وساطة</a>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

Alhakem · 9 يونيو 2019، 4:15م

مية مية كل شيء كما هو مطلوب.

ملاحظة واحدة:

في القاعدة main img نريد ان يكون اقصى عرض للصورة يساوي 600px والعرض يكون 100%. لذا قومي بالتبديل بين القيم.

في الوقت الحالي ربما غير واضح السبب كون الصورة عرضها الحقيقي لا يتعدى ال ٦٠٠ لكن اذا سيتضح لك الفكرة مع الدروس التاليه

nabilateuse · 11 يونيو 2019، 2:06م

nabilateuse · 11 يونيو 2019، 7:58م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Tajawal" rel="stylesheet">
        <style>
            header{
                margin: 0;
            }
            header h1{
                background-color: #212639;
                text-align: center;
                font-size: 25px;
                margin: 0;
                line-height: 80px;
                height: 80px;
                color: #fff;
                font-family: 'Baloo Bhaijaan', cursive;    
            }
              
            header h1 a{
                color:#fff;
                text-decoration: none;
            }
            body{
                margin: 0;
                background-color: #171a29;
                font-family: 'Tajawal', sans-serif;
            }
            main{
                max-width: 960px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 90px;
                text-align: center;
               

            }
            main h2{
                color: #fff;
                
            }
            main p{
                color: #fff;
            }
            main img{
                margin-top: 60px;
                width: 600px;
                height: 210;
                transition-duration: 0.4s;
                width: 100%;
            }
            main img:hover{
                padding:20px;
                background-color:#ccc;
                
            }
            main a{
                background-color: #3b7c3a;
                width: 160px;
                height: 45px;
                display: block;
                color: #fff;
                text-decoration: none;
                font-size: 18px;
                margin: 60px auto 90px auto;
                line-height: 45px;
                transition-duration: 0.4s;
            }
            main a:hover{
                background-color:#222;
                border-cokor:#222;
                width:180px;
            }
            footer{
                background-color: #0f121b;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: #707281;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>
                <a href="index.html">فيتامين واو </a>
            </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="product.html">إطلب وساطة</a>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

mosaab.laboune · 11 يونيو 2019، 11:54م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>فيتامين واو</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tajawal">
        <style>
            body{
                margin: 0;
                background-color: #171a29;
                font-family: 'Tajawal', sans-serif;
                color: #fff;
            }
            header{
                background-color: #212639;
                margin-bottom: 70px;
            }
            header h1{
                text-align:center;
                line-height:50px;
                font-size:18px;
                height: 50px;
                margin:0;
            }
            main{
                text-align: center;
                max-width: 600px;
                margin: auto;
            }
            main h2{
                font-size: 25px;
            }
            main p{
                font-size: 18px;
                line-height: 25px;
            }
            main img{
                width:100%;
                max-width: 600px;
                height:210px;
                margin:30px 0;
            }
            
             main a{
                text-align:center;
                font-size: 18px;
                color:#fff;
                text-decoration:none;
                display:block;
                width:120px;
                height:40px;
                line-height:40px;
                margin-left:auto;
                margin-right:auto;
                background-color:#3b7c3a;
            }
            main a:hover{
                font-size: 22px;
                background-color: #CCC;
                color:#3b7c3a;
                width:  160px;
            }
            footer{
                background-color:#0f121b;
                margin-top: 70px;
                margin-bottom: 0;
                background-color:#0f121b;
                color:#707281; 
                font-size:15px;
                height:40px;
                line-height:40px;
                text-align: center;
            }
        </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>

mgandali · 18 يونيو 2019، 4:51م

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vitamin wow styling task</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
    </head>
    <style>
        body{
           box-sizing:border-box;
           margin: 0px;
          font-family: 'Tajawal', sans-serif;
         background-color: #171a29;
        }
        
    header{
        width: auto;
        height:50px;
        background-color: #212639;

         }
    header p{
        color: #FCFCFC;
        text-align: center;
        line-height: 50px;
        font-size:18px;
        margin-top: 0px;
    }
    main{
     max-margin:90px;
}
    main h2{
        color: #FCFCFC;
        text-align: center;
    } 
    main p{
         color: #FCFCFC;
         text-align: center;
          font-size:12px
    }
    main img{
        margin-left: auto;
        margin-right: auto;
        Display: block;
        margin-bottom:50px;
        transition-duration: 0.4s;
        max-width: 600px;
        width: 100%;

    }
    main img:hover{
        padding:10px;
        background-color: #C0C4C4;
    }
    main div{
        margin-bottom:40px;
    }
    main a{
        color: #FCFCFC;
        text-decoration: none;  
        width: 160px;
        height:40px;
        background-color: #3b7c3a;
        Display: block;
        text-align:center;
        margin-left: auto;
        margin-right: auto;
       line-height: 40px;
       transition-duration: 0.4s;
    
     }
     main a:hover{
      background-color: #45B1AA;
      border: 1px solid #C0C4C4; 
      width:180px;  
     }
footer{
        background-color: #0f121b;
        height:40px;
        margin-top:50px;
}   
 footer div{
     color: #707281;
     font-size:15px;
     text-align: center;  
     line-height: 40px;

 }
    </style>
    <body>
       <header> 
        <p> فيتامين واو </p>
       </header>
       <main>
           <div>
           <h2>سنجعلك في المقدمة إن تأخرت</h2>
           <p>أحتياجك لهذا الفيتامين أكثر من الفيتامينات الاخرى فهو الفيتامين الذي لايمد جسمك بالقوة فحسب<br>
                ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك</p>
           </div>
           
               <img src="https://1.top4top.net/p_1263tqpb91.jpg"  alt="فيتامين واو">
               
                        <a href=""> اطلب واسطة</a>
                       
       </main>
       <footer>
           <div>
          @ جميع الحقوق محفوظة لفتامين واو 2018
           </div>
       </footer>
                 </body>
</html>

FadiRustom · 29 يونيو 2019، 12:10م

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
        <style>
            body{
                margin: 0;
                font-family: 'Questrial', sans-serif;
                background-color: darkslategray;
                color: white;
                
            }
            header{
                height: 100px;
                border-bottom: 2px dotted #ccc;
            }
            header h1{
                text-align: center;
                font-family: 'Domine', serif;
                font-size: 48px;
                line-height: 100px;
                margin: 5px;
            }
            main {
                
                text-align: center;
                margin: 90px auto 90px auto;
            }
            main h2{
                font-size: 30px;
                font-weight: normal;
                margin: 20;
            }
            main p{
                font-size: 18px;
            }
            main div{
                width: 100%;
                max-width: 1200px;
                margin: 60px auto ;
            }
            main img{
                margin: 30px auto;
                width: 100%;
                max-width:  600px;
                max-height: 210px;
                box-sizing: border-box;
                transition-duration: .4s;
            }
            main img:hover{
                padding: 20px;
                background-color: #ddd;
            }
            main a{
                width: 160px;
                height: 45px;
                display: block;
                margin: 0 auto 0 auto;
                line-height: 45px;
                text-decoration: none;
                font-size: 18px;
                background-color: darkseagreen;
                border: 2px solid #01f302;
                color: #fff;
                transition-duration: .4s;
            }
            main a:hover{
                background-color: cornflowerblue;
                color: #fff;
                border-color: cornflowerblue;
            }
            footer{
                background-color: #222;
                height: 50px;
                color: #999;
                text-align: center;
                line-height: 50px;
            }        
        </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>

FadiRustom · 29 يونيو 2019، 12:09م

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
        <style>
            body{
                margin: 0;
                font-family: 'Questrial', sans-serif;
                background-color: darkslategray;
                color: white;
                
            }
            header{
                height: 100px;
                border-bottom: 2px dotted #ccc;
            }
            header h1{
                text-align: center;
                font-family: 'Domine', serif;
                font-size: 48px;
                line-height: 100px;
                margin: 5px;
            }
            main {
                
                text-align: center;
                margin: 90px auto 90px auto;
            }
            main h2{
                font-size: 30px;
                font-weight: normal;
                margin: 20;
            }
            main p{
                font-size: 18px;
            }
            main div{
                width: 100%;
                max-width: 1200px;
                margin: 60px auto ;
            }
            main img{
                margin: 30px auto;
                width: 100%;
                max-width:  600px;
                max-height: 210px;
                box-sizing: border-box;
                transition-duration: .4s;
            }
            main img:hover{
                padding: 20px;
                background-color: #ddd;
            }
            main a{
                width: 160px;
                height: 45px;
                display: block;
                margin: 0 auto 0 auto;
                line-height: 45px;
                text-decoration: none;
                font-size: 18px;
                background-color: darkseagreen;
                border: 2px solid #01f302;
                color: #fff;
                transition-duration: .4s;
            }
            main a:hover{
                background-color: cornflowerblue;
                color: #fff;
                border-color: cornflowerblue;
            }
            footer{
                background-color: #222;
                height: 50px;
                color: #999;
                text-align: center;
                line-height: 50px;
            }        
        </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>

NAJM · 22 يونيو 2019، 4:08م


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                
                p {color : #ffffff;
            }
                h1 {color : #ffffff;
                }
               
                h2 {color: #fff;
                }
                header h1 {
                    background-color: #212639;
                     text-align: center;
                      margin-top:auto;
                      height: 60px;
                }
                body {
                    background-color: #171a29;
                    font-family: 'Tajawal', sans-serif;
                     margin:0;
                }
                main a {
                background-color: #3b7c3a;  
                width: 160px;
                height: 45px;
                display: block;
                margin-left: auto;
                margin-right: auto;
                line-height: 45px;
                text-decoration: none;
                font-size: 18px;
                color: #fff;
                transition-duration: 0.5s;
                    
                }
                main a:hover {
                   background-color: #27aee3;
                   width: 200px;
                    


                }          
             footer {
                background-color: #0f121b; 
                color: #707281;
                height: 50px;
                text-align: center;
                line-height: 50px;
                 margin-bottom:auto;
                }
                main img {
                width: 600px;
                height: 210px; 
                }
                main { 
                max-width: 960px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                margin-top: 90px;
                }
                  main div{
                margin-top: 60px;
                margin-bottom: 60px;
                  }
                     
        </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 · 22 يونيو 2019، 7:25م

سأقوم بمراجعة التطبيقات التي هنا خلال الساعات القادمة

Ebtesam · 24 يونيو 2019، 8:47ص

هذا هو الكود

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>فيتامين واو</title>
       <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <style>
           body{
               font-family: 'Tajawal', sans-serif;
               background-color: #171a29;
               color: #fff;
               text-align: center;
               margin: 0;
           }
           header h1{
               background-color: #212639;
               font-weight: bold;
               font-size: 16px;
               margin: 0;
               height: 40px;
               line-height: 40px;
               text-align: center;  
           }
          main h2{
               font-size: 18px;
               margin: 40px auto 20px auto;
          }
          main h2:hover{
              color: blue;
          }
          main p{
               font-size: 12px;
               margin: 0 auto 30px auto;
               max-width: 600px;
          }
          main img{
              margin: 0 auto 0 auto;
              display: block;
              width: auto ;
              max-width: 80% ;
              height: auto ;
              max-height: 100%;
          } 
          main a{
              background-color: #3b7c3a;
              color:#fff;
              font-size: 12px;
              margin: 50px auto 60px auto;
              display: block;
              text-decoration: none;
              max-width: 130px;
              height: 30px;
              line-height: 30px;
          }
          main a:hover{
              background-color: #fff;
              color: green;
              transition-duration: 0.4s;
          }
        footer{
             background-color: #0f121b;
             color: #707281;
             font-size: 12px;
             margin: 100px auto 0 auto;
             height: 25px;
             line-height: 25px;
        }  
           
       </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="600px" 
                height="210px">
            </div>    
            <a href="wasata.html">اطلب وساطه</a>
        </main>
        <footer>
            <p>&copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
        </footer>
    </body>
</html>