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
76 lines (74 loc) · 4.47 KB
/
index.html
File metadata and controls
76 lines (74 loc) · 4.47 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
<!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="css/style.css"
</head>
<body>
<header class="header">
<div class="logo-contact">
<span class="logo">
<img src="https://lh3.googleusercontent.com/proxy/BhNZ79ahYgRQMqiAm86fWvnJ0jSJWWU_18X2V1cfHXopFFu2ZixnwSJppz7HIq9zjwwrSXHJU_EA8qnklrT2JGHvh-IQK5A" alt="cake animated image"/>
</span>
<div class="contact">
<span><a href="#" target="_blank">Contact</a></span>
</div>
</div>
<div class="header-nav-list">
<nav class="nav-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">cakes</a></li>
<li><a href="#">ordering</a></li>
<li class="hide"><a href="#">lessons</a></li>
<li class="hide"><a href="#">about</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="cake-info">
<div class="info">
<h3>Fresh Cakes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed commodo nisi, euismod tincidunt lectus. Donec in diam facilisis, suscipit ipsum in, iaculis dui. Nunc pellentesque ex bibendum, auctor felis ac, dictum nisl. Duis elit diam, pharetra non tristique eu, dictum nec elit. Phasellus pulvinar quam non dui gravida blandit. In gravida quam a interdum aliquam. Fusce ac consectetur ante.</p>
</div>
<div class="select-cake">
<div class="frame">
<ul>
<li id="slide1"><img src="https://i.pinimg.com/564x/76/aa/3e/76aa3e2a975ec52380bc6fb53ca8624d.jpg" alt="cake image"/></li>
<li id="slide2"><img src="https://cdn.shopify.com/s/files/1/0100/4303/1637/products/BirthdayCake.jpg?v=1589907896" alt="cake image"/></li>
<li id="slide3"><img src="https://documen.tv/wp-content/uploads/2019/06/most-beautiful-birthday-cakes-in-the-world-happy-birthday-cakes-1.jpg" alt="cake image"/></li>
<li id="slide4"><img src="https://cdn.shopify.com/s/files/1/0362/1653/products/Pink_Sweetcheeks_Cake_900x.jpg?v=1541956309" alt="cake image"/></li>
</ul>
</div>
<div class="slides">
<a href="#slide1"><img src="https://i.pinimg.com/564x/76/aa/3e/76aa3e2a975ec52380bc6fb53ca8624d.jpg" alt="cake image"/></a>
<a href="#slide2"><img src="https://cdn.shopify.com/s/files/1/0100/4303/1637/products/BirthdayCake.jpg?v=1589907896" alt="cake image"/></a>
<a href="#slide3"><img src="https://documen.tv/wp-content/uploads/2019/06/most-beautiful-birthday-cakes-in-the-world-happy-birthday-cakes-1.jpg" alt="cake image"/></a>
<a href="#slide4"><img src="https://cdn.shopify.com/s/files/1/0362/1653/products/Pink_Sweetcheeks_Cake_900x.jpg?v=1541956309" alt="cake image"/></a>
</div>
</div>
</section>
<section class="cake-images">
<img src="https://impfashion.com/wp-content/uploads/2014/01/Chocolate-Cake-4.jpg"/>
<img src="https://s3.amazonaws.com/deco-cms-production/[email protected]"/>
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/girls_birthday_cake_46200_16x9.jpg"/>
<img src="https://i.pinimg.com/originals/3e/7f/b9/3e7fb9d4bc2824b9533d154976d90155.jpg"/>
</section>
</main>
<footer>
<nav>
<ul>
<li class="footer-nav-list"><a href="#">Site Map</a></li>
<li><a href="#">Contact</a></li>
<li class="footer-nav-list"><a href="#">Delivery</a></li>
<li class="footer-nav-list"><a href="#">Refund Policy</a></li>
<li class="footer-nav-list"><a href="#">About</a></li>
</ul>
</nav>
</footer>
</body>
</html>