تسليم حلول: مهمة تمميز الرابط الفّعال

مرحباً جميعاً

المهمة المطلوبة:

بإمكانك الإطلاع عليها من هنا

طريقة مشاركة الأكواد التي قمت بكتابتها:

قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات

```
هنا ضع الأكواد
```

شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق

4 Likes

INDEX.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>Document</title>
    <link rel="stylesheet" href="css/Style3.css">


</head>

<body>
<nav>
  <ul class="navbar">
    <li><a class="current" href="#" class=>home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a></li>
    <li><a href="news.html">news</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>
<section>
  <h1>Home Page</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ducimus possimus qui est a enim. Odio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ducimus possimus qui est a enim. Odio.</p>
</section>
</body>
</html>

NEWS.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>Document</title>
    <link rel="stylesheet" href="css/Style3.css">


</head>

<body>
<nav>
  <ul class="navbar">
    <li><a href="index3.html">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a></li>
    <li><a class="current" href="#">news</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</nav>
<section>
  <h1>Last News</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ducimus possimus qui est a enim. Odio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ducimus possimus qui est a enim. Odio.</p>
</section>
</body>
</html>

CSS

.body {
    margin: 0;
    
  }
  .navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: aquamarine;
    text-align: center;
    
  }

  .navbar li {
    display: inline-block;
  }

  .navbar a {
    display: block;
    text-decoration: none;
    font-size: 18px;
    text-transform: capitalize;
    padding: 0 20px;
    line-height: 50px; 
    transition-duration: .3s;
  }
  .navbar a:hover, .current {
    background-color: #1880d4;
    color: aliceblue;
  }
  section {
    text-align: center;
    margin-top: 80px;
  }
  section p {
    width: 700px;
    margin: 0 auto;
    font-size: 18px;     
  }
1 Like

ممتاز بن يحيى، كذلك قوم بتطبيقها في موقع المتجر :sunglasses:

رابط المعاينة: اضغط هنا

index.html


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE STORE</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <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 class="active"><a href="index.html">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>&copy; 2018 All Rights Reserved.</p>
    </footer>

</body>

</html>

css

body {
    margin: 0;
    font-family: 'Questrial', sans-serif;
}

header {
    height: 80px;
    border-bottom: 1px dashed #ccc;
}

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

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

.navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    border-bottom: 1px dashed #ccc;
}

.navbar li {
    display: inline-block;
}

.navbar a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 18px;
    color: #222;
    line-height: 50px;
    transition-duration: 0.5s;
}

.navbar a:hover {
    color: #fff;
    background-color: #333333;
}
.active a {
    color: #fff;
    background-color: #333333;
}


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

}

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

}

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

main img {
    margin: 1%;
    height: 335px;
    width: 290px;
    box-sizing: border-box;
    transition-duration: 0.5s;
}

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

main div {
    margin: 6% auto 9% auto;

}

main a {
    color: #000;
    border: 1px solid;
    padding: 10px;
    text-decoration: none;
    transition-duration: 0.5s;
}

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

footer {
    background-color: #191919;
    padding: 6px;

}

footer p {
    color: #ccc;
    text-align: center;
}
2 Likes

ممتاز @mohamed1 عمل جميل :star_struck:

أرى أنك قمت بحل مشكلة واجهتك بطريقة ذكية، بإسناد الكلاس للعنصر li ومن ثم إستهداف الرابط الذي بداخلة.

هل هذا صحيح أم قمت بهذا الشئ من البدأية؟

2 Likes

شكراً لك :heart_eyes:
بالبداية وضعته داخل الرابط ولكن واجهت مشاكل
الى ان وضعت الكلاس للعنصر li واستهدفت الرابط

2 Likes

بالفعل كنت عارف أنك حليتها :sunglasses:

راح ابعث لك رسالة خاصة نناقش سبب ذلك وكيف ممكن نخلي التنسيقات يتم تطبيقها بإسناد الكلاس للرابط مباشرة عشان ما نطول في موضوع تسليم المهام. فإذا كنت فاضي الان أخبرني أو في أي وقت اخر ابعث لي انت

2 Likes

اكيد من دواعي سروري ماعندي شيء الان فاضي

1 Like

ملف html

<!DOCTYPE html>
<html>

<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">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet">
    <title>My Store</title>
</head>

<body>
    <header>
        <h1>STORE</h1>
        <nav>
            <ul class="navbar">
                <li><a href="indext.html" class="active">home</a></li>
                <li><a href="featured.html" >featured</a></li>
                <li><a href="woman.html" >woman</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>&copy; 2018 All Rights Reserved.</p>
    </footer>

