-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (129 loc) · 4.17 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
\
<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=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
<title>Food Mill</title>
</head>
<body>
<section class="front-page">
<img class="hero" src="./assets/hero.png" alt="meditation" />
<nav>
<div class="logo">
<img src="./assets/logo.svg" alt="Food Mill" />
<h1>Food Mill</h1>
</div>
<div class="links">
<a href="#">our purpose</a>
<a href="#">Randomiser</a>
<a href="#">Coming Soon</a>
</div>
<svg
width="44"
height="18"
viewBox="0 0 44 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line
class="line"
y1="1"
x2="44"
y2="1"
stroke="white"
stroke-width="2"
/>
<line
class="line"
y1="9"
x2="27"
y2="9"
stroke="white"
stroke-width="2"
/>
<line
class="line"
y1="17"
x2="11"
y2="17"
stroke="white"
stroke-width="2"
/>
</svg>
</nav>
<div class="selling-point">
<h2>Can't decide where to dine?</h2>
<h3>
Swipe to get a random restaurant of your genre.
</h3>
<div class="ctas">
<button class="cta-sec">Try Beta</button>
<button class="cta-main">
<a>Sign up</a>
</button>
</div>
</div>
</section>
<section class="classes">
<div class="classes-description">
<h2>Randomiser</h2>
<h3>Swipe till satisfied</h3>
</div>
<div class="randomizer">
<label id="xlabel"></label>
<button type="button" id="rollButton">roll</button>
<div class="container">
<iframe class="responsive-iframe" src=" "></iframe>
</div>
<script src="index.js"></script>
</div>
<!-- <div class="videos">
<div class="pilates">
<h3>Pilates</h3>
<video muted loop class="video" src="./assets/pilates.mp4"></video>
</div>
<div class="yoga">
<h3>Yoga</h3>
<video muted loop class="video" src="./assets/yoga.mp4"></video>
</div>
<div class="meditation">
<h3>Meditation</h3>
<video muted loop class="video" src="./assets/meditation.mp4"></video>
</div>
</div> -->
</section>
<section class="about">
<div class="our-story">
<h2>Our Purpose...</h2>
<p>
At Food Mill, we have come up with the solution when you and your friends are strugging
to decide where to eat. Just swipe and a random spot will be suggested for you. Just
filter according to area and type of food and we have you sorted out.
</p>
</div>
<!-- <img src="./assets/our-story.png" alt="our-story" /> -->
</section>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"
integrity="sha512-Mf/xUqfWvDIr+1B6zfnIDIiG7XHzyP/guXUWgV6PgaQoIFeXkJQR5XWh9fqAiCiRCpemabt3naV4jhDWVnuYDQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"
integrity="sha512-YzMW3OzvgtVpIIPPpjnCy8wVTq5slHRrxnLH1oD5dkVjZf8+8DJYd+GYmmWXZNmroTqKXFFzFS3XZ/LBvaNgZg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="./script.js"></script>
</body>
</html>