مهمة: التدرب على تنسيقات القوائم

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

جميل ي حمزة :ok_hand:

1 Like
#22 

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>التدريب على تنسيقات القوائم</title>
            <style>
                body{
                    direction: rtl
                }
                ul li {
                    padding: 10px;
                    margin: 10px;
                    background-color: #e8e7e7;
                    list-style-position: inside;
                }

                ul .check {
                    list-style-image: url('images/check.png')
                }

                ul .delete {
                    list-style-image: url('images/delete.png')
                }
            </style>
        </head>
        <body>
            <ul>
                <ul class="check">
                    <li>دفع بالتقسيط</li>
                    <li>شحن مجاني</li>
                    <li>ضمانه 3 سنوات</li>
                </ul>
                <ul class="delete">
                    <li>قابل للإرجاع</li>
                    <li>قابل للأستبدال</li>
                </ul>
            </ul>
        </body>
    </html>
1 Like
#23

رائع محمود :+1:

#24 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>testing</title>
        <style>
    body{
        direction: rtl;
        font-size: 24px;
        font-weight: bold;
    }
    ul li{
        background-color: #fafafa;
        margin: 10px;
        list-style-position: inside;
        padding: 10px;

    }
    .check{
        list-style-image: url('check.png');
    }
    .delete{
        list-style-image: url('delete.png');
    }
            
    
    </style>
    </head> 
    <body>
        <ul >
            <li class = " check">دفع بالتقسيط</li>
            <li class = " check">شحن مجاني</li>
            <li class = " check">ضمانة 3 سنوات</li>
            <li class = " delete">قابل للارجاع</li>
            <li class = " delete">قابل للاستبدال</li>
        </ul>
    </body> 
</html>
1 Like
#25

رائع محمد :+1:

#26

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 href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <ul>
        <li class="check">دفع بالتقسيط</li>
        <li class="check">شحن مجاني</li>
        <li class="check">ضمانة 3 سنوات</li>
        <li class="delete">قابل للاسترجاع</li>
        <li class="delete">قابل للاستبدال</li>
    </ul>
</body>
</html>

css code

body {
    direction: rtl;
    background-color: #ffff;
    font-family: 'Changa';
}
ul {
    font-size: 30px;
    list-style-position: inside; 
    
}
li {
    background-color: #FAFAFA;
    margin:20px 20px 10px 20px;
    padding: 10px;
    
}
.check {
    list-style-image: url('../images/check-icon2.png');  
}
.delete {
    list-style-image: url('../images/delet-icon2.png');
}
1 Like
#27

مية مية :clap:

1 Like
#28 
<!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>
        body{
            direction: rtl;
        }
        .draw{
            background-color: lightgray;
            color: black;
            padding: 15px;
            margin: 15px;
            font-size: 32px;
            list-style-position: inside;
        }
        .check{
            list-style-image: url('images/check-icon.png')

        }
        .delete{
            list-style-image: url('images/delete-icon.png')

        }

    </style>
</head>
<body>
    <ul>
        <li class="draw check">دفع بالتقسيط</li>
        <li class="draw check">شحن مجانى</li>
        <li class="draw check">ضمانة 3 سنوات</li>
        <li class="draw delete">قابل للارجاع</li>
        <li class="draw delete">قابل للاستبدال</li>
    </ul>
</body>
</html>

Screenshot_2019-05-20%20Document(1)
Screenshot_2019-05-20 Document(1).png1280×910 16.1 KB

2 Likes
#29

جميلة :star_struck: وكل شئ مضبوط

