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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet">
    </head>
    <style>
        body{
            background-color: #0ef9ff;
        }
      p{
          background-color: #E611B2;
          color: #ffffff;
          width: 500px;
          font-size: 30px;
          font-weight: bold;
          font-family: 'Courgette', cursive;      } 
      div p{
          background-color: #B41FD1;
          color: #ffffff;
          width: 500px;
          font-size: 30px;
          font-weight: bold;
          font-family: 'Courgette', cursive;
      }
    </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>

2019-06-17%2010_45_36-%D8%A7%D8%B1%D8%AA%D9%81%D8%A7%D8%B9%20%D8%A7%D9%84%D8%B3%D8%B7%D8%B1%20-%20%D8%A7%D9%84%D8%A8%D8%AF%D8%A1%20%D9%85%D8%B9%20%D9%84%D8%BA%D8%A9%20%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9%20CSS

1 Like

مضبوط ي ابتسام :+1: والوان جميلة :grin:

2 Likes
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
         <style>
            body{background-color: #13D70D}
            p {font-family: 'Acme', sans-serif;}   
            p {height: 100px;}         
            p{width:350px;
            background-color:#0E8AA5;
            color:#ffffff;
            font-size:20px;
            line-height:30px}
            div p{background-color:#4E0EA5;
            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>
1 Like

عمل رائع ي نجم :+1:

لدي ملاحظة واحدة:
قمت بكتابة 3 قواعد CSS لإستهداف نفس العنصر p ، طبعاً هذا الشئ ليس خطأ وهو ممكن لكن في حالتنا لا نحتاج لتطبيق مثل ذلك ويكفي دمج جميع الخصائص بداخل قاعدة واحدة.

p {font-family: 'Acme', sans-serif;}   
p {height: 100px;}         
p{width:350px;
background-color:#0E8AA5;
color:#ffffff;
font-size:20px;
line-height:30px}

مهمة التدرب على لغة التنسيقات body{ background-color:#DAF7A6;
        }
        p{
            width:400px;
            background-color:#FF5733;
            color:#ffffff;
            font-family: 'Aguafina Script', cursive;
            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>
1 Like

مية مية ي فادي.

بالمناسبة تأكد من وضعك للاكواد في المنتدى بالشكل الصحيح كما تم شرح ذلك في الفيديو التالي:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>salima</title>
        <style>
            body{
                background:aqua;
            }
            h2{
                color:red;
            }
            h1{
                color:blueviolet;
            }
            a{
                color:deeppink;
            }
        </style>
        
        
    </head>
<body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
            <div>
    <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
    </div>
    <a href="#">اطلب وساطة</a>
        </main>
        
    </body>
</html>
1 Like
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>salima</title>
        <style>
            body{
                background-color: beige;
            }
            p{
                
                
               background-color:chocolate;
               width: 400px; 
            }
            div p{
                color:azure;
                background-color:coral;
                width: 400px;
}
        </style>
    </head>
  <body>
      <p>
    
          Never give up. Today is hard, tomorrow will be worse,
    but the day after tomorrow will be sunshine
     <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

عمل ممتاز وإختيار جميل للألوان :ok_hand:

image

فقط ملاحظة واحدة، ارجوا وضع الأكواد بالمنتدى بالطريقة الصحيحة كما هو موضح بالفيديو أدناة

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Lacquer|Volkhov&display=swap" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lacquer|Volkhov&display=swap" rel="stylesheet"> 
    </head>
    <style>
        p{
            width:400px;
            background-color:#ff502f;
            color:#fcf9ec;
            font-size:30px;
            font-weight:bold;
            font-family: 'Lacquer', sans-serif;
            text-align:center;
            text-transform:capitalize;
            letter-pacing:2px;
            line-light:60px;
            text-decoration:none;
        }
        body{
            background-color:#12d3cf;
        }
        div p{
            background-color:#b0f4e6;
            color:#ff502f;
            font-family: 'Indie Flower', cursive;
            text-decoration:underline wavy orange;
            
        }
    </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

ممتاز سالم :+1:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lacquer&display=swap" rel="stylesheet">
    </head>
    <style>
        body{
            background-color: #FFF8DC;
        }
        p{
            background-color: #7FBEEB;
            color: #E0FFFF;
            width: 400px;
            font-size: 30px;
            font-weight: 700;
            font-family: 'Dancing Script', cursive;
            text-align: center;
            text-transform: none;
            letter-spacing: 1px;
            text-decoration: underline dashed pink;
        }
        div p{
            background-color: #D46363;
            color: #FFFFF0;
            width: 400px;
            font-weight: 400;
            font-family: 'Lacquer', sans-serif;
            text-align: left;
            text-transform: lowercase; 
            letter-spacing: 1px;
            text-decoration: none;
        }
    </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>
1 Like

1 Like

رائع ي أريج :+1:

1 Like
<html>
     <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Lobster+Two|Permanent+Marker&display=swap" rel="stylesheet">
</head>
 <style>
   body{
    background-color:#A9A9A9;
}
  P{
    background-color: black;
    color: white;
    wight:1000x;
    font-family: 'Permanent Marker', cursive;
    front-size:25px;
    line-height:50px;
    text-align:center; 
}
   div p{
      background-color:#A07E79;
      color:#451F19;
      wight: 400px;
      font-family: 'Lobster Two', cursive;
      text-align:center;
      litter-spacing:1px;
      text-decoration:underline;
      text-decoration-style:wavy;
}
  </style>
</head>
<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

html

1 Like

ممتاز :+1:

تصميمي :grin:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Style of Html</title>
        <style>
            body{
                background-color:#c5cae9;
            }
            div{
                width:80%;
                background-color:#303f9f;
                color:white;
            }
            p{
                text-align:center;
                font-size:18px;
                line-height:24px;
                font-family: 'Mali', cursive;
            }
            strong{
                color:red;
                text-decoration: underline ;
            }
        </style>
    </head>
    <body>
        <div>
            <p> Never give up. Today is <strong>hard</strong>, tomorrow will be <strong>worse</strong>, but the day after tomorrow will be <strong>sunshine</strong></p>
            <p> If you work just for <strong>money</strong>, you'll never make it, but if you love what you're doing success will be <strong>yours</strong></p>   
        </div>
    </body>
</html>
1 Like

رائع :heart_eyes: أعجبني إبداعك في كسر المألوف :+1:

1 Like

هذا من ذوقك الحلو :grin:

1 Like