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
71 lines (59 loc) · 2.84 KB
/
index.html
File metadata and controls
71 lines (59 loc) · 2.84 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
<!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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Add your markup here -->
<header>
<div class="logo_and_hamburger-icon">
<div>
<img class="logo animate__animated animate__rollIn" src="img/260311-Christmas-Tree-Cupcakes-869c2b7ccadd48fd8df60f330b96d0fa.jpg" alt="cupcake logo" />
</div>
<img class="hamburger-icon" src="img/menu-hamburger.svg" alt="hamburger icon" />
</div>
<p class="animate__animated animate__zoomInDown">The best cupcakes in town delivered to your door</p>
</header>
<nav class="animate__animated animate__slideInRight">
<ul class="menu">
<li><a class="active" href="#">home</a></li>
<li><a href="#">cakes</a></li>
<li><a href="#">order</a></li>
<li><a href="#">lessons</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
<main class="wrapper">
<div class="text">
<h1 class="animate__animated animate__zoomIn">Welcome</h1>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit
amet consectetur adipisicing elit</p>
</div>
<div class="cupcake-image top tooltip"><img src="img/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg" alt="cake" /></div>
<div class="cupcake-image one tooltip"><img src="img/kim-daniels-OrkEasJeY74-unsplash.jpg" alt="cake" /></div>
<div class="cupcake-image two tooltip"><img src="img/heather-barnes-_TN1m5R1pFI-unsplash.jpg" alt="cake" /></div>
<div class="cupcake-image three tooltip"><img src="img/jill-heyer-toxlLueLNDs-unsplash.jpg" alt="cake" /></div>
<div class="cupcake-image four tooltip"><img src="img/slashio-photography-0uBlylsBuWk-unsplash.jpg" alt="cake" /></div>
</main>
<footer>
<ul>
<li>
<a href="#">Facebook</a> </li>
<li>
<a href="#">Instagram</a></li>
<li>
<a href="#">Twitter</a></li>
</ul>
<p>@copy Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</footer>
</div>
</body>
</html>