1 Like
#30 
<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
        <title>تنسيقات القوائم</title>
        <style>
            body {
                direction: rtl;
            }

            ul li {
                background-color: #fafafa;
                margin: 5px;
                list-style-position: inside;
                padding: 10px;
                font-size: 32px;
            }

            .check {
                list-style-image: url(check.png);
            }

            .delete {
                list-style-image: url(delete.png);
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="check">دفع بالتقسيط</li>
            <li class="check">شحن مجاني</li>
            <li class="check">ضمانة 3 سنوات</li>
            <li class="delete">قابل للارجاع</li>
            <li class="delete">قابل للاستبدال</li>
        </ul>
    </body>
</html>

Capture2
Capture2.PNG1364×638 17.2 KB

2 Likes
#31

Perfect :+1::+1:

1 Like
#32 
<!DOCTYPE html>
<html>
 <head>
 
   <meta charset="utf-8">
   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>القوائم</title>   
   
   <style>
   
     body{
     	
     	 direction:rtl;
     }
     
     ul{
     	
     	list-style-position:inside;
     	list-style-image:url('Images/check.png');
     	font-size:26px;
    
     	
     }
     
    
     
     ul li {
     	 
       
       background-color:#F8F9F9;
       margin:10px;
       padding:10px;
       
       
     }
     
     .delete{
     	
     	list-style-image:url('Images/delete.png');
     	
     }
     
     
   </style>
 
 </head>
 
 <body>
 
    <ul>
      
       <li>دفع بالتقسيط</li>
       
       <li>شحن مجاني</li>
        
       <li>ضمانه 3 سنوات</li>
         
       <li class="delete">قابل للأرجاع</li>
       
       <li class="delete">قابل للأستبدال</li>
       
    
    
    </ul>
 
  
	     
 </body>
</html>
1 Like
#33 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>practice list </title>
        <style>
            body{
                direction: rtl;
            }
            .items{
                font-size: 25px;
                
            }
            .items li{
                margin: 10px;
                padding: 5px;
                background-color: #FAFAFA;
                list-style-position: inside;
                
            }
            .check{
                list-style-image: url(images/check.png)

            }
            .delete{
                list-style-image: url(images/delete.png)
            }
        </style>
    </head>
    <body>
        
        <ul class="items">
            <li class="check">دفع بالتقسيط</li>
            <li class="check">شحن مجاني</li>
            <li class="check">ضمان 3 سنوات</li>
            <li class="delete">قابل للإرجاع</li>
            <li class="delete">قابل للإستبدال</li>
        </ul>
        
    </body>
</html>
1 Like
#34

@FatenAli
@Noora

الله عليكن :muscle:

2 Likes
#35 
<!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>التدريب على التنسيقات</title>
    <style>
        body{
      direction: rtl;
      font-size: 25px;
        }
        
       li {
            height: 50px;
            width: 300px;
            margin: 10px;
            background-color: rgb(170, 166, 166);
            padding: 5px 10px 0 0;
            list-style-position: outside;
        }
        .check {
            list-style-image: url(images/icon-check.png)
        }
        .delete {
            list-style-image: url(images/icon_delete.png)
        }

    </style>
</head>
<body>
    <ul>
        <li class="check">الدفع بالتقسيط</li>
        <li class="check">شحن مجاني</li>
        <li class="check">ضمانة 3 سنوات</li>
        <li class="delete">قابل للإرجاع</li>
        <li class="delete">قابل للإستبدال</li>
    </ul>
</body>
</html>
1 Like
#36

مية مية :+1::smirk:

1 Like
#37 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>list|style</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
        <style>
            body {
                direction: rtl;
            }
            .list {
                margin: 5px;
                padding: 5px;
                width: 250px;
                font-size: 25px;
                list-style-position: inside;
                background-color: #f1f1f1;
                font-family: 'Tajawal', sans-serif;
            }
            .check {
                border-right: 3px solid #41bb4b;
                list-style-image: url('images/icon_ch.png');
                }
            .delete {
                border-right: 3px solid #c74541;
                list-style-image: url('images/icon_de.png');
                }
        </style>
    </head>
    <body>
      <ul>
          <li class=" list check">دفع بالتقسيط</li>
          <li class=" list check">شحن مجانى</li>
          <li class=" list check">ضمانة 3 سنوات</li>
          <li class="list delete">قابل للارجاع</li>
          <li class="list delete">قابل للاستبدال</li>
      </ul>
    </body>
</html>

Capture
Capture.PNG1920×1080 142 KB

#38

مهمة التدرب على تنسيقات القوائم

<!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>
        body{
            direction: rtl;
            font-size: 24px;
        }
        ul li{
            background-color: #CCC;
            margin: 10px;
            padding: 10px;
            list-style-position: inside;
        }
        .lists .check{
            list-style-image: url(images/check.png);
        }
        .lists .delete{
            list-style-image: url(images/delete.png);
        }
    </style>
</head>
<body>
    <ul class="lists">
        <li class="check">دفع بالتقسيط</li>
        <li class="check">شحن مجاني</li>
        <li class="check">ضمانة ثلاث سنوات</li>
        <li class="delete">قابل للارجاع</li>
        <li class="delete">قابل للاستبدال</li>
    </ul> 
</body>
</html>

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

Capture
Capture.JPG1600×900 53.4 KB

1 Like
#39

Perfect :white_check_mark:

1 Like
#40

Think you :kissing_heart: :kissing_heart::kissing_heart:

1 Like