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

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#21 
!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>practice ID</title>
        <style>
            div{
                height:100px;
                width: 100px;
                display: inline-block;
                margin: 20px;
            }
            #red{
                background-color: red;
            }
            #green{
                background-color: green;
            }
            #blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>
1 Like
#22 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      div{
        width: 200px;
        height: 200px;
        margin:20px;
        display: inline-block;
      }
      #one{
        background-color: blue;
      }
      #two{
        background-color: green;
      }
      #three{
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>

  </body>
</html>
1 Like
#23

@Radwa
@FatenAli
@Noora
@Eiad21

مية مية :+1:

2 Likes
#24 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>11111</title>


    <style>
    div{
      display: inline-block;

      width: 250px;
      height: 250px;
      margin:50px;
    }
    #one {
      background-color: red;
    }
    #twoo {
      background-color: Green;
    }
    #three {
      background-color: blue;
    }
    </style>
<body>
<div id="one"></div>
<div id="twoo"></div>
<div id="three"></div>
</body>
</html>
1 Like
#25

ممتاز :+1:

1 Like
#26 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>pro|div</title>
        <style>
            div {
                margin: 20px;
                width: 200px;
                height: 200px;
                display: inline-block;
                border: 1px solid #fff;
            }
            #one {
                background-color: #54DAB8;
            }
            #two {
                background-color: #7354DA;
            }
            #three {
                background-color: #F4880F;
            }
        </style>
    </head>
    <body>
        <div id="one"></div>
        <div id="two"></div>
        <div id="three"></div>
    </body>
</html>

Capture
Capture.PNG1863×915 25.9 KB

1 Like
#27

مية مية :+1:

1 Like
#28 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

</head>
<style>
    div{
        height: 100px;
        width: 100px;
        box-sizing: border-box;
        margin:20px;
        display: inline-block;
    }
    #red{
           background-color: red;
    }

    #green{
           background-color: green;
    }

    #blue{
          background-color: blue;
    }

</style>
<body>
<header>

</header>
<main>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
     
</main>
<footer>

</footer>
    </body>
</html>
1 Like
#29

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

<!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>Selctor-id</title>
    <style>
        div{
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 20px;
        display: inline-block;
        }
        #div-red{
        background-color: red;
        }
        #div-green{
            background-color: green;
        }
        #div-blue{
            background-color: blue;
        }

    </style>
</head>
<body>
    <div id="div-red">

    </div>
    <div id="div-green">

    </div>
    <div id="div-blue">

    </div>
    
</body>
</html>
1 Like
#30

@mgandali
@mofi

رائع!

2 Likes
#31 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fadi Rustom</title>
<style>
     div{
        color:#fff;
        width: 200px;
        height: 200px;
        padding: 10px;
        margin: 5px;
        display: inline-block;
     }
     #green-div{
        background-color: green;
     }
     #blue-div{
        background-color: blue;
     }
     #red-div{
        background-color: red;
     }
</style>
</head>
   <body>
   <div id="green-div"></div>
   <div id="blue-div"></div>
   <div id="red-div"></div>
   </body> 
  </html>
1 Like
#32

رائع ي فادي إستمر :clap:

1 Like
#33 
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        div{
            display: inline-block;
            width: 150px;
            height: 150px;
            margin: 35px;          
        }

        #Color_Red{
          background-color: red;
        }

        #Color_Green{
          background-color: green;
        }

        #Color_blue{
          background-color: blue;
        }
        body { 
          margin: 0;
        }
    </style>
    <body>

      <div id="Color_Red"></div>
      <div id="Color_Green"></div>
      <div id="Color_blue"></div>
        
    </body>
</html>
1 Like
#34

ممتاز :clap:

#35

بعد الانتهاء ماذا هناك؟

1 Like
#36

إذا أكملت كل الدروس. سيتم طرح المزيد خلال اليومين القادمين

#37 
<!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>boxes</title>
    <style>
        body div{
            width: 200px;
            height: 200px;
            margin: 30px;
            display: inline-block;
        }
        #red-box{
            background-color: red;
        }
        #green-box{
            background-color: green;
        }
        #blue-box{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="red-box"></div>
    <div id="green-box"></div>
    <div id="blue-box"></div> 
</body>
</html>

2019-07-02%2019_44_37-boxes
2019-07-02 19_44_37-boxes.png1366×728 16.6 KB

1 Like
#38

ممتاز :muscle:

1 Like
#39 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> التدرب على الــ ID </title >
    </head>
    <style>
        div{
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 20px;          
        }

        #RedColor{
            background-color: red;
        }

        #GreenColor{
            background-color: green;
        }

        #BlueColor{
            background-color: blue;
        }
    </style>
    <body>
      <div id="RedColor"></div>
      <div id="GreenColor"></div>
      <div id="BlueColor"></div>
    </body>
</html>
1 Like
#40

مهمة التدرب على ال ID
أولاً اكواد html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> id مهمة التدرب على المعرف</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        
        <div id="Red"></div>
        <div id="Green"></div>
        <div id="Blue"></div>
          
    </body>
</html>

ثانياً اكواد css

div{
    display: inline-block;
    width: 400px;
    height: 400px;
    margin: 30px;
}
#Red{
    background-color: red;
}
#Green{
    background-color: green;
}
#Blue{
    background-color: blue;
}
1 Like