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

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

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

ممتاز @Noora

ملاحظة واحدة:
1- قمتي بإعطاء الرابط الخاصية transition-duration ولكن القيمة الخاصة بها .s بحيث فاتك وضع قيمة رقمية مثلا .4s وما خلافة.

#44

@Alhakem You are right I thought I wrote it.:sweat_smile: Thanks for your advice

1 Like
#45

اعتذر لعدم حل التحدى

<!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&display=swap" rel="stylesheet"> 
        <style>
            body{
                background-color: #171a29;
                color: #fff;
                font-family: 'Tajawal', sans-serif;
                margin: 0;
            }
            header{
                background-color: #212639;
                height: 45px;
                margin: 0;
            }
            header h1{
                margin-top: 0;
                text-align: center;
                font-size: 20px;
                line-height: 50px;
            }
            main h2{
                text-align: center;
                margin-top: 60px;
            }
            main p{
                font-size: 14px;
                text-align: center;
                margin: 10px auto 50px auto;
                width: 600px;
            }
            main{
                text-align: center;

            }
            main div img{
                max-width: 100%;
                width: 600px;
                height: 210px;
                max-height: 100%;
                
                
            }
            main a{
                background-color: #3b7c3a;
                color: #fff;
                width: 150px;
                height: 40px;
                display: block;
                text-align: center;
                text-decoration: none;
                font-size: 12px;
                line-height: 40px;
                margin: 50px auto 80px auto;
                transition-duration: .4s;
            }
            main a:hover{
                background-color: #4db8ef;
                width: 160px;
            }
            footer{
                background-color: #0f121b;
                color: #707281;
                height:40px;
                margin-bottom: 0;
            }
            footer p{
                margin: 0;
                text-align: center;
                font-size: 12px;
                line-height: 40px;
            }
        </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>

Screenshot_2019-05-19%20Local%20edits%20at%200%2000%20-%20Scrimba%20screencast
Screenshot_2019-05-19 Local edits at 0 00 - Scrimba screencast.png864×700 159 KB

1 Like
#46 
<!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;
             color: #fff;
             font-family: 'Tajawal', sans-serif;
             text-align: center;
             margin: 0;
           }
           header {
             background-color: #212639;
             height: 80px;

           }
           header h1 {
             color: #fff;
             line-height: 80px;
             margin: 0;
           }


            main h2  {
              font-size: 30px;
              margin: 50px 0 15px 0;
            }
            main p {
              width: 100%;
              max-width: 600px;
              margin: 0 auto 0 auto;
            }
            main img {
              width: 100%;
              max-width: 600px;
              height: 240px;
              margin: 30px 0 30px 0;
            }
            div a {
              background-color: #3b7c3a;
              color: #fff;
              display: block;
              width: 200px;
              height:40px;
              line-height: 40px;
              text-decoration: none;
              margin: 20px auto 50px auto;
            }
            div a:hover {
              	background: #007378;
              	border-radius: 5px;
            }


          footer  {
            background-color: #0f121b;
            color: #707281;
            height: 60px;
            line-height: 60px;

          }

        </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" width="600" height="250">
            <div>
            <a href="#">إطلب وساطة</a>
            </div>
        </main>
        <footer>
            <p>&copy; جميع الحقوق محفوظة لفيتامين واو 2019</p>
        </footer>
    </body>
</html>
1 Like
#47

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

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

الخاصية max-width لتحديد أفصى عرض ممكن للصورة اخذه
الخاصية width لتحديد عرض الصورة

حاول تحقيق ذلك ومن ثم سنعمل عليها معاً

1 Like
#48

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

عمل رائع @Yassin_Khamlichi

1 Like
#49

تم تعديل الكود
ممكن الحل

1 Like
#50

قمت بحلها ولكن ستقوم بعكس القيم بين الخواص بالشكل التالي:

 max-width: 600px;
 width: 100%;
 height: 100% ;
 max-height: 210px;

بحيث أن اقصى عرض سيتم إعطائه للصورة هو 600px وستأخذ في كل مرة العرض 100% من العرض

#51 
<!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&display=swap" rel="stylesheet"> 
        <style>
            body{
                background-color: #171a29;
                color: #fff;
                font-family: 'Tajawal', sans-serif;
                margin: 0;
            }
            header{
                background-color: #212639;
                height: 45px;
                margin: 0;
            }
            header h1{
                margin-top: 0;
                text-align: center;
                font-size: 20px;
                line-height: 50px;
            }
            main h2{
                text-align: center;
                margin-top: 60px;
            }
            main p{
                font-size: 14px;
                text-align: center;
                margin: 10px auto 50px auto;
                width: 600px;
            }
            main{
                text-align: center;

            }
            main div img{
                max-width: 600px;
                width: 100%;
                height: 100% ;
                max-height: 210px;
                
                
            }
            main a{
                background-color: #3b7c3a;
                color: #fff;
                width: 150px;
                height: 40px;
                display: block;
                text-align: center;
                text-decoration: none;
                font-size: 12px;
                line-height: 40px;
                margin: 50px auto 80px auto;
                transition-duration: .4s;
            }
            main a:hover{
                background-color: #4db8ef;
                width: 160px;
            }
            footer{
                background-color: #0f121b;
                color: #707281;
                height:40px;
                margin-bottom: 0;
            }
            footer p{
                margin: 0;
                text-align: center;
                font-size: 12px;
                line-height: 40px;
            }
        </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
#52

هل إتضحت لك فكرتها؟

1 Like
#53

بس على فكرة سكرول بار كما هو

1 Like
#54

