├── .gitattributes ├── JS └── main.js ├── README.md ├── best.html ├── fonts ├── Gotham-Black.otf └── PTSans-Bold.ttf ├── img ├── Fap-tap.png ├── campfire.png ├── clock-circular-outline.png ├── eye.png └── no-minors.png ├── index.html └── style └── stylesheet.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /JS/main.js: -------------------------------------------------------------------------------- 1 | 2 | var tipoRicerca = 2; 3 | var pagina = 1; 4 | var api_url_getall = "https://www.eporner.com/api/v2/video/search/?order=latest&lq=1&format=json&gay=0&per_pag"; 5 | const btn = document.getElementById('cerca'); 6 | const btnNext = document.getElementById("next"); 7 | const btnPrev = document.getElementById('previous'); 8 | const selectCategoria = document.getElementById('categoria'); 9 | const search = document.getElementById('ricerca'); 10 | const selectDurata = document.getElementById('durata'); 11 | const selectSezione = document.getElementById('sezione'); 12 | let intestazione = document.getElementById("intestazione"); 13 | let indicePagina = document.getElementById("pagina"); 14 | var hoverInterval; 15 | var loading = false; 16 | 17 | selectCategoria.addEventListener("change", resetPagina); 18 | selectDurata.addEventListener("change", resetPagina); 19 | selectSezione.addEventListener("change", resetPagina); 20 | 21 | if (btn) { 22 | btn.addEventListener("click", Ricerca); 23 | } 24 | 25 | if (btnPrev) { 26 | btnPrev.addEventListener("click", prev); 27 | } 28 | 29 | if (btnNext) { 30 | btnNext.addEventListener("click", next); 31 | } 32 | // funzione che mi fa cambiare il filtro di ricerca 33 | function SwitchInputSelect(num) { 34 | switch (num) { 35 | case 1: 36 | //Filtro Categorie 37 | tipoRicerca = 1; 38 | pagina = 1 39 | selectCategoria.className = "form-select"; 40 | selectSezione.className = "form-select visually-hidden"; 41 | search.className = "form-control me-2 visually-hidden"; 42 | selectDurata.className = "form-select visually-hidden"; 43 | break; 44 | case 2: 45 | //Filtro Parola Chiave (Default) 46 | tipoRicerca = 2; 47 | pagina = 1 48 | selectCategoria.className = "form-select visually-hidden"; 49 | search.className = "form-control me-2"; 50 | selectSezione.className = "form-select visually-hidden"; 51 | search.placeholder = "Cerca"; 52 | selectDurata.className = "form-select visually-hidden"; 53 | break; 54 | 55 | case 3: 56 | //Filtro Durata 57 | tipoRicerca = 3; 58 | pagina = 1 59 | selectCategoria.className = "form-select visually-hidden"; 60 | selectSezione.className = "form-select visually-hidden"; 61 | search.className = "form-control me-2 visually-hidden"; 62 | selectDurata.className = "form-select"; 63 | break; 64 | case 4: 65 | //Filtro Sezione 66 | pagina = 1 67 | tipoRicerca = 4; 68 | 69 | selectSezione.className = "form-select"; 70 | search.className = "form-control me-2 visually-hidden"; 71 | selectCategoria.className = "form-select visually-hidden"; 72 | selectDurata.className = "form-select visually-hidden"; 73 | break; 74 | default: 75 | tipoRicerca = 2; 76 | break; 77 | 78 | } 79 | } 80 | // funzione che mi fa la ricerca in base al filtro selezionato 81 | function Ricerca() { 82 | loading = false; 83 | load(); 84 | cambiaPagina(); 85 | if (pagina == 1) { 86 | intestazione.innerHTML = "Ultime uscite"; 87 | btnPrev.className = "btn btn-outline-warning disabled"; 88 | } else { 89 | btnPrev.className = "btn btn-outline-warning"; 90 | btnNext.className = "btn btn-outline-warning"; 91 | } 92 | switch (tipoRicerca) { 93 | case 1: 94 | tipoRicerca = 1; 95 | console.log("Ricerca per categoria"); 96 | let categoria = document.getElementById("categoria").value; 97 | intestazione.innerHTML = ""; 98 | console.log(categoria); 99 | fetch("https://www.eporner.com/api/v2/video/search/?page=" + pagina + "&lq=1&format=json&per_page=30&query=" + categoria, { 100 | "method": "GET", 101 | "headers": { 102 | "Accept": "application/json" 103 | } 104 | }) 105 | .then(response => response.json()) 106 | .then(result => { stampaCards(result) }) 107 | .catch(error => console.log('Error:', error)); 108 | intestazione.innerHTML = `Pagina ${pagina}`; 109 | break; 110 | case 2: 111 | tipoRicerca = 2; 112 | intestazione.innerHTML = ""; 113 | console.log("Ricerca per Parola Chiave"); 114 | let key_word = document.getElementById("ricerca").value; 115 | console.log(key_word); 116 | fetch("https://www.eporner.com/api/v2/video/search/?page=" + pagina + "&lq=1&format=json&order=latest&per_page=30&query=" + key_word, { 117 | "method": "GET", 118 | "headers": { 119 | "Accept": "application/json" 120 | } 121 | }) 122 | .then(response => response.json()) 123 | .then(result => { stampaCards(result) }) 124 | .catch(error => console.log('Error:', error)); 125 | intestazione.innerHTML = "Ricerca per " + key_word + ""; 126 | break; 127 | case 3: 128 | console.log("Ricerca per Durata"); 129 | intestazione.innerHTML = ""; 130 | let time = document.getElementById("durata").value; 131 | if (time == "longest") { 132 | intestazione.innerHTML = "Ricerca per Video lunghi"; 133 | } else { 134 | intestazione.innerHTML = "Ricerca per Video Corti"; 135 | } 136 | 137 | console.log(time); 138 | fetch("https://www.eporner.com/api/v2/video/search/?page=" + pagina + "&order=" + time + "&lq=0&format=json&per_page=30", { 139 | "method": "GET", 140 | "headers": { 141 | "Accept": "application/json" 142 | } 143 | }) 144 | .then(response => response.json()) 145 | .then(result => { stampaCards(result) }) 146 | .catch(error => console.log('Error:', error)); 147 | break; 148 | 149 | case 4: 150 | console.log("Ricerca per Sezione"); 151 | intestazione.innerHTML = ""; 152 | let sezione = document.getElementById("sezione").value; 153 | console.log(sezione); 154 | if (sezione == "etero") { 155 | fetch("https://www.eporner.com/api/v2/video/search/?order=latest&lq=0&format=json&gay=0&per_page=30&page=" + pagina, { 156 | "method": "GET", 157 | "headers": { 158 | "Accept": "application/json", 159 | } 160 | }) 161 | .then(response => response.json()) 162 | .then(result => { stampaCards(result) }) 163 | .catch(error => console.log('Error:', error)); 164 | 165 | } else if (sezione == "gay") { 166 | 167 | fetch("https://www.eporner.com/api/v2/video/search/?page=" + pagina + "&per_page=30&format=json&lq=1&gay=2", { 168 | "method": "GET", 169 | "headers": { 170 | "Accept": "application/json", 171 | } 172 | }) 173 | .then(response => response.json()) 174 | .then(result => { stampaCards(result) }) 175 | .catch(error => console.log('Error:', error)); 176 | } else { 177 | fetch("https://www.eporner.com/api/v2/video/search/?page=" + pagina + "&per_page=30&format=json&lq=1&query=" + sezione, { 178 | "method": "GET", 179 | "headers": { 180 | "Accept": "application/json", 181 | } 182 | }) 183 | .then(response => response.json()) 184 | .then(result => { stampaCards(result) }) 185 | .catch(error => console.log('Error:', error)); 186 | } 187 | break; 188 | default: 189 | document.getElementById("ricerca").value = ""; 190 | break; 191 | } 192 | } 193 | // funzione che mi stampa le cards 194 | function stampaCards(result) { 195 | 196 | console.log(result); 197 | let arrayVideo = result.videos; 198 | let cardsVideo = document.getElementById('video'); 199 | 200 | cardsVideo.innerHTML = ""; 201 | btnNext.className = "btn btn-outline-warning"; 202 | if (arrayVideo.length == 0) { 203 | intestazione.innerHTML = "Nessun risultato trovato"; 204 | btnNext.className = "btn btn-outline-warning disabled"; 205 | return; 206 | } 207 | // stampa delle cards 208 | arrayVideo.forEach((video, index) => { 209 | const wrapper = document.createElement(`div`); 210 | wrapper.className = `col`; 211 | 212 | const card = document.createElement(`div`); 213 | card.className = `card`; 214 | card.addEventListener(`click`, (ev) => window.open(video.embed)); 215 | 216 | const p = document.createElement(`p`); 217 | p.className = `card-text`; 218 | 219 | const cardImg = document.createElement(`img`); 220 | cardImg.src = video.default_thumb.src; 221 | cardImg.className = `card-img-top`; 222 | 223 | card.onmouseover = function () { 224 | clearInterval(hoverInterval); 225 | CambiaImmagineOnHover(this, arrayVideo[index].thumbs[0].src) 226 | }; 227 | card.onmouseleave = function () { 228 | clearInterval(hoverInterval); 229 | setImmagineDefault(this, video.default_thumb.src, stampaTitolo(arrayVideo[index].title, 65)) 230 | }; 231 | card.ontouchstart = function () { 232 | clearInterval(hoverInterval) 233 | CambiaImmagineOnHover(this, arrayVideo[index].thumbs[0].src) 234 | }; 235 | card.ontouchend = function () { 236 | clearInterval(hoverInterval); 237 | setImmagineDefault(this, video.default_thumb.src, stampaTitolo(arrayVideo[index].title, 65)) 238 | }; 239 | 240 | const cardDescription = document.createElement(`div`); 241 | cardDescription.className = `card-description`; 242 | 243 | const h2 = document.createElement(`h2`); 244 | h2.className = `card-title`; 245 | h2.textContent = stampaTitolo(arrayVideo[index].title, 60); 246 | 247 | const spanViews = document.createElement(`span`); 248 | spanViews.className = `card-text`; 249 | spanViews.id = `n-views`; 250 | 251 | const imgViews = document.createElement(`img`); 252 | imgViews.src = `/img/eye.png`; 253 | imgViews.id = `views`; 254 | 255 | const spanTime = document.createElement(`span`); 256 | spanTime.className = `card-text`; 257 | spanTime.id = `time`; 258 | 259 | const imgTime = document.createElement(`img`); 260 | imgTime.src = `/img/clock-circular-outline.png`; 261 | imgTime.id = `clock`; 262 | 263 | const spanViewsText = document.createElement(`span`); 264 | spanViewsText.textContent = video.views; 265 | 266 | const spanTimeText = document.createElement(`span`); 267 | spanTimeText.textContent = video.length_min; 268 | 269 | card.append(cardImg); 270 | card.append(cardDescription); 271 | cardDescription.append(h2); 272 | wrapper.append(card); 273 | cardsVideo.append(wrapper); 274 | 275 | spanViews.append(imgViews); 276 | spanViews.append(spanViewsText); 277 | 278 | spanTime.append(imgTime); 279 | spanTime.append(spanTimeText); 280 | 281 | p.append(spanViews); 282 | p.append(spanTime); 283 | 284 | cardDescription.append(p); 285 | }); 286 | loading = true; 287 | setTimeout(function () { 288 | load(); 289 | }, 800); 290 | } 291 | // funzione che mi crea la homepage quando carica la pagina index 292 | function CreaHome() { 293 | window.scrollTo(top); 294 | loading = false; 295 | load(); 296 | if (pagina == 1) { 297 | intestazione.innerHTML = "Ultime uscite"; 298 | btnPrev.className = "btn btn-outline-warning disabled"; 299 | } else { 300 | btnPrev.className = "btn btn-outline-warning"; 301 | btnNext.className = "btn btn-outline-warning"; 302 | } 303 | cambiaPagina(); 304 | console.log("Crea Home"); 305 | tipoRicerca = 5; 306 | fetch("https://www.eporner.com/api/v2/video/search/?format=json&lq=0&page=" + pagina + "&per_page=30", { 307 | "method": "GET", 308 | "headers": { 309 | "Accept": "application/json" 310 | } 311 | }) 312 | .then(response => response.json()) 313 | .then(result => { stampaCards(result) }) 314 | .catch(error => console.log('Error:', error)); 315 | cambiaPagina(); 316 | } 317 | // funzione che mi crea la pagina trending quando carica la pagina trending 318 | function CreaTrending() { 319 | loading = false; 320 | load(); 321 | window.scrollTo(top); 322 | cambiaPagina(); 323 | if (pagina == 1) { 324 | intestazione.innerHTML = `

