WebProject/chill.html at main · TTAAAN/WebProject · 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="./assets/icon.png">
    <title>Chill Spot Recommendation</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/root.css">
    <link rel="stylesheet" href="components/navbar.css">
    <link rel="stylesheet" href="components/form.css">
    <link rel="stylesheet" href="components/button.css">
    <link rel="stylesheet" href="components/featured-card.css">
    <link rel="stylesheet" href="components/footer.css">
    <link rel="stylesheet" href="components/card.css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<header class="site-header">
    <nav class="navbar">
        <div class="brand-name">
            <img src="assets/icon.png" alt="TosTovSiemReap Logo" class="brand-name__logo">
            <span class="brand-name__title">TosTovSiemReap</span>
        </div>

        <button class="navbar__hamburger" id="hamburger">
            <span class="hamburger__line"></span>
            <span class="hamburger__line"></span>
            <span class="hamburger__line"></span>
        </button>

        <ul class="navbar__links" id="navbar-menu">
            <li class="navbar__item"><a class="navbar__item-link" href="index.html">Home</a></li>
            <li class="navbar__item"><a class="navbar__item-link" href="food.html">Food</a></li>
            <li class="navbar__item"><a class="navbar__item-link navbar__link--active" href="chill.html">Chill Spot</a>
            </li>
            <li class="navbar__item"><a class="navbar__item-link" href="historical.html">Historical Site</a></li>
        </ul>
    </nav>
</header>
<main class="page-main">
    <section class="hero hero--chill">
        <div class="hero__overlay"></div>
        <div class="hero__content">
            <p class="eyebrow">No stress. No rush</p>
            <h1 class="hero__content-title">Explore Chill Spots</h1>
            <p class="hero__content-sub">Discover places to relax and unwind in the heart of Siem Reap.
            </p>
        </div>
    </section>
    <section class="feature-cards">
        <h2 class="feature-cards__title">What makes Siem Reap perfect for chilling?</h2>
        <div class="feature-cards__list">
            <article class="feature-cards__card">
                <div class="badge">01</div>
                <p>Riverside cafés offer calm views and a quiet atmosphere.</p>
            </article>
            <article class="feature-cards__card">
                <div class="badge">02</div>
                <p>Hidden gardens and lounges create a peaceful escape from the city.</p>
            </article>
            <article class="feature-cards__card">
                <div class="badge">03</div>
                <p>Spas and wellness centers help you relax your body and mind.</p>
            </article>
            <article class="feature-cards__card">
                <div class="badge">04</div>
                <p>Sunset spots give you beautiful views to end your day calmly.</p>
            </article>
        </div>
    </section>
    <section class="card">
        <img src="assets/The Spa Siem Reap.jpg" alt="The Spa Siem Reap" class="card-img">

        <div class="card-content">
            <h2>The Spa Siem Reap</h2>
            <p>
                A peaceful spa offering calming treatments and a quiet environment, perfect for relaxing your body and clearing your mind after a long day.
            </p>
            <div class="button-group">
                <button class="button">View Gallery</button>
                <a class="map-btn" href="https://maps.app.goo.gl/pKCHSLty8omUJof47" target="_blank">
                    <i class="fas fa-map-marker-alt"></i>
                </a>
            </div>
        </div>
    </section>
    <section class="card reverse">
        <img src="assets/Relax Spa.jpg" alt="Relax Spa" class="card-img">
        <div class="card-content">
            <h2>Relax Spa</h2>
            <p>
                A comfortable and quiet space known for its gentle massage and relaxing atmosphere, ideal for unwinding and escaping the busy city.
            </p>
            <div class="button-group">
                <button class="button">View Gallery</button>
                <a class="map-btn" href="https://maps.app.goo.gl/8RsGWp9qi8pysB996" target="_blank">
                    <i class="fas fa-map-marker-alt"></i>
                </a>
            </div>
        </div>
    </section>
    <section class="card">
        <img src="assets/Snack & Relax Cafe.jpg" alt="Snack & Relax Cafe" class="card-img">
        <div class="card-content">
            <h2>Snack & Relax Cafe</h2>
            <p>
                A cozy café with a calm vibe, offering simple drinks and a quiet space where you can sit, relax, and enjoy a slow afternoon.
            </p>
            <div class="button-group">
                <button class="button">View Gallery</button>
                <a class="map-btn" href="https://maps.app.goo.gl/K5WZQ6PSptM5aB5d8" target="_blank">
                    <i class="fas fa-map-marker-alt"></i>
                </a>
            </div>
        </div>
    </section>
</main>
<footer class="site-footer">
    <div class="brand-name">
        <img src="assets/icon.png" alt="TosTovSiemReap Logo" class="brand-name__logo">
        <span class="brand-name__title">TosTovSiemReap</span>
    </div>
    <p class="site-footer_copyright">© 2026 TosTovSiemReap. All rights reserved.</p>
</footer>

<script>
    const hamburger = document.getElementById('hamburger');
    const navbarMenu = document.getElementById('navbar-menu');

    hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('hamburger-toggled');
        navbarMenu.classList.toggle('hamburger-toggled');
    });

    // Close menu when a link is clicked
    const navLinks = navbarMenu.querySelectorAll('a');
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            hamburger.classList.remove('hamburger-toggled');
            navbarMenu.classList.remove('hamburger-toggled');
        });
    });


</script>
</body>
</html>