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

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#22 
<style>
   .box{
       background-color: crimson;
       height: 50px;
       width: 100px;
       margin: 5px;


   }
   .s{
       width: 100px;

   }
   .m{
       width: 150px;

   }
   .l{
       width: 250px;

   }
</style>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>

Screenshot_2019-05-20%20Screenshot
Screenshot_2019-05-20 Screenshot.png1280×910 715 Bytes

1 Like
#23

كما هو مطلوب :+1:

1 Like
#24

القواعد هنا مضبوطة

1 Like
#25

نعم مضبوطة

1 Like
#26 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Multiple classes</title>
        <style>
            .box {
                background-color: #cd1c54;
                margin: 5px;
                height: 30px;
            }

            .s {
                width: 100px;
            }

            .m {
                width: 150px;
            }

            .l {
                width: 250px;
            }
        </style>
    </head>
    <body>
        <div class="box s"></div>
        <div class="box l"></div>
        <div class="box m"></div>
        <div class="box s"></div>
        <div class="box l"></div>
        <div class="box m"></div>
    </body>
</html>
2 Likes
#27

ممتاز @Radwa كما هو مطلوب :grin:

2 Likes
#28 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>practice class</title>
        <style>
            .box{
                height:30px;
                width: 200px;
                background-color: #CD1C54;
                margin: 5px;
            }
            .s{
                width: 100px;
            }
            .m{
                width: 150p;
            }
            .l{
                width: 250px;
            }
            
        </style>
    </head>
    <body>
        <div class="box s"></div>
        <div class="box l"></div>
        <div class="box m"></div>
        <div class="box s"></div>
        <div class="box l"></div>
        <div class="box m"></div>
    </body>
</html>
1 Like
#29

ممتاز نورا :slightly_smiling_face:

#31 
<!DOCTYPE html>
<html>
 <head>
 
   <meta charset="utf-8">
   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title></title>   
   
   
   <style>
   
    .box{
   	
   	background-color:#BB8FCE;
   	 height:50px;
   	 margin:5px;
    }
    
  
    .s{
    	
    	width:100px;
    	
    }
   
    .m{
   	
    	width:150px;
    }
   
    .l{
    	
    	width:250px;
		
    }
   
   </style>
   
  
 </head>
 
 <body>
 
	<div class="box s"></div>
	
	<div class="box l"></div>
	
	<div class="box m"></div>
	
	<div class="box s"></div>
	
	<div class="box l"></div>
	
	<div class="box m"></div>
	
	
	  
	  	
	     
 </body>
</html>
#32 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>التدريب على الكلاسات المتعدده</title>


    <style>
    .box{
      background-color: red;
      border: : 5px;
      border-color: #1111;
      margin: 10px;
        }
    .s {
      width: 100px;
      height: 50px;
    }
    .m {
      width: 150px;
      height: 50px;
    }
    .l {
      width: 250px;
      height: 50px;
    }

    </style>
<body>
  <div class="box s"></div>
  <div class="box l"></div>
  <div class="box m"></div>
  <div class="box l"></div>
  <div class="box s"></div>
  <div class="box m"></div>
</body>
</html>
1 Like
#33

مية مية :muscle:

1 Like
#34 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>pro|div</title>
        <style>
            .box {
                margin: 5px;
                height: 40px;
                background-color: rgb(172, 65, 99);
            }
            .s {width: 150px;}
            .m {width: 200px;}
            .l {width: 250px;}
        </style>
    </head>
    <body>
        <div class="box s"></div>
        <div class="box l"></div>
        <div class="box m"></div>
        <div class="box s"></div>
        <div class="box l"></div>
        <div class="box m"></div>
    </body>
</html>

Capture
Capture.PNG1920×1080 129 KB

1 Like
#35

مية مية :+1:

#36 
<!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{
background-color:fuchsia;

height: 40px;
margin: 20px;
display:block;


}

.box-s{
 
    width: 100px;
}

.box-l{

    width: 150px;

}
.box-m{

width: 250px;

}

</style>
</head>
<body>

<div class="box-s"></div>
<div class="box-l"></div>
<div class="box-m"></div>
<div class="box-s"></div>
<div class="box-l"></div>
<div class="box-m"></div>
</body>
</html>

image
image.png1366×728 25.1 KB

1 Like
#37

مية مية :star_struck::ok_hand:

1 Like
#38

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

1 Like
#39

راح ارسلك علشان التفاصيل

#40

مهمة التدرب على الكلاسات المتعددة:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>مهمة التدرب على الكلاسات المتعددة</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        .box{
            background-color: #cd1c54;
            height: 40px;
            margin: 20px 0;
        }
        .small{
            width: 100px;
        }
        .medium{
            width: 150px;
        }
        .large{
            width: 250px;
        }
    </style>
</head>
<body>
    <div class="box small"></div>
    <div class=" box large"></div>
    <div class="box medium"></div>
    <div class="box small"></div>
    <div class="box large"></div>
    <div class="box medium"></div>
</body>
</html>

التطبيق على المهمة:

Capture
Capture.JPG1600×900 40.7 KB

1 Like
#41

Perfect :+1:

1 Like
#42 
<!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: 40px;
        box-sizing: border-box;
        margin:5px;
        background-color: red;
    }
    .Small{
           width: 100px;
    }

    .Medium{
        width: 150px;
    }
     .Large{
        width: 250px;
     }
   

</style>
<body>
<header>

</header>
<main>
    <div class="Small"></div>
    <div class="Large"></div>
    <div class="Medium"></div>
    <div class="Small"></div>
    <div class="Large"></div>
    <div class="Medium"></div>
     
</main>
<footer>

</footer>
    </body>
</html>
``````
1 Like