-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (151 loc) · 7.79 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
<!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">
<!-- agregar favicon -->
<link rel="icon" href="./img/favicon.png" type="image/png">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" href="./styles/styles.css">
<title>GIFOS | Home</title>
</head>
<body>
<!-- inicio header -->
<header>
<!-- logo responsive -->
<a href="#">
<picture class="logo">
<source media="(min-width:1000px)" srcset="./img/logo-desktop.svg">
<source media="(min-width:320px)" srcset="./img/logo-mobile.svg">
<img src="./img/logo-desktop.svg" alt="Logo">
</picture>
</a>
<form class="form-scroll">
<input id="search-input-nav" type="search" placeholder="Busca GIFOS y más" autocomplete="off">
<button type="submit" class="search-icon" id="search-icon-header">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M8.5 0a8.5 8.5 0 016.677 13.761l4.53 4.532a1 1 0 01-1.414 1.414l-4.532-4.53A8.5 8.5 0 118.5 0zm0 2a6.5 6.5 0 104.548 11.144l.045-.051c.016-.016.033-.032.05-.046A6.5 6.5 0 008.5 2z" id="t"/>
</defs>
<use fill="#572EE5" fill-rule="nonzero" xlink:href="#t"/>
</svg>
</button>
</form>
<!-- burger button -->
<input type="checkbox" id="burger-input">
<label for="burger-input">
<svg class="burger" width="15" height="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M14 12a1 1 0 010 2H1a1 1 0 010-2zm0-6a1 1 0 010 2H1a1 1 0 110-2zm0-6a1 1 0 010 2H1a1 1 0 110-2z" id="i"/>
</defs>
<use fill="#572EE5" fill-rule="nonzero" xlink:href="#i"/>
</svg>
<svg class="close" width="14" height="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M.293.293a1 1 0 011.414 0L7 5.585 12.293.293a1 1 0 011.32-.083l.094.083a1 1 0 010 1.414L8.415 7l5.292 5.293a1 1 0 01.083 1.32l-.083.094a1 1 0 01-1.414 0L7 8.415l-5.293 5.292a1 1 0 01-1.32.083l-.094-.083a1 1 0 010-1.414L5.585 7 .293 1.707A1 1 0 01.21.387z" id="j"/>
</defs>
<use fill="#4A1EE3" fill-rule="nonzero" xlink:href="#j"/>
</svg>
</label>
<!-- menu -->
<nav id="menu">
<ul>
<li id="dark-mode-button"><a>Modo nocturno</a></li>
<li><a href="./favoritos.html">Favoritos</a></li>
<li><a href="./mis-gifos.html">Mis GIFOS</a></li>
<li class="mobile-create-gifo"><a href="./crear-gifo.html">Crear gifo</a></li>
<li><a href="./crear-gifo.html" class="button-crear-gifo"><span></span></a></li>
</ul>
</nav>
</header>
<!-- fin header -->
<!-- inicio main -->
<main id="search">
<h1>Inspírate, busca, guarda, y crea los mejores <em>GIFOS</em></h1>
<div class="search-block">
<img src="./img/ilustra_header.svg" alt="Ilustración header">
<form>
<input type="search" placeholder="Busca GIFOS y más" id="searchInput" autocomplete="off">
<button class="search-icon" type="submit" id="search-icon-main">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M8.5 0a8.5 8.5 0 016.677 13.761l4.53 4.532a1 1 0 01-1.414 1.414l-4.532-4.53A8.5 8.5 0 118.5 0zm0 2a6.5 6.5 0 104.548 11.144l.045-.051c.016-.016.033-.032.05-.046A6.5 6.5 0 008.5 2z" id="h"/>
</defs>
<use fill="#572EE5" fill-rule="nonzero" xlink:href="#h"/>
</svg>
</button>
<button class="clear-button hidden" id="clear-button" type="reset">
<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M.293.293a1 1 0 011.414 0L7 5.585 12.293.293a1 1 0 011.32-.083l.094.083a1 1 0 010 1.414L8.415 7l5.292 5.293a1 1 0 01.083 1.32l-.083.094a1 1 0 01-1.414 0L7 8.415l-5.293 5.292a1 1 0 01-1.32.083l-.094-.083a1 1 0 010-1.414L5.585 7 .293 1.707A1 1 0 01.21.387z" id="k"/>
</defs>
<use fill="#4A1EE3" fill-rule="nonzero" xlink:href="#k"/>
</svg>
</button>
<ul id="suggestions-list"></ul>
</form>
</div>
<div class="trending-list">
<p>Trending:</p>
<p id="trending-words"></p>
</div>
<div class="results-search"></div>
<div id="pagination-container"></div>
</main>
<!-- fin main -->
<!-- inicio sección trending -->
<section id="trending">
<h2>Trending GIFOS</h2>
<p>Mira los últimos GIFOS de nuestra comunidad.</p>
<!-- inicio galeria trending gifos -->
<div class="gallery">
<button id="left" class="slider-button disabled">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M2.414 7l5.293-5.293A1 1 0 006.293.293l-6 6a1 1 0 000 1.414l6 6a1 1 0 101.414-1.414L2.414 7z" id="f"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path stroke="#572EE5" d="M.5.5h39v39H.5z"/>
<use fill="#572EE5" fill-rule="nonzero" xlink:href="#f" transform="translate(16 13)"/>
</g>
</svg>
</button>
<div class="trending-slider">
<ul class="trending-gifos"></ul>
</div>
<button id="right" class="slider-button">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M5.586 7L.293 12.293a1 1 0 001.414 1.414l6-6a1 1 0 000-1.414l-6-6A1 1 0 10.293 1.707L5.586 7z" id="g"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path stroke="#572EE5" d="M.5.5h39v39H.5z"/>
<use fill="#572EE5" fill-rule="nonzero" xlink:href="#g" transform="translate(16 13)"/>
</g>
</svg>
</button>
</div>
<!-- fin galeria trending gifos -->
</section>
<!-- fin sección trending -->
<!-- inicio footer -->
<footer>
<div>
<p>Compartir en:</p>
<ul>
<li><a href="https://www.facebook.com/"><img src="./img/icon_facebook.svg" alt="Facebook"></a></li>
<li><a href="https://twitter.com/"><img src="./img/icon-twitter.svg" alt="Twitter"></a></li>
<li><a href="https://www.instagram.com/"><img src="./img/icon_instagram.svg" alt="Instagram"></a></li>
</ul>
</div>
<p>© GIFOS 2021 All Rights Reserved.</p>
</footer>
<!-- fin footer -->
<!-- js -->
<script src="./js/index.js" type="module"></script>
</body>
</html>