-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (178 loc) · 8.29 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
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>¡Bienvenidos/as a Guifos.com! ——————Donde los gifs están</title>
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
<!-- For Light / Dark mode -->
<link rel="stylesheet" id="themeCss">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Chakra+Petch&display=swap" rel="stylesheet">
<!-- Logo Pestaña -->
<link rel="icon" type="image/png" href="assets/globe_img.png">
</head>
<body id="body">
<!-- Texto de arriba / Encabezado -->
<p class="encabezado">
¡Bienvenidos/as a Guifos.com! ——————Donde los gifs están.////// Número de visitas: 12.765.803
</p>
<div class="container">
<header>
<!-- Logo y Menú de navegación -->
<ul class="menu-nav">
<li>
<!-- Logo - Izquierda -->
<a href="index.html">
<img src="assets/gifOF_logo.png" alt="gifOF_logo" class="logo" id="logo">
</a>
</li>
<!-- Menú - Derecha -->
<li class="right-items">
<a class="texto-botones2 nav-right" href="crearguifos.html#mis-guifos">
Mis Guifos
</a>
</li>
<li class="botones-nav texto-botones elegir-tema line-height">
Elegir tema
<img src="assets/dropdown.svg" alt="dropdown">
<ul class="menu-nav2">
<li>
<button type="button" onclick="day()" class="menu-nav-sub btn">
Sailor Day
</button>
</li>
<li>
<button type="button" onclick="night()" class="menu-nav-sub menu-nav-sub-back btn">
Sailor Night
</button>
</li>
</ul>
</li>
<li>
<a href="crearguifos.html" class="botones-nav botones-nav-margin nav-right texto-a-decoration">
<p class="texto-botones texto-a">
Crear Guifos
</p>
</a>
</li>
</ul>
</header>
<main>
<!-- Buscador principal -->
<section class="buscador">
<div class="buscador1">
<p class="texto">
Buscar
</p>
</div>
<div class="buscador2">
<input placeholder="Busca gifs, hashtags, temas, busca lo que quieras…" class="buscador3 texto3" id="userSearch" type="search" autocomplete="off" onclick="resultsSuggestions()"></input>
<a href="#results" class="botones-buscador texto2 texto-a-decoration" onclick="getSearchResults(); hideResults()">
<img src="assets/lupa_inactive.svg" alt="lupa_inactive">
<p class="texto-a texto-a-mobile">
Buscar
</p>
</a>
</div>
<div class="menu-nav3" id="menu-nav3">
<button type="button" class="menu-nav-sug" onclick="getSearchResultsSuggestionsNumberOne(); hideResults()">
Memes
</button>
<button type="button" class="menu-nav-sug" onclick="getSearchResultsSuggestionsNumberTwo(); hideResults()">
Coding
</button>
<button type="button" class="menu-nav-sug" onclick="getSearchResultsSuggestionsNumberThree(); hideResults()">
Tomb Raider
</button>
</div>
</section>
<!-- Hoy te sugerimos -->
<section>
<div class="sugerimos">
<h2 class="texto3 margin-bottom">
Hoy te sugerimos
</h2>
</div>
<div id="misGuifos3" class="gifs-big-container">
<div>
<div class="gif-title">
<p id="gif-sugerencias-title1" class="gif-title2"></p>
<a href="">
<img src="assets/close.svg" alt="close" class="close">
</a>
</div>
<img id="gif1" alt="gif1" class="gif-sugerencias" src="assets/gif-loading-image.gif">
<button class="ver-mas">
Ver Más...
</button>
</div>
<div>
<div class="gif-title">
<p id="gif-sugerencias-title2" class="gif-title2"></p>
<a href="">
<img src="assets/close.svg" alt="close" class="close">
</a>
</div>
<img id="gif2" alt="gif2" class="gif-sugerencias" src="assets/gif-loading-image.gif">
<button class="ver-mas">
Ver Más...
</button>
</div>
<div>
<div class="gif-title">
<p id="gif-sugerencias-title3" class="gif-title2"></p>
<a href="">
<img src="assets/close.svg" alt="close" class="close">
</a>
</div>
<img id="gif3" alt="gif3" class="gif-sugerencias" src="assets/gif-loading-image.gif">
<button class="ver-mas">
Ver Más...
</button>
</div>
<div>
<div class="gif-title">
<p id="gif-sugerencias-title4" class="gif-title2"></p>
<a href="">
<img src="assets/close.svg" alt="close" class="close">
</a>
</div>
<img id="gif4" alt="gif4" class="gif-sugerencias" src="assets/gif-loading-image.gif">
<button class="ver-mas">
Ver Más...
</button>
</div>
</div>
</section>
<!-- Tendencias -->
<div class="sugerimos">
<h2 class="texto3" id="texto3">
Tendencias
</h2>
</div>
<section id="tendencias">
<div id="misGuifos2" class="gifs-big-container">
</div>
</section>
<!-- Resultados de búsqueda -->
<section id="searchResults">
<div id="misGuifos" class="gifs-big-container">
</div>
</section>
</main>
</div>
<footer>
<br>
<br>
<p class="texto-botones2">
Guifos - 2020 - Lisandro Bigi
</p>
<br>
</footer>
</body>
<!-- JavaScript -->
<script src="script/script.js"></script>
</html>