تسليم حلول: مهمة التدرب على الـ Class

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

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

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

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

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

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

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

4 Likes

مهمة التدرب على استخدام الclass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{

       width: 100px;
       height: 100px;
       margin: 20px;
       display: inline-block;

    }

    .red{
        background-color:red;
    }

    .green{

        background-color: green;
    }

 
    </style>
</head>
<body>
    
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>
2 Likes

مية مية :+1:

2 Likes
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title> Attribute Class </title>
       <style>
          div {
             display: inline-block;
             margin: 18px;
             height: 80px;
             width: 80px;
          }
          .green {
              background-color: green;
          }
          .red {
          background-color: red;
          }
       </style>
   </head>
   <body>
       <div class="red"> </div>
       <div class="green"> </div>
       <div class="red"> </div>
   </body>
</html>
3 Likes

ممتاز :+1:

2 Likes
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin: 30px;
    }

    .div-ColorRed {
        background-color:red;
    }

    .div-ColorGreen {
        background-color: green;
    }

    </style>
</head>
<body>
    <div class="div-ColorRed"></div>
    <div class="div-ColorGreen"></div>
    <div class="div-ColorRed"></div>
</body>
</html>
1 Like

ممتاز :+1:

<!DOCTYPE html>
<html>

<head>
    <title>ID</title>
    <meta charset="utf-8">
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 15px;

        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

</html>
1 Like

ممتاز :+1:

1 Like
<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>id-Color</title>
            <style>
                div{    
                        width: 200px;
                        height: 200px;
                        display: inline-block;
                    }
                .red_color{background-color: red}
                #green_color{background-color: green}
            </style>
        </head>
        <body>
            <div class="red_color"></div>
            <div id="green_color"></div>
            <div class="red_color"></div>
        </body>
    </html>

color

1 Like

ممتاز :ok_hand:

مرحباً :hatched_chick::baby_chick::baby_chick:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>مهمة: التدرب على الـ Class</title>
</head>
<body>
    <div class="red-background"></div>
    <div id="box-two"></div>
    <div class="red-background"></div>
</body>
</html>

div{
    height: 100px;
    width: 100px;
    margin: 20px;
    display: inline-block;
}
.red-background{
    background-color: red;
}
#box-two{
    background-color: green;
}

1 Like

ممتاز :+1:

1 Like

html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="red"></div>
    <div id="green"></div>
    <div class="red"></div>
</body>
</html>

css code

div {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 10px;
}
.red {
    background-color: red;
}
#green {
    background-color: green;
}

1 Like

ممتاز أسماء :+1:

1 Like
<div class="red-box"></div>
<div id="two"></div>
<div class="red-box"></div>
<style>
    #one{
        width: 100px;
        height: 100px;
        margin: 15px;
        display: inline-block;
        background-color: red;

    }
    #two{
        width: 100px;
        height: 100px;
        margin: 15px;
        display: inline-block;
        background-color: green;
    }
    #three{
        width: 100px;
        height: 100px;
        margin: 15px;
        display: inline-block;
        background-color: blue;
    }
    .red-box{
        width: 100px;
        height: 100px;
        margin: 15px;
        display: inline-block;
        background-color: red; 
    }
</style>

1 Like

ممتاز، فقط تخلص من القواعد التي لا تحتاج لها :wink:

1 Like

شكرا جزيلا

1 Like
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Class attribute</title>
        <style>
            div {
                display: inline-block;
                margin: 25px;
                height: 150px;
                width: 150px;
            }

            .red {
                background-color: #f00;
            }

            .green {
                background-color: #0f0;
            }
        </style>
    </head>
    <body>
        <div class="red"></div>
        <div class="green"></div>
        <div class="red"></div>
    </body>
</html>
2 Likes

رائع :+1:

2 Likes