Trending

`; 326 | btnPrev.className = "btn btn-outline-warning disabled"; 327 | } else { 328 | btnPrev.className = "btn btn-outline-warning"; 329 | btnNext.className = "btn btn-outline-warning"; 330 | } 331 | console.log("Crea Trending"); 332 | tipoRicerca = 6; 333 | fetch("https://www.eporner.com/api/v2/video/search/?page=" + pagina + "&order=top-weekly&lq=0&format=json&per_page=30", { 334 | "method": "GET", 335 | "headers": { 336 | "Accept": "application/json" 337 | } 338 | }) 339 | .then(response => response.json()) 340 | .then(result => { stampaCards(result) }) 341 | .catch(error => console.log('Error:', error)); 342 | } 343 | //funzione che mi stampa il titolo del video limitando i caratteri 344 | function stampaTitolo(testo, numeroParole) { 345 | let parole = testo.split(''); 346 | let paroleDaStampare = parole.slice(0, numeroParole).join(''); 347 | return paroleDaStampare; 348 | } 349 | // funzione che mi fa andare alla pagina successiva 350 | function next() { 351 | window.scrollTo(top); 352 | intestazione.innerHTML = ""; 353 | console.log(tipoRicerca); 354 | if (pagina > 0 && pagina < 100) { 355 | pagina++; 356 | } else { 357 | pagina = 1; 358 | } 359 | switch (tipoRicerca) { 360 | case 5: 361 | CreaHome(); 362 | break; 363 | case 6: 364 | CreaTrending(); 365 | default: 366 | Ricerca(); 367 | break; 368 | } 369 | } 370 | // funzione che mi fa andare alla pagina precedente 371 | function prev() { 372 | window.scrollTo(top); 373 | intestazione.innerHTML = ""; 374 | if (pagina > 1 && pagina < 100) { 375 | pagina--; 376 | } else { 377 | pagina = 1; 378 | 379 | } 380 | switch (tipoRicerca) { 381 | case 5: 382 | CreaHome(); 383 | break; 384 | case 6: 385 | CreaTrending(); 386 | break; 387 | default: 388 | Ricerca(); 389 | break; 390 | } 391 | } 392 | //Funzione per far funzionare il tasto invio nella select della categoria 393 | categoria.addEventListener("keypress", function (event) { 394 | if (event.key === "Enter") { 395 | event.preventDefault(); 396 | btn.click(); 397 | } 398 | }); 399 | 400 | search.addEventListener("keypress", function (event) { 401 | if (event.key === "Enter") { 402 | event.preventDefault(); 403 | btn.click(); 404 | } 405 | }); 406 | 407 | selectDurata.addEventListener("keypress", function (event) { 408 | if (event.key === "Enter") { 409 | event.preventDefault(); 410 | btn.click(); 411 | } 412 | }); 413 | //Funzione per far funzionare il tasto invio nella select della sezione 414 | selectSezione.addEventListener("keypress", function (event) { 415 | if (event.key === "Enter") { 416 | event.preventDefault(); 417 | btn.click(); 418 | } 419 | }); 420 | //Funzione per cambiare l'immagine della card quando il mouse entra nella card 421 | function CambiaImmagineOnHover(cardElement, thumbBase) { 422 | let i = 2; 423 | let prec = 1; 424 | let url; 425 | inizio = thumbBase; 426 | cardElement.querySelector('img').src = thumbBase; 427 | cardElement.querySelector('h2').textContent = ""; 428 | cardElement.querySelector('p').classList.add("visually-hidden"); 429 | hoverInterval = setInterval(() => { 430 | cardElement.querySelector('img').src = thumbBase; 431 | url = thumbBase.replace(prec + "_", i + "_"); 432 | thumbBase = url; 433 | if (i == 15 || prec == 14) { 434 | i = 2; 435 | prec = 1; 436 | thumbBase = inizio; 437 | cardElement.querySelector('img').src = thumbBase; 438 | 439 | } else { 440 | cardElement.querySelector('img').src = thumbBase.replace(prec + "_", i + "_"); 441 | i++; 442 | prec++; 443 | } 444 | }, 350); 445 | } 446 | //Funzione per cambiare l'immagine della card quando il mouse esce dalla card 447 | function setImmagineDefault(card, thumb, titolo) { 448 | card.querySelector('img').src = thumb; 449 | card.querySelector('h2').textContent = titolo; 450 | card.querySelector('p').classList.remove("visually-hidden"); 451 | } 452 | //Funzione per cambiare il numero della pagina 453 | function cambiaPagina() { 454 | indicePagina.textContent = pagina; 455 | } 456 | // Funzione per far apparire il loading 457 | function load() { 458 | let gridVideo = document.getElementById('graficaCards'); 459 | let Divloading = document.getElementById("loading"); 460 | if (loading == true) { 461 | Divloading.className = "container-fluid visually-hidden"; 462 | gridVideo.className = "container-fluid"; 463 | } else { 464 | Divloading.className = "container-fluid"; 465 | gridVideo.className = "container-fluid visually-hidden"; 466 | } 467 | } 468 | // Funzione per resettare la pagina 469 | function resetPagina(){ 470 | pagina = 1; 471 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fap-Tap 2 | 3 | Sito porno che utilizza l'api di Eporner. 4 | 5 | Tutti i video sono hostati sul player di Eporner che ci permette di visualizzare i video anche in risoluzioni molto alte. 6 | 7 | ### Funzionalità 8 | 9 | * Ricerca per vari filtri (Categoria, Sezione, Durata e Parola chiave(default)) 10 | * Scorrimento pagine (Max 100 pagine) 11 | * Preview se si tiene il cursore sopra l'immagine del video o da smartphone quando si ha il dito sull'immagine. 12 | * Ogni pagina ha 30 video 13 | * La pagina trending si aggiorna settimanalmente con i video migliori 14 | * Il sito si adatta in base al dispositivo e allo schermo 15 | 16 | > [Link al sito](https://tap-fap.vercel.app/) 17 | -------------------------------------------------------------------------------- /best.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Trending 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 106 | 107 |

Trending

109 |
110 | 113 |
114 | 115 | 121 |
122 | 123 |
124 | 125 | 135 | 136 | 139 | 140 | 142 | 143 | 145 | -------------------------------------------------------------------------------- /fonts/Gotham-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucalorenzo04/Tap-fap/3e910839886be6c79a160fc393236eb9d4f46634/fonts/Gotham-Black.otf -------------------------------------------------------------------------------- /fonts/PTSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucalorenzo04/Tap-fap/3e910839886be6c79a160fc393236eb9d4f46634/fonts/PTSans-Bold.ttf -------------------------------------------------------------------------------- /img/Fap-tap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucalorenzo04/Tap-fap/3e910839886be6c79a160fc393236eb9d4f46634/img/Fap-tap.png -------------------------------------------------------------------------------- /img/campfire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucalorenzo04/Tap-fap/3e910839886be6c79a160fc393236eb9d4f46634/img/campfire.png -------------------------------------------------------------------------------- /img/clock-circular-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucalorenzo04/Tap-fap/3e910839886be6c79a160fc393236eb9d4f46634/img/clock-circular-outline.png -------------------------------------------------------------------------------- /img/eye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucalorenzo04/Tap-fap/3e910839886be6c79a160fc393236eb9d4f46634/img/eye.png -------------------------------------------------------------------------------- /img/no-minors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucalorenzo04/Tap-fap/3e910839886be6c79a160fc393236eb9d4f46634/img/no-minors.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tap&Fap 9 | 10 | 12 | 13 | 14 | 15 | 16 | 105 |

Ultime uscite

106 | 107 |
108 | 111 |
112 | 113 | 118 |
119 | 120 | 121 | 131 | 132 | 135 | 136 | 138 | 139 | 141 | -------------------------------------------------------------------------------- /style/stylesheet.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Generale; 3 | src: url("./../fonts/Gotham-Black.otf"); 4 | font-display: swap; 5 | } 6 | 7 | @font-face { 8 | font-family: intitolazione; 9 | src: url("./../fonts/PTSans-Bold.ttf"); 10 | font-display: swap; 11 | } 12 | 13 | img.card-img-top { 14 | border-radius: 0% 15 | }; 16 | 17 | #pagina { 18 | font-size: large; 19 | } 20 | 21 | span#ricerca,#ricerca,#logo, #categoria, #pagina { 22 | color: orange; 23 | } 24 | 25 | body { 26 | /* background-color: rgb(33, 37, 41); */ 27 | background-color: rgb(0, 0, 0); 28 | font-family: Generale; 29 | color: white; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .dropdown-item:hover { 35 | cursor: pointer; 36 | color: white; 37 | background-color: rgb(41, 48, 54); 38 | border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; 39 | } 40 | option { 41 | color: white; 42 | background-color: rgb(41, 48, 54); 43 | border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; 44 | } 45 | 46 | .navbar { 47 | background-color: #161616f5!important; 48 | 49 | } 50 | 51 | #titolo { 52 | color: white; 53 | font-size: 150%; 54 | margin-left: 1.5%; 55 | } 56 | 57 | h1 { 58 | color: white; 59 | text-align: center; 60 | margin-top: 1.5%; 61 | margin-bottom: 2%; 62 | } 63 | 64 | li.page-item{ 65 | font-size: 20px; 66 | } 67 | 68 | .navbar-toggler { 69 | color: rgb(221, 118, 21); 70 | margin-right: 6.1%; 71 | } 72 | 73 | nav#pagination { 74 | display: flex; 75 | flex-direction: row; 76 | justify-content: center; 77 | align-items: center; 78 | } 79 | 80 | #loading{ 81 | display: flex; 82 | justify-content: center; 83 | margin-top: 4%; 84 | } 85 | 86 | .spinner-border{ 87 | color: rgb(255, 119, 0)!important; 88 | width: 3rem; 89 | height: 3rem; 90 | margin-bottom: 70%; 91 | } 92 | 93 | nav#pagination a { 94 | color: rgb(255, 119, 0); 95 | background-color: #1d1d1d; 96 | border-color: rgba(255, 255, 255, 0.341); 97 | } 98 | 99 | nav#pagination a:hover { 100 | background-color: black; 101 | border-color: orange; 102 | } 103 | 104 | div.card:hover { 105 | cursor: pointer; 106 | } 107 | 108 | .container-fluid { 109 | width: 98% !important; 110 | } 111 | 112 | #icone { 113 | width: 3%; 114 | margin-left: 0.3%; 115 | margin-right: 0.1%; 116 | } 117 | 118 | select { 119 | margin-right: 0.5rem; 120 | } 121 | 122 | .card { 123 | text-shadow: 0 0 2px #000000; 124 | align-items: center; 125 | border:none; 126 | border-radius: 0%; 127 | } 128 | 129 | p { 130 | display: flex; 131 | } 132 | #clock { 133 | width: 20px; 134 | margin-bottom: 0.8%; 135 | margin-right: 6%; 136 | } 137 | 138 | #form_ricerca { 139 | margin-right: 2%; 140 | } 141 | 142 | #time { 143 | font-size: large; 144 | color: rgb(255, 255, 255); 145 | display: flex; 146 | align-items: center; 147 | margin-right: 4%; 148 | } 149 | 150 | #views { 151 | width: 10%; 152 | margin-bottom: 0.5%; 153 | margin-right: 2%; 154 | margin-left: 2%; 155 | margin-top: 1%; 156 | } 157 | 158 | #n-views { 159 | display: flex; 160 | align-items: center; 161 | margin-left: 2%; 162 | } 163 | .card-description { 164 | position: absolute; 165 | bottom: 0%; 166 | width: 100%; 167 | } 168 | .card-description h2 { 169 | font-size: 140%; 170 | text-align: center; 171 | align-items: center; 172 | color: #ffffff; 173 | font-family: intitolazione; 174 | padding: 0% 2% 0% 2%; 175 | margin-bottom: 0.5%; 176 | } 177 | .card-description p { 178 | font-size: 20px; 179 | text-align: center; 180 | align-items: center; 181 | color: #ffffff; 182 | display: flex; 183 | justify-content: space-between; 184 | } 185 | 186 | .row { 187 | margin-bottom: 1%; 188 | margin-left: auto; 189 | margin-right: auto; 190 | } 191 | 192 | #star { 193 | width: 2%; 194 | margin-right: 0.5%; 195 | } 196 | 197 | .btn#next { 198 | width: 8%; 199 | margin-left: 1.5%; 200 | } 201 | 202 | .btn#previous { 203 | width: 8%; 204 | margin-right: 1.5%; 205 | } 206 | 207 | span#pagina { 208 | width: 5%; 209 | height: 5%; 210 | font-size: 21px; 211 | background-color: transparent !important; 212 | } 213 | 214 | .pagination { 215 | width: 100%; 216 | display: contents; 217 | } 218 | 219 | @media screen and (max-width: 1250px) { 220 | .card-description h2 { 221 | font-size: 100%; 222 | text-align: center; 223 | align-items: center; 224 | } 225 | .card-description p { 226 | font-size: 120%; 227 | text-align: center; 228 | align-items: center; 229 | } 230 | 231 | .row { 232 | width: 100%; 233 | margin-bottom: 1%; 234 | margin-left: auto; 235 | margin-right: auto; 236 | } 237 | 238 | h1 { 239 | margin-top: 2.5%; 240 | margin-bottom: 3%; 241 | } 242 | #views { 243 | width: 15%; 244 | margin-right: 5%; 245 | } 246 | 247 | #clock { 248 | width: 25%; 249 | } 250 | 251 | .btn#next { 252 | margin-left: 3%; 253 | } 254 | 255 | .btn#previous { 256 | margin-right: 3%; 257 | } 258 | 259 | #n-views { 260 | font-size: 70%; 261 | } 262 | 263 | #time { 264 | font-size: 70%; 265 | margin-right: 5%; 266 | } 267 | .btn#next { 268 | margin-left: 3%; 269 | } 270 | 271 | .btn#previous { 272 | margin-right: 3%; 273 | } 274 | } 275 | 276 | @media screen and (max-width: 725px) { 277 | .card-description h2 { 278 | font-size: 10px; 279 | text-align: center; 280 | align-items: center; 281 | } 282 | .card-description p { 283 | font-size: 15px; 284 | text-align: center; 285 | align-items: center; 286 | } 287 | 288 | .btn#next { 289 | width: 15%; 290 | } 291 | 292 | .btn#previous { 293 | width: 15%; 294 | } 295 | 296 | .pagination { 297 | width: 100%; 298 | display: contents; 299 | } 300 | 301 | .row { 302 | width: 100%; 303 | margin-bottom: 1%; 304 | margin-left: auto; 305 | margin-right: auto; 306 | } 307 | 308 | h1 { 309 | margin-top: 2.5%; 310 | margin-bottom: 3%; 311 | } 312 | 313 | #views { 314 | width: 22px; 315 | margin-bottom: 0.5%; 316 | margin-right: 10%; 317 | margin-left: 10%; 318 | } 319 | 320 | #time { 321 | font-size: 15px; 322 | margin-right: 5%; 323 | } 324 | 325 | #clock { 326 | width: 18px; 327 | } 328 | #n-views { 329 | font-size: 70%; 330 | } 331 | 332 | #time { 333 | font-size: 70%; 334 | margin-right: 5%; 335 | } 336 | .btn#next { 337 | margin-left: 3%; 338 | } 339 | 340 | .btn#previous { 341 | margin-right: 3%; 342 | } 343 | } 344 | 345 | 346 | @media screen and (max-width: 575px) { 347 | .card-description h2 { 348 | font-size: 100%; 349 | } 350 | 351 | .card-description p { 352 | font-size: 120%; 353 | } 354 | .row { 355 | width: 100%; 356 | margin-bottom: 1%; 357 | margin-left: auto; 358 | margin-right: auto; 359 | } 360 | 361 | nav { 362 | width: auto; 363 | } 364 | 365 | h1 { 366 | margin-top: 4%; 367 | margin-bottom: 4.5%; 368 | font-size: 28px; 369 | } 370 | 371 | .btn#next { 372 | width: 20%; 373 | } 374 | 375 | .btn#previous { 376 | width: 20%; 377 | } 378 | img#icone { 379 | width: 7%; 380 | } 381 | 382 | #titolo { 383 | margin-left: 6%; 384 | } 385 | 386 | .btn#next { 387 | margin-left: 5%; 388 | } 389 | 390 | .btn#previous { 391 | margin-right: 5%; 392 | } 393 | 394 | li.page-item{ 395 | font-size: 20px; 396 | } 397 | #pagina { 398 | font-size: 15px; 399 | } 400 | } 401 | 402 | html { 403 | scroll-behavior: smooth; 404 | } 405 | 406 | /* Firefox */ 407 | * { 408 | scrollbar-color: #424242; 409 | } 410 | 411 | /* Chrome, Edge, and Safari */ 412 | *::-webkit-scrollbar { 413 | width: 16px; 414 | } 415 | 416 | *::-webkit-scrollbar-track { 417 | background: transparent; 418 | } 419 | 420 | *::-webkit-scrollbar-thumb { 421 | background-color: #353535; 422 | border-radius: 0px; 423 | border: 5px solid transparent; 424 | } 425 | --------------------------------------------------------------------------------