<!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="Css/Style.css">
</head>
<body>
<header>
<h1><a href="index.html">STORE</a></h1>
<nav>
<ul class="navbar">
<li><a href="index.html" class="active">home</a></li>
<li><a href="featured.html">featured</a></li>
<li><a href="women.html">women</a></li>
<li><a href="men.html">men</a></li>
<li><a href="kids.html">kids</a></li>
<li><a href="more.html">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>©All Rights Reserved</p>
</footer>
</body>
</html>
body{
margin:0;
font-family: 'Questrial', sans-serif;
}
header{
height:80px;
}
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-top:1px dotted #ccc;
border-bottom:1px dotted #ccc;
text-align:center;
height:50p;
}
.navbar li{
display:inline-block;
}
.navbar a{
display:block;
text-decoration:none;
padding:0 20px;
color:#666;
line-height:50px;
text-transform:capitalize;
font-family: 'Domine', serif;
transition-dration:.4s;
}
.navbar a:hover,
.active {
background-color:#222;
color:#fff;
}
main{
max-width:960px;
text-align:center;
margin:110px 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;
}
تـظـهـر عـنـدي مـشـكـلـتـيـن لـون الـخـط فـي الـرابـط الـمـمـيـز لا يتـغـيـر . الأهـتزاز عـنـد الـتـنـقـل يـظـهـر رغـم أنـي أعـطيـت ال navbar أرتفاع ثـابت 50p !!!
، ركزي أنه الإرتفاع الذي جبتيه للـ navbar كتبتي فيه الوحدة 
