مشاركة حلول: مهمة التدرب على لغة التنسيقات

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

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

#22 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{background-color:red}
        p{width:400px;background-color:green;color:#00FA9A}
        div p{background-color:blue;color:#00BFFF}
    </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>
#23
مهمة التدرب على لغة التنسيقات 
    <style>
        body {
            background-color: black;
        }
        p{
            background-color: red;
            color: #ffffff;
            width: 400px;
        }
        div p {
            background-color: #0AB387;
            color: yello;
        }
    </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>
#24 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <style>
            body {
                background-color: #FFE4E1;
            }
            p {
              background-color: #A9A9A9;
                width: 400px;
                color:#8B0000;
            }
            div p {
              background-color: GOLD;
                color: #00008B;
            }
        </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
#25

رائع!

بإمكانك الإنتقال للمهمة التالية

image
image.png831×520 7.05 KB

1 Like
#26 
<!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: 40px;
                font-family:'Indie Flower', cursive;
                text-decoration: underline red;
            }
            div p {
              background-color: GOLD;
                color: #00008B;
                width: 400px;
                text-decoration: none;
                text-align:center;
                font-family:'Anton', sans-serif;

            }
        </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%20titre2
Sans titre2.png1366×768 93.4 KB

1 Like
#27

ممتاز :wink:

1 Like
#28 
<!DOCTYPE html>
<html>
  <head>
    <meta charset ="utf-8">
    <title>مهمة التدرب على لغة التنسيقات</title>
    <style>
    body{
      background-color: #8FBC8B;
      color:blue;
      font-size: 16px;
    }
    p{
      background-color: #FFE4C4;
      width: 400px;
    }
      div p{
        background-color: yellow;
        width: 400px;
      }
    </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
#29

ممتاز @Noora

لون الخلفية جميل :star_struck:

image
image.png718×459 7.18 KB

#31

@Alhakem Thank you

1 Like
#32 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>مهمة التدرب على لغة التنسيقات</title>
</head>
<style>
    body {
    background-color: #90EE90;
    }
    
    #p1 {
        width: 400px;
        background-color: #FF5733;
    }
    
    #p2 {
        width: 400px;
        background-color: #708090;
        color: #ffffff;
    }
</style>
<body>
    
    <div id="p1">
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunsahine
        </p>
    </div>
    
    <div id="p2">
    <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
#33

مرحبا @noura شايف أنك غيرتي هيكلة العناصر واضفتي لها id لم يكن ذلك من متطلبات المهمة لكن طالما أنها خطوات متقدمة لا مشكلة، بإمكانك الإنتقال للتالي

1 Like
#34 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body {
            background-color: #E6E6FA;
        }
        p {
            background-color: #2653af;
            color: #ffffff;
            width: 400px
        }
        div p {
            background-color: #ffc13d;
            color: #18288d;
            width: 400px
        }
        
    </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
#35

ممناز @asmaa_salih ، أختيار رائع للألوان :ok_hand:

image

2 Likes
#36

السلام عليكم
كل عام وانتم بخير
مهمة التدرب على لغة التنسيقات

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                background-color: LightSlateGray;
            }
            p{
                background-color: royalblue;
                color: white;
                width: 400px;
            }
            div p{
                background-color: limegreen;
                color: white;
                width: 400px;
            }
        </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_2019-05-07%20HTML%20style%20element%20-%20Scrimba%20screencast
Screenshot_2019-05-07 HTML style element - Scrimba screencast.png1016×718 8.53 KB

1 Like
#37

وأنت بألف خير طارق،

عمل جميل :+1:

1 Like
#38 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <style>
    body{
    background-color: black;
    }
    p{
    background-color: blue;
    color: black;
    width: 400px;
    }
    div p{
    background-color: red;
    color: white;
    width: 400px;
    }
    </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>
2 Likes
#39

ممتاز، عمل رائع

image
image.png751×401 4.21 KB

1 Like
#40 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body {
            background-color: #6A5ACD;
        }
        p {
           width: 400px; 
           background-color: #00FA9A;
           color: #2E8B57;
        }
        div p {
            width: 400px;
            background-color: #556B2F;
            color: #66CDAA;
        }
        
    </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
#41

ممتاز :+1:

image
image.png692×487 14.2 KB

1 Like