experiencemelbourne-website/index.html at main · Wilma-f/experiencemelbourne-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">

<head>
     <!-- Specify the character encoding for the document -->
    <meta charset="UTF-8" />
     <!-- Ensure the page is responsive on different devices by setting the viewport width -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- Provide a description for search engines and social media platforms -->
    <meta name="description" content="Experience Melbourne" />
    <!-- Set the title of the page, which appears in the browser tab -->
    <title>Experience Melbourne</title>
   <!-- Link to a favicon for the website (small icon in the browser tab). The favicon was created using online tools such as https://www.favicon.cc. -->
    <link rel="icon" type="image/x-icon" href="images/emfavicon.ico" />
    <!-- Link to external CSS files for styling -->
    <link rel="stylesheet" href="general.css" />
    <link rel="stylesheet" href="header.css" />
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="footer.css" />
</head>

<body>
    <!-- The header section of the website-->
    <header>
        <!-- Main heading of the page-->
        <h1>Experience Melbourne</h1>
        <!-- This label and its associated checkbox control the visibility of the menu on smaller screens -->
        <label for="hamburger_checkbox">
            <!-- The hamburger icon used to open and close the menu on mobile devices -->
            <img src="images/Hamburger_icon.svg" alt="Menu" id="hamburger_image">
        </label>
         <!-- The hidden checkbox that toggles the menu visibility when clicked -->
        <input type="checkbox" id="hamburger_checkbox">
         <!-- Navigation menu with links to different pages on the site -->
        <nav>
            <a href="index.html" class="active_nav">Home</a>
            <a href="photos.html">Photos</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header>


<!-- Main content area of the page -->
<main>
    <section>
        <!-- Container to hold the main content of the section -->
        <div class="container">
            <!-- Main image inside container with responsive attributes -->
            <img id="main_image" srcset="images/480w/background_unsplash.jpg 480w,
                                images/960w/background_unsplash.jpg 960w,
                                images/1920w/background_unsplash.jpg 1920w,
                                images/3840w/background_unsplash.jpg 3840w,
                                images/7680w/background_unsplash.jpg 7680w" sizes="(max-width:480px) 480px,
                                (max-width:960px) 960px,
                                (max-width:1920px) 1920px,
                                (max-width:3840px) 3840px,
                                (max-width:7680px) 7680px" src="images/480w/background_unsplash.jpg"
                alt="Melbourne skyline" title="Princes bridge" />
            <!-- Paragraph for image credit with a link to the source -->
            <p class="image-credit">Image credit:
                <a href="https://unsplash.com/@dmjdenise?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
                    target="_blank" rel="noopener noreferrer">Denise
                    Jans </a> on
                <a href="https://unsplash.com/photos/white-bridge-across-city-buildings--gmtAa0Q5MI?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
                    target="_blank" rel="noopener noreferrer">
                    Unsplash</a>
            </p>

            <!--Container for options and actions related to user engagement  -->
            <div class="click-and-ask-options-container">
                <!--Heading for the options container-->
                <h2 class="click-and-ask-headline">Your Melbourne Experience starts here!</h2>
                <!-- Container for a list of clickable options related to Melbourne -->
                <div class="click-and-ask-options">
                    <ul>
                        <li>
                            <a href="photos.html">
                                <span>Sights &amp;<br>Activities</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.booking.com/city/au/melbourne.html?aid=1610687" target="_blank"
                                rel="noopener noreferrer">
                                <span>Exclusive<br>Hotels</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://whatson.melbourne.vic.gov.au/eat-and-drink" target="_blank">
                                <span>Food &amp;<br>Drink</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://whatson.melbourne.vic.gov.au/shop" target="_blank">
                                <span>Shopping &amp;<br>Malls</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://whatson.melbourne.vic.gov.au/visitor-info" target="_blank">
                                <span>Visitor<br>Info</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
    </div></section>
</main>

<footer>
    <p>
    <span property="dct:title">Experience Melbourne &copy;</span> by
            <span property="cc:attributionName">Wilma Fernandes</span> is licensed under
            <br>
        <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank"
            rel="license noopener noreferrer">CC BY-SA 4.0
            <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt="">
            <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt="">
            <img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt="">
        </a>
    </p>
</footer>
</body>
</html>