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

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

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

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

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

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

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

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

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

2 Likes
#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>```
2 Likes
#3

مية مية،

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

2 Likes
#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>
1 Like
#5

ممتاز :wink::clap:

2 Likes
#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>
2 Likes
#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>
2 Likes
#8

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

2 Likes
#9

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

2 Likes
#10 
<!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>
2 Likes
#11

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

2 Likes
#12

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

2 Likes
#13

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

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

2
2.png1315×673 61.9 KB

2 Likes
#15

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

2 Likes
#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>
2 Likes
#17

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

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

2 Likes
#18 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Amiri" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Amiri|Schoolbell" rel="stylesheet">
    </head>
    <style>
        body {
            background-color: #E6E6FA;
        }
        p {
            background-color: #2653af;
            color: #ffffff;
            width: 400px;
            font-family: 'Amiri', serif;
            font-size: 20px;
            line-height: 40px;
            text-transform: capitalize;
            letter-spacing: 1px;
            text-align: center;
        }
        div p {
            background-color: #ffc13d;
            color: #18288d;
            width: 400px;
            font-family: 'Amiri', serif;
            font-family: 'Schoolbell', cursive;
            letter-spacing: 3px;
            font-weight: bold;
            text-decoration: underline solid blue;
            
        }
        
    </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>

mission

2 Likes
#19

جميل جداً أسماء :+1:

2 Likes
#20

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> مهمة التدرب على تنسيقات النصوص</title>
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
        <style>
            body{
                background-color: LightSlateGray;
                text-decoration: overline underline;
            }
            p{
                background-color: royalblue;
                color: white;
                width: 400px;
                line-height: 36px;
                font-size: 18px;
                letter-spacing: 2px;
                font-family: 'Source Sans Pro', sans-serif;
            }
            div p{
                background-color: limegreen;
                color: white;
                width: 400px;
                line-height: 36px;
                font-size: 18px;
                letter-spacing: 2px;
                font-family: 'Source Sans Pro', 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>

Screenshot_2019-05-12%20Practicing%20CSS%20-%20Scrimba%20screencast
Screenshot_2019-05-12 Practicing CSS - Scrimba screencast.png710×568 10.5 KB

اعتذر عن التأخير
كل عام نحن جميعا بخير وتحقيق لاهدافنا

1 Like