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
118 lines (112 loc) · 4.87 KB
/
index.html
File metadata and controls
118 lines (112 loc) · 4.87 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
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
<!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>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<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=Nunito:wght@200;300;400;500;600;700&family=Roboto:wght@300&family=Square+Peg&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Add your markup here -->
<header class="header">
<div class="logo"></div>
<div class="hamburger-menu">
<div class="menu-line1"></div>
<div class="menu-line2"></div>
<div class="menu-line3"></div>
</div>
<p><em>The best cakes in town delivered to your door</em></p>
</header>
<main class="homepage">
<nav class="navbar">
<ul class="nav-lists">
<li class="nav-link">HOME</li>
<li class="nav-link">CAKES</li>
<li class="nav-link">ORDER</li>
<li class="nav-link">LESSONS</li>
<li class="nav-link">ABOUT</li>
</ul>
</nav>
<section class="feature">
<h1>Welcome</h1>
<p>
We are passionate about creating edible works of art for special
occasions like weddings, baby showers, birthday parties, corporate
events, and other special occasions. Our beautifully designed
handcrafted products include bespoke cakes, cupcakes, cupcake
bouquets, pizza cakes, cake doughnuts, popsicles and many other cake
products. Our goal is to bring the best tasting and looking cakes and
desserts to our esteemed customers.
</p>
</section>
<section class="hero">
<img
src="https://images.unsplash.com/photo-1595144780677-6d0b5abbd089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1143&q=80"
alt="photo of a cake"
/>
</section>
<section class="products">
<img
class="item birthday-cake"
src="https://images.unsplash.com/photo-1551879403-6adb554966fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8YmlydGhkYXklMjBjYWtlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="birth day cake"
/>
<img
class="item slice-cake"
src="https://images.unsplash.com/photo-1602630209855-dceac223adfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8c2xpY2UlMjBjYWtlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="slice cake"
/>
<img
class="item cup-cake"
src="https://images.unsplash.com/photo-1607478900766-efe13248b125?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
alt="cup cake"
/>
<img
class="item donut"
src="https://images.unsplash.com/photo-1626094309830-abbb0c99da4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
alt="donut"
/>
</section>
</main>
<footer class="footer">
<h2>Sign up for newsletter</h2>
<form class="sign-up" action="">
<div class="terms-input">
<input id="terms" type="checkbox">
<label for="terms">Tick here to accept our <a class="termsConditions" href="#">Terms and conditions</a></label>
</div>
<div class="checkbox">
<input id="personalData" type="checkbox">
<label for="personalData">I agree to my personal data being stored and used to receive offers and email newsletters </label>
</div>
<div>
<button class="button" type="submit">Your email <span>🢆</span></button>
</div>
</form>
<h3>Follow us</h3>
<ul>
<li><img src="img/facebook-icon.svg" class="fa fa-facebook" alt=""></li>
<li><img src="img/twitter-icon.svg" class="fa fa-twitter" alt=""></li>
<li><img src="img/instagram-icon.svg" class="fa fa-instagram" alt=""></li>
</ul>
<p>© cake house</cite>
</footer>
<footer class="footer">
<div class="btn-list">
<a href="#" class="contact-btn">Facebook</a>
<a href="#" class="contact-btn">Instagram</a>
<a href="#" class="contact-btn">Youtube</a>
</div>
<p class="copy-right">©Sweet Dream Ltd</p>
</footer>
</body>
</html>