مشاركة حلول: التدرب على نموذج الصندوق

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

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

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

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

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

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

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

4 Likes

سلام اصدقائي هذا عملي شكرا على عودتكم " مفيدة "

<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Cairo|Margarine" rel="stylesheet">
            <style>
            body{
            background-color:#000;
            font-family:Arial;
            font-size:15px;
            
            box-shadow:border-box;
            font-family: 'Cairo', sans-serif;
            font-family: 'Margarine', cursive;
            }
            p{
             background-color:#FFF;
                width:400px;
                height: 50px;
                margin:20px auto;
                padding:20px; 
                color: #CCC;
                border-left: 10px solid #FF2A00; 
                line-height: 30px;
                font-size:15px;

            }
            div p{
                text-decoration: underline;
                border-left: 10px solid #00D7D7; 
            }
    </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>

FireShot%20Capture%20024%20-%20%D9%85%D9%87%D9%85%D8%A9%20%D8%A7%D9%84%D8%AA%D8%AF%D8%B1%D8%A8%20%D8%B9%D9%84%D9%89%20%D9%84%D8%BA%D8%A9%20%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA%20-%20

2 Likes

وعليكم السلام، عمل ممتاز :sunglasses::muscle:

الملاحظات:

  • تنسيقات العنصر body:
    1- الخاصية font-family تكررت ثلاث مرات ولن يتم تطبيق الإ الأخيرة وعلى ما يبدو انك نسيت مسح الخصائص المكررة.
font-family:Arial;
font-family: 'Cairo', sans-serif;
font-family: 'Margarine', cursive;

2- تأكد من الخاصية box-shadow فنحن لم نتطرق لمثل هذه الخاصية حتى الأن فراجع الدرس وتأكد من إسمها.
3- الملاحظ انك طبقت الخاصية الي بالنقطة 2 للعنصر body، نريد من هذه الخاصية أن تحافظ على أبعاد الفقرة النصية وإحتساب الحاشية والحدود من ضمن العرض الأصلي للفقرات النصية وليس لجسم الصفحة، فأعد النظر بخصوص المكان المناسب لوضعها فيه.

  • تنسيقات الفقرات النصية p:
    ممتازة بس لون الخط عملتية رمادي بالكود #CCC بينما في الصورة الي ارفقتيها لون الخط أسود :smirk:

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

بإنتظار التعديلات :grin:

3 Likes

شكرا محمد على المساعدة لقد عدلت اش طلبت مني

<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Cairo|Margarine" rel="stylesheet">
            <style>
            body{
            margin: 0;
            background-color:#000;
            font-size:15px;
             font-family: 'Margarine', cursive;
            }
            p{
            
             background-color:#FFF;
                width:400px;
                height: 100px;
                margin:10px auto;
                padding:10px; 
                color: #999;
                border-left: 10px solid #FF2A00; 
                line-height: 35px;
                font-size:15px;
                box-sizing:border-box;
            }
            div p{
                text-decoration: underline;
                border-left: 10px solid #00D7D7; 
            }
    </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>

FireShot%20Capture%20025%20-%20%D9%85%D9%87%D9%85%D8%A9%20%D8%A7%D9%84%D8%AA%D8%AF%D8%B1%D8%A8%20%D8%B9%D9%84%D9%89%20%D9%84%D8%BA%D8%A9%20%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA%20-%20

2 Likes

الله عليك، مية مية :clap:

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

وبالمناسبة نسيت كود مهم الي يقوم بتعريف لغة الـ HTML5 في أول سطر :wink:

2 Likes
<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Lalezar" rel="stylesheet">
        <style>
            body{
                background-color: #EAE9E8;
            }
            p{
                background-color: #ffffff;
                color: black;
                width: 500px;
                font-family: 'Lalezar', cursive;
                height: 80px;
                text-align: center;
                font-size: 30px;
                padding: 20px;
                border-right: 20px solid grey;
                margin: 30px;
                margin-left: auto;
                margin-right: auto;
            }
            div p{
                background-color: #ffffff;
                color: black;
                width: 500px;
                height: 80px;
                text-align: center;
                font-size: 30px;
                line-height: 100px;
                text-decoration-line: underline;
                border-right: 20px solid grey;

            } 

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

    </body>
