-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (105 loc) · 5.4 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Food Deleviring website|My Online meal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" media="screen and (max-width: 1170px)" href="css/media_queries.css">
<!--fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<!--Header-->
<header>
<!--logo-->
<div class="CenteringContainer">
<div id="LogoContainer">
<img src="images/logo.jpg" alt="logo" width="60px" height="63px">
</div>
</div>
<!--options-->
<div class="CenteringContainer">
<ul>
<li id="FirstOption"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">info</a></li>
</ul>
</div>
</header>
<!--Background image with the text in the bottom of the header-->
<section id="bgWithText">
<h1>Welcome to <br id="welcome"> my Online meal</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae erat lacus. Vestibulum ante ipsum.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="CenteringContainer2">
<a href="#">Order now!</a>
</div>
</section>
<!--Services-->
<h1 style="text-align:center;margin:2% 0%;">Our services</h1>
<section id="service">
<!--service 1-->
<div class="services service1">
<img src="images/catering.png" alt="catering">
<h1 class="serviceHeadings">food catering</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, culpa suscipit error Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et qui, repudiandae similique nam, recusandae quidem ab asperiores ex, aut fugit labore veritatis facere? sint delectus ab dolorum nam. Debitis facere, incidunt voluptates eos, mollitia voluptatem iste sunt voluptas beatae facilis labore, omnis sint quae eum.</p>
</div>
<!--service 2-->
<div class="services service2">
<img src="images/bulk.png" alt="bulk">
<h1 class="serviceHeadings">Bulk ordering</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, culpa suscipit error Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et qui, repudiandae similique nam, recusandae quidem ab asperiores ex, aut fugit labore veritatis facere? sint delectus ab dolorum nam. Debitis facere, incidunt voluptates eos, mollitia voluptatem iste sunt voluptas beatae facilis labore, omnis sint quae eum.</p>
</div>
<!--service 3-->
<div class="services service3">
<img src="images/ordering.png" alt="ordering">
<h1 class="serviceHeadings">food ordering</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, culpa suscipit error Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et qui, repudiandae similique nam, recusandae quidem ab asperiores ex, aut fugit labore veritatis facere? sint delectus ab dolorum nam. Debitis facere, incidunt voluptates eos, mollitia voluptatem iste sunt voluptas beatae facilis labore, omnis sint quae eum.</p>
</div>
</section>
<!--Clients-->
<h2 id="ClientHeading">Our clients</h1>
<section id="client-bg"></section>
<div id="client">
<div class="ClientContainer">
<img src="images/logo1.png" alt="Apple" id="Apple">
<img src="images/logo2.png" alt="Microsoft" id="Microsoft">
</div>
<div class="ClientContainer">
<img src="images/logo3.png" alt="HP"id="hp">
<img src="images/logo4.png" alt="Skype" id="Skype">
</div>
</div>
<!--Contact us-->
<section id="contact">
<h2 id="ContactHeading">Contact us</h2>
<form action="" id="ContactForm">
<label for="Email">Email:</label>
<br>
<input type="email" id="Email" placeholder="Email">
<br>
<label for="pass">Password:</label>
<br>
<input type="password" id="pass" placeholder="password">
<br>
<label for="phone">Phone no.</label>
<br>
<input type="number" maxlength="10" minlength="10" placeholder="phone no.">
<br><br>
<input type="submit" value="submit" id="submit">
<br>
<label for="message">Message: </label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</form>
</section>
<!--footer-->
<footer>
<p>Copyright © www.myonlinemeal.com All rights recived!</p>
</footer>
</body>
</html>