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 (115 loc) · 6.1 KB
/
index.html
File metadata and controls
118 lines (115 loc) · 6.1 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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Responsive Cake webpage</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Add a link to your css file here -->
</head>
<body>
<!-- <main> -->
<!-- Add your markup here -->
<header class="header">
<h2>Aaishah Cakes and <br/>events</h2>
<!-- <h3>Your events are taken care of</h3> -->
<img class="headerlogo" src="https://i.pinimg.com/originals/8f/10/a5/8f10a54f9556f5a79284b4908145c5d8.jpg"/>
</header>
<section class="section1">
<nav class="navbar">
<ul class="nav_items">
<li><a href="#">Home</a></li>
<li><a href="#">cakes</a></li>
<li><a href="#">Ordering</a></li>
<li><a href="#">Lessons</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<article class="article">
<h3>What do you know about cakes?</h3>
<p>Cake is a form of sweet food made from flour, sugar, and other ingredients, that is usually baked. In their oldest
forms, cakes were modifications of bread, but cakes now cover a wide range of preparations ... Wikipedia</p>
<p>Our favorite and most popular cake recipes, all in one place. Whether you want a chocolate cake, basic sponge cake,
carrot cake, lemon cake or banana cake, we've got a tried and tested recipe to suit you.</p>
</article>
</section>
<section class="cake">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" text-align="center">
<div class="item active img" >
<img class="imgs" src="https://images.unsplash.com/photo-1503525642560-ecca5e2e49e9?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=461&q=80" alt="Cake">
<div class="carousel-caption">
<h3>Yummy</h3>
<p>Taste you can't resist!</p>
</div>
</div>
<div class="item img">
<img class="imgs" src="https://images.unsplash.com/photo-1569929232526-d9c6578e1531?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=80" alt="Cake">
<div class="carousel-caption">
<h3>Yummy</h3>
<p>Taste you can't resist!</p>
</div>
</div>
<div class="item img">
<img class="imgs" src="https://images.unsplash.com/photo-1566864399117-22c449669089?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=80" alt="Cake">
<div class="carousel-caption">
<h3>Yummy</h3>
<p>Taste you can't resist!</p>
</div>
</div>
</div>
</div>
</section>
<section>
<h3>How many types of cakes do you know?</h3>
<p>There are many different types of cakes and many different ways of dividing them into various categories, but
professional bakers categorize cakes by ingredients and mixing method. </p>
<p>Home bakers tend to categorize cakes by flavoring—i.e., chocolate cakes, fruit cakes, and so on—which is helpful when you're trying to decide what to eat, but
not as helpful when you're trying to understand how best to make a cake.</p>
<p>Depending on how the batter is prepared, you
will find that the final texture (and color, if it is a yellow or white cake) varies.</p>
<div class="img1">
<div class="imgbdr">
<img class="imgs" src="https://images.unsplash.com/photo-1586973944507-dd5e39bf9ca1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=481&q=80">
<div class="caption">
<p>Life's too short to say no to cake.</p>
</div>
</div>
<div class="imgbdr">
<img class="imgs" src="https://images.unsplash.com/photo-1567891283840-1f40372208ad?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=470&q=80">
<div class="caption">
<p>A balanced diet is having a piece of cake in each hand.</p>
</div>
</div>
<div class="imgbdr">
<img class="imgs" src="https://images.unsplash.com/photo-1591519060886-27dd11ad7f5a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=80">
<div class="caption">
<p>Good Cake isn't Cheap, Cheap Cake isn't Good.</p>
</div>
</div>
<div class="imgbdr">
<img class="imgs" src="https://images.unsplash.com/photo-1585419960497-ec7d3d934460?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=80">
<div class="caption">
<p>Life's too short to say no to cake.</p>
</div>
</div>
</div>
</section>
</section>
<footer class="footer">
<p><a href="#">SiteMap</a></p>
<p><a href="#">Contact</a></p>
<p><a href="#">Delivery</a></p>
</footer>
<!-- </main> -->
</body>
</html>