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

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

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

}
1 Like

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

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

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

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

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

image

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

image

:grin:

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

1 Like

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

ممتاز :muscle:

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

عمل رائع!

ملاحظة واحدة قمت بإعطاء 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.
1 Like

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

1 Like

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

1 Like

مرحباً :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>


1 Like

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

ممتاز :muscle:

1 Like
<!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;
      color: #fff;
      font-family: 'Tajawal', sans-serif;

    }
    header{
      background-color: #212639;
      height: 80px;
      text-align: center;
      font-size: 13px;
      line-height: 80px;
      margin-bottom: 30px;
    }
    header h1 {
      text-align: center;
      margin: 0;
    }
    main {
    text-align: center;
    }
    main img{
    width: 100%;
    max-width: 600px;
    height: 210px;
    margin:30px 0 30px 0;
    }
    main h2{
    font-size: 25px;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
    }
    main p{
    max-width: 580px;
    font-size: 16px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height:18px;

    }
    main a{
    display:block;
    background-color:#3b7c3a;
    text-decoration:none;
    color:#FFF;
    font-size:12px;
    width:120px;
    height:40px;
    line-height:40px;
    margin-left:auto;
    margin-right:auto;
    transition-duration: .5s;
}
main a:hover{
    background-color: #222;
    color: #fff;
    border-color: #222;
    }
footer {
              background-color:#0f121b;
              margin-top:300px;

          }

          footer p{
              text-align:center;
              font-family: 'Tajawal', sans-serif;
              font-size:15px;
              color:#707281;
              margin:0;
              height:40px;
              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" width="300" height="200">
        </div>
        <a href="#">أطلب واسطة</a>
    </main>
<footer>
        <p>&copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
    </footer>

</body>
</html>

1 Like

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

ممتاز :muscle:

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

image

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

image

1 Like

Assalam!
Thank you again!

body{
    background-color: #171a29;
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    text-align: center;
    margin: 0px;
}

header{
    background-color: #212639;  
    height: 60px;
}

header h1{
    text-align: center;
    font-size: 20px;
    line-height: 60px;
    margin: 0px; 
}

main p{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
}

footer{
    background-color: #0f121b;
    height: 60px;
    margin-top: 70px;
}

footer p{
    color: #707281;
    margin: 0px;
    line-height: 60px;
}

main a{
    background-color: #3b7c3a;
    text-decoration: none;
    color: white;
    display: block;
    width: 150px;
    height: 40px;
    line-height: 40px;
    margin: 20px auto 20px auto;
	transition-duration: 0.4s;
}

main a:hover{
    background-color: #03998b;
    text-decoration: none;
    color: white;
    display: block;
    width: 160px;
    height: 40px;
    line-height: 40px;
    margin: 20px auto 20px auto;
}

main img {
    width: 80%;
	max-width: 600px;
    height: 40%;
	max-height: 220px;
    padding: 20px;
	transition-duration: 0.4s;
}

main img:hover {
    max-width: 610px;
    max-height: 220px;
	width: 85%;
	height: 45%;
    padding: 20px;
}

HTML code

<!DOCTYPE html>
<html>
	<head>
		<title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </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" width="500" height="200">
			<div>
				<a href="#">اطلب وساطة </a>
			</div>
		</main>
		<footer>
			<p>&copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
		</footer>
	</body>
</html>

Once I host it on Github I will provide the link!
my vitamin woooooow site!!!

1 Like

1- Meat Viewport :white_check_mark:
2- Link Hover Effect :white_check_mark:
3- The Challenge :white_check_mark:

Well done :muscle:

1 Like
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>فيتامين واو</title>
    <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
    <style>
        body {
            margin: 0;
            background-color: #171a29 ;
            color: #ffffff;
            font-family: 'Tajawal', sans-serif;
        }
        header {
            background-color: #212639;
            text-align: center;
            height: 40px;
            line-height: 40px;
        
        }
        header h1 {
            margin: 0px;
            font-size: 20px;
        }
        main {
            margin: 60px 0 60px 0;
            text-align: center;
        }
        main h2 {
            font-size: 20px
        }
        main p {
            max-width: 600px; 
            width: 50%;
            font-size: 12px;
            margin: 0 auto 40px auto;
        }
        main img {
            max-width: 600px;
            width: 50%;
            max-height: 210px;
            margin-bottom: 40px;
            transition-duration: 0.4s; 
        }
        main img:hover{
            border: rgb(10, 100, 141) solid 20px;
            box-sizing: border-box; 
        }
        main a {
            margin-top: 80px;
            background-color: #3b7c3a;
            display: block;
            color: white;
            width: 150px;
            height: 40px;
            margin: auto;
            line-height: 40px;
            text-decoration: none;
            transition-duration: 0.4s;
        }
        main a:hover{
            width: 180px;
            background-color: cornflowerblue;
        }
        footer {
            background-color: #0f121b;
            text-align: center;
            height: 30px;
            color: #707281;
            line-height: 30px;
            font-size: 12px;
            margin: 0;   
        }
    </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>
1 Like

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

ممتاز :+1:

1 Like
<!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{
      font-family: 'Tajawal', sans-serif;
      margin: 0;
      background-color: #171a29;
      color: #fff;
    }
    header{
      background-color: #212639;
      height: 70px;
      line-height: 70px;
    }
    header h1{
      margin: 0;
      font-size: 25px;
      text-align: center;

    }
    main{
      max-width:600px;
      margin-top: 70px;
      margin: 0 auto 0 auto;
      text-align: center;
    }
      main img{
        max-width: 600px;
        width:100%;
        height: 210px;
        margin: 40px 0 80px 0;

      }

      main a{
        background-color: #3b7c3a;
        text-decoration: none;
        margin: 0 auto 0 auto;
        color: #fff;
        display: block;
        width: 200px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        box-sizing: border-box;
        transition-duration: .s;
      }
      main a:hover{
        background-color: orange;
        padding:3px;
         }
      footer {
        background-color: #0f121b;
        color: #707281;
        text-align: center;
        height: 50px;
        line-height: 50px;
        margin-top: 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" width="500px">
      </div>
      <a href="#">اطلب وساطه</a>
    </main>
    <footer>
      <p>&copy; جميع الحقوق محفوظه لفيتامين واو 2018</p>
    </footer>
  </body>
</html>

1 Like