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


#1

مرحباً جميعاً

المهمة المطلوبة:

بإمكانك الإطلاع عليها من هنا

طريقة مشاركة الأكواد التي قمت بكتابتها:

قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات

```
هنا ضع الأكواد
```

شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق


#2
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Lalezar" rel="stylesheet">
        <style>
            body{
                background-color: black;
            }
            p{
                background-color: gold;
                color: black;
                width: 500px;
                font-family: 'Lalezar', cursive;
                height: 100px;
                text-align: center;
                font-size: 30px;
                text-decoration-line: underline;
                display: table-cell;
                vertical-align: middle;
            }
            div p{
                background-color: red;
                color: #ffffff;
                width: 500px;
                height: 100px;
                text-align: center;
                font-size: 30px;
                line-height: 100px;
                text-decoration-line: underline;
            } 

        </style>
    </head>
    <body>
        <p>
            ظهرت الأرض تحت السفينة الطائرة
            في البعد على شكل هلال متلألئ 
        </p>
        
        <div>
            <p>
                رأيت العاصفة؛ كم كانت مرعبة بقدر ما كانت رائعة!
            </p>
        </div>

    </body>
</html>```

#3

مية مية،

وفكرة إستخدامك الخاصية display بالقيمة table-cell ممتازة :muscle:


#4

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
        <style>
            body{
                background-color:#DAF7A6;
                
            }
            p{
                width:400px;
                background-color:#FF5733;
                color:#ffffff;
                font-family: 'Inconsolata', monospace;
                line-height: 40px;
                font-size:20px;
                text-align:center;
            }
            
         div p{
                width:400px;
                background-color:#483D8B;
                color:#ffffff;
                font-family: 'Inconsolata', monospace;
                text-decoration:underline;
                line-height: 30px;
                font-size:20px;
                text-align:center;
            }
        </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>

#5

ممتاز :wink::clap:


#6
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
        <style>
            body {
                background-color: #FFEBCD;
            }
            p {
                background-color: #008B8B;
                color: white;
                font-family: 'Roboto Slab', serif;
                width: 400px;
                height: 120px;
                font-size: 15pt;
                text-align: center;
                line-height: 40px;
            }
            div p {
                background-color: #8B008B;
                text-decoration-line: underline;
                font-family: 'Roboto Slab', serif;
                width: 400px;
                height: 120px;
                font-size: 15pt;
                text-align: center;
            }
        </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>

#7
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
         <style>
            body{background-color:red}
            p{width:400px;background-color:green;color:#00FA9A;font-size:20px;line-height:30px}
            div p{background-color:blue;color:#00BFFF;text-decoration:underline}
        
        </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>

#8

ممتاز بن يحيى عمل رائع!


#9

عمل رائع محمود :clap:، لماذا لا تجرب أحد خطوط google fonts على صفحتك :wink:


#10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</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 {
            background-color: black;
          }
          p{
            background-color: red;
            color: #ffffff;
            width: 400px;
            font-size: 20px;
            line-height: 30px;
            font-weight: normal;
            font-family: 'Anton', sans-serif;
            text-transform: lowercase;
            text-decoration: line-through solid black;
          }
          div p {
            background-color: #0AB387;
            color: yello;
            font-size: 15px;
            line-height: 20px;
            font-weight: 900;
            font-family: 'Indie Flower', cursive;
            text-align: center;
            text-transform: capitalize;
            letter-spacing: 2px;
            text-decoration: underline double black;
          }
        </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>

#11

ممتاز بن علا :muscle: بإمكانك الإنتقال للمهمة التالية


#12

شكرا لك اخي :green_heart::green_heart:


#13

لا شكر على واجب


#14

مرحباً :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: orange;
			color: white;
			font-family: 'Indie Flower', cursive;
			font-size: 22px;
			text-align: center;
		}

		    div p{
			background-color: #483D8B;
			text-decoration: underline;
		}

		    body{
			background-color: #EEE8AA; 
		}
        </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>


#15

كود نظيف ومرتب وصفحة جميلة :muscle:


#16
<!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;
      color:blue;
      font-size: 16px;
      text-align: center;
    }
    p{
      background-color: #FFE4C4;
      width: 400px;
      font-family: 'Playfair Display', serif;
      line-height: 30px;
    }
    div p{
        background-color: yellow;
        width: 400px;
        font-family: 'Playfair Display', serif;
        font-family: 'Open Sans Condensed', sans-serif;
        font-family: 'Anton', sans-serif;
      }
     span{
        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>

#17

شايف span سبقتينا بها :sunglasses:

عمل ممتاز، إستمري :muscle: