Skip to content

Commit 6eca140

Browse files
rehan147jmirehan147jmi
authored
Food Ordering Website
1 parent 756036c commit 6eca140

File tree

14 files changed

+250
-0
lines changed

14 files changed

+250
-0
lines changed

‎foodwebsite/background1.jpg‎

2.42 MB
Loading

‎foodwebsite/background2.jpg‎

340 KB
Loading

‎foodwebsite/icon1.png‎

436 Bytes
Loading

‎foodwebsite/icon2.png‎

11.1 KB
Loading

‎foodwebsite/icon3.png‎

11.3 KB
Loading

‎foodwebsite/icon4.png‎

2.62 KB
Loading

‎foodwebsite/icon5.png‎

1.97 KB
Loading

‎foodwebsite/icon6.png‎

2.35 KB
Loading

‎foodwebsite/index.html‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>FOOD WEBSITE</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@600&family=Oswald&family=Righteous&family=Roboto:ital,wght@1,300&family=Sawarabi+Mincho&display=swap');
15+
16+
header::before {
17+
18+
content: "";
19+
background-image: url(/background1.jpg);
20+
background-size: cover ;
21+
position: absolute;
22+
height: 50%;
23+
width: 100%;
24+
z-index: -1;
25+
opacity: 0.9;
26+
27+
28+
29+
}
30+
/* .navbar ul {
31+
display: flex;
32+
flex-direction: row;
33+
height: 70px;
34+
35+
} */
36+
.navbar {
37+
/* top: 0px; */
38+
position: sticky;
39+
height: 4.4rem;
40+
}
41+
.navbar::before {
42+
content: "";
43+
background-color: black;
44+
position: absolute;
45+
height: 100%;
46+
width: 100%;
47+
z-index: -1;
48+
opacity: 0.5;
49+
50+
}
51+
52+
53+
ul {
54+
display: flex;
55+
margin-top: 0rem;
56+
list-style: none;
57+
58+
}
59+
60+
.logo img {
61+
height: 4.4rem;
62+
}
63+
ul input {
64+
height: 2rem;
65+
margin-left: 28rem;
66+
margin-top: 1.2rem;
67+
width: 11rem;
68+
text-align: center;
69+
border-radius: 1rem;
70+
font-size: medium;
71+
font-family: 'Righteous', cursive;
72+
73+
74+
}
75+
li {
76+
margin-top: 1.6rem;
77+
}
78+
79+
a {
80+
text-decoration: none;
81+
color: white;
82+
margin-left: 3.5rem;
83+
border: 0.5rem;
84+
padding: 0.3rem;
85+
border-radius: 1rem;
86+
font-family: 'Righteous', cursive;
87+
}
88+
89+
a:hover {
90+
color: black;
91+
background-color: white;
92+
}
93+
h1 {
94+
display:block;
95+
text-align: center;
96+
margin-top: 3rem;
97+
color:white;
98+
font-family: 'Righteous', cursive;
99+
100+
}
101+
p1 {
102+
display: block;
103+
width: 49rem;
104+
margin-top: 1rem;
105+
margin-left: 16rem;
106+
text-align: center;
107+
color:white;
108+
font-family: 'Righteous', cursive;
109+
}
110+
h2 {
111+
text-align: center;
112+
margin-top: 5rem;
113+
font-family: 'Righteous', cursive;
114+
font-weight: bold;
115+
}
116+
.container {
117+
display: flex;
118+
flex-direction: row;
119+
justify-content: space-between;
120+
margin-top: 1.8rem;
121+
flex-wrap: wrap;
122+
}
123+
124+
#box {
125+
display: flex;
126+
flex-direction: column;
127+
width: 20rem;
128+
height: 16rem;
129+
border: 0.1rem solid rgb(193, 61, 61);
130+
justify-content: center;
131+
color: black;
132+
align-items: center;
133+
text-align: center;
134+
margin-left: 2rem;
135+
margin-right: 2rem;
136+
border-radius: 0.8rem;
137+
background-color:rgb(176, 174, 174);
138+
139+
140+
}
141+
142+
#box:hover {
143+
cursor: pointer;
144+
transform: scale(1.1);
145+
}
146+
147+
#box img {
148+
margin-top: 0rem;
149+
}
150+
151+
#box p2 {
152+
margin-top: 1rem;
153+
}
154+
#box h2 {
155+
margin-top: 1rem;
156+
}
157+
#img2 {
158+
margin-left: 2rem;
159+
}
160+
.icon {
161+
margin-left: 1.3rem;
162+
margin-right: 1.3rem;
163+
}
164+
section h2 {
165+
margin-top: 3rem;
166+
}
167+
168+
section {
169+
margin-top: 2rem;
170+
}
171+
172+
section::before {
173+
content: "";
174+
background-image: url(/background2.jpg);
175+
background-size: cover ;
176+
position: absolute;
177+
height: 50%;
178+
width: 100%;
179+
z-index: -1;
180+
opacity: 0.9;
181+
182+
183+
}
184+
185+
.container2 {
186+
position: absolute;
187+
}
188+
189+
190+
191+
</style>
192+
</head>
193+
<body>
194+
<header>
195+
<div class="navbar">
196+
197+
<ul>
198+
<div class="logo">
199+
<img src="rehan.jpeg" alt="image" />
200+
</div>
201+
<li class="item"><a href="#">HOME</a></li>
202+
<li class="item"><a href="#">SERVICES</a></li>
203+
<li class="item"><a href="#">ABOUT US</a></li>
204+
<li class="item"><a href="#">CONTACT US</a></li>
205+
<input type="text" name="SEARCH" id="" placeholder="Search Our Centers">
206+
</ul>
207+
</div>
208+
209+
210+
<h1>WELCOME TO MY WEBSITE</h1>
211+
<p1>
212+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam laboriosam aut laborum ducimus tempore maxime, minus nemo numquam, expedita at nesciunt doloribus perspiciatis ea, natus neque praesentium amet fuga vero. Accusantium nam libero facere?
213+
</p1>
214+
215+
216+
</header>
217+
218+
219+
<main>
220+
<h2>OUR SERVICES</h2>
221+
<div class="container">
222+
<div id="box">
223+
<img src="logo4.png" alt="image" height="100px">
224+
<h2>FOOD ORDERING</h2>
225+
<p2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim nisi expedita veniam odio fugiat nesciunt minus id? Dolor, provident natus.</p2>
226+
227+
</div>
228+
<div id="box"> <img src="logo3.png" alt="image" height="100px" id="img2">
229+
<h2>CATERING</h2>
230+
<p2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim nisi expedita veniam odio fugiat nesciunt minus id? Dolor, provident natus.</p2></div>
231+
<div id="box"> <img src="logo1.png" alt="image" height="100px">
232+
<h2>BULK ORDERING</h2>
233+
<p2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim nisi expedita veniam odio fugiat nesciunt minus id? Dolor, provident natus.</p2></div>
234+
</div>
235+
</main>
236+
237+
<section>
238+
239+
<div class="container2">
240+
<h2>OUR CLIENTS</h2>
241+
<img src="icon1.png" alt="image" class="icon" id="icon1">
242+
<img src="icon2.png" alt="image"class="icon" id="icon2">
243+
<img src="icon3.png" alt="image"class="icon" id="icon3">
244+
<img src="icon4.png" alt="image"class="icon" id="icon4">
245+
<img src="icon5.png" alt="image" class="icon"id="icon5">
246+
<img src="icon6.png" alt="image"class="icon" id="icon6">
247+
</div>
248+
</section>
249+
</body>
250+
</html>

‎foodwebsite/logo1.png‎

165 KB
Loading

0 commit comments

Comments
 (0)