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

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

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

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

التنسيقات قمت بها بطريقتك الخاصة :star_struck: وهي بأكمل وجه :+1:

1 Like
#22

انظر الان يا اخي

body {
          margin: 0;
          padding: 0;
          text-align: center;
        }
        header {
           margin: 0;
           padding: 0;
        }
        h1 {
           margin: 0;  
           padding: 15px 0;
        }
        nav {
            margin: 0;
        }
        .navbar {
            margin: 0;
            list-style: none;
            border: 1px dashed #ccb;
        }
        .navbar li {
            margin: 0;
            display: inline-block;
        }
        .navbar a {
            display: bolck;
            text-decoration: none; 
            padding: 0 6px;
            margin: 8px 0;
            color: #A4A1A1;
            font-size: 18px;
            font-family: serif;
            text-transform: capitalize;
        }
        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: #222;
        color: #fff;
        border-color: #222;
        }
        footer {
        background-color: #191919;
        padding: 6px;
        
        }
        footer p {
        color: #ccc;
        text-align: center;
        }
1 Like
#23

الأن كل شئ ممتاز فقط قم بكتابة كلمة block بالشكل الصحيح :grin:.

و قم بإعطاء الروابط padding بحيث تبدو بهذا الشكل بدلاً من إعطائها margin.

image

لماذا نريد padding وليس margin؟
وذلك لان الmargin تقوم بإعطاء مسافة من خارج صندوق الرابط بينما الـ padding تقوم بإعطاء ا لمسافة من داخل صندوق الرابط.

ما الذي سيفرق بين الداخل والخارج؟
عندما تكون المساحة من داخل الرابط يعني بأنه بإمكاننا الضغط على المساحة الفارغة وسيتم إعتبارها كجزء من الرابط مما يعطينى مساحة أوسع للرابط بدلاً من جعل المساحة الفارغة حولة غير قابلة للضغط

2 Likes
#24

هههه هذه من افعال الصيام هههه
شكرا لك اخي على نصائحك.

1 Like
#25

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="#">home</a></li>
                    <li><a href="#">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;
}
.navbar a:hover {
    background-color: rgb(96, 102, 100);
    padding: 10px;
    color: #ffffff;
}
.navbar li{
    display: inline-block;
    padding: 10px 20px;
}
1 Like
#26

متألقة كالعادة أسماء :clap:

  • قمتي بوضع القائمة في المكان الصحيح بداخل الـ header :ballot_box_with_check:

  • أعجبني إختيارك بوضع الحدود من الاعلى والأسفل للنافبار مباشرة :star_struck:

لدي ملاحظة بسيطة:

  • عندما تقومي تنسيق الروابط كأزرار غالباً ستحتاجي لتحويلها إلى عناصر من النوع block حتى نستطيع إعطائها هوامش وحاشية.

لهذا خذي في عين الإعتبار تحويلها وكذلك نقل الـ padding من العناصر .navbar li إلى الروابط مباشرة حتى يكون عندنا زر الرابط كبير وفية مساحة واسعة للضغط عليه وما يكون الضغط علية محصور على النص.

قومي بعمل التعديلات اللازمة واذا كان كلامي مش واضح قولي لي عشان اصيغة بطريقة اخرى :grin:

1 Like
#27

فهمت وسأقوم بالتعديل
جزاكم الله خيرا على المتابعة الدائمه

1 Like
#28

اكواد مستند 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="#">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</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

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{
    background-color: aqua;
}
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
#29
  • قمت بوضع القائمة في المكان الصحيح بداخل الـ header :ballot_box_with_check:
  • التنسيقات مطابقة للمطلوب 100% :muscle:
1 Like
#30

بين hrader و main

1 Like
#31

:grin: فوتها المكان الي انت وضعته فيها لا خاطئ وإنما من الأفضل جعل قائمة التنقل الرئيسية كجزء من الـ header

1 Like
#32

قصد حضرتك عدتها ام اخلى بالى فى القادم

1 Like
#33

لا يوجد مشكلة الذي تراه قم به، اذا كنت قمت بوضعها بدأخل الـ main كنت قلت لك عدلها لكن في هذه الحالة لا يوجد اي مشكلة

1 Like
#34 
<!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="#">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 {
    color: #000;
    background-color: #efefef;
}


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
#35

متألقة كالعادة @Radwa :clap:

1 Like
#36 
<!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>
            <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="#">man</a></li>
                    <li><a href="#">kids</a></li>
                    <li><a href="#">More</a></li>
                </ul>
        </nav>
            </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>
1 Like
#37

ممتاز ي طارق، فقط ركز انك قمت بتكرار وسم الإغلاق

1 Like
#38

:face_with_hand_over_mouth:

<!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>
            <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="#">man</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>
1 Like
#39

مية مية :smile:

1 Like
#40

مرحباً :hatched_chick::baby_chick::baby_chick:

<!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="#">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; 2018 All Rights Reserved</p>
        </footer>
    </body>
</html>

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;
    text-align: center;
    border-bottom: 1px dotted #ccc;

}
.navbar li{
    display: inline-block;
}
.navbar a{
    display: block;
    padding: 0 20px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: 'Domine', serif;
    font-size: 18px;
    color: #666;
    line-height: 50px;
    transition-duration: .3s;
}
.navbar a:hover{
    background-color: #222;
    color: #fff;
}
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;
}

55555555
55555555.gif1365×423 821 KB

3 Likes