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


#1

مرحباً جميعاً

المهمة المطلوبة:

بإمكانك الإطلاع عليها من هنا

طريقة مشاركة الأكواد التي قمت بكتابتها:

قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات

```
هنا ضع الأكواد
```

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


#2

سلام لقد اعطيت العنصر ديف عرض بقيمة 600 بيكسل
ثم أعطيت الصورة عرض مئة بالمئة من عرض الديف
وماكس ويذ 600 بيكسل ما رأيك

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
     <title></title>
     
 <style>
     body{
	margin: 0;
	background-color: #171a29;
	color: #fff;
    font-family: 'Tajawal', sans-serif;

}
header{
	background-color: #212639;
    height:40px;
	text-align: center;
    font-size:10px;
    line-height:40px;
    margin-bottom:30px;
    
}
header h1{
 margin-top: 0; 
}
main {
		text-align: center;

}
main div{
  width:600px; 
  margin-left:auto;
    margin-right:auto;

 
}
main img{
    width:100%;
	max-width: 600px;
	height: 210px ;
    margin:30px auto;
}
main a{
    display:block;
    background-color:green;
    text-decoration:none;
    color:#FFF;
    font-size:12px;
    width:100px;
    height:30px;
    line-height:30px;
    margin-left:auto;
   margin-right:auto;
    transition-duration: .4s; 

}
main a:hover{
    width:130px;
    background-color:#5990DC;
}
main .p-one{
    font-size:15px;
    font-weight:bold;
    
}
main .p-two{
   width:450px; 
   text-align:center;
   font-size:12px;
   line-height:20px;
    font-weight:bold;
   margin-left:auto;
   margin-right:auto;
}

footer{
	background-color:#0f121b;
	color:#707281; 
    font-size:15px;
	text-align: center;
    margin-top:30px;
    margin-bottom:0;
    height:30px;
    line-height:30px;

}
  </style>   
 </head>
 <body>
    <header><h1> فيتاميــن واو</h1></header>
    <main>
        <p class="p-one">سنجعلك في المقدمة إن تأخرت</p>
        <p class="p-two">إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك
        .</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>

#3


#4

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

ممتاز :clap:، أكملتي المهام المطلوبة بنجاح لكن عندنا مشكلة واحدة بأن العنصر الأب للصورة لدية عرض غير مرن قومي بحل هذه المشكلة :wink:.

عند إنتهائك منها ستجدي بأن الصورة ستصبح مرنة وسيتم تصغيرها وتكبيرها بما يتوافق مع حجم عرض الشاشة لكن هناك خاصية لديها قيمة ثابته ستسبب بتدمير ابعاد الصورة وشكلها حاولي حلها بحيث تحافظ الصورة على ابعاد متزنة بالعرض والإرتفاع


#5

نعم شكرا على التشجيع المشكلة المتبقية سوف احاول حلها غدا ان شاء الله


#6

هل الحل هو تغيير قيمة العرض الى 100%

main div{
width:100%; 
margin-left:auto;
margin-right:auto;

 
}

#7

صحيح :star_struck: هذا الحل أحد الحلول المناسبة.

ملاحظة: في حالة ما إن قمتي بإعطائه العرض 100% حينها لا تحتاجي لتحديد margin من اليمين واليسار لان وجودها سيكون مثل عدمة.

بإنتظار حلك لمشكلة إرتفاع الصورة غداً


#8

شكرامحمد المعلومة سوف اطبقها لكن ماذا افعل مع ارتفاع الصورة أظن انك تقصد استعمال الخاصية max-height:


#9

لقد وجدتها الحمد لله كالتالي

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
     <title></title>
     
 <style>
     body{
	margin: 0;
	background-color: #171a29;
	color: #fff;
    font-family: 'Tajawal', sans-serif;

}
header{
	background-color: #212639;
    height:40px;
	text-align: center;
    font-size:10px;
    line-height:40px;
    margin-bottom:30px;
    
}
header h1{
 margin-top: 0; 
}
main {
		text-align: center;

}
main div{
width:100%;  
}
main img{
    width:100%;
	max-width: 600px;
	max-height: 210px ;
    margin:30px auto;
}
main a{
    display:block;
    background-color:green;
    text-decoration:none;
    color:#FFF;
    font-size:12px;
    width:100px;
    height:30px;
    line-height:30px;
    margin-left:auto;
   margin-right:auto;
    transition-duration: .4s; 

}
main a:hover{
    width:130px;
    background-color:#5990DC;
}
main .p-one{
    font-size:15px;
    font-weight:bold;
    
}
main .p-two{
   width:450px; 
   text-align:center;
   font-size:12px;
   line-height:20px;
    font-weight:bold;
   margin-left:auto;
   margin-right:auto;
}

footer{
	background-color:#0f121b;
	color:#707281; 
    font-size:15px;
	text-align: center;
    margin-top:30px;
    margin-bottom:0;
    height:30px;
    line-height:30px;

}
  </style>   
 </head>
 <body>
    <header><h1> فيتاميــن واو</h1></header>
    <main>
        <p class="p-one">سنجعلك في المقدمة إن تأخرت</p>
        <p class="p-two">إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك
        .</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>

