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
80 lines (75 loc) · 2.73 KB
/
index.html
File metadata and controls
80 lines (75 loc) · 2.73 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
74
75
76
77
78
79
80
<!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>
</head>
<body>
<!-- Add your markup here -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Responsive Cake Webpage</title>
</head>
<!---Header content-->
<header class="header-container">
<img src="./Cakes/images (7).jpg" alt="Brand logo">
<div class="toggle-title">
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger">
<h1>The best cakes in town delivered to your door</h1>
<!---Nav bar-->
<nav>
<ul>
<li><a href="#welcome" class="nav-link">HOME</a></li>
<li><a href="#page-images" class="nav-link">CAKES</a></li>
<li><a href="#order" class="nav-link">ORDER</a></li>
<li><a href="#lessons" class="nav-link">LESSONS</a></li>
<li><a href="#About" class="nav-link">ABOUT</a></li>
</ul>
</nav>
</div>
</header>
<!--Main-->
<main class="page-wrapper">
<article class="welcome" id="welcome">
<div class="welcome-text">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore illum culpa numquam possimus hic quibusdam alias
officia praesentium vero deserunt aliquam explicabo necessitatibus porro, harum nam rerum nulla nobis corporis?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore illum culpa numquam possimus hic quibusdam alias
officia praesentium vero deserunt aliquam explicabo necessitatibus porro, harum nam rerum nulla nobis corporis?</p>
</div>
<div class="hero-img">
<img src="./Cakes/images.jpg" alt="Chocolate with fruit party Cake">
</div>
</article>
<section class="page-images" id="page-images">
<div class="container">
<img src="./Cakes/images (1).jpg" alt="Butterscotch wedding cake">
<img src="./Cakes/images (2).jpg" alt="White chocolate wedding cake">
<img src="./Cakes/images (3).jpg" alt="Mint cream birthday cake">
<img src="./Cakes/images (4).jpg" alt="Buttermilk chocolate cake">
</div>
</section>
</main>
<!--Footer-->
<section class="icons" id="order">
<div class="order">
<a href="https://www.instagram.com"
target="_blank"><img src="./Social icons/In.jpeg" alt="instagram"></a>
<a href="https://www.pinterest.co.uk"
target="_blank"><img src="./Social icons/P.png" alt="Pinterest"></a>
<a href="https://www.facebook.com/"
target="_blank"><img src="./Social icons/f.png" alt="Facebook"></a>
</div>
</section>
</footer>
</body>
</html>