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


#1

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

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

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

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

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

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

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


#2

مرحبا ما رأيكم

<!DOCTYPE html5>
<html>
 <head>
     <meta charset="utf-8">
     <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-top:0;
    margin-bottom:30px;
    
}
main {
		text-align: center;

}
main img{
	width: 600px;
	height: 210px ;
}
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;
}
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;
}
main img{
    margin-top:30px;
    margin-bottom:30px;
}
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

ممتاز :star_struck::clap:، ملاحظتين فقط

الأولى: تأكدي من هذا الكود فيه حاجة زايدة

<!DOCTYPE html5>

الثانية: هناك margin فوق الـ header بدنا نتخلص منها.

أنتي قمتي بإعطاء الهيدر الخاصية margin من الأعلى بالقيمة 0 بالشكل التالي:

header{
    margin-top: 0;
}

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

جربي ذلك و وريني الكود.


#5

شكرا لك لقد عدلت الكود أضفت margin للعنصر h1 بدلا من header
لقد صححت الخطأ الأول

  <!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <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 img{
	width: 600px;
	height: 210px ;
}
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;
}
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;
}
main img{
    margin-top:30px;
    margin-bottom:30px;
}
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>

#6


#7

الان كل شيء مية مية :+1:


#8

شكرا اخي محمد سأنتقل ان شاء الله الى المهمة التالية :star_struck::blush::yum:


#9
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <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;
                
            }
            body{
                margin: 0;
                background-color: #171a29;
            }
            main{
                width: 960px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 90px;
                text-align: center;
                font-family: 'Tajawal', sans-serif;

            }
            main h2{
                color: #fff;
                
            }
            main p{
                color: #fff;
            }
            main img{
                margin-top: 60px;
                width: 600px;
                height: 210;
            }
            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;
            }
            footer{
                background-color: #0f121b;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: #707281;
                font-family: 'Tajawal', sans-serif;
                
            }
        </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>```

#10

شغل بيررفكت :+1::+1:

عندي فقط ملاحظتين:

1- جبت للعنصر header هوامش (margin) بقيمة 0، شوف هل هل هذه الخاصة بتزيد لك شئ ام وجودها مثل عدمة مع العنصر header.

2- كل شئ ممتاز حسب التصميم باقي حاجة واحدة بس تضبطها وتكون حولت التصميم بالملي، هذه الحاجة هي عرض الفقرة النصية.

بحيث لما تكون الفقرة النصية بعرض كبير ما تكون مريحة للعين وصعب تتبعها، كما تشوف في التصميم الي عملة المصمم أخر كلمة في السطر الأول هي “بالقوة” بينما في تطبيقك أخر كلمة في السطر الأول هي كلمة “حجم”

فضبط هذه الجزئية عشان يكون في تناسق بالقالب وتكون الفقرة أكثر سهولة للقراءة :wink:


#11

بعد الأخذ بملاحظاتك :sweat_smile:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <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{
                width: 960px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 90px;
                text-align: center;
                font-family: 'Tajawal', sans-serif;

            }
            main h2{
                color: #fff;
                
            }
            main p{
                color: #fff;
                width: 600px;
                margin: 0 auto 0 auto;
            }
            main img{
                margin-top: 60px;
                width: 600px;
                height: 210;
            }
            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;
            }
            footer{
                background-color: #0f121b;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: #707281;
                font-family: 'Tajawal', sans-serif;
                
            }
        </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>```

#12

ممتاز :wink:

ملاحظة واحدة الصورة جبت لها الأرتفاع بقيمة 210 وما حددت الوحدة هل هي % ام px فأرجع لها وصلحها


#13

مهمة تنسيق موقع فيتامين واو

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <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{
                width:600px;
                margin-left:auto;
                margin-right:auto;
            }
            
             main img{
                width:600px;
                height:210px;
                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;
            }
            
            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>&copy; 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

#14

ممتاز ي حمزة كالعادة عمل رائع!

لا يوجد لديك أي مشكلة ولكن ملاحظة مخصوصة كونك مصمم UI/UX أريد منك أن تركز على تقسيم المساحة الفارغة حول العناصر حتى تشعر بأن التصميم يتنفس.

في الوقت الحالي أنت خانق الهيدر وملزق فيه العنوان كما بالصورة

فجرب تضيف تحته margin او تضيف للعنوان margin من فوقة عشان يكون النتيجة اقرب للصورة التالية:

كما تشوف في الصورة الأخيرة يبدو الموقع والعناصر أكثر إتزاناً


#15

تم التعديل شكراً للملاحظات أستاذ محمد @Alhakem :blush::star_struck:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <style>
            body{
                background-color:#171a29;
                margin:0;
                color:#fff;
            
            }
            
            header{
                background-color:#212639;
                margin: 0 0 60px 0;
                
                
            }
            
            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{
                width:600px;
                margin-left:auto;
                margin-right:auto;
            }
            
             main img{
                width:600px;
                height:210px;
                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;
            }
            
            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>&copy; 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

#16

ممتاز :+1::clap:


#17
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <style>
            body{
                background-color:#171a29;
                margin:0;
                color:#fff;
            }
            
            header{
                background-color:#212639;
                margin: 0 0 80px 0;
            }
            
            header h1{
                text-align:center;
                line-height:50px;
                font-family: 'Tajawal', sans-serif;
                font-size:22px;
                height:60px;
                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{
                width:600px;
                margin: auto;
            }
            
             main img{
                width:600px;
                height:210px;
                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:auto;
                background-color:#3b7c3a;
            }
            
            footer{
                background-color:#0f121b;
                margin-top:45px;
                
            }
            
            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>&copy; 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>

#18

ممتاز محمد :ok_hand:


#19

كم ملاحظة:

  • اول شيء قمت باستخدام النسبة المئوية في بعض العناصر حتى المتصفح من يكون مفتوح في نصف الشاشة فقط يكون مرتب حاولت اسوي نوع من الريسبونسف ههههههه
  • كود الcss قمت باستدعائة من ملف خاص فيه حتى يكون الكود نظيف وسهل
  • استخدمت brackets بدل بيئة العمل

كود html

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

</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: 1%;
    margin-bottom: 3%;
    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: 44%;
    
}
div a {
    background-color: #3b7c3a;
    color: #fff;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    
    
}
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;

}


#20

رائع ي محمد، أخبرني عندك خبرة سابقة ومن أين تعلمت القيام بهذه الأشياء

انت بتذاكر من ورانا ؟ :joy: