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
78 lines (70 loc) · 3.28 KB
/
index.html
File metadata and controls
78 lines (70 loc) · 3.28 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
<!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="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<main>
<!-- landing area -->
<div id="landing">
<div id="landing-text">
<div id="landing-text-inner">
<h1> <span>P</span>erfect <span>S</span>lice</h1>
<h2>Beautiful tasting cakes</h2>
<a href="#images" class="btn" id="view-work">
View Cakes
</a>
<a href="#contact" class="btn" id="view-work">
Contact Us
</a>
</div>
</div>
<div id="landing-image"></div>
</div>
<!-- welcome section -->
<div id="welcome">
<h1>Welcome</h1>
<P>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime quos eaque esse modi sed, quam incidunt ab hic, fugiat natus nostrum repellat. Adipisci quas quia similique! Eaque praesentium, amet at consequatur minus deleniti recusandae numquam similique quod magni? Laboriosam quibusdam culpa deleniti vitae rerum fuga accusamus, neque officia ipsa sint rem, debitis nesciunt, dolore a maxime atque tenetur ad? Perspiciatis veritatis id tenetur magni nostrum nihil ipsam sit ea, impedit laborum, recusandae quisquam illo voluptas blanditiis distinctio aut? Voluptatum neque at repellat assumenda porro necessitatibus vero ipsam aliquid veritatis beatae nisi recusandae, aperiam sunt voluptatem consequatur accusantium minima odit ut!</P>
</div>
<!-- images and about cakes section -->
<div id="images">
<div id="header">
<h2>Our Cakes</h2>
</div>
<img src="images/cake-1.jpg" alt="">
<div class="caption">
<h3>Cake One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, assumenda!</p>
</div>
<img src="images/cake-2.jpg" alt="">
<div class="caption">
<h3>Cake Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, assumenda!</p>
</div>
<img src="images/cake-3.jpg" alt="">
<div class="caption">
<h3>Cake Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, assumenda!</p>
</div>
<img src="images/cakie-4.jpg" alt="">
<div class="caption">
<h3>Cake Four</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, assumenda!</p>
</div>
</div>
</main>
<!-- footer -->
<footer id="contact">
<h3>Get In Touch</h3>
<p>Email or call us to order your beautiful cakes</p>
<p>Email: <strong>[email protected]</strong></p>
<p>Phone: <strong>01384 123456</strong></p>
<p>© Perfect Slice 2020</p>
</footer>
</body>
</html>