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

ورشات الواجهات الأمامية Frontend أساسيات تطوير واجهات الويب
#84 
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Cairo|Margarine" rel="stylesheet">
        <style>
            body{
            margin: 0;
            background-color:#000;
            font-size:15px;
             font-family: 'Margarine', cursive;
            }
            p{
             background-color:#FFF;
                width:400px;
                height: 100px;
                margin:10px auto;
                padding:10px; 
                color: #999;
                border-left: 10px solid #FF2A00; 
                line-height: 35px;
                font-size:15px;
                box-sizing:border-box;
            }
            div p{
                text-decoration: underline;
                border-left: 10px solid #00D7D7; 
            }
        </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 Like
#85 
<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{
            background-color: #232F3D;
            box-sizing: border-box;
        
        }
        p{
        
            width: 500px;
            height: 60px;
            padding:10px;
            font-size: 15px;
            font-family: 'Lobster', cursive;
            text-transform: capitalize;
            line-height: 2.0em;
            letter-spacing: 2px;
            background-color:#FFFFFF;
            margin-left: auto;
            margin-right: auto;
            border-left:#FD634B solid 6px;
            margin-top: 30px;
           
        }
        div p{
            border-left:#51B9C4 solid 6px;
            text-decoration: underline double #0E5F59;
        }
    </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>
2 Likes
#86 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
         <style>
            body{background-color: #173f5f}
            p { font-family: 'Acme', sans-serif;           
            width:400px;
            background-color:#ffffff;
            border-left: 10px solid #f6d55c;
            color:#000000;
            font-size:20px;
            line-height:30px;
            padding: 20px;
            box-sizing: border-box;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: auto;
            margin-right: auto; 
        
              }

            
            div p{background-color:#ffffff;
            text-decoration:underline;
            border-left: 10px solid #ed553b;
            }
        </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 Like
#87

شغل رائع :ok_hand:

image
image.png692×463 24.9 KB

#88

جميل وأكواد نظيفة :+1:

image
image.png692×463 24.3 KB

#89

رائع ي نجم تنسيقات مرتبة :ok_hand:

image
image.png692×463 25.7 KB

#90 
<!DOCTYPY html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>Training mission</title>
        <link href="https://fonts.googleapis.com/css?family=Cairo|Margarine" rel="stylesheet">
            <style>
            body{
            background-color:#302020;
            font-size:15px;
            box-shadow:border-box;
            font-family: Cairo, Arial, sans-serif;
            }
            p{
             background-color:#F9F0F0;
                width:400px;
                height: 50px;
                margin:20px auto;
                padding:25px; 
                color: #2f2020;
                border-left: 15px solid #FF2A00; 
                line-height: 30px;
                font-size:16px;
            }
            div p{
                text-decoration: underline;
                border-left: 15px solid #00D7D7; 
            }
    </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 Like
#91

رائع! تكتب الأكواد بطريقة متحرفة :star_struck:.

فقط أرجوا ان تتذكر ان تضعها بالمنتدى كأكواد وليس بنسخها ولصقها مباشرة لأني دائماً أقوم بتعديلها قبل مراجعتها حتى استطيع قرأتها

#92

السلام عليكم
بعد إذنك الطريقة الصحيحة لوضعها كأكواد

#93 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
         <style>
            body{
            background-color: #173f5f;
            margin: 0;
            }
            p{
             font-family: 'Acme', sans-serif;           
            width:400px;
            background-color:#ffffff;
            border-left: 10px solid #f6d55c;
            color:#000000;
            font-size:20px;
            line-height:30px;
            padding: 20px;
            box-sizing: border-box;
            margin:10px auto 10px auto; 
            }
            div p{
            text-decoration:underline;
            border-left: 10px solid #ed553b;
            }
        </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 Like
#94

2019-06-28
2019-06-28.png1174×466 56.5 KB

1 Like
#95

مية مية، واختيار الوان رائع :ok_hand:

#96 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet">
    </head>
    <style>
        body{
            background-color: #0ef9ff;
            font-family: 'Courgette', cursive; 
            color: #fff;
            font-size: 30px;
            font-weight: bold;
        }
      p{
          background-color:#E611B2;
          width: 500px;
          padding: 10px;
          border-left: 10px solid yellow;
          margin: 20px auto 20px auto;   
          box-sizing: border-box;
            } 
      div p{
          background-color: #B41FD1;
              } 

      }
    </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>

2019-07-02%2018_35_26-%D8%A8%D9%8A%D8%A6%D8%A9%20%D8%B9%D9%85%D9%84_%20%D9%85%D9%87%D9%85%D8%A9%20%D8%A7%D9%84%D8%AA%D8%AF%D8%B1%D8%A8%20%D8%B9%D9%84%D9%89%20%D9%84%D8%BA%D8%A9%20%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA%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
2019-07-02 18_35_26-بيئة عمل_ مهمة التدرب على لغة التنسيقات - البدء مع لغة تنسيقات المواقع CSS.png779×423 48.8 KB

1 Like
#97

الأكواد مضبوطة والتنسيقات لطيفة :grinning: :+1:

1 Like
#98 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{
            background-color:#372F2A;
        }
        p{
          background-color: #ffffff;
          width: 300px;
          padding: 20px;
          border-left: 20px solid #3FDE8C ;
          font-family: 'Josefin Sans', sans-serif;
          //text-decoration: underline;
          box-sizing: border-box;
          margin-left: auto;
          margin-right: auto;
         }
        div p {
           border-left: 20px solid #3FDEDB ;
          font-family: 'Lobster', cursive;
          text-decoration: underline;
         }
    </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>
```![%D8%A8%D8%AF%D9%88%D9%86%20%D8%B9%D9%86%D9%88%D8%A7%D9%86|690x347](upload://utxHcdmkxJgQ0hMD8JvM5EuxIxg.png)
1 Like
#99

%D8%A8%D8%AF%D9%88%D9%86%20%D8%B9%D9%86%D9%88%D8%A7%D9%86
بدون عنوان.png772×389 17.5 KB

1 Like
#100

ممتاز ولكن تأكد من وضع العنصر style وما يحتوية من تنسيقات بداخل العنصرhead وليس بخارجة

1 Like
#101 
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على نموذج الصندوق![css%20box%20model%20training|690x375](upload://xoITCGGopZwPgJxrPWxsRbiey6y.png) </title>
        <link href="https://fonts.googleapis.com/css?family=Lacquer|Volkhov&display=swap" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lacquer|Volkhov&display=swap" rel="stylesheet"> 
    </head>
    <style>
        p{
            width:400px;
            height:100px;
            background-color:#200f21;
            color:#fcf9ec;
            font-size:20px;
            
            font-family: 'Lacquer', sans-serif;
            text-align:left;
            border-left:10px solid #f638dc;
            padding:10px;
            margin:10px auto 10px auto;
            
            
        }
        body{
            background-color:#042f4b;
            margin:0;
        }
        div p{
            background-color:#200f21;
            color:#fcf9ec;
            font-family: 'Indie Flower', cursive;
            text-decoration:underline;
            border-left:10px solid #ff8a5c;
            
        }
    </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>
1 Like
#102

css%20box%20model%20training
css box model training.png803×437 20.6 KB

1 Like
#103

رائع :slight_smile: