forked from CodeYourFuture/HTML-CSS-Coursework-Week3
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
73 lines (62 loc) · 3.52 KB
/
index.html
File metadata and controls
73 lines (62 loc) · 3.52 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kalam:wght@300&family=Nanum+Gothic:wght@400;800&family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="wrap-logo">
<img id="logo" src="https://st2.depositphotos.com/4749501/7095/i/600/depositphotos_70952981-stock-photo-teal-birthday-cupcake.jpg" alt="cupcake">
</div>
<div>
<div class="menu-wrap">
<input class="toggler" type="checkbox" />
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CAKES</a></li>
<li><a href="#">ORDERING</a></li>
<li><a href="#">LESSONS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</div>
</div>
</div><br><br>
<h2>The best cakes in town delivered to your door</h2>
</div>
</header>
<main>
<section class="wellcome">
<h1>Wellcome</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium voluptatum laboriosam perferendis
earum neque quos dolorem qui, dicta quasi consequuntur corporis saepe, accusamus maxime cumque fuga
impedit porro tempora obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut illo nulla ex reprehenderit inventore quaerat, nobis doloribus sapiente voluptate fuga quod quisquam possimus optio reiciendis sed at ut id nemo.</p>
</section>
<section class="hero-img">
<img src="https://images.unsplash.com/photo-1629389861081-43cc4f172b0c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Njd8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="cake with figs">
</section>
<section class="products">
<div class="cake"><img src="https://images.unsplash.com/photo-1514517220017-8ce97a34a7b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTM5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60" alt="donuts"></div>
<div class="cake"><img src="https://images.unsplash.com/photo-1620980776848-84ac10194945?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTQ1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60" alt="fruit tart"></div>
<div class="cake"><img src="https://images.unsplash.com/photo-1597895139322-0a1ef77b3c30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MjQ2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60" alt="macarons"></div>
<div class="cake"><img src="https://images.unsplash.com/photo-1519915028121-7d3463d20b13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MzB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="pie"></div>
</section>
</main>
<footer>
<p class="copy">@2022 by Catalina-Alexandra Jora.</p>
</footer>
</body>
</html>