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

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#62

Hi Hassan, you did great :+1:

1 Like
#63 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
            div{
                height: 150px;
                width: 150px;
                display: inline-block;
                margin: 20px;
            }
            .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
#64

ممتاز :+1:

#65 
<!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>
</head>
<style>
    .box_red{width:180px;
        height:200px;
    margin:100px;
    display: inline-block;
    border: 50px dashed red;
}
   .box_green{width:180px;
        height:200px;
    margin:100px;
    display: inline-block;
    border: 50px dashed green;}
</style>
<body>
    <div class="box_red"></div>
    <div class="box_green"></div>
    <div class="box_red"></div>
</body>
</html>

Capture
Capture.PNG1812×638 1.16 KB

1 Like
#66

حلو الإبداع :exploding_head:

ملاحظة واحدة: تشوفي في عندنا خواص مشتركة بين القاعدتين والي هم التالي:

width:180px;
height:200px;
margin:100px;
display: inline-block;

من الأفضل نخرجهم لقاعدة عامة تستهدف كل عناصر الـ div، جربي فصلها في قاعدة منفصلة و وريني النتيجة

#67 
<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>test2</title>
       <style>
       	div {
       		width:100px;
       		height:100px;
       		border: 40px;
       		display:inline-block;
       		padding:20px;
       		margin:20px;
       		box-sizing: border-box;

       	}
       	.uppor{
       		background-color:red;
       		
       	}
       	#acer_n{
       		background-color:green;
    
    </style>
    </head>
    <body>
    	<div class="uppor"></div>
    	<div id="acer_n"></div>
    	<div class="uppor"></div>
    </body>
    </html>
1 Like
#68

image
image.png1440×900 59.7 KB

1 Like
#69 
<!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{
            display: inline-block;
            width: 75px;
            height: 75px;
            margin: 15px;
        }
        .same{
            background-color: red;
        }
        .different{
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="same"></div>
    <div class="different"></div>
    <div class="same"></div>
    
</body>
</html>

هل هناك قواعد لتسمية ال class؟

1 Like
#70

نعم، تطرقنا لها في هذا الدرس:
https://coretabs.net/classroom/frontend/القوائم-في-صفحات-الويب/الـ-id-و-الـ-class/اتفاقيات-تسمية-المعرفات-في-لغة-css

2 Likes
#71 
<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <meta name= viewport content= width=device-width, initial-scale=1> <!--توافقية الموبايل -->
            <title>Class Test </title>
            <style>
                div{
                width: 50px;
                height: 50px;
                padding: 10px;
                margin: 5px;
                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>
1 Like
#72 
<!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{
            display: inline-block;
            width: 250px;
            height: 300px;
            margin: 10px;
            
        }
       .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>

image
image.png1366×768 60.4 KB

1 Like
#73

4
4.PNG1366×768 113 KB
5
5.PNG1366×768 98.9 KB

1 Like
#74 
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="normalize.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>STORE</title>
    <link rel="stylesheet" href="css/style.css">
  </head>

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

</html>


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

.red {
	background-color: red;
}

#green {
	background-color: green;
}
1 Like
#75

كل شئ ممتاز محمد :star_struck: :clap:

#76 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
           div{
             display:inline-block;
             width:200px;
             height:200px;
             margin:10px;
           }
           .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
#77

مية مية :+1:

#78 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>   class   </title>
    </head>
    <style>
        div{
            display: inline-block;
            width: 150px;
            height: 150px;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
    <body>
        
        <div class="red"></div>
        <div class="green"></div>
        <div class="red"></div>
        
    </body>
</html>
1 Like
#79 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class</title>
    <style>

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

        .green-box{
            background-color: green;
        }


    
    </style>
</head>
<body>
    <div class="red-box"></div>
    <div class="green-box"></div>
    <div class="red-box"></div>
</body>
</html>
1 Like
#80

مهمة التدرب على الـ Class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
1 Like
#81 
<!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>rectangles</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            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>
1 Like