مشاركة حلول: التدرب على نموذج الصندوق

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

ممتاز حمزة :sunglasses:

2 Likes
#23 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>عنوان الموقع</title>
        <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-weight: 20px;
             }
             header h1 {
                 margin: 0;
                 text-align: center;
                 line-height: 50px;
                 font-size: 20px;
                 
             }
             main {
                 widht: 900px;
                 margin-left: auto;
                 margin-right: auto;
                 padding: 40px 0 40px 0;
             }
             main h2 {
                 font-weight: bold;
                 font-size: 20px
             }
             main p {
                 widht: 600px;
                 font-weight: 200px;
                 font-size: 16px;
                 padding: 0 180px 40px 180px;
             }
             main img {
                 margin-left: auto;
                 margin-right: auto;
                 width: 600px;
                 height: 210px;  
                 margin-bottom: 18px;
             }
             a {
                 display: inline-block;
                 border: 1px solid #3b7c3a;
                 background-color: #3b7c3a;
                 color: #fff;
                 margin-top: 15px;
                 text-decoration-line: none;
                 padding: 5px 18px 5px 18px;
                 font-size: 10px;
                 font-weight: bold;
             }
             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" width="400">
            <div>
              <a href="#">اطلب وساطه</a>
            </div>
        </main>
        <footer> 
            <p>&copy; 2018  جميع الحقوق محفوظة للفيتامين باء</p>
        </footer>
    </body>
</html>
2 Likes
#24

الله عليك ممتاز، فقط ركز انك كتبت كلمة yello بدلاً من yellow

2 Likes
#25

شكرا لك اخي سوف افعل ذلك أن شاءالله

