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
129 lines (128 loc) · 4.08 KB
/
index.html
File metadata and controls
129 lines (128 loc) · 4.08 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
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Icons link -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
rel="stylesheet"
/>
<!-- CSS file -->
<link rel="stylesheet" href="style.css" />
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Texturina:wght@100&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Bungee+Outline&display=swap"
rel="stylesheet"
/>
<title>Responsive Cake Website</title>
</head>
<body>
<!-- Navigation bar -->
<header>
<div class="menu-wrap">
<img
src="design/cake-logo-transparent.png"
class="logo-img"
alt="We teach cakes!"
/>
<input type="checkbox" id="checkbox" />
<nav>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Learn">Learn</a></li>
<li><a href="#Order">Order</a></li>
<li><a href="#About">About</a></li>
</ul>
</nav>
<label for="checkbox">
<i class="fa fa-bars menu-icon"></i>
</label>
</div>
<div>
<h1 class="motto">Your guide to cake making and baking!</h1>
</div>
</header>
<!-- Main section -->
<main>
<!-- Text and finished image -->
<div class="container">
<div class="main-text">
<h4>Cake-ing!</h4>
<p>
The term "cake" has a long history. The word itself is of Viking
origin, from the Old Norse word "kaka". Early cakes in England were
also essentially bread. Sponge cakes, leavened with beaten eggs,
originated during the Renaissance, possibly in Spain. At Cake, we
hope to share with you different ways of making and baking these
items, so you can do it yourself at home... or just order it from
the professionals!
</p>
</div>
<div class="final-product">
<img
src="design/cake-final-product.jpeg"
alt="Finished cake"
class="finished-cake"
/>
</div>
</div>
<!-- Text and finished image -->
<div class="step-by-step">
<img src="design/cake-first-step.jpeg" alt="First step" class="step" />
<img
src="design/cake-second-step.jpeg"
alt="Second step"
class="step"
/>
<img src="design/cake-third-step.jpeg" alt="Third step" class="step" />
<img src="design/cake-fifth-step.jpeg" alt="Fifth step" class="step" />
</div>
</main>
<footer class="container">
<div class="footer-top">
<h3 class="follow">Follow us!</h3>
<ul class="social-media">
<li class="fb">
<a href="https://www.facebook.com/"
target="_blank"><img src="design/icon_fb.png" alt="facebook"
/></a>
</li>
<li class="in">
<a href="https://www.instagram.com/"
target="_blank"><img src="design/icon_insta.png" alt="instagram"
/></a>
</li>
<li class="tw">
<a href="https://www.twitter.com/"
target="_blank"><img src="design/icon_tw.png" alt="twitter"
/></a>
</li>
</ul>
</div>
<div class="footer-bottom">
<ul class="internal">
<li>
<a href="https://cake.com/privacy-policy/" target="_blank"
>Privacy</a
>
</li>
<li><a href="https://cake.com/terms/" target="_blank">Terms</a></li>
<li>
<a href="https://cake.com/regions/" target="_blank">Regions</a>
</li>
<li>
<a href="https://www.cake.com/copyright-policy/" target="_blank"
>©2020</a
>
</li>
</ul>
</div>
</footer>
</body>
</html>