-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
153 lines (151 loc) · 4.3 KB
/
about.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
<!DOCTYPE html>
<html>
<head>
<title>Fots | About</title>
<link rel="icon" href="https://lb123658.github.io/Fots/logo.png" type="image/png"/>
<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=Heebo:wght@200&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Heebo', sans-serif;
}
p {
cursor: default;
user-select: none;
-webkit-user-select: none;
}
#top {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 70px;
background: #dc1b1b;
z-index: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
overflow: hidden;
}
#logo {
font-weight: bold;
}
.option {
height: 50px;
background: transparent;
border-radius: 25px;
min-width: 150px;
margin: 10px 5px 10px 5px;
border: none;
font-size: 25px;
color: white;
}
.option:hover {
background: white;
color: red;
}
#cart {
float: right;
background: white;
color: red;
transition: transform .2s;
}
#cart:hover {
transform: scale(1.06);
}
#cart:focus {
transform: scale(1);
}
#dropdown {
position: fixed;
top: 60px;
left: 170px;
width: 150px;
border-radius: 25px;
background: white;
z-index: 2;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
visibility: hidden;
}
.page {
width: 100%;
background: transparent;
border: none;
height: 40px;
font-size: 20px;
text-align: left;
border-radius: 10px;
}
.page:hover {
color: white;
background: #dc1b1b;
}
#div {
position: absolute;
top: 90px;
width: 80%;
left: 10%;
}
#heading {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #dc1b1b;
}
.text {
color: #dc1b1b;
font-size: 20px;
line-height: 1.7;
}
</style>
</head>
<body>
<div id="top">
<a href="https://lb123658.github.io/Fots">
<button class="option" id="logo">Fots</button>
</a>
<button class="option" onmouseover="show()" onmouseout="hide()">More</button>
<a href="cart">
<button class="option" id="cart">Cart</button>
</a>
</div>
<div id="dropdown" onmouseover="show()" onmouseout="hide()">
<a href="about">
<button class="page">About</button>
</a>
<a href="recipies">
<button class="page">Recipies</button>
</a>
<a href="store">
<button class="page">Store</button>
</a>
<a href="mailto:fotsofficial671@gmail.com" target="_blank">
<button class="page">Contact us</button>
</a>
<a href="about?l=es">
<button class="page">En español</button>
</a>
</div>
<!-- main text -->
<div id="div">
<p id="heading" class="big">F O O D + S H O T S = F O T S</p>
<p class="text" id="main">Welcome to the official Fots site!<br>You will never spend another day fotless because virtual Fots are now here.<br><br>The word FOTS is a combination of the "food" and "shots" because they are dried, crushed up food in a shot glass. Fots are usually dry and crushed to make them drinkable food but Fots such as the Olive Fot and Meat Fot are wet.<br>The first Fot ever made was the Rispe Fot made of crushed rice crispies in a Fot glass. Always be careful when fotting Fots because they can be dry and dusty. The Chocolate Fot made of cocoa powder is very powdery and can get in your eyes. Fots are generally safe because they are drinkable food and they taste great.<br><br>The new Fots are here.</p>
</div>
<script>
function show() {
document.getElementById("dropdown").style.visibility = "visible";
}
function hide() {
document.getElementById("dropdown").style.visibility = "hidden";
}
//other languages
if (window.location.search == "?l=es") {
espanol();
}
//language functions
function espanol() {
document.getElementById("main").innerHTML = "Bienvenidos al sitio web oficial de Fots!<br>Nunca necesitas pasar otro día sin Fots porque ahora hay Fots virtuales.<br><br>La palabra FOTS es una combinación de los palabras en inglés 'food' and 'shots' que significan 'comida' y 'bebidas pequeñas'. Fots son comida seca en polvo en un vaso pequeño. Normalmente están secos pero los Fots de carne o olívas están mojadas.<br>El primer Fot fue el Rispe Fot de Rice Crispies en un vaso de Fots. Siempre ten cuidado tomando Fots porque son muy secos y el polvo puede dañar a los ojos. Por ejemplo el Fot de chocolate porque se hace de polvo de cacao. Sin embargo los Fots son saludables y el sabor es muy bueno.<br><br><br>Los Fots nuevos están aquí.";
}
</script>
</body>
</html>