-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (141 loc) · 6.78 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width , initial-scale=1">
<title>THE FOODIEZ</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT US</a></li>
<li><a href="#portfolio">ORDER NOW</a></li>
<li><a href="#contact">CONTACT US</a></li>
</ul>
</nav>
</header>
<section class="home" id="home">
<div class="container">
<h1 class="title">THE FOODIEZ
<span>FOR THE FOOD LOVERS</span>
</h1>
</div>
</section>
<div class="container-about" id="about">
<section class="about">
<div class="about-text">
<h1>About Us</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et cursus elit. Pellentesque fermentum porttitor augue a placerat. Integer sit amet porttitor quam. In luctus sit amet diam a hendrerit. Fusce dapibus risus vel nisl ultrices, id ultricies nisl finibus. Donec porttitor porta dolor vel posuere. Etiam metus sapien, aliquet eu imperdiet id, scelerisque non mauris. Vivamus quis tellus nec augue iaculis semper sed vitae elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et cursus elit, finibus bibendum odio. In eleifend laoreet risus a commodo. Pellentesque fermentum porttitor augue a placerat. Nunc vulputate at sapien euismod ultricies. Integer sit amet porttitor quam. In luctus sit amet diam a hendrerit. Fusce dapibus risus vel nisl ultrices, id ultricies nisl finibus.
</p>
</div>
</section>
</div>
<section class="portfolio" id="portfolio">
<h1>Our Specialty</h1>
<!--portfolio item 1-->
<figure class="port-item">
<img src="./food-1.JPG" alt="portfolio item">
<figcaption class="port-desc">
<p>Lorem ipsum</p>
<a href="#popup" class="button button-accent button-small">ORDER NOW</a>
</figcaption>
</figure>
<!--portfolio item 2-->
<figure class="port-item">
<img src="./food-2.JPG" alt="portfolio item">
<figcaption class="port-desc">
<p>Lorem ipsum</p>
<a href="#popup" class="button button-accent button-small">ORDER NOW</a>
</figcaption>
</figure>
<!--portfolio item 3-->
<figure class="port-item">
<img src="./food-3.JPG" alt="portfolio item">
<figcaption class="port-desc">
<p>Lorem ipsum</p>
<a href="#popup" class="button button-accent button-small">ORDER NOW</a>
</figcaption>
</figure>
<!--portfolio item 4-->
<figure class="port-item">
<img src="./food-4.JPEG" alt="portfolio item">
<figcaption class="port-desc">
<p>Lorem ipsum</p>
<a href="#popup" class="button button-accent button-small">ORDER NOW</a>
</figcaption>
</figure>
<!--portfolio item 5-->
<figure class="port-item">
<img src="./food-5.JPG" alt="portfolio item">
<figcaption class="port-desc">
<p>Lorem ipsum</p>
<a href="#popup" class="button button-accent button-small">ORDER NOW</a>
</figcaption>
</figure>
<!--portfolio item 6-->
<figure class="port-item">
<img src="./food-6.JPG" alt="portfolio item">
<figcaption class="port-desc">
<p>Lorem ipsum</p>
<a href="#popup" class="button button-accent button-small">ORDER NOW</a>
</figcaption>
</figure>
</section>
<div id="popup" class="overlay">
<div class="popup">
<h2>Lorem ipsum</h2>
<a class="close" href="#">×</a>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<section class="cta">
<div class="container">
<h1 class="title"> FOOD is the ingredient that
<span> binds us together :)</span>
</h1>
</div>
</section>
<footer id="contact">
<div class="container">
<h1>Contact Us</h1>
<div class="col-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum urna quis porttitor congue. Nulla viverra feugiat leo, vitae scelerisque nisi finibus id. Aenean massa dolor, ultricies eu nibh ac, rhoncus porta metus. Nam eu gravida neque, vel accumsan enim.
</p>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Lorem ipsum dolor sit amet</strong></li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Lorem ipsum dolor sit amet</strong></li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class="col-1">
<ul class="unstyled-list">
<li><strong>Lorem ipsum dolor sit amet</strong></li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
</div>
</footer>
</body>
</html>