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

عمل رائع :wink:

1 Like

شكرا م/@Alhakem :blush:

1 Like
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Macondo+Swash+Caps" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Calligraffitti|Macondo+Swash+Caps" rel="stylesheet">
    </head>
    <style>
        body {
            background-color: #6A5ACD;
        }
        p {
           width: 400px; 
           background-color: #00FA9A;
           color: #2E8B57;
           font-family: 'Macondo Swash Caps', cursive;

        }
        div p {
            width: 400px;
            background-color: #556B2F;
            color: #66CDAA;
            font-family: 'Macondo Swash Caps', cursive;
            font-family: 'Calligraffitti', cursive;
            text-decoration: underline wavy lightblue;
        }
        
    </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

مشاركة حل المهمة :slight_smile:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Stylish" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Akronim" rel="stylesheet">
    </head>
    <style>
        p{
            background-color: LIGHTSALMON;
            color: blue;
            width: 400px;
            text-align: center;
            text-transform: none;
            font-family: 'Stylish', sans-serif;
            front-siz: 30px;
            front-weight: bold;
            line-height: 40px;
            
        }
        div p{
            background-color: LIGHTSALMON;
            color: black;
            width: 400px;
            font-family: 'Akronim', cursive;
            font-size: 30px;
            text-align: center;
            text-transform: capitalize;
            line-height: 40px;
            text-decoration: underline wavy red;
        }
        body{
            background-color: LIGHTSALMON;
        }
    </style>
    <body>
        
        <p>
            Never give up. Today is hard, tomorrow will be worse, 
            but the day after tomorrow will be sunsahine
        </p>
        <hr>
        <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>
3 Likes

ممتاز @Hishamo :muscle:

2 Likes
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
      body {
        background-color: #ccc;
      }
      
      p {
        width: 400px;
        font-family: "Comic Sans MS", cursive, sans-serif;	
        font-size: 15px;
        text-align: center;
        letter-spacing: 1px;
      }
      
      .first-p {
        background-color: #63131b;
        color: #fff;
        line-height: 35px;
        text-decoration: underline;
        
      }
      
      .second-p {
        background-color: #fff;
        color: #63131b;
        font-weight: bold;
        line-height: 30px;
      }
    </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

@Alhakem

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>مهمة التدرب على لغة التنسيقات</title>
  
  <link href="https://fonts.googleapis.com/css?family=Cute+Font&display=swap" rel="stylesheet">
  
  <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
  
  <style>
    body{
    	background-color:LAVENDER;
    }
    
    p{
    	width:400px;
    	background-color:#A569BD;
    	font-size:30px;
    	line- height:50px;
    	font-family: 'Cute Font', cursive;
    	text-transform:uppercase;
    	text-align:center;
    }
    
    div p{
    	 
    	 background-color:#BB8FCE;
    	 font-family: 'Pacifico', cursive;
    	 font-size:20px;
    	 text-transform:none;
    	 text-decoration:underline wavy purple;
    
    }
    
  </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

صفحة جميلة فاتن :muscle:

2 Likes

شـكـرررآ لـكـ :blush:

1 Like
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
    </head>
    <style>
        body{
            background-color: #02B2A5;
            }
        p{
            width: 400px; 
            background-color: #ffffff;
            color: #10635C;
            font-family: 'Merriweather', serif;
            font-size: 18px;
            font-weight: 600;
            text-align: left;
            line-height: 30px;
            text-decoration: underline double #0E5F59;
            
          }
        
               
        div p{
            background-color: #0E5F59;
            color: #DEFAF8;
            font-family: 'Indie Flower', cursive;
            font-size: 18px;
            font-weight: 400;
            text-align: center;
            text-transform: capitalize;
            letter-spacing: 1px;
            line-height: 25px;
            text-decoration: none;
             }
    </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

عمل رائع تغريد :+1:

2 Likes


لا اعلم لما لا يتم تغيير الخط ؟
اين هو الخطا ؟

1 Like


حليت المشكل انا كنت حاطة header و هي لازم يكون الكل تحت
body
كيف فيني اضع اللينك للفقرة الاولى بتغيير الخط ؟
يكون تحت p شكرا

1 Like

عشام يكون تحت الفقرة الاولى ضعي الخاصية في القاعدة التي تستهدفها والتي هي القاعدة

p{

}
1 Like

كيف اجد بيئة عمل مسبقة فيها عمل سابقا و احاول الزيادة فيه ؟
يعني كيف يمكنني العمل على بيئة عمل سابقا لكي لا اعاود الكتابة

1 Like

عشان يتم حفظ عملك السابق قومي بانشاء حساب في موقع
https://scrimba.com

ولما تستخدمي بيئة العمل تأكدي بأنك مسجلة دخول في ذلك الموقع وسيتم حفظ عملك

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <style>
            body {
                background-color: #CCC;
            }
            p {
                background-color: #0f0;
                color: #000;
                width: 400px;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                font-size: 25px;
                text-align: center;
                line-height: 35px;
                font-weight: bold;
                text-transform: lowercase;
            }
            div p {
                background-color:  #00f;
                color: #fff;
                width: 400px;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                font-size: 25px;
                text-align: center;
                line-height: 35px;
                font-weight: bold;
                text-transform: lowercase;
                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

مية مية :muscle:

1 Like

شكرا

1 Like
<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        body{
            background-color: #FFBD33;
        }
        p{
            width: 400px;
            background-color: #33FFBD;
            font-family: 'Lobster', cursive;
            font-size: 17px;
            text-transform: capitalize;
            text-align: right;
            font-weight: bold;
            line-height: 2.0em;
            letter-spacing: 2px
           
        }
        div p{
            background-color: #FF5733;
            text-decoration: underline double #0E5F59;
        }
    </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