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


#23

تم التعديل على الارتفاع وعلى الهامش اسفل الصورة

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>فيتامين واو</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

</html>

CSS

    header {
    background-color: #212639;
}
header h1 {
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 1% 0 1% 0;
    font-family: 'Tajawal', sans-serif;

}
body {
    background-color: #171a29;
    margin: 0;
}
main {
    margin-top: auto;
    margin-bottom: 41px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
}
main h2 {
    color: #fff;
}
main p {
    color: #fff;
}
main img {
    margin-top: 1%;
    margin-bottom: 6%;
    height: 100%;
    max-height: 210px;
    width: 100%;
    max-width: 600px;    
}
div a {
    color: #fff;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    transition-duration: 0.5s;
    background-color: #3b7c3a;
}
div a:hover {
    background-color: #fff;
    color: #3b7c3a;
    font-weight: bold;
}
footer {
    background-color: #0f121b;
    margin: 0;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    padding: 6px;

}
footer p {
    color: #fff;
    margin: 0;
    padding: 1% 0 1% 0;

}

#24

نسيت تشيل الخاصية height او تعدلها لقيمة نسبية :face_with_raised_eyebrow: جرب النتيجة على المتصفح :blush:


#25

نسيت تشيل الخاصية height او تعدلها لقيمة نسبية :face_with_raised_eyebrow: جرب النتيجة على المتصفح :blush:
اوه اسف لم انتبه بسبب السرعة تم التعديل عليها ووضحت النتيجة شكراً على الملاحظة :rose:


#26
<!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=Tajawal" rel="stylesheet">
        <style>
            body {                
                background-color: #171a29;
                font-family: 'Tajawal', sans-serif;
                margin: 0;
                color: #fff;
				box-sizing: border-box;
            }
            header {
                margin: 0px;
                background-color: #212639;
                font-size: 10px;  
                height: 45px;
                line-height: 45px;
                text-align: center;
            }
			header h1 {
			margin-top: 0;
			}
            main {
                text-align: center;
                margin-top: 60px;
            }
            main h2 {
                font-size: 19px;
            }
            main p {
                margin-bottom: 40px;
                font-size: 12px;
                max-width: 600px;
				margin: 0 auto 0 auto;                
            }
			main div {
            width:100%;
			margin: 0 auto 0 auto;            
			}
			main img{
			 width:100%;
             max-width: 600px;
	         height: 210px ;
             margin:30px auto;
          }
            
            main a {
                margin-top: 25px;
                text-decoration: none;
                background-color: #3b7c3a;
                display: block;
                margin: 0 auto 50px auto;                                
                width: 120px;
                height: 30px;
                line-height: 30px;
                color: #fff;      
				transition-duration : .4s;
            }
			main a:hover {
			    background-color: #6495ED;
				width: 140px;
			}
            footer {
                background-color: #0f121b;
                color: #707281;
                text-align: center;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                margin: 0px;
            }
        </style>
    </head>
    <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>
    
</html>

#27

كلة مية مية :muscle:

ملاحظة واحدة عند تصغير نافذة المتصفح يتم ضغط الصورة ويبقى الارتفاع ثابت بالشكل التالي:

image

قم بإصلاح المشكلة بنفس الفكرة التي قمت من خلالها بإصلاح مشكلة عرض الصورة بحيث تصبح تجاوبية مع عرض النافذة بالشكل التالي:

image

:grin:


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

3 4


#29

1- إضافة كود الـ meat viewport لصفحة الويب :white_check_mark:
2- إضافة تأثيرات hover على الزر :white_check_mark:
3- ألتحدي :white_check_mark:

ممتاز :muscle:


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

#31

عمل رائع!

ملاحظة واحدة قمت بإعطاء header الخاصية font-weight بالقيمة 20 كما في التالي:

header {
background-color: #212639;
height: 50px;
font-weigth: 20;
}

حيث أن القيمة 20 غير صحيحة لهذه الخاصية، تستطيع الإسناد إليها احد هذه القيم:

normal Standard weight. Equivalent of 400.
bold Bold weight. Equivalent of 700.
bolder Bolder than the inherited font weight.
lighter Lighter than the inherited font weight.
100 Lightest.
200 Bolder than 100, lighter than 300.
300 Bolder than 200, lighter than 400.
400 Bolder than 300, lighter than 500. Equivalent of normal.
500 Bolder than 400, lighter than 600.
600 Bolder than 500, lighter than 700.
700 Bolder than 600, lighter than 800. Equivalent of bold.
800 Bolder than 700, lighter than 900.
900 Boldest.

#32

نعم صحيح اعلم فقط ينقصني بعض من التركيز شكرا لك


#33

لا تقلق بهذا الخصوص، مع الوقت ستتجنب مثل هذه الهفوات وايضاً سنتعرف على كيفية التأكد من أن أكوادنا سليمة في الدروس القادمة


#34

مرحباً :hatched_chick::baby_chick::baby_chick::baby_chick:

<!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=Tajawal" rel="stylesheet">
    <style>
        body{
            background-color: #171a29;
            margin: 0;
            font-family: 'Tajawal', sans-serif;
            text-align: center;
            color: #fff;
        }

        header h1{
            background-color: #212639;
            height: 60px;
            margin: 0;
            line-height: 60px;
            font-size: 24px;
        }
                    
        main{
            max-width: 600px;
            margin: 80px auto;
        }
                    
        main img{
            width: 100%;
            max-width: 600px;
            height: auto;
            margin: 40px 0;
        }
                    
        main a{
            background-color: #3b7c3a;
            display: block;
            width: 160px;
            height: 40px;
            margin: 0 auto;
            line-height: 40px;
            text-decoration: none;
            font-size: 16px;
            color: #fff;
            transition-duration: .4s;
        }

        main a:hover{
            background-color: #449DD6;
            width: 170px;
        }
                    
        footer{
            background-color: #0f121b;
            height: 40px;
            color: #707281;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <header>
        <h1>فيتامين واو</h1>
    </header>
    <main>
        <div>
            <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>
    </main>
    <footer>
        <p>&copy; 2018 جميع الحقوق محفوظة لفيتامين واو</p>
    </footer>
</body>
</html>



#35

1- إضافة كود الـ meat viewport لصفحة الويب :white_check_mark:
2- إضافة تأثيرات hover على الزر :white_check_mark:
3- ألتحدي :white_check_mark:

ممتاز :muscle: