تسليم حلول: مهمة بناء قائمة المتجر

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

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

:ballot_box_with_check: عناصر القائمة في مكان صحيح

والتنسيقات قمت بها على أكمل وجه :+1::star_struck:

1 Like
#42

:clap::clap::star_struck: شكراً
وكل عام وأنت بخير أ. محمد والجميع بخير.:crescent_moon:

1 Like
#43

مهمة بناء قائمة المتجر
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>Store</title>
    <link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
    <link rel="stylesheet" href="style.css">



</head>
<body>
    <header>
            <h1><a href="index.html">Store</a></h1>
    </header>

    <nav>
        <ul class="navbar">
            <li><a href="#">home</a></li>
            <li><a href="#">featured</a></li>
            <li><a href="#">women</a></li>
            <li><a href="#">men</a></li>
            <li><a href="#">kids</a></li>
            <li><a href="#">more</a></li>
        </ul>
    </nav>
    <main>
        <h2>Featured Products</h2>
        <p>Refresh your look with pieces of our collection</p>
        <div>
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg" alt="photo1">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg" alt="photo2">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg" alt="photo3">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg" alt="photo4">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg" alt="photo5">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg" alt="photo6">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img7.jpg" alt="photo7">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img8.jpg" alt="photo8">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img9.jpg" alt="photo9">
        </div>
        <a href="product.html">More products</a>
    </main>

    <footer>
        <p>&copy; 2019 All Right Reserved</p>
    </footer>
</body>
</html>

CSS Code

body{

    margin: 0;
    font-family: 'Questrial', sans-serif;
}    
header{
    height: 80px;
    border-bottom: 1px dotted #666666; 
}

.navbar{

    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px dotted #666666;
    text-align: center;
    
}

.navbar li{

    display: inline-block;
}

.navbar a{

    display: block;
    padding: 0 20px;
    text-decoration: none;
    text-transform: capitalize;
    color: #222;
    line-height: 50px;
    transition-duration: .3s;
}

.navbar a:hover{

    background-color: #222;
    color: #fff;
}
header h1 {
    text-align: center;
    font-family: 'Domine', serif;
    font-size: 24px;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
    text-decoration: none;
    
    
}

header h1 a{
    color: #222;
    text-decoration: none;
    text-transform: uppercase;
    
}

main{
    max-width: 960px;
    text-align: center;
    margin: 90px auto 90px auto;
}

main h2{
    font-size: 30px;
    font-weight: normal;
    margin: 0;
}

main p{
    color: #999;
    font-size: 18px;

}

main div{
    margin: 60px 0 60px 0;
}

main img {
    margin: 10px;
    width: 290px;
    height: 335px;
    box-sizing:border-box;
    transition-duration: .4s;
}

main img:hover {
    padding: 28px;
    background-color: #ddd;
}

main a{
    width: 160px;
    height: 40px;
    display: block;
    margin: 0 auto 0 auto;
    line-height: 40px;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid #ccc;
    color: #ccc;
    transition-duration: .4s;
}

main a:hover{
    background-color: #222;
    color: #fff;
    border-color: #222;
}

footer{
    background-color:#222;
    height: 50px;
    color: #999;
    text-align: center;
    line-height: 50px;
    
    
}
1 Like
#44

وأنت الف خير وعافية :blush:

#45

مية مية حمزة :ok_hand:

1 Like
#46

كــود الـ Html

<!DOCTYPE html>
<html>
 <head>
 
   <meta charset="utf-8">
   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>Store</title>
   
   <link href="https://fonts.googleapis.com/css?family=Domine|Questrial&display=swap" rel="stylesheet">
  
   <link rel="stylesheet" href="Style.css">
   
     
     
  
 </head>
 
 <body>
 
	<header>
	
	  
	  <h1><a href="index.html">STORE</a></h1>
	  
	</header>
	
	<nav>
	  <ul class="navbar">
	  
	    <li><a href="#">home</a></li>
	    <li><a href="#">featured</a></li>
	    <li><a href="#">women</a></li>
	    <li><a href="#">men</a></li>
	    <li><a href="#">kids</a></li>
	    <li><a href="#">more</a></li>
	    
	  </ul>
	</nav>
	
	<main>
	
	  <h2>Featured Products</h2>
	  
	  <p>Refresh your look with pieces of our collection </p>
	  
	  <div>
	  
	  	
	     <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
	  
	     <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
	  
	     <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
	  
	     <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
	  
	     <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
	  
	     <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
	 
	  
	  </div>
	  
	  <a href="Products.html">More products</a>
	  
	</main>
	
	<footer>
	  <p>&copy;All Rights Reserved</p>
	</footer>
 </body>
