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

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

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

<!DOCTUPE html>
<html>
    <head>
        <meta charset="utf-8">
        <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 div img{
                width: 600px;
                height: 210px;
                margin-left: auto;
                margin-right: auto;
                display: block;
            }
            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;
            }
            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-17%20%D8%A8%D9%8A%D8%A6%D8%A9%20%D8%B9%D9%85%D9%84%20%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA%20%D9%85%D9%88%D9%82%D8%B9%20%D9%81%D9%8A%D8%AA%D8%A7%D9%85%D9%8A%D9%86%20%D9%88%D8%A7%D9%88%20-%20%D8%A7%D9%84%D8%A8%D8%AF%D8%A1%20%D9%85%D8%B9%20%D9%84%D8%BA%D8%A9%20%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9%20CSS
Screenshot_2019-05-17 بيئة عمل تنسيقات موقع فيتامين واو - البدء مع لغة تنسيقات المواقع CSS.jpg700×518 58 KB

ناتج الكود

Screenshot_2019-05-17%20%D8%A8%D9%8A%D8%A6%D8%A9%20%D8%B9%D9%85%D9%84%20%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA%20%D9%85%D9%88%D9%82%D8%B9%20%D9%81%D9%8A%D8%AA%D8%A7%D9%85%D9%8A%D9%86%20%D9%88%D8%A7%D9%88%20-%20%D8%A7%D9%84%D8%A8%D8%AF%D8%A1%20%D9%85%D8%B9%20%D9%84%D8%BA%D8%A9%20%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9%20CSS(1)
Screenshot_2019-05-17 بيئة عمل تنسيقات موقع فيتامين واو - البدء مع لغة تنسيقات المواقع CSS(1).png771×724 160 KB

ارجو ان ينال الاستحسان

2 Likes
#50

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

2 Likes
#51

من فضلك من دون احراج

1 Like
#52

:joy: بدون أي احراجات

1 Like
#53

:baby_chick:
لسه ابدأ التعليم
تلميذك

1 Like
#54


لسه واصلنى اشعار

1 Like
#55 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        <style>
            body, 
            header, 
            main, 
            footer, 
            h1, 
            h2, 
            div, 
            img, 
            p {
                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;
                width: 640px;
                margin: 50px auto;
                padding: 20px;
            }
            
            main h2 {
                font-size: 23px;
            }
            
            main p {
                padding: 10px 10px 20px;
                line-height: 24px;
            }
            
            .banner img {
               width: 600px;
               height: 210px;
               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;
            }
            
            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
#56

أحسنتي @Radwa العمل مية مية.

            body, 
            header, 
            main, 
            footer, 
            h1, 
            h2, 
            div, 
            img, 
            p {
                margin: 0;
                padding: 0;
                border: 0;
                box-sizing: border-box;
            }

أقترح عليك إستخدام الـ selector نجمة * وسيقوم بتحديد كل العناصر بدلاً من كتابتها واحد تلو الأخر

*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
2 Likes
#57
  • تعتبر لاختصار الكود
1 Like
#58

النجمة تستهدف جميع العناصر في لغة الـ html

1 Like
#60 
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <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{
      	
      	width:600px;
      	margin-right:auto;
      	margin-left:auto;
      	margin-top:70px;
      	text-align:center;
      	
      }
      
      main h2{
      	
      	 font-size:30px;
      	 font-weight:600;
      }
      
       main p{
       	
       	font-size:16px;
       	font-weight:500;
       	
       
       }
       
       main img{
       	
       	margin-top:30px;
       	width:600px;
       	height:210px;
       
       }
      	
      	
      main a{
      	
      	background-color:#3b7c3a;
      	color:#fff;
      	text-decoration:none;
      	width:200px;
      	height:45px;
      	display:block;
      	line-height:45px;
      	margin-left:auto;
      	margin-right:auto;
      	margin-top:40px;
      	font-weight:900;
      	
      	
      }
      
      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>
2 Likes
#61

