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
151 lines (127 loc) · 6.15 KB
/
index.html
File metadata and controls
151 lines (127 loc) · 6.15 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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>
<!-- Add a link to your css file here -->
<link rel="stylesheet" href="../HTML-CSS-Coursework-Week3/style.css">
</head>
<body>
<!-- header start -->
<header id="header" >
<img id= "header-img" src ="https://www.cakeshopco.com/img/logo.png" alt="shop sweet cake logo"/><!-- header logo -->
<div> <!--menu_hamburger for small screen-->
<button class="hamburger" id="hamburger" >
<img src="../HTML-CSS-Coursework-Week3/design/menu-hamburger.svg" alt="menu icon" />
</button >
</div>
</header>
<div> <!--start nav-bar in the header for large screen-->
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#email-form">Home</a></li>
<li><a class="nav-link" href="#aboutus">About us</a></li>
<li><a class="nav-link" href="#menue">Menue</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
<li> <input id="search" type="text" placeholder="search.." /> </li>
</ul>
</nav>
</div><!--end nav-bar in the header-->
<!--start email form -->
<section id="email-form" >
<h2 style="color:#909; font-size:30px;">Take pice of cake <br/> And Be Our Customer </h2>
<form id="form" action="https://codepen.io/your-work/">
<input name="email" id="email" type="email" placeholder="[email protected]" required />
<input id="submit" type="submit" value="SEND" class="send-btn" style="background-color:#f0f;" /> </form>
</section>
<!--end email form -->
<!-- about us -->
<section id="aboutus">
<div class="aboutus">
<h2> ABUT US...</h2> <br/>
<p >The "Cake Shop" is an idea that started as a small family business.<br/>
after that its becom a project supported by a staff of 30 employees.<br/>
Although not small any more, the business tries to keep the family<br/> atmosphere where we care not only about our products and our staff<br/> but also we consider each "customer" a member in this family of "cake shop".<br/>Our mission is to make people happy. Making delicious cakes<br/> having relaxing chairs in a smoking free environment<br/> and keeping our prices reasonable are all different ways to achieve this goal.<br/> You can choose the cake design you like from this page, and we will make it with love and care </p>
<br/>
<iframe id="video" width="400" height="200" src="https://www.youtube.com/embed/P8CInQhF9bI" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
</div>
</section><!--About Us end -->
<!--menue start -->
<section id="menue" >
<h2> The Menue </h2>
<div class="larg-level" ><!-- start div id=menue -->
<div class="flex-box">
<div class="cake"><!-- start choclate cake -->
<h3> Choclate Cake</h3>
<img class="iamge" src="https://www.mybakingaddiction.com/wp-content/uploads/2011/10/lr-0938-700x1050.jpg.webp"
alt="choclate cake" />
<h4>price 100 </h4>
<div class="btn" >
<input class="submit" type="submit" value="SELECT" style="background-color:#f0f;" />
</div>
</div><!--end choclate cake -->
<div class="cake"><!-- strawberry cake -->
<h3> Strawberry Cake</h3>
<img class="iamge" src="https://livforcake.com/wp-content/uploads/2017/02/chocolate-strawberry-cake-thumb.jpg"
alt="Strawberry cake" />
<h4>price 100 </h4>
<div class="btn" >
<input class="submit" type="submit" value="SELECT" style="background-color:#f0f;" />
</div>
</div><!--end strawberry cake -->
</div>
<div class="flex-box">
<div class="cake"><!-- vanilla cake -->
<h3> Vanilla Cake</h3>
<img class="iamge" src="https://livforcake.com/wp-content/uploads/2017/06/vanilla-cake-thumb.jpg"
alt="Vanilla cake" />
<h4>price 100 </h4>
<div class="btn" >
<input class="submit" type="submit" value="SELECT" style="background-color:#f0f;"/>
</div>
</div><!--end vanilla cake -->
<br/>
<div class="cake"><!-- rainbow cake -->
<h3> Rainbow Cake</h3>
<img class="iamge" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQExZ7Tne7-OmChpsyL7IVeYw3lkqbJMxMnCA&usqp=CAU"
alt="rainbow cake" />
<h4>price 100 </h4>
<div class="btn" >
<input class="submit" type="submit" value="SELECT" style="background-color:#f0f;"/>
</div>
</div><!--end rainbow cake -->
</div>
<!-- Fruit cake -->
<div class="cake">
<h3> Fruit Cake</h3>
<img class="iamge" src="https://tatyanaseverydayfood.com/wp-content/uploads/2018/07/Summer-Sangria-Cake-4.jpg"
alt="Fruit cake" />
<h4>price 100 </h4>
<div class="btn" >
<input class="submit" type="submit" value="SELECT" style="background-color:#f0f;"/>
</div>
</div><!--end Fruit cake -->
</div>
</div> <!-- end div id=menue -->
</section><!--menue end -->
<footer>
<h2> Contact-Us:</h2> <!--contat section start -->
<section id="contact" >
<ul id="a-contact">
<li> <a href="#" target="_blank">
<img alt="Facebook icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Facebook_icon.svg/256px-Facebook_icon.svg.png" style="height:50px;
width:50px;"/></a></li>
<li> <a href="#" target="_blank">
<img alt="Whatsapp" src="https://i.pinimg.com/originals/e5/89/38/e589388eb222889b1771b439a51510bb.png" style="height:50px; width:50px;"/></a> </li>
</ul>
<!-- shop position link -->
<a href="https://www.google.com.sa/maps"
target="_blank"><h1 style="background-color:#FFCCFF">Click To Visite Our shop </h1> </a><!--end shop position link -->
</section><!--contat section end -->
<span>Copyright 2020, The Cake Shop</span>
</footer>
</div> <!--end wrapper div -->
</body>
</html>