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

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

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

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

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

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

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

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

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

4 Likes
#2

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

<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
#3

وعليكم السلام، عمل ممتاز :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:

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

image
image.png1140×296 19.4 KB

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

3 Likes
#4

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

<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
#5

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

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

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

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

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

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

<! DOCTYPE html>

الأصح

<!DOCTYPE html>
3 Likes
#8

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

3 Likes
#9

التدريب على نموذج الصندوق
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
#10

Well done hamza, you are doing great :clap:

3 Likes
#11

Thank you Mr: @Alhakem :blush:

3 Likes
#12 
<!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
#13

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
#15 
<!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
#16
3 Likes
#17

الله عليك، شغل ممتاز محمد :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
#18 
<!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
#19

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

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

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

3 Likes
#20

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

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

2 Likes
#21

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

2 Likes