</html>

كــود الـ Css

body{
      	
       margin:0;
       font-family: 'Questrial', sans-serif;
      	 
      }
      
      
header{
      	
       height:80px;
       border-bottom:1px dotted #ccc;
       
      }
      
header h1{
      	
        margin:0;
        font-family: 'Domine', serif;
        text-align:center;
        font-size:24px;
        line-height:80px;
        letter-spacing:6px;
         
      }
      
header h1 a{
      	
      color:#222;
      text-decoration:none;
      
      }
      
.navbar {
	
	list-style:none;
	margin:0;
	padding:0;
	border-bottom:1px dotted #ccc;
	text-align:center;
	
} 

.navbar li{
	
  display:inline-block;
  line-height:50px;
  
}

.navbar a{
	
	 display:block;
	 text-decoration:none;
     padding:0 20px;
	 color:#222;
     text-transform:capitalize;
     font-family: 'Domine', serif;
     font-size:15px;
     transition-dration:.4s;
}

.navbar a:hover{
	
      background-color:#222;
      color:#fff;
}
   
main{
      	
      	
      max-width:960px;
      text-align:center;
      margin:80px auto 0 auto;
      	
      }
      
main h2{
      	
       font-size:30px;
       font-weight:normal;
       margin:0;
      	
      }
      
main p{
       	
       font-size:18px;
       color:#999;
       	
       
       }
       
main div{
       	
       	
       margin:60px 0 60px 0;
       	
       }
       
       
main img{
       	
       margin:10px;
       width:100%;
       max-width:290px;
       height:100%;
       max-height:335px;
       box-sizing:border-box;
       transition-duration:.4;
       	
       	
       
       }
       
       
main img:hover{
	
       	
       padding:20px;
       background-color:#ddd;
       	
       	
       }
      	
      	
main a{
      	
      
      text-decoration:none;
      color:#666;
      width:160px;
      height:45px;
      display:block;
      line-height:45px;
      font-size:18px;
      border:2px solid #ccc;
      margin:0px auto 0 auto;
      transition-dration:.4s;
      
      }
      
main a:hover{
      	
      background-color:#222;
      color:#fff;
      border-color:#222;
      
      }
      
      
footer{
      	
      background-color:#222;
      height:50px;
      margin-top:80px;
      color:#999;
      text-align:center;
      line-height:50px;

      	
      }
2 Likes
#47

لـو سـمـحـت كـيـف أو بـأي بـرنـامـج تـنـزل الـصوره مـتـحركـه :sweat_smile: !!..

2 Likes
#48

مية مية فاتن

لـو سـمـحـت كـيـف أو بـأي بـرنـامـج تـنـزل الـصوره مـتـحركـه :sweat_smile: !!..

بالنسبة لي أستخدم برنامج Screen to GIF
https://www.screentogif.com

2 Likes
#49

تـسـلـم بـحـمـلـه شـكـرآ لـكـ :smile: …

2 Likes
#50

html code

<!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 href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
        <link rel="stylesheet" href="CSS/style.css">
     
    </head>
    <body>
       
        <header>
            <h1>
                <a href="index.html">STORE</a>
            </h1>
        </header>
         <nav>
            <ul class="navbar">
                <li><a href="#">home</a></li>
                <li><a href="#">featured</a></li>
                <li><a href="#">woman</a></li>
                <li><a href="#">men</a></li>
                <li><a href="#">kids</a></li>
                <li><a href="#">more</a></li>
            </ul>
        </nav>
        <main>
            <h2>Featured Products</h2>
            <p>Refresh your look with pieces of our collection</p>
            <div>
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
            </div>
            <a href="products.html">More Products</a>
        </main>
        <footer>
            <p>&copy; 2018 All Rights Reserved</p>
        </footer>
    </body>
</html>

CSS code

body{
                margin: 0;
                font-family: 'Questrial', sans-serif;
            }
            header{
                height: 80px;
                border-bottom: 1px dotted #ccc;
            }
            header h1{
                text-align: center;
                font-family: 'Domine', serif;
                font-size: 24px;
                letter-spacing: 6px;
                line-height: 80px;
                margin: 0;
            }
            header h1 a{
                color: #222;
                text-decoration: none;
            }
            main {
                max-width: 960px;
                text-align: center;
                margin: 90px auto 90px auto;
            }
            main h2{
                font-size: 30px;
                font-weight: normal;
                margin: 0;
            }
            main p{
                color: #999;
                font-size: 18px;
            }
            main div{
                margin: 60px 0 60px 0;
            }
            main img{
                margin: 10px;
                width: 290px;
                height: 335px;
                box-sizing: border-box;
                transition-duration: .4s;
            }
            main img:hover{
                padding: 20px;
                background-color: #ddd;
            }
            main a{
                width: 160px;
                height: 45px;
                display: block;
                margin: 0 auto 0 auto;
                line-height: 45px;
                text-decoration: none;
                font-size: 18px;
                border: 2px solid #ccc;
                color: #666;
                transition-duration: .4s;
            }
            main a:hover{
                background-color: #222;
                color: #fff;
                border-color: #222;
            }
            footer{
                background-color: #222;
                height: 50px;
                color: #999;
                text-align: center;
                line-height: 50px;
            }  
            .navbar{
                list-style: none;
                margin: 0;
                padding: 0;
                text-align: center;
                border-bottom: 1px dotted #ccc;
            }
            .navbar li{
                display: inline-block;
                
            }
            .navbar a{
                font-size: 18px;
                color: black;
                font-family: "Droid Arabic Kufi", Poppins;
                text-decoration: none;
                text-transform: capitalize;
                display: block;
                padding: 0 20px;
                line-height: 40px;
                
            }
1 Like
#51

ممتاز نورا :+1:

1 Like
#52 
<!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">
        <link rel="stylesheet" href="css/style.css">
        <title>STORE</title>
        <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
        
    </head>
    <body>
        <header>
            <h1>
                <a href="index.html">STORE</a>
            </h1>
            <nav>
                <ul class="navbar">
                    <li><a href="#">home</a></li>
                    <li><a href="#">featured</a></li>
                    <li><a href="#">women</a></li>
                    <li><a href="#">men</a></li>
                    <li><a href="#">kids</a></li>
                    <li><a href="#">more</a></li>
                </ul>
            </nav>
        </header>
        

        
        <main>
            <h2>Featured Products</h2>
            <p>Refresh your look with pieces of our collection</p>
            <div>
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
            </div>
            <a href="products.html">More Products</a>
        </main>
        <footer>
            <p>&copy; 2018 All Rights Reserved</p>
        </footer>
    </body>
</html>


.navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    border-bottom: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
}
.navbar li {
    display: inline-block;
    
}
.navbar a {
    display: block;
    padding: 0 50;
    line-height: 50px;
    width: 100px;
    text-decoration: none;
    color: #666;
    font-family: 'Domine', serif;
    text-transform: capitalize;
    transition-duration: .3s;

}
.navbar a:hover{
    background-color: rgb(199, 193, 193);
    color: #fff;
    border-color: #222;
}
body{
    margin: 0;
    font-family: 'Questrial', sans-serif;
}
header{
    height: 80px;
    
}
header h1{
    text-align: center;
    font-family: 'Domine', serif;
    font-size: 24px;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
}
header h1 a{
    color: #222;
    text-decoration: none;
}

main {
    max-width: 960px;
    text-align: center;
    margin: 90px auto 90px auto;
}
main h2{
    font-size: 30px;
    font-weight: normal;
    margin: 0;
}
main p{
    color: #999;
    font-size: 18px;
}
main div{
    margin: 60px 0 60px 0;
}
main img{
    margin: 10px;
    width: 290px;
    height: 335px;
    box-sizing: border-box;
    transition-duration: .4s;
}
main img:hover{
    padding: 20px;
    background-color: #ddd;
}
main a{
    width: 160px;
    height: 45px;
    display: block;
    margin: 0 auto 0 auto;
    line-height: 45px;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid #ccc;
    color: #666;
    transition-duration: .4s;
}
main a:hover{
    background-color: #222;
    color: #fff;
    border-color: #222;
}
footer{
    background-color: #222;
    height: 50px;
    color: #999;
    text-align: center;
    line-height: 50px;
}
1 Like
#53 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>STORE</title>
        <link href="https://fonts.googleapis.com/css?family=Domine|Questrial" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- start header -->
        <header>
            <h1>
                <a href="index.html">STORE</a>
            </h1>
        </header>
        <nav>
                <ul class="nav-bar">
                    <li><a href="#home">home</a></li>
                    <li><a href="#featured">featured</a></li>
                    <li><a href="#women">women</a></li>
                    <li><a href="#men">men</a></li>
                    <li><a href="#kids">kids</a></li>
                    <li><a href="#more">more</a></li>
                </ul>
            </nav>
        <!-- End header -->

        <!-- start main -->
        <main>
            <h2>Featured Products</h2>
            <p>Refresh your look with pieces of our collection</p>
            <div>
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg">
                <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg">
            </div>
            <a href="products.html">More Products</a>
        </main>
        <!-- End main -->

        <!-- start footer -->
        <footer>
            <p>&copy; 2018 All Rights Reserved</p>
        </footer>
        <!-- End footer -->
    </body>
</html>

/* start global */
body{
    margin: 0;
    font-family: 'Questrial', sans-serif;
}
/* End global */

/* start main header */
header{
    height: 80px;
    border-bottom: 1px dotted #ccc;
}
header h1{
    text-align: center;
    font-family: 'Domine', serif;
    font-size: 24px;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
}
header h1 a{
    color: #222;
    text-decoration: none;
}
.nav-bar {
    margin: 0;
    padding: 0;
    font-size: 15px;
    list-style: none;
    text-align: center;
    border: 1px solid #ccc;
}
.nav-bar li {
    display: inline-block;
}
.nav-bar li a {
    color: #94989B;
    padding: 0 20px;
    display: block;
    line-height: 40px;
    text-decoration: none;
    text-transform: capitalize;
    transition-duration: 0.5s;
}
/* .nav-bar li a::before {content: "| "} */
.nav-bar li a:hover {
    color: #fff;
    background-color: #0F0F19;
}
/* End main header */


/* start main */
main {
    max-width: 960px;
    text-align: center;
    margin: 90px auto 90px auto;
}
main h2{
    font-size: 30px;
    font-weight: normal;
    margin: 0;
}
main p{
    color: #999;
    font-size: 18px;
}
main div{
    margin: 60px 0 60px 0;
}
main img{
    margin: 10px;
    width: 290px;
    height: 335px;
    box-sizing: border-box;
    transition-duration: .4s;
}
main img:hover{
    padding: 20px;
    background-color: #ddd;
}
main a{
    width: 160px;
    height: 45px;
    display: block;
    margin: 0 auto 0 auto;
    line-height: 45px;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid #ccc;
    color: #666;
    transition-duration: .4s;
}
main a:hover{
    background-color: #222;
    color: #fff;
    border-color: #222;
}
/* End main */

/* start footer */
footer{
    background-color: #222;
    height: 50px;
    color: #999;
    text-align: center;
    line-height: 50px;
}
/* End footer */

Capture
Capture.PNG1920×1080 299 KB

1 Like
#54

رائع ي وداد كله مضبوط :muscle:

ملاحظة واحدة فقط:

قمتي بإعطاء الروابط عند تمرير الماوس عليها لون border بالشكل التالي:

border-color: #222;

