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

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

مهمة التدريب

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

رائع :muscle:

image
image.png723×467 14.7 KB

2 Likes
#44 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body {
            background-color: #3B413C;
        }
        
        p {
            padding: 8px 16px;
            width:400px;
            color:#3B413C;
            background-color: #DAF0EE;
            border-radius: 4px;
            box-shadow: 0 2px 2px #cccccc55
        }
        
        div p {
            background-color: #94D1BE;
        }
        
    
        
    </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>

22-01-19-24
screenshot-coretabs.net-2019.05.22-01-19-24.png851×593 32.6 KB

2 Likes
#45 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
      body {
        background-color: #ccc;
      }
      
      p {
        width: 400px;
      }
      
      .first-p {
        background-color: #63131b;
        color: #fff;
      }
      
      .second-p {
        background-color: #fff;
        color: #63131b;
      }
    </style>
    <body>
        
        <p class="first-p">
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunsahine
        </p>
        
        <p class="second-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>
        
    </body>
</html>
2 Likes
#46

@Alhakem

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>مهمة التدرب على لغة التنسيقات</title>
  
  <style>
    body{
    	background-color:LAVENDER;
    }
    
    p{
    	width:400px;
    	background-color:#A569BD;
    	 
    }
    
    div p{
    	 
    	 background-color:#BB8FCE;
    
    }
    
  </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
#47

لمسة جميلة يا أحمد :star_struck:

2 Likes
#48

رائع @Radwa :+1:

2 Likes
#49

ممتاز فاتن :muscle:

2 Likes
#50 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{
            background-color: #02B2A5;
        }
        p{
           width: 400px; 
           background-color: #ffffff;
           color: #10635C;
        }
        div p{
            background-color: #0E5F59;
            color: #DEFAF8;
        }
    </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
#51

جميل ي تغريد إستمري :muscle:

2 Likes
#52

هذه كانت محاولتي

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body {
            background-color: #333CFF;
        }
        p {
            width: 400px;
            background-color: #DBDCF6  ;
        }
        div p {
            background-color: #F2F5B4  ;
        }
    </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>

style

2 Likes
#53

رائع ي كمال وألوان متناسقة :star_struck:

2 Likes
#54

شكرا استاذ @Alhakem ^^

2 Likes
#55

image
image.png1366×728 106 KB

1 Like
#56

image
image.png1366×728 104 KB

غيرت لون النص الاول

1 Like
#57

Perfect :ok_hand: :star_struck:

#59 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <style>
            body {
                background-color: #CCC;
            }
            p {
                background-color: #0f0;
                color: #000;
                width: 400px;
            }
            div p {
                background-color:  #00f;
                color: #fff;
                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>

Capture
Capture.JPG1599×626 24.6 KB

1 Like
#60 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{background-color:#4C9BE3;}
        p.p1{background-color:#E0164D;color:#ffffff;}
        p.p2{background-color:#5E5E6F;color:#ffffff;}
    </style>
    <body>
        <p class='p1'>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunsahine
        </p>
        <p class='p2'>
            If you work just for money, you'll never make it, 
            but if you love what you're doing success will be yours
        </p>
        
    </body>
</html>

Annotation
Annotation.jpg1920×624 147 KB

1 Like
#61

:star_struck: ممتاز شايف عامل كلاسات

1 Like
#62 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{
            background-color: #FFBD33;
        }
        p{
            width: 400px;
            background-color: #33FFBD;
            
        }
        div p{
            background-color: #FF5733;
        }
    </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