-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (134 loc) · 6.78 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Sample Website</title>
</head>
<body>
<header>
<div class="nav-container">
<div class="logo-container">
<a href="./index.html"><img src="./img/Poursome-logo.svg" alt="logo"></a>
<!-- <h1>Studio<sup id="registered">®</sup></h1> -->
</div>
<div class="main-nav">
<ul class="nav-menu">
<li>
<a href="./about.html">Why Poursome?</a>
</li>
<li>
<a href="./cafelist.html" id="hero-cta">View Cafés</a>
</li>
</ul>
<!-- The hamburger -->
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<!-- The hamburger -->
</div>
</div>
</header>
<main>
<section class="banner-container">
<h1>We curate the best cafés in the heart of Toronto.</h1>
<h2>Find your next go-to spot to work, sip coffee, and unwind in the coziest cafés around the six.</h2>
<a href="./cafelist.html">Browse our café list</a>
<img src="./img/hero-slurper.svg" alt="Hero Slurper Banner">
</section>
<section>
<h1 class="section-title">Recently added cafés</h1>
<div class="wrapper">
<div class="card-item">
<img src="./img/balzac-card-hero.png" alt="Balzac's Distillery" class="card-img">
<h1>Balzac's Distillery District</h1>
<p class="cafe-address">1 Trinity St, Toronto<br>ON M5A 3C4</p>
<p>JB & Hailey's fave. Relaxed local-chain venue serving artisanal coffees, baked products & sweet treats.</p>
<a href="https://maps.app.goo.gl/HTn7QS2oDp7mdq9f8" target="_blank">View on the map</a>
</div>
<div class="card-item">
<img src="./img/starbuckskingwest-card-hero.png" alt="Strabucks King West" class="card-img">
<h1>Starbucks King Street West</h1>
<p class="cafe-address">625 King St W, Toronto<br>ON M5V 1M5</p>
<p>Seattle-based coffeehouse chain known for its signature roasts, light bites and WiFi
availability. The barista's are very friendly and ample sockets.</p>
<a href="https://maps.app.goo.gl/BNpW9dJpj521FNvp7" target="_blank">View on the map</a>
</div>
<div class="card-item">
<img src="./img/rooms-card-hero.png" alt="Rooms 17 Baldwin" class="card-img">
<h1>Rooms 17 Baldwin</h1>
<p class="cafe-address">17 Baldwin St, Toronto<br>ON M5T 1L1</p>
<p>Rooms is a cozy café known for its minimalist design, specialty coffee, and welcoming atmosphere—ideal for both work and relaxation.</p>
<a href="https://maps.app.goo.gl/eEWwgYD2LmaFBsWA9" target="_blank">View on the map</a>
</div>
<a href="./cafelist.html" style="margin-top: 60px;">View more cafés</a>
</div>
<!-- Categories -->
<br><br>
<h1 class="section-title">We feature cafés based on these key categories.</h1>
<p class="section-p">Whether it's for a quiet work session or a casual meetup, each spot offers reliable
Wi-Fi, a welcoming ambiance, and great coffee. You can trust that every café we feature is optimized for
productivity and comfort, making it the perfect environment to get things done while enjoying your time.
</p>
<div class="wrapper">
<div class="card-ico-item">
<img src="./img/GreatCoffee-ico.svg" alt="Great Coffee & Snacks" class="ico">
<h1>Great Coffee + Snacks</h1>
<p>Because what’s a good work session without great coffee and delicious snacks to fuel you through
the day?
</p>
</div>
<div class="card-ico-item">
<img src="./img/Wifi-ico.svg" alt="Best Wi-Fi Spots" class="ico">
<h1>Best Wi-Fi Spots</h1>
<p>Reliable internet is key for a productive day out. We’ve found the cafes that offer high-speed,
stable Wi-Fi so you can work uninterrupted.
</p>
</div>
<div class="card-ico-item">
<img src="./img/AmpleOutlet-ico.svg" alt="Ample Outlets" class="ico">
<h1>Ample Outlets</h1>
<p>Nothing’s worse than running out of battery. We’ve located coffee shops with plenty of power
outlets to keep your devices charged.
</p>
</div>
<div class="card-ico-item">
<img src="./img/Cozy-ico.svg" alt="Jimmy's Coffe" class="ico">
<h1>Cozy Corners</h1>
<p>For those who need a more intimate, quiet spot, we’ve rounded up cafes with cozy nooks perfect
for focused work.
</p>
</div>
</div>
</section>
<section class="banner-container">
<h1>More cafés to come.</h1>
<h2>More cafés to come as we continue exploring Toronto's hidden gems, ensuring you always have the best
spots for work and relaxation.</h2>
<!-- <a href="#">Browse our cafe list</a> -->
</section>
</main>
<footer>
<div class="footer-container">
<div class="logo-container">
<a href="./index.html"><img src="./img/Poursome-logo.svg" alt="logo"></a>
<!-- <h1>Studio<sup id="registered">®</sup></h1> -->
</div>
<p>Poursome © Romeo Martin Rosales. Student No. 101578553</p>
</div>
</footer>
<script>
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}
</script>
</body>
</html>