-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (146 loc) · 7.96 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="order from restaurants App" />
<meta name="title" property="og:title" content="ORDERFROM" />
<meta property="og:type" content="website" />
<meta name="image" property="og:image" content="https://ibb.co/3RRvzTy" />
<meta name="description" property="og:description" content="order from restaurants App" />
<meta name="author" content="Ammar Kandel" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/index.css" >
<title>ORDERFROM</title>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">
<img src="./images/logo.png" height="25" width="30" alt="logo" >
<span>ORDERFROM</span>
</a>
<ul class="nav-links">
<li><a href="#"><i class="fas fa-search"></i><span>RESTAURANTS</span></a></li>
<li><a href="#"><i class="fas fa-user"></i><span>ABOUT</span></a></li>
<li><a href="#"><i class="fas fa-rss"></i><span>BLOG</span></a></li>
<li><a href="#"><i class="fas fa-bars"></i><span>MORE...</span></a></li>
</ul>
</div>
</nav>
<header class="main-header">
<div class="main-header-overlay">
<h1>YOUR GATEWAY TO RESTAURANTS IN EGYPT</h1>
<form action="./pages/search.html">
<label>SEARCH BY KEY WORD:</label>
<fieldset class="form-inputs">
<input type="search" name="search">
<input type="submit" name="submit" value="SEARCH" >
</fieldset>
</form>
<a href="#">How it works</a>
</div>
</header>
<main>
<section class="steps">
<h2>ORDERFROM WORKS IN FOUR SIMPLE STEPS</h2>
<div class="steps-details">
<div>
<img src="./images/search.svg" height="55" width="95" alt="search-icone" >
<h3>1- SEARCH:</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam quisquam optio exercitationem dolorum reiciendis pariatur illum ducimus commodi cum, a dignissimos, itaque adipisci vitae sequi blanditiis, eveniet sunt qui explicabo! Numquam recusandae aut, animi rerum nam ipsum repellendus harum quis illum repellat soluta sint ipsa facere cum dicta quasi dolorum sapiente facilis provident.</p>
</div>
<div>
<img src="./images/location-64.png" height="50" width="50" alt="location-icone">
<h3>2- LOCATION:</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam quisquam optio exercitationem dolorum reiciendis pariatur illum ducimus commodi cum, a dignissimos, itaque adipisci vitae sequi blanditiis, eveniet sunt qui explicabo! Numquam recusandae aut, animi rerum nam ipsum repellendus harum quis illum repellat soluta sint ipsa facere cum dicta quasi dolorum sapiente facilis provident.</p>
</div>
<div>
<img src="./images/mobile-order-100.png" height="65" width="65" alt="apply-icone" >
<h3>3- ORDER:</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam quisquam optio exercitationem dolorum reiciendis pariatur illum ducimus commodi cum, a dignissimos, itaque adipisci vitae sequi blanditiis, eveniet sunt qui explicabo! Numquam recusandae aut, animi rerum nam ipsum repellendus harum quis illum repellat soluta sint ipsa facere cum dicta quasi dolorum sapiente facilis provident.</p>
</div>
<div>
<img src="./images/relax-with-book-50.png" height="55" width="55" alt="relax-icone" >
<h3>4- RELAX:</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam quisquam optio exercitationem dolorum reiciendis pariatur illum ducimus commodi cum, a dignissimos, itaque adipisci vitae sequi blanditiis, eveniet sunt qui explicabo! Numquam recusandae aut, animi rerum nam ipsum repellendus harum quis illum repellat soluta sint ipsa facere cum dicta quasi dolorum sapiente facilis provident.</p>
</div>
</div>
</section>
<section class="about">
<div class="about-info about-register">
<div>
<h4>Over 10,000 restaurants registered with us</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore consequuntur laboriosam.</p>
<a href="./pages/search.html">Find a restaurant</a>
</div>
<img src="./images/map.jpg" height="210" width="210" alt="world map" >
</div>
<div class="about-info about-search">
<div>
<h4>No need to go outside home</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore consequuntur laboriosam.</p>
<a href="./pages/search.html">Find a restaurant near you</a>
</div>
<img src="./images/restaurants.jpg" height="210" width="210" alt="restaurants" >
</div>
<div class="about-info about-time">
<div>
<h4>Anytime Anywhere Any way!</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore consequuntur laboriosam.</p>
</div>
<img src="./images/order-from-home.jpg" height="210" width="210" alt="order from home" >
</div>
</section>
</main>
<!-- Start Footer -->
<footer>
<div class="footer-contact">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SEARCH</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">ADVERTISE</a></li>
</ul>
<div class="footer-logo">
<img src="./images/logo.png" height="40" width="40" alt="footer-logo" >
</div>
<ul>
<li><a href="#">FACEBOOK</a></li>
<li><a href="#">TWITTER</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">GOOGLE +</a></li>
</ul>
</div>
<div class="footer-info">
<div class="footer-subscribe">
<h4>SUBSCRIBE</h4>
<fieldset>
<input type="email" id="footer-email" name="email" placeholder="[email protected]" >
<input type="submit" id="footer-submit" name="email-submit" >
</fieldset>
</div>
<div>
<h4>CONTACT</h4>
<p>Have a question or submission <a href="#">[email protected]</a></p>
</div>
<div>
<h4>ABOUT</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt ad inventore doloribus mollitia, omnis quas dolorem distinctio tempora ipsam reiciendis.<a href="#"> Learn more...</a></p>
</div>
</div>
<div class="copy-right">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-wordpress"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
<p>© 2020 ORDERFROM, Inc. All rights reserved, POWER BY LOVE AND AWESOMENESS.</p>
</div>
</footer>
<!-- End Footer -->
</body>
</html>