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


#22

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


#23
<!DOCTYPE html>
<html> 
    <head> 
       <meta charset="utf-8">
       <title>التنسيقيات CSS </title>
       <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
       <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <style>
       body {
          margin: 0;
          background-color: black;
       }
       p{
          background-color: red;
          color: #ffffff;
          width: 400px;
          margin-left: auto;
          margin-right: auto;
          font-size: 20px;
          line-height: 30px;
          font-weight: normal;
          font-family: 'Anton', sans-serif;
          text-transform: lowercase;
          text-decoration: line-through solid black;
          padding: 10px 15px 10px 15px;
          border: 5px groove #ffffff ;
          box-sizing: border-box;
      }
      div p {
          background-color: #0AB387;
          color: yello;
          font-size: 15px;
          line-height: 20px;
          font-weight: 400;
          font-family: 'Indie Flower', cursive;
          text-align: center;
          text-transform: capitalize;
          letter-spacing: 2px;
          text-decoration: underline double black;
          border-top: none;
          border-right: 8px solid;
          border-bottom: none;
          border-left: 8px solid;
          margin: 20px 25px 20px 25px;
          display: inline-block;
     }
     </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>

#24

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


#25

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


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


#27

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


#28

شكرا


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


#30

Perfect Marwan :+1:


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


#32

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


#33

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


#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


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


#37

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