</body>

</html>

ملف CSS

body {
          margin: 0;
          padding: 0;
        }
        header {
           margin: 0;
           padding: 0;
           height: 80px;
        }
        h1 {
           margin: 0;  
           padding: 15px 0;
           text-align: center;
           background-color: #23475f;
           color: #fff;
           font-size: 24px;
           letter-spacing: 6px;
           line-height: 30px;
           font-family: 'Baloo Bhai', cursive;
        }
        .navbar {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
            border-top: 1px dashed #000;
            border-bottom: 1px dashed #000;
        }
        .navbar li {
            display: inline-block;
        }
        .navbar a {
            display: block;
            text-decoration: none; 
            padding: 12px 12px;
            color: #23475f;
            font-size: 18px;
            font-family: serif;
            text-transform: capitalize;
            line-height: 20px;
            transition-duration: .3s;
        }
        .navbar a:hover {
            background-color: #00d1b1;
            padding: 10px;
        }
        .active {
            background-color: #ccc;
            color: #fff;
            font-family: sans-serif;
        }
        main {
        max-width: 960px;
        margin: 90px auto 90px auto;
        text-align: center;
        
        }
        
        main h2 {
        font-size: 30px;
        font-weight: normal;
        margin: 0;
        font-family: 'Fjalla One', sans-serif;
        }
        
        main p {
        color: #23475f;
        font-size: 18px;
        font-family: 'Inconsolata', monospace;
        }
        main img {
        margin: 1%;
        height: 335px;
        width: 290px;
        box-sizing: border-box;
        transition-duration: .5s;
        }
        main img:hover {
        padding: 16px;
        background-color: #fff;
        }
        main div {
        margin: 6% auto 9% auto;
        
        }
        main a {
        color: #000;
        border: 1px solid;
        padding: 10px;
        text-decoration: none;
        transition-duration: .3s;
        }
        main a:hover {
        background-color: #222;
        color: #fff;
        border-color: #222;
        }
        footer {
        background-color: #23475f;
        height: 50px;
        text-align: center;
        line-height: 18px;
        padding: 8px;
        margin-bottom: 0;
        }
        footer p {
        color: #fff;
        }
1 Like

عمل جميل سفيان :sunglasses::clap:

ملاحظة: تأكد من كتابتك index بدلاً من indext في الرابط :grin:


الشئ الأخر، كما تلاحظ في القاعدة التي قمت بكتابتها:

 .active {
            background-color: #ccc;
            color: #fff;
            font-family: sans-serif;
        }

أنك أعطيت الخط لون أبيض ولكن لم يتم تطبيق ذلك!

قم بمحاولة حل هذه المشكلة وجعل هذه الخاصية يتم تطبيقها.

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

وسوا توصلت لحل اما لا قم بالرجوع الي بالرسائل الخاصة حتى نناقشها مع بعض :blush:

2 Likes

سوف اقوم بذلك اخي شكرا لك :green_heart::pray:

2 Likes

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|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="#" class="active">home</a></li>
                    <li><a href='features.html'>Featured</a></li>
                    <li><a href="#">womam</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>

css code

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

}
header h1 a{
    color: #222222;
    text-decoration: none;
}
main {
   max-width: 950px; 
   margin: 90px auto 90px auto;
   text-align: center; 
}
main h2 {
    font-size: 30px;
    font-weight: normal;
    margin: 0px;
}
main p{
    color: #999999;
    font-size: 18px;
}
main div {
    margin: 60px 0 60px 0;
}
main img {
    margin: 10px;
    width: 290px;
    height: 335px;
    transition-duration: 0.4s;
}
main img:hover{
    padding: 20px;
    background-color: #cccccc;
    box-sizing: border-box;
}
main a {
    margin: 0 auto 0 auto;
    width: 160px;
    height: 40px;
    border: 2px solid #cccccc;
    color: #666666;
    text-decoration: none;
    padding: 5px;
    display: block;
    line-height: 40px;
    font-size: 20px;
    transition-duration: 0.4s;
}
main a:hover{
    background-color: #222222;
    color: #ffffff;
    border-color: #222222;
}
footer {
    text-align: center;
    background-color: #222222;
    color: #999999;
    height: 50px;
    line-height: 50px;
}
.navbar {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    text-align: center;
    border-top: 1px dotted #cccccc;
    border-bottom: 1px dotted #cccccc;
}
.navbar a {
    text-decoration: none;
    font-size: 20px;
    text-transform: capitalize;
    color: #999999;
    transition-duration: 0.4s;
    display: block;
    padding: 10px 20px;
}
.navbar a:hover,
.active {
    background-color: rgb(96, 102, 100);
    color: white;
}
.navbar li{
    display: inline-block;
}