1 Like
#26 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
         <style>
             body{background-color:#232F3D;font-family:'Lobster',cursive;}
            p{width:400px;background-color:white;
                font-size:20px;line-height:30px;padding:10px;border-left:10px solid blue;
                margin-left:auto;margin-right:auto}
            div p{text-decoration:underline;
                    border-left:10px solid green;}
        
        </style>
    </head>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunshine
        </p>
        
        <div>
            <p>
                If you work just for money, you'll never make it, 
                but if you love what you're doing success will be yours
            </p>
        </div>

    </body>
</html>

1
1.png1012×484 24.6 KB

2 Likes
#27

ستايل جميل :+1:

1 Like
#28

شكرا

2 Likes
#29

مرحباً :hatched_chick::baby_chick::baby_chick:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
        <style>
            p{
            width: 400px;
            background-color: white;
            color: black;
            font-family: 'Indie Flower', cursive;
            font-size: 20px;
            padding: 20px;
            border-left: 10px solid #FF5733;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }

            div p{
            text-decoration: underline;
            border-left: 10px solid #00CED1;
        }

            body{
            background-color: #354047; 
        }
        </style>
    </head>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunshine
        </p>
        
        <div>
            <p>
                If you work just for money, you'll never make it, 
                but if you love what you're doing success will be yours
            </p>
        </div>

    </body>
</html>

Screenshot%20(5)
Screenshot (5).png1366×609 57.5 KB

2 Likes
#30

Perfect Marwan :+1:

2 Likes
#31 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <style>
            body {
                background-color: #FFE4E1;
            }
            p {
              background-color: #A9A9A9;
                width: 400px;
                color:#8B0000;
                height: 100px;
                line-height: 20px;
                font-family:'Indie Flower', cursive;
                text-decoration: underline red;
                padding: 10px 10px 10px 10px;
                border-left: 20px solid black;
                box-sizing: border-box;
                margin-left: auto;
                margin-right: auto;

            }
            div p {
              background-color: GOLD;
                color: #00008B;
                width: 400px;
                text-decoration: none;
                text-align:center;
                font-family:'Anton', sans-serif;
                border-left: 20px solid blue;
                box-sizing: border-box;

            }
        </style>
    </head>
    <body>

        <p>
            Never give up. Today is hard, tomorrow will be worse,
            but the day after tomorrow will be sunshine
        </p>

        <div>
            <p>
                If you work just for money, you'll never make it,
                but if you love what you're doing success will be yours
            </p>
        </div>

    </body>
</html>

Sans%20titre3
Sans titre3.png1366×768 58.1 KB

2 Likes
#32

Ohh!
Ok I will modify it!
It was done in a hurry :slight_smile:

1 Like
#33

مية مية :star_struck::muscle:

2 Likes
#34 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Cairo|Margarine" rel="stylesheet">
    </head>
    <style>
        body{
            margin:0;
            background-color: #230b3f;//#8a26e7;
            
        }
        p{         
            background-color: white;
            width: 400px;
            height: 100px;
            margin:15px auto;            
            box-sizing: border-box;
            font-size:14px;
            font-family: 'Margarine', cursive;
            color: #999;
            line-height: 35px;
            border-left: 7px solid rgb(50, 202, 248);
            padding:10px;    
            text-decoration: underline;     
        }
        div p {
            
            border-left:7px solid red;
            padding:10px;            
        }
    </style>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunshine
        </p>
        
        <div>
            <p>
                If you work just for money, you'll never make it, 
                but if you love what you're doing success will be yours
            </p>
        </div>
        
    </body>
</html>

a

1 Like
#35

عمل جميل بن يحيى :+1::+1:

#36 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على نموذج الصندوق</title>
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
         <style>
             body{background-color:#232F3D;font-family:'Lobster',cursive;}
            p{width:400px;background-color:white;
                font-size:20px;line-height:30px;padding:10px;border-left:10px solid blue;
                margin-left:auto;margin-right:auto}
            div p{text-decoration:underline;
                    border-left:10px solid green;}
        
        </style>
    </head>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunshine
        </p>
        
        <div>
            <p>
                If you work just for money, you'll never make it, 
                but if you love what you're doing success will be yours
            </p>
        </div>

    </body>
</html>

css
css.png1033×495 25.2 KB

1 Like
#37

سبق وشاركت حلك في هذه المهمة. هل قمت بتعديل :thinking:؟

#38 
<!DOCTYPE html>
<html>
  <head>
    <meta charset ="utf-8">
    <title>مهمة التدرب على لغة التنسيقات</title>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton|Open+Sans+Condensed:300|Playfair+Display" rel="stylesheet">
    <style>
    body{
      background-color: #8FBC8B;
      box-sizing: border-box;
      font-size: 16px;
      text-align: center;
    }
    p{
      background-color: #FFE4C4;
      color:blue;
      width: 400px;
      font-family: 'Playfair Display', serif;
      line-height: 30px;
      padding: 10px;
      border-left: 10px dotted brown;
      border-right: 10px solid purple;
      margin-left: auto;
      margin-right: auto;
      margin-top:20px;
    }
    div p{
        background-color: yellow;
        color:#000000;
        width: 400px;
        font-family: 'Playfair Display', serif;
        font-family: 'Open Sans Condensed', sans-serif;
        font-family: 'Anton', sans-serif;
        padding: 5px;
        border-left: 10px solid purple;
        border-right: 10px dotted brown;
      }
     span{
       color: #708090;
        text-decoration: underline wavy red;
        font-weight: bold;
        letter-spacing: 5px;

      }
    </style>
  </head>
  <body>
    <p>
      Never give up. Today is <span>hard, </span>tomorrow will be worse,
      but the day after tomorrow will be sunshine
  </p>
  <div>
       <p>
           If you work just for money, you'll never make it, but if you
           love what you're doing success will be yours
       </p>
  </div>
  </body>
</html>

%D9%86%D9%85%D9%88%D8%B0%D8%AC%20%D8%A7%D9%84%D8%B5%D9%86%D8%AF%D9%88%D9%82
نموذج الصندوق.JPG1288×631 32.2 KB

1 Like
#39

عمل ممتاز :+1:

#40 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Amiri|Artifika|Schoolbell" rel="stylesheet">
        
    </head>
    <style>
        body {
            background-color: rgb(144, 144, 196);
        }
        p {
            background-color: #2653af;
            color: #ffffff;
            width: 500px;
            font-family: 'Amiri', serif;
            font-size: 20px;
            line-height: 40px;
            text-transform: capitalize;
            letter-spacing: 1px;
            text-align: center;
            padding: 10px;
            border:5px outset rgb(14, 99, 124);
            box-sizing: border-box;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
        }
        div p {
            background-color: #f0ab17;
            color: #18288d;
            width: 500px;
            letter-spacing: 3px;
            font-weight: bold;
            text-decoration: underline solid blue;
            
        }
        
    </style>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunsahine.
        </p>
        <div>
            <p>
                If you work just for money, you'll never make it, 
                but if you love what you're doing success will be yours.
            </p>
        </div>
        
    </body>
</html>

box-model

1 Like
#41

عمل رائع :+1:

1 Like