kreta.github.io/contact.html at main · CptMacTavish2224/kreta.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"> 	<!-- setting the character encoding for the document-->
	<meta name="keywords" content="Nocleg, Grecja, Morze, Mieszkanie, Wakacje, Rezerwacja, Greece, Crete, Booking, Accomodation, Sea, Lodging"> 	<!-- adding meta keywords for SEO purposes -->
	<meta name="description" content="Wynajem domu na krecie | House rental in Crete"> 	<!-- adding a description of the website for SEO purposes -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 	<!-- setting the viewport to make the website responsive -->
	<link rel="stylesheet" href="style.css" <!-- linking to an external CSS file for styling -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> <!-- importing the material symbols rounded from google fonts -->
	<title> Villa Barbara - Contact </title>
</head>
<body>
<!-- backlink to the main page -->
    <a href="index.html" class="back-link">
        <img src="return.png" alt="Back to Main Page" />
    </a>
    <header> <!-- Main header with page title and description -->
        <h1>Contact</h1>
        <p>How to book your place at the Villa</p>
    </header>
<main>
    <section>
        <article class="special_width">
            <h2>Booking Calendar</h2> <!-- calendar heading -->
            <div class="calendar-container">
                <header class="calendar-header">
                    <div class="calendar-navigation"> <!-- previous and next month buttons -->
                        <span id="calendar-prev" class="material-symbols-rounded">chevron_left</span> <!-- previous month -->
                        <p class="calendar-current-date"></p> <!-- placeholder for current -->
                        <span id="calendar-next" class="material-symbols-rounded">chevron_right</span> <!-- next month -->
                    </div>
                </header>

                <div class="calendar-body">
                    <ul class="calendar-weekdays"> <!-- weekday labels for the calendar -->
                        <li>Mon</li>
                        <li>Tue</li>
                        <li>Wed</li>
                        <li>Thu</li>
                        <li>Fri</li>
                        <li>Sat</li>
                        <li>Sun</li>
                    </ul>
                    <ul class="calendar-dates"><!-- dates of the current month will be dynamically populated here --></ul>
                </div>
            </div>
        </article>
    </section>
</main>
    <script src="script.js"></script>
</body>
</html>