</html>```
3 Likes

مية مية ي عماد :star_struck::muscle:

ملاحظة واحدة لا يوجد مسافة بين علامة التعجب وكلمة DOCTYPE

<! DOCTYPE html>

الأصح

<!DOCTYPE html>
3 Likes

هفوه إن شاء الله ماتتكرر :sweat_smile::relaxed:

3 Likes

التدريب على نموذج الصندوق
Capture269

<!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:#ffffff;
                color:#8a2be2;
                font-family: 'Inconsolata', monospace;
                line-height: 30px;
                font-size:20px;
                text-align:left;
                margin-left:auto;
                margin-right:auto;
                padding:10px;
                border-left:7px solid #8a2be2;
                
            }
            
         div p{
                width:400px;
                background-color:#ffffff;
                color:#f83862;
                font-family: 'Inconsolata', monospace;
                line-height: 30px;
                font-size:20px;
                text-align:left;
                padding:10px;
                border-left:7px solid #f83862;
            }
        </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>
4 Likes

Well done hamza, you are doing great :clap:

3 Likes

Thank you Mr: @Alhakem :blush:

3 Likes
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <style>
            body{
                background-color: #001e2f;
            }
            
            p{
                background-color: cyan;
                width: 300px;
                margin: 10px auto 10px auto;
                padding: 10px;
                border-left: 10px solid red;
                box-sizing: border-box;
            }
        </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>

css%201

2 Likes

Well done @DgrinderHZ, looks amazing :+1:

One of the requirements of this task was to have two paragraphs with different styles, as I see you have applied the same CSS properties for both paragraphs. :smile:

2 Likes
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
    <style>
        body {
            background-color: #0BE2A5;

        }

        p {
            width: 400px;
            background-color: #FFFEFF;
            color: #353531;
            line-height: 30px;
            font-size: 18px;
            border-left: 8px solid #353531;
            padding: 10px;
            text-align: left;
            margin-right: auto;
            margin-left: auto;
            font-family: 'Noto Sans', sans-serif;
        }

        div p {
            width: 400px;
            background-color: #FFFEFF;
            color: #131617;
            line-height: 30px;
            font-size: 18px;
            border-left: 8px solid #131617;
            padding: 10px;
            text-align: left;
            margin-right: auto;
            margin-left: auto;
            font-family: 'Noto Sans', 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>
2 Likes
3 Likes

الله عليك، شغل ممتاز محمد :clap:

النص اخذتة من الاخ @hamzaabueyada

نشكر الاخ حمزة على المحتوى لأنه كتابة واحد أو إيجاد واحد أصعب من كتابة الاكواد نفسها :joy:

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

مش مشكلة لكن جرب تضيف الأكواد كما تم الشرح في الفيديو أعلاة بين هذه العلامات

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

راح يطلع الكود ملون وحركات مثل هذا

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
    <style>
        body {
            background-color: #0BE2A5;

        }

        p {
            width: 400px;
            background-color: #FFFEFF;
            color: #353531;
            line-height: 30px;
            font-size: 18px;
            border-left: 8px solid #353531;
            padding: 10px;
            text-align: left;
            margin-right: auto;
            margin-left: auto;
            font-family: 'Noto Sans', sans-serif;
        }

        div p {
            width: 400px;
            background-color: #FFFEFF;
            color: #131617;
            line-height: 30px;
            font-size: 18px;
            border-left: 8px solid #131617;
            padding: 10px;
            text-align: left;
            margin-right: auto;
            margin-left: auto;
            font-family: 'Noto Sans', 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>
3 Likes
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
        <style>
            body {
                background-color : #DAF7A6;
            }
            p {
                background-color: #F0FFFF;
                color: #8a2be2;
                width:450px;
                font-family: 'Oswald', sans-serif;                
                lign-height: 30px;
                font-size: 15pt;
                text-align: left;
                margin-left: auto;
                margin-right: auto;
                padding: 10px;
                border-left: 6px solid #A52A2A;
            }
            div p {
                color : #FF8C00;
                text-decoration: underline;
                border-left: 6px solid #556B2F;
            }
        </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

شكراً لك على هذا المحتوى الاكثر من رائع

نشكر الاخ حمزة على المحتوى لأنه كتابة واحد أو إيجاد واحد أصعب من كتابة الاكواد نفسها :joy:
اكيد ههههههه

مش مشكلة لكن جرب تضيف الأكواد كما تم الشرح في الفيديو أعلاة بين هذه العلامات
تمام لم انتبه للفيديو المرة القادمة ان شاء الله

3 Likes

العفو محمد بالمناسبة أنا أستخدم Google font في الخطوط

أتمنى لك التوفيق وللجميع

2 Likes

الله عليك بن يحى، إعطائك العنصر div p الخصائص التي يحتاج اليها بدون تكرار خصائص مثل العرض وتركة يرثها من الخصائص العامة للعنصر p يسبقنا بخطوة. :clap:

2 Likes