-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
123 lines (107 loc) · 4.89 KB
/
about.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
<!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="#">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>Looking for a café?</h1>
<h2>We curate the top cafés in the heart of Toronto, where work, coffee, and relaxation meet. Discover your next favorite spot to sip, unwind, and enjoy the city's coziest café experiences.
</h2>
<img src="./img/hero-search.svg" alt="Macbook with plants">
<!-- <a href="#">Browse our cafe list</a> -->
</section>
<section>
<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>About thingy</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>