مازال هناك مشكله عند انتقال الماوس من صورة الى اخري
وايضا لون الخط لم يطبق في الكلاس active

2 Likes

ممتاز أسماء، بالنسبة لمشكلة عدم تطبيق لون الخط في الكلاس active راح أناقشها انا وانتي بالمساء.

مازال هناك مشكله عند انتقال الماوس من صورة الى اخري

هذه المشكلة مرتبطة بإستخدامك للـ box-sizing بداخل الـ selector الخاص بتأثيرات مرور الماوس img:hover.

نريد تطبيق هذه الخاصية في جميع الاحوال بغض النظر عن مرور الماوس من عدمة لهذا قومي بنقل الخاصية box-sizing للـ selector الخاص بالصورة مباشرة main img ومسحها من الـ hover.

3 Likes

تمام سأقوم بذلك

1 Like

INDEX. html

<!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="style.css">
    </head>
    <body>
        <header>
            <h1>
                <a href="index.html">STORE</a>
            </h1>
        </header>
        <nav>
            <ul class="navbar">
                <li><a href="index.html"class="active">home</a></li>
                <li><a href="#">featured</a></li>
                <li><a href="#">woman</a></li>
                <li><a href="#">man</a></li>
                <li><a href="#">kids</a></li>
                <li><a href="more.html">More</a></li>
            </ul>
        </nav>
        <section>
            <h1>Home Page</h1>
            <p>We help you easily find products from around the world, make purchases and deliver with tracking to your doorstep.
                Customs is cleared on your behalf, providing a seamless end-to-end shopping experience.</p>
        </section>
        <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;
}
.navbar{
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px dotted #ccc;
    text-align: center;
}
.navbar li{
    display: inline-block;
}
.navbar a{
    display: block;
    padding: 0 20px;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 18px;
    color: #666;
    font-family: 'Domine', serif;
    line-height: 50px;
    text-align: center;
    transition-duration: .3s;
    
}
.navbar a:hover,
.active{
    background-color: aqua;
}
section{
    text-align: center;
    margin: 80px;
}
section p{
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
}
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;
}

MORE. html

<!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="style.css">
    </head>
    <body>
        <header>
            <h1>
                <a href="index.html">STORE</a>
            </h1>
        </header>
        <nav>
            <ul class="navbar">
                <li><a href="index.html">home</a></li>
                <li><a href="#">featured</a></li>
                <li><a href="#">woman</a></li>
                <li><a href="#">man</a></li>
                <li><a href="#">kids</a></li>
                <li><a href="more.html"class="active">More</a></li>
            </ul>
        </nav>
        <section>
            <h1>More</h1>
            <p>We have no updates for you at this time.
                Please check again later.</p>
        </section>
        <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>

مجلد المشروع
https://1drv.ms/f/s!AgwV2eHcwWsoiEHMXXrxUpQ_F6IW

2 Likes

ممتاز طارق كما هو مطلوب :+1:. في موضوع نحتاج مناقشته في هذا الدرس كما قمت مع الأخرين سأقوم بمراسلتك بخصوصة مساء

1 Like

حضرتك كنت عايزنى فى موضوع نحتاج مناقشته فى هذا الدرس

1 Like

نعم لا تقلق انا مسجلها في المهام لن أنساها :wink:

2 Likes
<!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>
            <nav>
                <ul class="menu">
                    <li><a href="#" class="active">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>
        </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>
body{
    margin: 0;
    font-family: 'Questrial', sans-serif;
}

header {
    font-family: 'Domine', serif;
}

header h1 {
    height: 80px;
    text-align: center;
    font-size: 24px;
    letter-spacing: 6px;
    line-height: 80px;
    margin: 0;
    border-bottom: 1px dotted #ccc;
}

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

header nav {
    height: 50px;
    border-bottom: 1px dotted #ccc;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.menu li {
    display: inline-block;
}

.menu a {
    display: block;
    text-decoration: none;
    text-transform: capitalize;
    color: #666;
    cursor: pointer;
    line-height: 50px;
    padding: 0 18px;
}

.menu a:hover, 
.menu .active {
    background-color: #efefef;
    color: #000;
}


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;
}    
2 Likes

ممتاز :clap:

1 Like