תפריט ניווט

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 67 מתוך 76.

אתגר

קל

בפרויקט הזה נבנה ונעצב דף אינטרנט פשוט על טונגה, אי פולינזי יפהפה.

הפרויקט הזה יעזור לך לתרגל CSS באמצעות יישום טכניקות עיצוב מהעולם האמיתי. לאורך הדרך נתמקד במושגים של פריסה חיונית ושל עיצוב רספונסיבי. בפרויקט הזה נשתמש בקובץ CSS חיצוני כדי לעצב את מסמך ה-HTML; אפשר לראות שני קבצים: קובץ ה-HTML וקובץ ה-CSS המקושר, שכבר חובר עבורך. בסוף היחידה הזאת דף האינטרנט שלך ייראה בערך כך:

פעל לפי השלבים הבאים כדי לעצב את תפריט הניווט:

בחר את האלמנט עם המחלקה .menu
החל סגנונות כדי לקבע אותו fixed בחלק העליון של הדף.
הגדר צבע רקע כדי שהוא יבלוט.
הוסף ריווח פנימי כדי ליצור מעט מרווח בתוך התפריט.
הגדר את top ואת left לערך 0 כדי שהתפריט יישאר בחלק העליון של הדף בזמן הגלילה.
הגדר את רוחב התפריט כך שיתפרס על פני כל רוחב הדף.
הגדר את המאפיין z-index לערך 100 כדי לוודא שהוא יישאר מעל כל השאר.

עצב את הקישורים שבתוך התפריט a:

הסר את הקו התחתון שמופיע כברירת מחדל בקישורים באמצעות text-decoration: none;.
הגדר את משקל הגופן למודגש כדי שהקישורים יהיו ברורים וקלים לקריאה.
הוסף שוליים כדי לרווח את הקישורים באופן אחיד.
הגדר צבע טקסט שיוצר ניגוד טוב לרקע כדי להבטיח קריאות טובה.

נסו בעצמכם

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="menu">
            <a href="#">About</a>
            <a href="#">Experience</a>
            <a href="#">Contact</a>
        </nav>    
        <header class="welcome">
            <h1>Swim with Whales in Tonga</h1>
            <p>Experience the magic of swimming alongside majestic humpback whales.</p>
        </header>    
        <section class="about">
            <h2>About Tonga</h2>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Hawaiian_Islands_Humpback_Whale_National_Marine_Sanctuary_breaching_2018.png">
            <p>Tonga is a stunning Polynesian archipelago in the South Pacific, famous for its crystal-clear waters and vibrant marine life. From July to October, humpback whales migrate here to breed, offering a rare chance to swim with these gentle giants. Beyond whale encounters, Tonga boasts pristine beaches, lush tropical landscapes, and a rich cultural heritage. Visitors can explore traditional villages, experience authentic Tongan hospitality, and enjoy activities like snorkeling, diving, and sailing. Whether you're seeking adventure or relaxation, Tonga provides an unforgettable escape into nature’s beauty.</p>
        </section>     
        <section class="contact">
            <h2>Plan Your Adventure</h2>
            <table>
                <tr>
                    <td>Phone Number</td>
                    <td>+676 123 4567</td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td>info@tongawhales.com</td>
                </tr>
            </table>
    </section>
</body>
</html>