#10


#11

ممتاز :relaxed:، لو تلاحظي مازال شريط التمرير يظهر، حيث أنه بقي معك عنصر بعرض ثابت قومي بحل هذه المشكلة وتكوني إنتهيتي منها.


#12

من فضلك تلميح


#13


#14

جميل، الأن إختفى شريط التمرير بالشكل المطلوب.


#17
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Tajawal" rel="stylesheet">
        <style>
            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;
            }
            body{
                margin: 0;
                background-color: #171a29;
            }
            main{
                max-width: 960px;
                margin: 90px auto 0 auto;
                text-align: center;
                font-family: 'Tajawal', sans-serif;

            }
            main h2{
                color: #fff;
            }
            main p{
                color: #fff;
                width: 90%;
                margin: 0 auto 0 auto;
            }
            main img{
                margin-top: 60px;
                width: 85%;
                max-width: 600px;
                height: 210;
                transition-duration: 0.4s;
            }
            main img:hover{
                padding: 25px;
                background-color: #212639;

            }
            div a{
                background-color: #3b7c3a;
                width: 160px;
                height: 45px;
                display: block;
                color: #fff;
                text-decoration: none;
                font-size: 18px;
                margin: 60px auto 90px auto;
                font-family: 'Tajawal', sans-serif;
                line-height: 45px;
                transition-duration: 0.4s;
            }
            div a:hover{
                border: 2px solid #fff; 
                background-color: #171a29;
                width: 170px;
                font-size: 21px;
            }
            footer{
                background-color: #0f121b;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: #707281;
                font-family: 'Tajawal', sans-serif;
                
            }
            header h1 a{
                text-decoration: none;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>
                    <a href="wow.html">
                            فيتامين واو
                    </a>
            </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="order.html">إطلب وساطة</a>
            </div>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>```

#18

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

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

1- ملاحظة عرض الفقرة النصية
2- ملاحظة إعطاء إرتفاع الصورة وحدة قياس

بعد ما تخلص دمج الإصلاحات الي قمت بها في المهام السابقة، تأكد أن الجميع العناصر تتجاوب مع مرونة عرض النافذة بحيث تعمل التعديلات اللازمة للخواص كإضافة max- وما خلافة بالشكل الذي تراه مناسب.

ملاحظة أخرى: الخاصية التالية:

font-family: 'Tajawal', sans-serif;

قمت بتكرارها لثلاثة عناصر، قم بإستخدامها مرة واحدة مع العنصر الذي بيشمل كل هذه العناصر كما ناقشنا ذلك في درس تنظيف الكود وتوافقية الموبايل. :relaxed:


#19

مهمة اللمسات الأخيرة
3

<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body{
                background-color:#171a29;
                margin:0;
                color:#fff;
            
            }
            
            header{
                background-color:#212639;
                
                
            }
            
            header h1{
                text-align:center;
                line-height:40px;
                font-family: 'Tajawal', sans-serif;
                font-size:18px;
                height:40px;
                margin:0;
            }
            main h2{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:20px;
            }
            
             main p{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                line-height:25px;
            }
             main{
                max-width:600px;
                margin-left:auto;
                margin-right:auto;
            }
            
             main img{
                width:100%; 
                max-width:600px;
                height:100%;
                margin:30px 0 30px 0;
            }
            
             main div a{
                text-align:center;
                font-family: 'Tajawal', sans-serif;
                font-size:15px;
                color:#fff;
                text-decoration:none;
                display:block;
                width:120px;
                height:40px;
                line-height:40px;
                margin-left:auto;
                margin-right:auto;
                background-color:#3b7c3a;
                transition-duration: .4s;
            }
            
            main div a:hover{
                background-color:#247bff;
                width:140px;
                
            }
            
            footer{
                background-color:#0f121b;
                margin-top:40px;
                
            }
            
            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>
            <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>© 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

#20

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

:star_struck::clap:


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

    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: 3%;
    margin-bottom: 4%;
    width: 100%;
    max-width: 600px;
    height: 210px;
    
}
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;

}

#22

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

ممتاز محمد :muscle:.

أريد منك أخذ إرتفاع الصورة عند تصغير الشاشة في عين الإعتبار. لاحظ الصورة التالية:

image

الملاحظ انه الصورة يتم ضغطها مما يسبب لها التشوة لأن الإرتفاع ثابت بقيمة 210px لذا قم بإصلاحة حتى يكون متجاوب بنفس طريقة قيامك بذلك مع عرض الصورة.

بحيث عند تصغير الشاشة تكون النتيجة بهذا الشكل:

image

لاحظ مازالت الصورة محافظة على ابعادها.


ملاحظة ثانية الا تظن بأننا بحاجة لعمل هامش margin بين الصورة وبين الزر"اطلب وساطة" لأنه على وشك ان يلتصق بالصورة. :relaxed: