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

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#41 
<!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="index.html">home</a></li>
                    <li><a href="featured.html" class="active">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>
            <section>
                <h2>Featured Products|1</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque alias fugiat esse mollitia voluptatibus labore ad error repellendus repudiandae eaque.</p>
            </section>
            <section>
                    <h2>Featured Products|2</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat iusto eligendi possimus maxime repellendus commodi assumenda cupiditate quae recusandae quis. ipsum dolor sit amet consectetur adipisicing elit. Doloremque alias fugiat esse mollitia voluptatibus labore ad error repellendus repudiandae eaque.</p>
            </section>
            <section>
                    <h2>Featured Products|2</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt facere ad nam minus qui molestias fugiat eligendi quos, obcaecati repellendus accusantium dolorum nihil placeat reiciendis, est, id voluptate. Repudiandae nesciunt officiis quae aut ratione vel libero, sint consequatur. Ratione molestiae omnis eum, doloremque sunt quisquam perferendis? Animi, ipsum mollitia! Quaerat. ipsum dolor sit amet consectetur adipisicing elit. Placeat iusto eligendi possimus maxime repellendus commodi assumenda cupiditate quae recusandae quis. ipsum dolor sit amet consectetur adipisicing elit. Doloremque alias fugiat esse mollitia voluptatibus labore ad error repellendus repudiandae eaque.</p>
            </section>
            <section>
                    <h2>Featured Products|2</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt facere ad nam minus qui molestias fugiat eligendi quos, obcaecati repellendus accusantium dolorum nihil placeat reiciendis, est, id voluptate. Repudiandae nesciunt officiis quae aut ratione vel libero, sint consequatur. Ratione molestiae omnis eum, doloremque sunt quisquam perferendis? Animi, ipsum mollitia! Quaerat. ipsum dolor sit amet consectetur adipisicing elit. Placeat iusto eligendi possimus maxime repellendus commodi assumenda cupiditate quae recusandae quis. ipsum dolor sit amet consectetur adipisicing elit. Doloremque alias fugiat esse mollitia voluptatibus labore ad error repellendus repudiandae eaque.</p>
            </section>
            </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;
}
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;
    height: 40px;
    font-size: 15px;
    list-style: none;
    text-align: center;
    border-top: 1px solid #ccc;
    border-bottom: 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.2s;
}
.nav-bar li a:hover {
    color: #222;
    border-bottom:3px solid #0F0F19;
}
.nav-bar .active {color: rgb(241, 152, 35);
}
/* 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;
}
main section {
    margin: 5px 0;
} 
/* End main */

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

Capture
Capture.PNG1920×1080 246 KB

1 Like
#42

الكود مش متنسق :sweat_smile:

<nav>
            <ul class="nav-bar">
                <li><a href="index.html">home</a></li>
                <li><a href="featured.html" class="active">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>

استفسار بسيط بعد ما خلصنا الورشة الرائعة هنروح على فين؟

1 Like
#43

رائع ي وداد كالعادة متألقة :muscle:

قد تلاحظي انك قمتي بإعطاء الرابط الـ active لون خط باللون الأبيض بالخاصية color: #fff; ولكن يتم تجاهلها ولا يتم تطبيقها على الرابط :thinking:

حاولي تكتشفي هذا الشئ الي مرتبط بما يسمى بالـ CSS Spicifity وإذا إستطعتي حل المشكلة ناقشيها معنا. وللإشارة سيتم التطرق لهذا الموضوع في الدروس التالية خلال الأيام القادمة.

1 Like
#44

أرى انك تجاوزت المشكلة الي تكلمت ان البعض بيواجهوها :star_struck:

فمثلاً لو قمت بكتابة القاعدة التي تستهدف الروابط الـ active بالشكل التالي

.active {
   color: rgb(241, 152, 35);
}

كان سيتم تجاهل الخاصية color وعدم تطبيق اللون المحدد ولكنك كتبتها هكذا

.nav-bar .active {
   color: rgb(241, 152, 35);
}

مما جعل المتصفح يقوم بتطبيقها. هذا الشئ مرتبط بما يسمى بالـ CSS Spicifity هل عندك فكرة عنة :smirk:

1 Like
#45

تبقت وحدة بسيطة في هذه الورشة الي راح نشتغل فيها على القائمة المنسدلة. ومن ثم ورشة سريعة راح نقوم فيها بعمل موقع شخصي نتعلم من خلالها المفاهيم الاساسية الاخرى في الـ HTML و الـ CSS بعدها سنبدأ في الجافاسكربت :sunglasses:.

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

2 Likes
#46

حقيقة ما خت بالى منها ولكن اعرف ان لازم اعطى التعليمات بالتسلسل لعدم حصول مشكل فيما بعد
بحثت عن Spicifity الخصوصية للعنصر :point_down:
https://www.w3schools.com/css/css_specificity.asp

انشاء الله فى اقرب وقت لنكمل التعلم والحصول على الخبرة اللازمة.