ممتاز فاتن شغلك نظيف :partying_face:

2 Likes
#62

هـذا بـفـضـلـكـ وشـرحـكـ الـسـلـس شـكـررررآ لـكـ :blush: …

1 Like
#63

ما الخطأ فى هذا الكود ؟

<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
    </head>
    <style>
        body {
            margin: 0;
            background-color: #171a29;
            font-family: 'Tajawal', sans-serif;
        }
        header h1{
            text-align: center;
            background-color: #212639;
            margin: 0;
            color: #fff;
            padding: 15px;
            font-size: 20px;
        }
        main {
            max-width: 600px;
            margin: 60px auto 60px auto;
            color: #fff;
            background-color: #171a29;
        }
        main h2 {
            text-align: center;
            margin-right: auto;
            margin-left: auto;
        }
        main p {
            
            text-align: center;
            margin-right: auto;
            margin-left: auto;
            
        }
        main img {
            display: block;
            margin: 50px auto;
            width: 600px;
            height: 210px;
        }
        main a {
            display: block;
            text-decoration: none;
            text-align: center;
            margin: 60px auto 0 auto;
            color: #fff;
            background-color: #3b7c3a;
            width: 110px;
            padding: 8px;
            font-size: 12px;
        }
        footer {
            text-align: center;
            background-color: #0f121b;
            color: #707281;
            height: 40px;
            line-height: 40px;
        }
    </style>
    <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" alt="صورة-فيتامين واو">
            <a href="#">اطلب وساطه</a>
        </main>
        <footer>
            <p>&copy; 2018 جميع الحقوق محفوظه لفيتامين واو </p>
        </footer>
    </body>
</html>
1 Like
#64

لا يوجد أي خطأ كل شئ ممتاز

1 Like
#66 
<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        <title>فيتامين واو</title>
        <style>
            body{
                background-color: #171a29;
                color: #fff;
                font-family: 'Tajawal', sans-serif;
                margin: 0 auto;   
            }
            
            header{
                background-color: #212639;
                text-align: center;
                height: 60px;
                line-height: 60px;
            }
            header h1{
                margin-top: 0px;
            }
            main{
                text-align: center;
                margin-bottom: 80px;
                margin-top: 80px;
            }
            main h2{
                margin-bottom: 40px;
            }
            main img{
                width: 600px;
                height: 210px;
                margin: 40px auto;
            }
            main a{
                background-color: #3b7c3a;
                color: #fff;
                height:40px;
                width:120px;
                line-height: 40px;
                display: block;
                text-decoration: none;
                text-align: center;
                margin: 0 auto; 
            }
            footer{
                background-color: #0f121b;
                color: #707281;
                text-align: center;
                margin-bottom: 0;
                height: 60px;
                line-height: 60px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p id="pargraph1">إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب </p>
            <p id="pargragh2">ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="واسطة">
            <br>
            <a href="#">اطلب وساطة</a>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
#67

image
image.png1366×728 221 KB

image
image.jpg1366×728 219 KB

يبدو خلفية العنوان غير كاملة

1 Like
#68

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

ما هي المشكلة الي تواجهك بعد ما شرحت لك طريقة كتابة الأكواد بإستخدام الكايبورد الفرنسي؟

أيضاً بإمكانك إستخدام المحرر الذي تكتبي فيها التعليقات لكتابة الأكواد بالشكل التالي:

1- الصقي الأكواد هنا

2- قومي بالتظليل عليها

3- إضغطي على الاداة التالية من المحرر

image
image.png1168×531 148 KB

#71

image
image.png1366×728 211 KB

عالجت الامر في اطلب الوساطة margin
وخلفية العنوان width
الان يبدو متناسق

image
image.jpg1366×728 209 KB

1 Like
#72

ممتاز :+1:

قومي بتجربة ارفاق الأكواد لي بالطريقة التي شرحتها لك اعلاة من خلال محرر التعليقات، عشان أراجع لك الأكواد