ذلك بسبب إعطائك للفقرة النصية عرض ثابت بقيمة 600px قم بإصلاحها بنفس الطريقة

1 Like
#55

والله بحترم حضرتك واقدرك جدا
الحمد لله
علم الانسان ما لم يعلم

<!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&display=swap" rel="stylesheet"> 
        <style>
            body{
                background-color: #171a29;
                color: #fff;
                font-family: 'Tajawal', sans-serif;
                margin: 0;
            }
            header{
                background-color: #212639;
                height: 45px;
                margin: 0;
            }
            header h1{
                margin-top: 0;
                text-align: center;
                font-size: 20px;
                line-height: 50px;
            }
            main h2{
                text-align: center;
                margin-top: 60px;
            }
            main p{
                font-size: 14px;
                text-align: center;
                margin: 10px auto 50px auto;
                width: 100%;
                height: 100%;
                max-width: 600px;
                max-height: 600px;
            }
            main{
                text-align: center;

            }
            main div img{
                max-width: 600px;
                width: 100%;
                height: 100% ;
                max-height: 210px;
                
                
            }
            main a{
                background-color: #3b7c3a;
                color: #fff;
                width: 150px;
                height: 40px;
                display: block;
                text-align: center;
                text-decoration: none;
                font-size: 12px;
                line-height: 40px;
                margin: 50px auto 80px auto;
                transition-duration: .4s;
            }
            main a:hover{
                background-color: #4db8ef;
                width: 160px;
            }
            footer{
                background-color: #0f121b;
                color: #707281;
                height:40px;
                margin-bottom: 0;
            }
            footer p{
                margin: 0;
                text-align: center;
                font-size: 12px;
                line-height: 40px;
            }
        </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>

انا عارف ان footer

1 Like
#56

شكراً لك أخي العزيز :relaxed:

الـ footer مية مية في الوقت الحالي هو غير ملتصق بأسفل الصفحة ولكن هذا ما سنتطرق له في دروس قادمة

1 Like
#57

ممكن حل سريع ورد على الخاص

1 Like
#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=Tajawal&display=swap" rel="stylesheet">
        <style>
            * {
                margin: 0;
                padding: 0;
                border: 0;
                box-sizing: border-box;
            }
            
            body {
                font-family: 'Tajawal', sans-serif;
                background-color: #171a29;
                color: #fff;
                font-size: 16px;
            }

            header {
                text-align: center;
                background-color: #212639;
                height: 50px;
                line-height: 50px;
            }
            
            header h1 {
                 font-size: 20px;
            }
            
            main {
                text-align: center;
                max-width: 640px;
                padding: 20px;
                margin: 50px auto;
            }
            
            main h2 {
                font-size: 23px;
            }
            
            main p {
                padding: 10px 10px 20px;
                line-height: 24px;
            }
            
            .banner img {
               max-width: 100%;
               width: 600px;
               height: auto;
               margin: 20px 0; 
            }
            
            .request-btn {
                background-color: #3b7c3a;
                text-decoration: none;
                display: block;
                margin: 20px auto 0;
                width:150px;
                height: 35px;
                line-height: 35px;
                color: #fff;
                transition-duration: 0.5s;
            }
          
            .request-btn:hover {
              width: 145px;
              background-color: #254f25;
           }
             
            footer {
                background-color: #0f121b;
                color: #707281;
                text-align: center;
                padding: 10px;
                font-size: 14px;
            }
            
        </style>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
            <div class="banner">
                <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="فيتامين واو">
            </div>
            <a href="#" class="request-btn">اطلب وساطة</a>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
2 Likes
#59

ما شاء الله ملاحظ تقدم سريع

3 Likes
#60 
<!DOCTYPE html>
<html>
 <head>
 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vitamin Wow</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;
       
      }
      
      header h1{
      	
         margin-top:0;
         height:60px;
         line-height:60px;
         text-align:center;
      }
      
      main{
      	
      	max-width:600px;
      	text-align:center;
      	margin:70px auto 0 auto;
      	
      }
      
      main h2{
      	
      	 font-size:30px;
      	 font-weight:600;
      }
      
       main p{
       	
       	font-size:16px;
       	font-weight:500;
       	
       
       }
       
       main div{
       	
       	margin:15px;
       }
       
       main img{
       	
       	width:100%;
       	max-width:600px;
       	height:100%;
       	max-height:210%;
       	transition-duration:.4;
       	margin-top:30px;
       	
       
       }
       
       main img:hover{
       	
       	padding:5px;
       	border:2px solid #4c5c6c;
       	
       }
      	
      	
      main a{
      	
      	background-color:#3b7c3a;
      	color:#fff;
      	text-decoration:none;
      	width:200px;
      	height:45px;
      	display:block;
      	line-height:45px;
      	font-weight:900;
      	margin:40px auto 0 auto;
      	transition-dration:.4s;
      }
      
      main a:hover{
      	
      	background-color:#4c5c6c;
      	border:2px dashed #1B4F72;
      }
      
      footer{
      	
      	background-color:#0f121b;
      	height:50px;
      	margin-top:60px;
      	
      }
    
    footer p{
    	
    	color:#707281;
    	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;جميع الحقوق محفوظه لفيتامين واو 2018</p>
	</footer>
 </body>
</html>
1 Like
#61

@FatenAli @Radwa

ممتاز :clap:

2 Likes
#62

يـسـلـمـوا . عـنـدي سـؤال بـالـنـسـبـه لـلـ max-height الـبـعـض أسـتـخـدمهـا والـبـعـض لا وحـصلنـا ع نـفس الـنتيـجـه كـيـف !!..

1 Like