1 Like
#47

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="CSS/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.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>
        <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

html{
    background-image: url(/images/be2a940c4ac312bf5abc0aa9677749de.jpg);
}
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;
            }  
            .navbar{
                list-style: none;
                margin: 0;
                padding: 0;
                text-align: center;
                border-top: 1px dotted #ccc;
                border-bottom: 1px dotted #ccc;
                height: 40px;
            }
            .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;
                transition-duration: .2s;
                
            }
            .navbar a:hover, .active{
                border-bottom: 1.50px dotted red;
                background-color:cornsilk;
    
            }
            
            section{
                text-align: center;
                margin-top: 10px;
                border: 2px solid green;
                font-size: 20px;
            }
            .info{
                color:blueviolet;
                font-size: 20px;  
    
            }
1 Like
#48

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

اريد منك تجربة تغيير لون الخط بالكلاس active وسجلي لي ملاحظاتك عن النتيجة.

#49

@Alhakem
I changed the active class color to crimson color. And I have noticed that when I hover over the
sections it change the color to crimson, but when I choose the section the font color return to the original color which is black.

picture11111
picture11111.jpg1588×977 185 KB

1 Like
#50

Great! that has to do with something called CSS specificity.

Read about it and try to figure out how to overcome this issue.

By the way nice background :smiley_cat:

#51

@Alhakem thank you :slightly_smiling_face:

2 Likes
#52

مهمة تمميز الرابط الفعال:
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" class="active">home</a></li>
                    <li><a href="product.html">featured</a></li>
                    <li><a href="#">women</a></li>
                    <li><a href="#">men</a></li>
                    <li><a href="#">kids</a></li>
                    <li><span>more &#9662;</span></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 a,
.navbar span{
    display: inline-block;
    padding: 0 20px;
    line-height: 50px;
    text-decoration: none;
    font-family: 'Domine', serif;
    color: #333;
    cursor: pointer;
    transition: .3s;
}
.navbar a:hover,
.active{
    border-bottom: 1px solid #333;
}
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.6 KB

1 Like
#53

رائع ي مصعب :ok_hand:

أريد منك عمل التجربة التالية:

قم بتغيير لون خط الرابط الفعَال بالخاصية color وقول لي النتيجة وما الذي لاحظتة

1 Like
#54

ماهو قصدك أستاذ؟
يعني لو غيرنا اللون للرابط الفعال يظهر هو الرابط النشط

1 Like
#55

أقصد هو إعطاء الرابط الفعال لون مختلف من خلال القاعدة التالية:

.navbar a:hover,
.active{
    border-bottom: 1px solid #333;
}

وشوف النتيجة هل يتم تطبيق اللون على الرابط الفعال ام لا

1 Like
#56

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="css/style.css">
    </head>
    <body>
        <nav>
            <ul class="navbar">
                    <li><a href="index.html" 
                        class active>home</a></li>
                    <li><a href="#"> featured</a></li>
                    <li><a href="women.html"> women</a></li>
                    <li><a href="#">men</a></li>
                    <li><a href="#"> kids</a></li>
                    <li><a href="#"> more</li>    
                
            </ul>

        </nav>
        
        <header>
            <h1>
                <a href="index.html">STORE</a>
            </h1>
        </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="product.html">More Products</a>
        </main>
        <footer>
            <p>&copy; 2018 All Rights Reserved</p>
            
        </footer>
    </body>
</html>
````
1 Like
#57

CSS

body{
    margin: 0;
    font-family: 'Questrial', sans-serif;
}
.navbar{
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #ccc;
    text-align: center;
    border-bottom: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
    height: 50px;
} 
.navbar li {
    display: inline-block;
}
.navbar a{
    display: block;
    padding: 0 20px ;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 18px;
    color:#fff;
    line-height: 50px;
    transition-duration: .3s;
    font-family: 'Domine', serif;
}
.active{
    background-color: aqua;

}

.navbar a:hover{
    background-color: aqua;
}

       
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;
}  
````
women.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="css/style.css">
    </head>
    <body>
        <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</li>    
                
            </ul>

        </nav>
        
        <header>
            <h1>
                <a href="index.html">STORE</a>
            </h1>
        </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="product.html">More Products</a>
        </main>
        <footer>
            <p>&copy; 2018 All Rights Reserved</p>
            
        </footer>
    </body>
</html>
````
![image|690x367](upload://gnQlbibXYKQEFBiZHuvA7bkrkmK.png)
#58

image
image.png1366×728 128 KB

1 Like
#59

ممتاز يا نبيلة, فقط تأكدي من كتابتك للـ attribute والقيمة الخاصة به بشكل صحيح.

مثلاً قمتي بكتابة الكلاس وقيمتة بالشكل التالي:

class active

بينما يلزمك وضع علامة = و وضع القيمة بين علامتي تنصيص. قومي بإصلاح ذلك

2 Likes
#60

لم اعرف اين ؟