في هذه الحالة لا يوجد أي تأثير لهذه الخاصية لانه الرابط أصلاً لا يملك border لذا لا يوجد داعي لكتابتها

1 Like
#55

سابقنا بخطوات بطريقة كتابتك للأكواد وإستخدام الـ class والتعليقات :star_struck::+1:

ملاحظة واحدة فقط:

قمت بإعطاء الـ navbar الخاصية border من جميع الإتجاهات والذي يعني بأنه بيكون عندنا حدود من اليمين واليسار وهذا ما قد لا نريده لهذا خذ ذلك في عين الإعتبار

2 Likes
#56

هذا خطأ فادح :joy:

border-bottom: 1px solid #ccc;
1 Like
#57

هذا خطأ فادح :joy:

:joy: تحصل كثير

2 Likes
#58

مهمة بناء قائمة المتجر:
HTML:

<!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>Store</title>
    <link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
            <h1><a href="index.html">Store</a></h1>
            <nav>
                <ul class="navbar">
                    <li><a href="index.html">home</a></li>
                    <li><a href="">featured</a></li>
                    <li><a href="#">women</a></li>
                    <li><a href="#">men</a></li>
                    <li><a href="#">kids</a></li>
                    <li><a href="#">more</a></li>
                </ul>
            </nav>
    </header>

    <main>
        <h2>Featured Products</h2>
        <p>Refresh your look with pieces of our collection</p>
        <div>
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img1.jpg" alt="photo1">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img2.jpg" alt="photo2">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img3.jpg" alt="photo3">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img4.jpg" alt="photo4">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img5.jpg" alt="photo5">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img6.jpg" alt="photo6">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img7.jpg" alt="photo7">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img8.jpg" alt="photo8">
            <img src="https://demos.coretabs.net/frontend-basics-workshop/img/img9.jpg" alt="photo9">
        </div>
        <a href="product.html">More products</a>
    </main>

    <footer>
        <p>&copy; 2019 All Right Reserved</p>
    </footer>
</body>
</html>

CSS:

body{

    margin: 0;
    font-family: 'Questrial', sans-serif;
}    
header{
    height: 80px;
    border-bottom: 1px dotted #666666; 
}

header h1 {
    text-align: center;
    font-family: 'Domine', serif;
    font-size: 24px;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
    text-decoration: none;
    
    
}

header h1 a{
    color: #222;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar{
    border-bottom: 1px dotted #333;
    list-style: none;
    text-align: center;
    text-transform: capitalize;
    margin: 0;
    padding: 0;
    height: 50px;
}
.navbar li{
    display: inline-block;
    padding: 0;
    margin: 0;
}
.navbar li a{
    text-decoration: none;
    color: #333;
    display: block;
    padding: 0 20px;
    font-family: 'Domine', serif;
    line-height: 50px;
}
main{
    max-width: 960px;
    text-align: center;
    margin: 90px auto 90px auto;
}

main h2{
    font-size: 30px;
    font-weight: normal;
    margin: 0;
}

main p{
    color: #999;
    font-size: 18px;

}

main div{
    margin: 60px 0 60px 0;
}

main img {
    margin: 10px;
    width: 290px;
    height: 335px;
    box-sizing:border-box;
    transition-duration: .4s;
}

main img:hover {
    padding: 28px;
    background-color: #ddd;
}

main a{
    width: 160px;
    height: 40px;
    display: block;
    margin: 0 auto 0 auto;
    line-height: 40px;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid #ccc;
    color: #ccc;
    transition-duration: .4s;
}

main a:hover{
    background-color: #222;
    color: #fff;
    border-color: #222;
}

footer{
    background-color:#222;
    height: 50px;
    color: #999;
    text-align: center;
    line-height: 50px;
}

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

Capture
Capture.JPG1600×900 77.9 KB

1 Like
#59

رائع مصعب :+1::star_struck:

الأكواد جميعها كما يجب أن تكون :muscle:

والتنسيقات مطابقة لما في التصميم :ballot_box_with_check:

1 Like
#60

شكرا أستاذ @Alhakem :heart_eyes: :heart_eyes: :heart_eyes:

1 Like