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
98 lines (98 loc) · 3.51 KB
/
index.html
File metadata and controls
98 lines (98 loc) · 3.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Cake Shop</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script
src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"
></script>
</head>
<header class="header">
<nav class="navbar1">
<i class="fas fa-birthday-cake" style="font-size: 40px"></i>
<p>"The best cakes in town, delivered to your door.</p>
</nav>
<br />
<nav class="navbar2">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#cakes">Cakes</a></li>
<li><a href="#ordering">Ordering</a></li>
<li><a href="#lessons">Lessons</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<body>
<section class="main-area">
<img
src="https://cdn.apartmenttherapy.info/image/upload/f_jpg,q_auto:eco,c_fill,g_auto,w_1500,ar_4:3/at%2Farchive%2F0e1022424e3ebb40c7ba5ca1161eaa092d41a014"
width="30%"
alt="cake"
/>
<div class="main-text">
<h1>Welcome</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
</section>
<section class="features">
<div class="features1">
<i class="fas fa-birthday-cake" style="font-size: 8em"></i>
<i class="fas fa-birthday-cake" style="font-size: 8em"></i>
</div>
<div class="features2">
<i class="fas fa-birthday-cake" style="font-size: 8em"></i>
<i class="fas fa-birthday-cake" style="font-size: 8em"></i>
</div>
</section>
</body>
<footer>
<section id="main-footer">
<i class="fas fa-birthday-cake" style="font-size: 48px"></i>
<i class="fas fa-birthday-cake" style="font-size: 48px"></i>
<i class="fas fa-birthday-cake" style="font-size: 48px"></i>
</section>
<p>Copyright</p>
</footer>
</html>