carpi/LDM-ASIR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separado los contenidos de html, css y javascript en diferentes directorios \ Creado primera actividad de JavaScript

Browse Source
This commit is contained in:
Lil-Carpi
2026-01-02 16:43:42 +01:00
parent 7ecd35ca73
commit b9d16cd92b
91 changed files with 99 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
HTML-CSS/ACT21_sad/act21_sad.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ACT 2.1 Sebastian Ariel Duarte Oruez</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>La Lluna</h1>
<p>
La Lluna és l'únic satèl·lit natural de <strong>la Terra</strong>, juntament amb la qual forma el sistema
satel·litari Terra-Lluna. Té aproximadament una quarta part del diàmetre de <strong>la Terra</strong>,
magnitud comparable a l'amplada del continent australià. És el cinquè satèl·lit més gros
del sistema solar, amb una mida que supera la de qualsevol planeta nan conegut,
així com el satèl·lit més gros (i massiu) en proporció al seu planeta.
</p>
<img src="img/lluna.jpg" alt="no va la imagen :(">
<h2>Característiques físiques </h2>
<p>
La Lluna té un nucli intern sòlid ric en ferro, d'un radi d'uns 160 quilòmetres
i un nucli extern compost principalment de ferro líquid d'aproximadament 350 quilòmetres
de radi. Al voltant del nucli, hi ha una capa límit parcialment fosa d'un radi d'uns 587 quilòmetres.
</p>
<p>
La Lluna és el segon satèl·lit més dens del sistema solar després de <strong>Io</strong>. No obstant això,
el nucli interior de la Lluna és petit, d'un radi d'uns 160 km o menys; això és només un 10% del radi
de la Lluna. La seva composició no està ben delimitada, però és probable que sigui de ferro metàl·lic
aliat amb una petita quantitat de sofre i níquel.
</p>
<h3>Principals mars lunars i cràters en la cara visible:</h3>
<ol>
<li>Oceanus Procellarum</li>
<li>Mare Imbrium</li>
<li> Mare Tranquillitatis</li>
<li>Mare Serenitatis</li>
<li>Mare Nubium</li>
<li>Mare Fecunditatis</li>
<li>Mare Crisium</li>
<li>Mare Humorum</li>
<li>Mare Nectaris</li>
<li>Craters :
<ul>
<li>Tycho</li>
<li>Copèrnic</li>
<li>Kepler</li>
</ul>
</li>
</ol>
<p>Informació extreta de la <a href="https://wikipedia.org">Viquipèdia</a>.</p>
</body>
</html>

BIN
HTML-CSS/ACT21_sad/img/lluna.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

52
HTML-CSS/ACT22_sad/act22_sad.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ACT 2.1 Sebastian Ariel Duarte Oruez</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>La Lluna</h1>
<p>
La Lluna és l'únic satèl·lit natural de <strong>la Terra</strong>, juntament amb la qual forma el sistema
satel·litari Terra-Lluna. Té aproximadament una quarta part del diàmetre de <strong>la Terra</strong>,
magnitud comparable a l'amplada del continent australià. És el cinquè satèl·lit més gros
del sistema solar, amb una mida que supera la de qualsevol planeta nan conegut,
així com el satèl·lit més gros (i massiu) en proporció al seu planeta.
</p>
<img src="img/lluna.jpg" alt="no va la imagen :(">
<h2>Característiques físiques </h2>
<p>
La Lluna té un nucli intern sòlid ric en ferro, d'un radi d'uns 160 quilòmetres
i un nucli extern compost principalment de ferro líquid d'aproximadament 350 quilòmetres
de radi. Al voltant del nucli, hi ha una capa límit parcialment fosa d'un radi d'uns 587 quilòmetres.
</p>
<p>
La Lluna és el segon satèl·lit més dens del sistema solar després de <strong>Io</strong>. No obstant això,
el nucli interior de la Lluna és petit, d'un radi d'uns 160 km o menys; això és només un 10% del radi
de la Lluna. La seva composició no està ben delimitada, però és probable que sigui de ferro metàl·lic
aliat amb una petita quantitat de sofre i níquel.
</p>
<h3>Principals mars lunars i cràters en la cara visible:</h3>
<ol>
<li>Oceanus Procellarum</li>
<li>Mare Imbrium</li>
<li> Mare Tranquillitatis</li>
<li>Mare Serenitatis</li>
<li>Mare Nubium</li>
<li>Mare Fecunditatis</li>
<li>Mare Crisium</li>
<li>Mare Humorum</li>
<li>Mare Nectaris</li>
<li>Craters :
<ul>
<li>Tycho</li>
<li>Copèrnic</li>
<li>Kepler</li>
</ul>
</li>
</ol>
<p>Informació extreta de la <a href="https://wikipedia.org">Viquipèdia</a>.</p>
</body>
</html>

22
HTML-CSS/ACT22_sad/css/style.css Normal file
View File

@@ -0,0 +1,22 @@
body
{
background-color: rgb(29,41,75);
}
h1, h2
{
background-color: white;
}
h3, ol, ul, li, p
{
color: white;
}
h3, ol, ul, li
{
text-align: center;
list-style-position:inside;
}
img
{
display: block;
margin: auto;
}

BIN
HTML-CSS/ACT22_sad/img/lluna.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

104
HTML-CSS/ACT23_sad/act23_sad-llarga.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Katsushika Hokusai - L'Art del japó</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="contenidor-general">
<h1>L'art - Llenguatge de Marques</h1>
<h1>Katsushika Hokusai</h1>
<h1><a href="act23_sad.html">Versió curta</a></h1>
<section class="bloc">
<h2 class="numeracio">Qui va ser Katsushika Hokusai?</h2>
<img src="img/Hokusai_portrait.jpg" alt="Hokusai-San" class="Autoretrat">
<p><i>Katsushika Hokusai "活しか北斎"</i> (1760–1849) va ser un pintor i gravador japonès del període Edo, mestre de l'art ukiyo-e (gravats del "món flotant").</p>
<p>És mundialment conegut per la sèrie de gravats "Trenta-sis vistes del Mont Fuji" (c. 1830-1833), que inclou la seva obra més cèlebre: "La gran ona de Kanagawa".</p>
<p>La seva obra va influir enormement en l'art occidental, especialment en l'impressionisme. Va ser un artista molt productiu que va pintar fins a la seva mort als 88 anys.</p>
<h3>Característiques de la seva pintura</h3>
<ul>
<li>Ús de línies definides i colors plans.</li>
<li>Composicions equilibrades inspirades en la natura.</li>
<li>Innovació tècnica en el gravat i ús del color blau de Prússia</li>
</ul>
</section>
<section class="bloc">
<h2 class="numeracio">Ukiyo-e</h2>
<img src="img/Ukiyo-e_dsc04680.jpg" alt="Ukiyo-e">
<p><i>Planxa d'impressió ukiyo-e</i></p>
<p>Els ukiyo-e, en japonès <i>nikuhitsu ukiyo-e (肉筆浮世ー絵)</i>, eren obres en què el pintor feia servir pinzells directament sobre paper o seda.</p>
<p>Aquests dibuixos permetien veure l'obra final íntegrament, encara que, tret de la forma de les línies i l'arranjament del color, es perdien durant el procés del dibuix.</p>
<p>Finalment, ja amb les planxes necessàries (usualment se n'utilitzava una per cada color necessari), un <i>surishi (すりし)</i>, o impressor, portava a terme el treball d'impressió col·locant el paper d'estampació sobre les consecutives planxes.</p>
<p>La impressió es realitzava fregant una eina anomenada <i>baren (ばれん)</i> sobre el dors de les fulles. Aquest sistema podia produir variacions de tonalitat en les estampes.</p>
<p>D'una sèrie de planxes podien fer-se una gran quantitat de còpies, de vegades comptades en milers, fins que les planxes es desgastaven.</p>
</section>
<section class="bloc">
<h2 class="numeracio">1. La gran ona de Kanagawa</h2>
<img src="img/The-Great-Wave-off-Kanagawa-1024x706.jpg" alt="La gran ona de Kanagawa">
<p><i>La gran ona de Kanagawa - 神奈川沖波裏</i></p>
<p>Una de les pintures més conegudes del pintor.</p>
</section>
<section class="bloc">
<h2 class="numeracio">2. Vent suau, matí clar (Fuji vermell)</h2>
<img src="img/katsushika-hokusai-paintings-1024x706.jpg" alt="Vent suau, matí clar (Fuji vermell)">
<p><i>Vent suau, matí clar (Fuji vermell) - 凱風快晴</i></p>
</section>
<section class="bloc">
<h2 class="numeracio">3. Camallarg i Cirerer Ploraner</h2>
<img src="img/Bullfinch-and-Weeping-Cherry-Blossoms.jpg" alt="Camallarg i Cirerer Ploraner">
<p><i>Camallarg i Cirerer Ploraner - ウグイス賭垂れー桜</i></p>
<p><i>Nota</i>: El nom en japonès fa referència al cirerer ploraner (<i>shidare zakura - 垂れー桜</i>).</p>
</section>
<section class="bloc">
<h2 class="numeracio">4. Sarumaru Dayu</h2>
<img src="img/Sarumaru-Dayu-1024x720.jpg" alt="Sarumaru Dayu">
<p><i>Sarumaru Dayu - 猿丸太夫</i></p>
</section>
<section class="bloc">
<h2 class="numeracio">5. Oceans de la Saviesa</h2>
<img src="img/Oceans-of-Wisdom-1024x721.jpg" alt="Oceans de la Saviesa">
<p><i>Oceans de la Saviesa - 千絵の海</i></p>
</section>
<section class="bloc">
<h2 class="numeracio">6. Kajikazawa a la província de Kai</h2>
<img src="img/Kajikazawa-in-Kai-Province-1024x679.jpg" alt="Kajikazawa a la província de Kai">
<p><i>Kajikazawa a la província de Kai - 甲州石班澤</i></p>
</section>
<section class="bloc">
<h2 class="numeracio">7. Ejiri a la província de Suruga</h2>
<img src="img/Ejiri-in-the-Suruga-Province-1.jpg" alt="Ejiri a la província de Suruga">
<p><i>Ejiri a la província de Suruga - 駿州江尻</i></p>
</section>
<section class="bloc">
<h2 class="numeracio">8. Manual de Dibuix Ràpid</h2>
<img src="img/Egrets-from-Quick-Lessons-in-Simplified-Drawing-1-1024x721.jpg" alt="Manual de Dibuix Ràpid">
<p><i>Manual de Dibuix Ràpid - 略画早指南</i></p>
</section>
<section class="bloc">
<h2 class="numeracio">9. El Pont Penjant a la Frontera de les Províncies de Hida i Etchū</h2>
<img src="img/The-Suspension-Bridge-on-the-Border-of-Hida-and-Etchu-Provinces-1024x693.jpg" alt="Pont Penjant a la Frontera de les Províncies de Hida i Etchū">
<p><i>El Pont Penjant a la Frontera de les Províncies de Hida i Etchū - 飛越の堺つりはし</i></p>
</section>
<section class="bloc">
<h2 class="numeracio">10. Vista del Fuji des d'un camp a la província d'Owari</h2>
<img src="img/Fujimigahara-in-Owari-Province-1024x684.jpg" alt="Vista del Fuji des d'un camp a la província d'Owari">
<p><i>Vista del Fuji des d'un camp a la província d'Owari - 尾州不二見原</i></p>
</section>
</div>
</body>
</html>

95
HTML-CSS/ACT23_sad/act23_sad.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Katsushika Hokusai - L'Art del Japó</title>
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/png" href="img/favicon.png">
</head>
<body>
<div class="contenidor-general">
<h1>L'art - Llenguatge de Marques</h1>
<h1>Katsushika Hokusai</h1>
<h1><a href="act23_sad-llarga.html">Versió llarga</a></h1>
<section class="bloc" id="biografia">
<h2>Qui va ser Katsushika Hokusai?</h2>
<img src="img/Hokusai_portrait.jpg" alt="Autoretrat de Hokusai" class="autoretrat">
<p><i>Katsushika Hokusai (活しか北斎)</i> (1760–1849) va ser un pintor i gravador japonès del període Edo, mestre de l'art <i>ukiyo-e</i> (gravats del "món flotant").</p>
<p>És mundialment conegut per la sèrie de gravats <i>Trenta-sis vistes del Mont Fuji</i> (c. 1830-1833), que inclou la seva obra més cèlebre: <i>La gran ona de Kanagawa</i>.</p>
<p>La seva obra va influir enormement en l'art occidental, especialment en l'impressionisme. Va ser un artista molt productiu que va pintar fins a la seva mort als 88 anys.</p>
<h3>Característiques de la seva pintura:</h3>
<ul>
<li>Ús de línies definides i colors plans.</li>
<li>Composicions equilibrades inspirades en la natura.</li>
<li>Innovació tècnica en el gravat i ús del color blau de Prússia.</li>
</ul>
</section>
<section class="bloc" id="ukiyoe">
<h2>Què és l'Ukiyo-e?</h2>
<img src="img/Ukiyo-e_dsc04680.jpg" alt="Planxa d'impressió Ukiyo-e">
<p><i>Planxa d'impressió ukiyo-e</i></p>
<p>
L'<strong>Ukiyo-e</strong> és una tècnica tradicional japonesa de <strong>gravat en fusta</strong> que va florir entre els segles XVII i XIX.
Tot i que sovint pot semblar pintura, les obres d'Ukiyo-e no es fan amb pinzells ni traços directes, sinó mitjançant un
<strong>procés de gravat</strong> molt precís.
</p>
<p>
Primer, l’artista dissenyava la imatge sobre paper. Després, artesans especialitzats tallaven el dibuix en planxes de fusta,
una per a cada color. Finalment, es premsaven successivament sobre el paper per obtenir el resultat final.
Aquest mètode permetia crear múltiples còpies de la mateixa obra amb una qualitat sorprenent.
</p>
</section>
<section class="bloc" id="gran-ona">
<h2>Pintura més rellevant: La gran ona de Kanagawa</h2>
<img src="img/The-Great-Wave-off-Kanagawa-1024x706.jpg" alt="La gran ona de Kanagawa">
<p><i>La gran ona de Kanagawa - 神奈川沖波裏</i></p>
<p>
Aquesta obra forma part de la sèrie <i>Trenta-sis vistes del Mont Fuji</i>. Mostra una ona gegant a punt d'enfonsar diverses barques,
mentre al fons s'albira el Mont Fuji. És un exemple de la fusió entre la bellesa i el perill en la natura japonesa.
</p>
<h3>Característiques destacades:</h3>
<ul>
<li>Ús dramàtic del contrast entre el mar i el Mont Fuji.</li>
<li>Composició dinàmica i perspectiva influenciada per l'art occidental.</li>
<li>Simbolisme profund sobre la força de la natura i la fragilitat humana.</li>
</ul>
<p>
<strong>Opinió personal:</strong> Una de les seves obres més rellevants. Mostra la fragilitat de l’ésser humà en qualsevol situació.
Definitivament, me la posaria de fons de pantalla.
</p>
</section>
<section class="bloc" id="fuji-vermell">
<h2>Segona pintura rellevant: Vent suau, matí clar (Fuji vermell)</h2>
<img src="img/katsushika-hokusai-paintings-1024x706.jpg" alt="Vent suau, matí clar (Fuji vermell)">
<p><i>Vent suau, matí clar (Fuji vermell) - 凱風快晴</i></p>
<p>
Aquesta obra representa el Mont Fuji durant un matí serè, il·luminat pel sol naixent. És un homenatge a la calma i la puresa del Japó,
en contrast amb la força de <i>La gran ona</i>.
</p>
<h3>Característiques principals:</h3>
<ul>
<li>Ús de tons càlids i equilibrats per transmetre serenitat.</li>
<li>Composició simple però harmònica, centrada en el Mont Fuji.</li>
</ul>
<p>
<strong>Opinió personal:</strong> És una pintura amb molt de taronja, culpa del sol naixent que il·lumina el Mont Fuji. M’agrada.
</p>
</section>
</div>
</body>
</html>

65
HTML-CSS/ACT23_sad/css/style.css Normal file
View File

@@ -0,0 +1,65 @@
body
{
background-color:#0077b6;
margin:0;
padding:20px;
}
.contenidor-general
{
background-color: #ffffff;
border: 3px solid #00b4d8;
border-radius: 20px;
padding: 40px;
max-width:900px;
margin:0 auto;
box-shadow: 0 6px 16px rgba(0, 119, 182, 0.3);
}
h1
{
text-align: center;
margin-bottom: 40px;
color: #0077b6;
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.bloc
{
border: 2px solid #90e0ef;
border-radius:16px;
padding: 25px;
margin-bottom:30px;
background: linear-gradient(180deg, #f9fcfd 0%, #e9f9fc 100%);
box-shadow: 0 2px 8px rgba(0, 180, 216, 0.15);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bloc:hover
{
transform: translateY(-3px);
box-shadow: 0 6px 14px rgba(0, 119, 182, 0.25);
}
.bloc h2, h3
{
margin-top: 0;
color: #03045e;
border-bottom: 2px solid #00b4d8;
padding-bottom: 8px;
font-weight: 600;
}
img
{
display: block;
margin: 15px auto;
max-width: 100%;
border-radius: 10px;
border: 2px solid #90e0ef;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
p, ul, li
{
text-align: justify;
line-height: 1.6;
color: #03045e;
}
i
{
color: #0077b6;
}

BIN
HTML-CSS/ACT23_sad/img/Bullfinch-and-Weeping-Cherry-Blossoms.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
HTML-CSS/ACT23_sad/img/Egrets-from-Quick-Lessons-in-Simplified-Drawing-1-1024x721.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
HTML-CSS/ACT23_sad/img/Ejiri-in-the-Suruga-Province-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
HTML-CSS/ACT23_sad/img/Fujimigahara-in-Owari-Province-1024x684.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
HTML-CSS/ACT23_sad/img/Hokusai_portrait.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
HTML-CSS/ACT23_sad/img/Kajikazawa-in-Kai-Province-1024x679.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
HTML-CSS/ACT23_sad/img/Katsushika-Hokusai-1140x639.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
HTML-CSS/ACT23_sad/img/Oceans-of-Wisdom-1024x721.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 295 KiB

BIN
HTML-CSS/ACT23_sad/img/Sarumaru-Dayu-1024x720.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 226 KiB

BIN
HTML-CSS/ACT23_sad/img/The-Great-Wave-off-Kanagawa-1024x706.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
HTML-CSS/ACT23_sad/img/The-Suspension-Bridge-on-the-Border-of-Hida-and-Etchu-Provinces-1024x693.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
HTML-CSS/ACT23_sad/img/Ukiyo-e_dsc04680.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
HTML-CSS/ACT23_sad/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 602 KiB

BIN
HTML-CSS/ACT23_sad/img/katsushika-hokusai-paintings-1024x706.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

68
HTML-CSS/ACT24_sad/actor_sad.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>El cinema - Actor</title>
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="img/logo.png">
</head>
<body>
<!--
Autor: Sebastian Ariel Duarte
Data d'elaboració: 18/10/2025
Resum: Pàgina Actor del projecte "El cinema". Conté imatge, biografia i llista de pel·lícules destacades.
-->
<header>
<div class="header-container">
<img src="img/logo.png" alt="Logo" class="logo">
<h1>El Cinema</h1>
</div>
<nav class="navbar">
<ul>
<li><a href="inicial_sad.html">Cinema</a></li>
<li><a href="actor_sad.html">Actor</a></li>
<li><a href="pel·li_sad.html">Pel·lícula</a></li>
</ul>
</nav>
</header>
<main>
<section class="content-section">
<h2 class="titulo">Leonardo DiCaprio</h2>
<div class="info">
<img src="img/actor.jpg" alt="Leonardo DiCaprio" class="content-photo">
<div class="content-description">
<p>Leonardo Wilhelm DiCaprio és un actor, productor i activista mediambiental nord-americà.
Reconegut per la seva versatilitat, ha guanyat diversos premis, incloent un Òscar pel seu paper a <em>The Revenant</em>.</p>
<h3>Pel·lícules destacades</h3>
<ul class="content-llista">
<li>Titanic (1997)</li>
<li>Inception (2010)</li>
<li>The Revenant (2015)</li>
<li>Shutter Island (2010)</li>
<li>El llop de Wall Street (2013)</li>
</ul>
<p class="opinio"><strong>Opinió personal:</strong> És un actor molt versàtil i capaç de transmetre emocions reals en cada paper. El considero un dels millors de la seva generació</p>
</div>
</div>
</section>
</main>
<footer>
<p>Fet per <strong>Sebastian Ariel Duarte</strong>.
<a href="https://www.instagram.com/lil_carpi_/" target="_blank">
<img src="img/instagram.svg" alt="Instagram" class="icon">
</a>
<a href="https://www.youtube.com/@CARPI_2.0_03" target="_blank">
<img src="img/yt.svg" alt="YouTube" class="icon">
</a>
<a href="https://lilcarpi.xyz">
<img src="img/lilcarpi.png" alt="Lil_Carpi" class="icon">
</a>
</p>
</footer>
</body>
</html>

172
HTML-CSS/ACT24_sad/css/style.css Normal file
View File

@@ -0,0 +1,172 @@
body
{
background-color: #54FF9F;
font-family: 'Segoe UI', sans-serif;
margin: 0;
}
.header-container
{
display:flex;
align-items:center;
justify-content: center;
gap: 1em;
margin-top: 5em;
}
.logo
{
width: 50px;
height: 40px;
border-radius:100%;
}
.descripcio
{
padding: 1em 2em;
color: #224A34;
font-size: 1.1em;
line-height: 1.5em;
}
.opinio
{
margin-top: 1em;
background-color: #8FFFC1;
border-left: 5px solid #3CB97A;
padding: 1em;
border-radius: 10px;
font-style: italic;
}
footer
{
text-align: center;
padding: 1em;
margin-top: 3em;
color: #224A34;
}
footer .icon
{
width: 24px;
vertical-align: middle;
margin-left: 0.5em;
}
.navbar
{
background-color: #5BE8A7;
color: #224A34;
padding: 1em 5em;
position:fixed;
top: 1em;
left: 50%;
transform: translateX(-50%);
width: clamp(300px, 70%, 900px);
z-index: 100;
border-radius:50px;
border: 3px solid #3CB97A;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.navbar ul
{
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
align-items:center;
flex-wrap: wrap;
}
.navbar li
{
list-style: none;
}
.navbar a {
position:relative;
color: #224A34;
text-decoration: none;
font-weight: bold;
display: inline-block;
transition: transform 0.3s ease, color 0.3s ease;
}
.navbar a::after
{
content: "";
position: absolute;
bottom: -5px;
left:0;
width:0;
height:2px;
background-color: #0F6B3D;
transition: width 0.3s ease;
}
.navbar a:hover
{
transform: translateY(-3px);
color: #0F6B3D;
}
.navbar a:hover::after
{
width: 100%
}
.titulo
{
margin: 0.5em auto 2em auto;
max-width: 900px;
border: 3px solid #3CB97A;
border-radius: 50px;
background-color: #5BE8A7;
color: #224A34;
padding: 1em 3em;
text-align: center;
}
.content
{
border: 3px solid #3CB97A;
border-radius: 50px;
max-width: 900px;
margin:0 auto;
background-color: #54FFC8;
overflow: hidden;
}
.content img
{
width: 100%;
border-radius: 50px;
display:block;
}
.content-section
{
margin: 2em auto;
max-width: 900px;
border: 3px solid #3CB97A;
border-radius: 50px;
background-color: #54FFc8;
padding: 2em;
}
.info
{
display: flex;
align-items: flex-start;
gap: 2em;
flex-wrap: wrap;
}
.content-photo
{
width: 250px;
border-radius: 30px;
border: 3px solid #3CB97A;
}
.content-description
{
flex: 1;
color: #224A34;
font-size: 1.1em;
line-height: 1.5em;
}
.content-description h3
{
margin-top: 1em;
color: #0F6B3D;
}
.content-llista
{
padding-left:1.5em;
margin-top:0.5em;
list-style-type: "🎬 ";
}

BIN
HTML-CSS/ACT24_sad/img/actor.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 MiB

BIN
HTML-CSS/ACT24_sad/img/cinema.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

1
HTML-CSS/ACT24_sad/img/instagram.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
HTML-CSS/ACT24_sad/img/lilcarpi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
HTML-CSS/ACT24_sad/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
HTML-CSS/ACT24_sad/img/pelicula.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

8
HTML-CSS/ACT24_sad/img/yt.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 28.57 20" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<svg viewBox="0 0 28.57 20" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z" fill="#FF0000"/>
<path d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" fill="white"/>
</g>
</svg>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 955 B

59
HTML-CSS/ACT24_sad/inicial_sad.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>El cinema - Inicial</title>
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="img/logo.png">
</head>
<body>
<!--
Autor: Sebastian Ariel Duarte
Data d'elaboració: 18/10/2025
Resum: Pàgina Actor del projecte "El cinema". Conté imatge, biografia i llista de pel·lícules destacades.
-->
<header>
<div class="header-container">
<img src="img/logo.png" alt="Logo" class="logo">
<h1>El Cinema</h1>
</div>
<nav class="navbar">
<ul>
<li><a href="inicial_sad.html">Cinema</a></li>
<li><a href="actor_sad.html">Actor</a></li>
<li><a href="pel·li_sad.html">Pel·lícula</a></li>
</ul>
</nav>
</header>
<main>
<h2 class="titulo">Descobreix el món del cinema</h2>
<div class="content">
<a href="https://ca.wikipedia.org/wiki/Cinema" target="_blank">
<img src="img/cinema.jpg" alt="Cinema">
</a>
<p class="descripcio">
El cinema és una forma d'art i entreteniment que combina imatges en moviment i so per explicar històries.
Des dels seus inicis a finals del segle XIX, ha evolucionat fins a convertir-se en una de les indústries culturals més influents del món.
</p>
</div>
</main>
<footer>
<p>Fet per <strong>Sebastian Ariel Duarte</strong>.
<a href="https://www.instagram.com/lil_carpi_/" target="_blank">
<img src="img/instagram.svg" alt="Instagram" class="icon">
</a>
<a href="https://www.youtube.com/@CARPI_2.0_03" target="_blank">
<img src="img/yt.svg" alt="YouTube" class="icon">
</a>
<a href="https://lilcarpi.xyz">
<img src="img/lilcarpi.png" alt="Lil_Carpi" class="icon">
</a>
</p>
</footer>
</body>
</html>

68
HTML-CSS/ACT24_sad/pel·li_sad.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>El cinema - Pel·lícula</title>
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="img/logo.png">
</head>
<body>
<!--
Autor: Sebastian Ariel Duarte
Data d'elaboració: 18/10/2025
Resum: Pàgina Actor del projecte "El cinema". Conté imatge, biografia i llista de pel·lícules destacades.
-->
<header>
<div class="header-container">
<img src="img/logo.png" alt="Logo" class="logo">
<h1>El Cinema</h1>
</div>
<nav class="navbar">
<ul>
<li><a href="inicial_sad.html">Cinema</a></li>
<li><a href="actor_sad.html">Actor</a></li>
<li><a href="pel·li_sad.html">Pel·lícula</a></li>
</ul>
</nav>
</header>
<main>
<section class="content-section">
<h2 class="titulo">Inception</h2>
<div class="info">
<img src="img/pelicula.jpg" alt="Inception" class="content-photo">
<div class="content-description">
<p>
"Inception" és una pel·lícula de ciència-ficció dirigida per Christopher Nolan que explora el món dels somnis i la manipulació de la realitat a través de la ment humana.
</p>
<h3>Actors principals</h3>
<ul class="content-llista">
<li>Leonardo DiCaprio</li>
<li>Joseph Gordon-Levitt</li>
<li>Marion Cotillard</li>
<li>Tom Hardy</li>
</ul>
<p class="opinio"><strong>Opinió personal:</strong> Absolut cinema. Una obra mestra que combina acció, filosofia i emoció. La seva banda sonora (composada per Hans Zimmer) i la narrativa la fan una de les millors pel·lìcules que he vist.</p>
</div>
</div>
</section>
</main>
<footer>
<p>Fet per <strong>Sebastian Ariel Duarte</strong>.
<a href="https://www.instagram.com/lil_carpi_/" target="_blank">
<img src="img/instagram.svg" alt="Instagram" class="icon">
</a>
<a href="https://www.youtube.com/@CARPI_2.0_03" target="_blank">
<img src="img/yt.svg" alt="YouTube" class="icon">
</a>
<a href="https://lilcarpi.xyz">
<img src="img/lilcarpi.png" alt="Lil_Carpi" class="icon">
</a>
</p>
</footer>
</body>
</html>

0
HTML-CSS/ACT25_sad/css/style.css Normal file
View File

30
HTML-CSS/ACT25_sad/index.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TaulaResult</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Algunos productos son mucho más adecuados para el desvío y la reutilización. Cuando estos productos se reciclan o desvían, las emisiones de gases de efecto invernadero se reducen en...</h1>
<table>
<th>product</th>
<td>1 car</td>
<td>1 ton of plastic bottles</td>
<td>refrigerator</td>
<td>1 computer + monitor</td>
<th>CO2 equivalent</th>
<td>8,811 lbs.</td>
<td>3,380 lbs.</td>
<td>556 lbs.</td>
<td>404 lbs.</td>
<th>gasoline</th>
<td>450 gallons</td>
<td>173 gallons</td>
<td>29 gallons</td>
<td>21 gallons</td>
</table>
</body>
</html>

93
HTML-CSS/ACT27_sad/ACT27_sad.html Executable file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mascotas</title>
<meta charset="utf-8">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Adopta una mascota</h1>
<nav>
<ul id="menu">
<li><a href="#">Nosotros</a></li>
<li><a href="#">Campañas</a></li>
<li><a href="#">Socios</a></li>
</ul>
</nav>
</header>
<main>
<section id="mascotas">
<article class="mascota">
<img src="images/mascota1.jpg" alt="" />
<div class="info">
<h3>Praesent quis orcidiam viverralopr</h3>
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
</div>
</article>
<article class="mascota">
<img src="images/mascota2.jpg" alt="" />
<div class="info">
<h3>Praesent quis orcidiam viverralopr</h3>
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
</div>
</article>
<article class="mascota">
<img src="images/mascota3.jpg" alt="" />
<div class="info">
<h3>Praesent quis orcidiam viverralopr</h3>
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
</div>
</article>
<article class="mascota">
<img src="images/mascota4.jpg" alt="" />
<div class="info">
<h3>Praesent quis orcidiam viverralopr</h3>
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
</div>
</article>
<article class="mascota">
<img src="images/mascota5.jpg" alt="" />
<div class="info">
<h3>Praesent quis orcidiam viverralopr</h3>
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
</div>
</article>
<article class="mascota">
<img src="images/mascota6.jpg" alt="" />
<div class="info">
<h3>Praesent quis orcidiam viverralopr</h3>
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
</div>
</article>
</section>
<section id="colaboradores">
<div class="colaborador">
<img src="images/cara1.jpg" alt="" />
<h3>Colaborador</h3>
<p>colaborador1@gmail.com</p>
</div>
<div class="colaborador">
<img src="images/cara2.jpg" alt="" />
<h3>Colaboradora</h3>
<p>colaborador2@gmail.com</p>
</div>
<div class="colaborador">
<img src="images/cara3.jpg" alt="" />
<h3>Colaboradora</h3>
<p>colaborador3@gmail.com</p>
</div>
</section>
</main>
<footer>
<p><a href="mailto:adoptaunamascota@gmail.com">adoptaunamascota@gmail.com</a></p>
</footer>
</body>
</html>

166
HTML-CSS/ACT27_sad/estilos.css Executable file
View File

@@ -0,0 +1,166 @@
* {
margin: 0px;
padding: 0px;
}
body {
background-color: gray;
}
header, main, footer
{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
header
{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #103610;
padding: 10px 20px;
}
header h1
{
color: white;
margin: 0;
font-size: 3em;
margin: 30px 30px 30px;
}
#menu
{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#menu li
{
padding: 0 15px;
border-right: 1px solid white;
}
#menu li:last-child
{
border-right: none;
}
#menu a
{
text-decoration: none;
color: white;
display: block;
font-size: 1.3em;
}
main
{
background-color: white;
}
#mascotas
{
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin-top: 30px;
}
.mascota
{
display: flex;
align-items: flex-start;
max-width: 500px;
background-color: white;
}
.mascota .info h3
{
margin-top: 0;
font-size: 1.3em;
}
.mascota .info p
{
font-size: 1.4em;
line-height: 1.5;
}
.mascota img
{
margin-right: 20px;
}
#colaboradores
{
background-color: #103610;
display: flex;
flex-wrap: nowrap;
justify-content: center;
padding: 40px;
overflow-x: auto;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
margin-left: -20px;
margin-right: -20px;
margin-bottom: -20px;
}
.colaborador
{
flex-shrink: 0;
min-width: 200px;
text-align: center;
background-color: transparent;
border-right: 1px solid white;
padding: 20px 30px
}
#colaboradores .colaborador:last-child
{
border-right: none;
}
.colaborador img
{
width: 120px;
height: 120px;
border-radius: 50%;
border: 10px solid #8aad8a;
margin: 0 auto 15px auto;
display: block;
}
.colaborador h3
{
color:white;
}
.colaborador p
{
color: white;
}
footer
{
background-color: #103610;
text-align: center;
color: white;
font-size: 1.5em;
}
footer a
{
text-decoration: none;
color: inherit;
}

BIN
HTML-CSS/ACT27_sad/images/cara1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
HTML-CSS/ACT27_sad/images/cara2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
HTML-CSS/ACT27_sad/images/cara3.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
HTML-CSS/ACT27_sad/images/mascota1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
HTML-CSS/ACT27_sad/images/mascota2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
HTML-CSS/ACT27_sad/images/mascota3.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
HTML-CSS/ACT27_sad/images/mascota4.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
HTML-CSS/ACT27_sad/images/mascota5.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
HTML-CSS/ACT27_sad/images/mascota6.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
HTML-CSS/ACT27_sad/resultat.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

11
HTML-CSS/ajeno/Projecte_ICC/.project Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>Projecte_ICC</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>

114
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/cercarICC.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JocsMania Cercar</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/estils.css">
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina amb cercador per cercar els videojocs amb els paràmetres com l'edat, temàtica o requisits tècnics, etc.-->
</head>
<body>
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
<header>
<div class="cabecera">
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
<div class="title">JocsMania</div>
<div class="hamburger">&#9776;</div>
<div class="menu">
<a href="indexICC.html">Inici</a>
<a href="videojocsICC.html">Videojocs</a>
<a href="cercarICC.html">Cercar</a>
<a href="registreICC.html">Socis</a>
</div>
<div class="socials">
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
</div>
</div>
</header>
<!-- bloc principal amb cercador per cercar els videojocs amb els paràmetres com l'edat, temàtica o requisits tècnics -->
<main>
<section class="formulari">
<h1>Cercador</h1>
<!-- formulari per pujar les dades al servidor (no implementat: mostra la pàgina inicial) -->
<form action="indexICC.html">
<div class="campo">
<label class="etiqueta" for="nom">Nom:</label>
<input type="text" id="nom" name="nom">
</div>
<div class="campo">
<label class="etiqueta" for="edat">Edat del jugador:</label>
<!-- barra amb mínim 6 i màxim 99 per definir l'edat -->
<input type="range" id="edat" name="edat" min="6" max="99" title="Edat entre 6 i 99 anys">
</div>
<div class="campo">
<label class="etiqueta">Temàtica:</label>
<div class="valors">
<div>
<input type="radio" id="tematica1" name="tematica" value="fantasia">
<label class="valor" for="tematica1">Fantasía</label>
</div>
<div>
<input type="radio" id="tematica2" name="tematica" value="ciencia-ficcion">
<label class="valor" for="tematica2">Ciencia ficción</label class="valor">
</div>
<div>
<input type="radio" id="tematica3" name="tematica" value="terror">
<label class="valor" for="tematica3">Terror</label class="valor">
</div>
<div>
<input type="radio" id="tematica4" name="tematica" value="aventura">
<label class="valor" for="tematica4">Aventura</label class="valor">
</div>
</div>
</div>
<div class="campo">
<label class="etiqueta">Requisits:</label>
<div class="valors">
<div>
<input type="checkbox" id="requisit1" name="requisits" value="rato">
<label class="valor" for="requisit1">Rato</label class="valor">
</div>
<div>
<input type="checkbox" id="requisit2" name="requisits" value="camara">
<label class="valor" for="requisit2">Camara</label class="valor">
</div>
<div>
<input type="checkbox" id="requisit3" name="requisits" value="micro">
<label class="valor" for="requisit3">Micro</label class="valor">
</div>
<div>
<input type="checkbox" id="requisit4" name="requisits" value="comandament">
<label class="valor" for="requisit4">Comandament</label class="valor">
</div>
</div>
</div>
<div class="botones">
<input type="submit" value="Cercar">
<input type="reset" value="Esborrar">
<div class="campo">
</form>
</section>
</main>
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
<footer>
<div class="address">
<div class="addressTitle">Direcció</div>
<div>Ronda Frederic Mistral, 26</div>
<div>08304, Mataró </div>
</div>
<div class="enlaces">
<div class="politica">
<a href="politicaICC.html">Política de privacitat</a>
</div>
<div>
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
</div>
</div>
</footer class="pie">
<script src="js/script.js"></script>
</body>
</html>

435
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/css/estils.css Normal file
View File

@@ -0,0 +1,435 @@
body {
background-image: url("../img/fondo.png");
display: flex;
flex-direction: column; /* Apila los hijos (header, main, footer) verticalmente */
height: 100vh; /* Asegura que el cuerpo ocupe al menos toda la altura de la ventana */
margin: 0px;
}
header {
margin: 0px 10px;
min-height: 80px;
}
.navbar
{
position: fixed;
top: 1rem;
left: 1rem;
right: 1rem;
/*width: calc(100% - 2rem);*/
padding: 1rem 1.5rem;
border-radius: 20px;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
}
.logoContainer a
{
color: white;
font-size: 1.125rem;
font-weight: bold;
margin-right: 0;
}
@media (min-width: 768px){
.logoContainer a { font-size: 1.25rem; }
.navbarLinks{
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 1rem;
}
.navbarLinks li {
margin-left: 1.5rem;
}
}
.navbarLinks a
{
color: white;
transition: color 0.3s ease;
}
.navbarLinks a:hover{
color: #00c3ff;
}
/*=======Menu movil========*/
#menu-toggle {display: none;}
.hamburger-label
{
display: none;
font-size: 1.5rem;
color: white;
cursor: pointer;
}
@media (max-width: 767px){
.hamburger-label { display: block; }
.navbarLinks
{
position: absolute;
top: 6rem;
left: 1rem;
right: 1rem;
display: none;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#menu-toggle:checked ~ .navbarLinks {
display: flex;
animation: fadeIn 0.4s ease forwards;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
main {
/* CLAVE: Hace que MAIN ocupe todo el espacio sobrante, empujando el footer hacia abajo. */
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
background-color: lightblue;
margin: 10px;
border:2px solid lightblue ;
border-radius: 10px;
color: midnightblue;
}
footer {
margin: 0px 10px;
min-height: 90px;
display: flex;
justify-content: space-around;
color: white;
font-family: cursive;
flex-wrap: wrap;
}
.index main {
height: auto;
}
.cabecera {
display: flex;
align-items: center;
font-family: cursive;
}
.logo {
margin: 15px;
height: 40px;
}
.title {
color: plum;
font-size: 50px;
font-weight: bold;
text-align: left;
flex-grow: 1; /* Permite que el título ocupe el espacio disponible */
}
.menu {
min-width: 280px;
margin-right: 20px;
height: 15px;
display: flex;
justify-content: space-evenly;
flex-direction: row;
align-items: baseline;
gap: 10px;
}
.hamburger {
display: none;
font-size: 25px;
color: white;
margin-right: 10px;
}
a {
color: white;
text-decoration: none;
white-space: nowrap;
}
.menu a {
color: white;
}
.red {
margin: 5px;
margin-left: auto;
height: 30px;
}
.address {
margin: 5px;
margin-right:auto ;
color: white;
}
.addressTitle {
font-weight: bold;
margin-bottom: 5px;
color: white;
}
.enlaces {
margin: 5px;
text-align: right;
}
.politica {
margin-bottom: 5px;
}
.mail {
margin-top: 5px;
}
.opinions {
margin-top: 30px;
}
.opinion {
margin-left: 20px;
font-style: italic;
color: black;
}
.enllaç {
margin-left: 10%;
margin-bottom: 30px;
font-size: 30px;
font-family: cursive;
font-weight:bold;
}
.enllaç a {
color: midnightblue;
white-space: wrap;
}
.formulari {
margin-left: 20%;
margin-right: 20%;
}
.formulari h1{
font-size: 40px;
font-family: cursive;
}
.formulari form {
background-color: steelblue;
border: 2px solid steelblue;
border-radius: 8px;
color: white;
padding: 40px;
min-width: 300px;
margin-top: 40px;
margin-bottom: 20px;
font-size: 18px;
}
.campo {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
}
.valors {
flex-wrap: wrap;
}
.campo .etiqueta {
margin-right: 15px;
font-weight: bold;
vertical-align: middle;
}
.campo .valor {
color: black;
}
.campo input {
margin-right: 15px;
}
.botones {
height: 15px;
margin-top: 40px;
}
.botones input{
margin-right: 10px;
background-color: skyblue;
border: skyblue;
border-radius: 2px;
padding: 10px;
}
input[type="text"], input[type="email"]{
width: 250px;
}
.politica-text {
background-color: steelblue;
border: 2px solid steelblue;
border-radius: 8px;
color: white;
padding: 40px;
min-width: 300px;
margin-left: 10%;
margin-right: 10%;
margin-top: 40px;
margin-bottom: 20px;
}
.politica-text p {
color: black;
}
.joc-titol {
font-size: 40px;
font-family: cursive;
margin-left: 10%;
}
.joc-targeta {
background-color: steelblue;
border: 2px solid steelblue;
border-radius: 8px;
color: white;
padding: 10px;
min-width: 400px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
margin-bottom: 20px;
min-height: 330px;
display: flex;
flex-direction: row;
}
.joc-targeta img {
height: 300px;
margin: 15px;
}
.joc-targeta .text {
color: black;
}
@media (max-width: 768px) {
header {
min-height: 50px;
}
footer {
font-size: 14px;
}
.menu {
display: none;
flex-direction: column;
position: absolute;
top: 50px;
left: 25%;
width: 50%;
background-color: skyblue;
text-align: center;
padding: 10px 0;
z-index: 1000;
height: auto;
}
.menu a {
color: black;
}
.menu.active {
display: flex;
}
.menu a {
padding: 15px;
display: block;
border-bottom: 1px solid rgba(255,255,255,0.3);
width: 100%;
box-sizing: border-box;
}
.hamburger {
display: block;
}
.logo {
height: 30px;
}
.title {
font-size: 30px;
flex-grow: 1; /* Permite que el título ocupe el espacio disponible */
}
.joc-titol {
font-size: 25px;
margin-left: 10px;
}
.joc-targeta {
min-width: 300px;
margin-left: 10px;
margin-right: 10px;
flex-wrap: wrap;
}
.enllaç {
margin-left: 10px;
margin-bottom: 20px;
font-size: 20px;
}
.politica-text {
padding: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
margin-bottom: 20px;
}
.formulari {
margin-left: 10px;
margin-right: 10px;
}
.formulari form {
padding: 40px;
min-width: 200px;
margin-top: 40px;
margin-bottom: 20px;
font-size: 18px;
}
}

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/assassins_creed_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/battelfornt_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/elden_ring.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/far_cry_6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/fondo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/ghost_of_tsushima.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 916 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/instagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/red_dead_redemption_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/the_witcher_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/tiktok.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/img/whatsapp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

160
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/indexICC.html Normal file
View File

@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JocsMania</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/estils.css">
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina inicial amb el top tres dels videojocs més venuts amb algunes opinions i un enllaç a la pàgina de videojocs. -->
</head>
<body>
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
<header>
<nav class="navbar">
<div class="logoContainer">
<a href="indexSAD.html"><i class="fa-solid fa-gamepad"></i></a>
<a href="indexSAD.html">JocsMania</a>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger-label">
<i>&#9776</i>
</label>
<ul class="navbarLinks">
<li><a href="indexSAD.html">Inici</a></li>
<li><a href="videojocsSAD.html">Videojocs</a></li>
<li><a href="cercarSAD.html">Cercar</a></li>
<li><a href="socisSAD.html">Socis</a></li>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.tiktok.com"><i class="fa-brands fa-tiktok"></i></a></li>
</ul>
</nav>
</header>
<!-- <header>
<div class="cabecera">
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
<div class="title">JocsMania</div>
<div class="hamburger">&#9776;</div>
<div class="menu">
<a href="indexICC.html">Inici</a>
<a href="videojocsICC.html">Videojocs</a>
<a href="cercarICC.html">Cercar</a>
<a href="registreICC.html">Socis</a>
</div>
<div class="socials">
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
</div>
</div>
</header> -->
<!-- bloc principal amb top 3 de vendes amb opinions, i enllaç a la pàgina de videojocs -->
<main>
<section class="opinions">
<h1 class="joc-titol">Top Vendes</h1>
<!-- targeta de un videojoc amb imatge, títol i opinions -->
<div class="joc-targeta">
<div>
<!-- ancla amb enllaç a la página oficial amb imatge com contingut -->
<a href="https://www.ubisoft.com/es-es/game/assassins-creed/assassins-creed-II" target="_blank">
<img src="img/assassins_creed_2.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>Assassin's Creed II</h2>
<div class="text">
<div>
<b>Mari Carmen Sanchez ⭐⭐⭐⭐⭐</b>
<p class="opinion">
Assassin's Creed II és un joc que segueix sent excel·lent fins i tot avui. A diferència del primer, que tenia bones idees, però era extremadament repetitiu, aquest joc millora tot i fa que sigui molt més divertit.
</p>
</div>
<div>
<b>Feliciano Pérez. ⭐⭐⭐⭐☆</b>
<p class="opinion">
Un clàssic d'Ubisoft, dels seus millors jocs tot i haver envellit regular. A dia d'avui segueix sense tenir èxits, quan a PS3 sí que els tenies ia més t'obliga a tenir l'Uplay obert en segon pla trencant les boles. En fi, francesos.
</p>
</div>
</div>
</div>
</div>
<div class="joc-targeta">
<div>
<a href="https://www.ea.com/es/games/starwars/star-wars-battlefront-2" target="_blank">
<img src="img/battelfornt_2.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>Battlefront II</h2>
<div class="text">
<div>
<b>Isabel la Catolica ⭐⭐⭐☆☆</b>
<p class="opinion">
És un fàstic jugar-lo actualment, és ple de cheaters i de gent amb egos alts que es creuen professionals en un joc que no té competitiu.
</p>
</div>
<div>
<b>Jordi Tarridas ⭐⭐⭐⭐⭐</b>
<p class="opinion">
Aquest joc és encara viu i té tot el sabor de star wars. A nivell gràfic encara es defensa bé i dóna unes partides molt divertides. Els poders jedi estan integrats magnificament i la possibilitat de fer servir una gran quantitat de vehicles i escenaris ho fa un joc gairebé atemporal.
</p>
</div>
</div>
</div>
</div>
<div class="joc-targeta">
<div>
<a href="https://www.rockstargames.com/es/reddeadredemption2" target="_blank">
<img src="img/red_dead_redemption_2.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>Red Dead Redemption II</h2>
<div class="text">
<div>
<b>Miguel Ángel Hornos ⭐⭐⭐⭐⭐</b>
<p class="opinion">
Red Dead Redemption 2 (RDR2) no és un videojoc; és un testament, una crònica èpica i un drama romàntic disfressat de western de món obert. Rockstar Games ha aconseguit el que semblava impossible: superar el seu propi estàndard d'excel·lència narrativa i tècnica, lliurant una obra que no només domina el seu gènere, sinó que estableix un nou pinacle d'immersió a la indústria.
</p>
</div>
<div>
<b>Nicolás Quesada ⭐⭐⭐⭐⭐</b>
<p class="opinion">
Belleza, el mejor juego que he jugado en mi vida, si mil veces lo juego, mil veces lo disfruto.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- enllaç a la pàgina de videojocs -->
<section class="enllaç">
<a href="videojocsICC.html">Si vols conèixer tots els videojocs disponibles ...</a>
</section>
</main>
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
<footer>
<div class="address">
<div class="addressTitle">Direcció</div>
<div>Ronda Frederic Mistral, 26</div>
<div>08304, Mataró </div>
</div>
<div class="enlaces">
<div class="politica">
<a href="politicaICC.html">Política de privacitat</a>
</div>
<div>
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
</div>
</div>
</footer class="pie">
<script src="js/script.js"></script>
</body>
</html>

10
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/js/script.txt Normal file
View File

@@ -0,0 +1,10 @@
document.addEventListener('DOMContentLoaded', () => {
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
if (hamburger && menu) {
hamburger.addEventListener('click', () => {
menu.classList.toggle('active');
});
}
});

93
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/politicaICC.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JocsMania Política</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/estils.css">
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina amb la política de privacitat del nostre lloc.-->
</head>
<body>
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
<header>
<div class="cabecera">
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
<div class="title">JocsMania</div>
<div class="hamburger">&#9776;</div>
<div class="menu">
<a href="indexICC.html">Inici</a>
<a href="videojocsICC.html">Videojocs</a>
<a href="cercarICC.html">Cercar</a>
<a href="registreICC.html">Socis</a>
</div>
<div class="socials">
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
</div>
</div>
</header>
<!-- bloc principal amb la política de privacitat -->
<main>
<section>
<div class="politica-text">
<h1>POLÍTICA DE PRIVACITAT</h1>
<p>
Aquesta Política de Privadesa estableix els termes en què JocsMania utilitza i protegeix la informació proporcionada pels usuaris en el moment d'utilitzar el vostre lloc web. Aquesta companyia està compromesa amb la seguretat de les dades dels usuaris. Quan us demanem omplir els camps d'informació personal amb la qual pugueu ser identificat, ho fem assegurant que només s'emprarà d'acord amb els termes d'aquest document. No obstant això, aquesta Política de Privadesa pot canviar amb el temps o ser actualitzada pel que us recomanem i emfatitzem revisar contínuament aquesta pàgina per assegurar-se que està d'acord amb aquests canvis.
</p>
<h2>Informació que és recollida</h2>
<p>
El nostre lloc web podrà recollir informació personal per exemple: Nom, informació de contacte com la vostra adreça de correu electrònic i informació demogràfica. Així mateix quan sigui necessari podrà ser requerida informació específica per processar alguna comanda o fer un lliurament o facturació.
</p>
<h2>Ús de la informació recollida</h2>
<p>
El nostre lloc web empra la informació per tal de proporcionar el millor servei possible, particularment per mantenir un registre d'usuaris, de comandes en cas que apliqui, i millorar els nostres productes i serveis. És possible que siguin enviats correus electrònics periòdicament a través del nostre lloc amb ofertes especials, nous productes i altra informació publicitària que considerem rellevant per a vostè o que pugui oferir algun benefici, aquests correus electrònics seran enviats a l'adreça que vostè proporcioni i podran ser cancel·lats en qualsevol moment.
</p>
<p>
JocsMania està altament compromès per complir amb el compromís de mantenir la vostra informació segura. Fem servir els sistemes més avançats i els actualitzem constantment per assegurar-nos que no hi hagi cap accés no autoritzat.
</p>
<h2>Galetes</h2>
<p>
Una galeta es refereix a un fitxer que és enviat amb la finalitat de sol·licitar permís per emmagatzemar-se al vostre ordinador, en acceptar aquest fitxer es crea i la galeta serveix llavors per tenir informació respecte al trànsit web, i també facilita les futures visites a una web recurrent. Una altra funció que tenen les cookies és que amb elles les web et poden reconèixer individualment i per tant oferir-te el millor servei personalitzat de la seva web.
</p>
<p>
El nostre lloc web empra les galetes per poder identificar les pàgines que són visitades i la seva freqüència. Aquesta informació és emprada únicament per a anàlisi estadística i després la informació s'elimina de manera permanent. Vostè pot eliminar les galetes en qualsevol moment des del seu ordinador. No obstant això les cookies ajuden a proporcionar un millor servei dels llocs web, estàs no donen accés a informació del seu ordinador ni de vostè, llevat que vostè així ho vulgui i la proporcioni directament notícies. Vostè pot acceptar o negar l'ús de galetes, però la majoria de navegadors accepten galetes automàticament ja que serveix per tenir un millor servei web. També podeu canviar la configuració del vostre ordinador per declinar les cookies. Si es declinen és possible que no pugueu utilitzar alguns dels nostres serveis.
</p>
<h2>Enllaços a Tercers</h2>
<p>
Aquest lloc web pogués contenir en llaços altres llocs que poguessin ser del seu interès. Quan vostè de clic en aquests enllaços i abandoni la nostra pàgina, ja no tenim control sobre el lloc al qual és redirigit i per tant no som responsables dels termes o privadesa ni de la protecció de les seves dades en aquests altres llocs tercers. Aquests llocs estan subjectes a les seves pròpies polítiques de privadesa per la qual cosa és recomanable que els consulteu per confirmar que vostè està d'acord amb aquestes.
</p>
<h2>Control de la vostra informació personal</h2>
<p>
En qualsevol moment vostè pot restringir la recopilació o lús de la informació personal que és proporcionada al nostre lloc web. Cada vegada que se us demani omplir un formulari, com el d'alta d'usuari, podeu marcar o desmarcar l'opció de rebre informació per correu electrònic. En cas que hagueu marcat l'opció de rebre el nostre butlletí o publicitat podeu cancel·lar-la en qualsevol moment.
</p>
<p>
Aquesta companyia no vendrà, cedirà ni distribuirà la informació personal que és recopilada sense el seu consentiment, llevat que sigui requerit per un jutge amb un ordre judicial.
</p>
<p>
JocsMania Es reserva el dret de canviar els termes de la present Política de Privadesa en qualsevol moment.
</p>
</div>
</section>
</main>
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
<footer>
<div class="address">
<div class="addressTitle">Direcció</div>
<div>Ronda Frederic Mistral, 26</div>
<div>08304, Mataró </div>
</div>
<div class="enlaces">
<div class="politica">
<a href="politicaICC.html">Política de privacitat</a>
</div>
<div>
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
</div>
</div>
</footer class="pie">
<script src="js/script.js"></script>
</body>
</html>

82
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/registreICC.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JocsMania Socis</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/estils.css">
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina amb formulari per a registrar-se a la pàgina com a soci.-->
</head>
<body>
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
<header>
<div class="cabecera">
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
<div class="title">JocsMania</div>
<div class="hamburger">&#9776;</div>
<div class="menu">
<a href="indexICC.html">Inici</a>
<a href="videojocsICC.html">Videojocs</a>
<a href="cercarICC.html">Cercar</a>
<a href="registreICC.html">Socis</a>
</div>
<div class="socials">
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
</div>
</div>
</header>
<!-- bloc principal amb formulari per a registrar-se a la pàgina com a soci -->
<main>
<section class="formulari">
<h1>Fes-te soci</h1>
<form action="videojocsICC.html">
<div class="campo">
<label class="etiqueta" for="nom">Nom:</label>
<input type="text" id="nom" name="nom">
</div>
<div class="campo">
<label class="etiqueta" for="cognoms">Cognoms:</label>
<input type="text" id="cognoms" name="cognoms">
</div>
<div class="campo">
<label class="etiqueta" for="dni">DNI:</label>
<input type="text" id="dni" name="dni">
</div>
<div class="campo">
<label class="etiqueta" for="usuari">Usuari:</label>
<input type="text" id="usuari" name="usuari">
</div>
<div class="campo">
<label class="etiqueta" for="contrasenya">Contrasenya:</label>
<input type="password" id="contrasenya" name="contrasenya">
</div>
<div class="botones">
<input type="submit" value="Registre">
<input type="reset" value="Esborrar">
<div class="campo">
</form>
</section>
</main>
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
<footer>
<div class="address">
<div class="addressTitle">Direcció</div>
<div>Ronda Frederic Mistral, 26</div>
<div>08304, Mataró </div>
</div>
<div class="enlaces">
<div class="politica">
<a href="politicaICC.html">Política de privacitat</a>
</div>
<div>
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
</div>
</div>
</footer class="pie">
<script src="js/script.js"></script>
</body>
</html>

139
HTML-CSS/ajeno/Projecte_ICC/Projecte_ICC/videojocsICC.html Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JocsMania Videojocs</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/estils.css">
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina amb el llistat de tots els nostres videojocs amb imatge títol i breu descripció amb un enllaç a la pàgina oficial. -->
</head>
<body>
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
<header>
<div class="cabecera">
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
<div class="title">JocsMania</div>
<div class="hamburger">&#9776;</div>
<div class="menu">
<a href="indexICC.html">Inici</a>
<a href="videojocsICC.html">Videojocs</a>
<a href="cercarICC.html">Cercar</a>
<a href="registreICC.html">Socis</a>
</div>
<div class="socials">
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
</div>
</div>
</header>
<!-- bloc principal amb llista de tots els videojocs amb imatge, títol i breu descripció -->
<main>
<h1 class="joc-titol">Videojocs</h1>
<!-- targeta de un videojoc amb imatge, títol i resum -->
<section class="joc-targeta">
<div>
<!-- ancla amb enllaç a la página oficial amb imatge com contingut -->
<a href="https://www.ubisoft.com/es-es/game/assassins-creed/assassins-creed-II" target="_blank">
<img src="img/assassins_creed_2.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>Assassin's Creed II</h2>
<div class="text">
Assassin's Creed II presenta Ezio, un nou Assassin que continua el llegat letal dels seus avantpassats. Enfronta't a una història èpica de poder i corrupció en què poliràs les teves arts d'Assassin, i empunyaràs armes i instruments dissenyats pel mateix Leonardo da Vinci en aquesta continuació de la sèrie apassionant i mortal.
</div>
</div>
</section>
<section class="joc-targeta">
<div>
<a href="https://www.ea.com/es/games/starwars/star-wars-battlefront-2" target="_blank">
<img src="img/battelfornt_2.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>Battlefront II</h2>
<div class="text">
Embárcate en un viaje infinito de STAR WARS™ con la franquicia de videojuegos de STAR WARS™ más exitosa de todos los tiempos. Disfruta de exuberantes campos de batalla multijugador de las tres épocas: precuela, clásica y nueva; o álzate como un nuevo héroe y descubre una apasionante historia para un jugador que se desarrolla a lo largo de treinta años. Personaliza y mejora tus cazas estelares, héroes y soldados, dotados de habilidades exclusivas que puedes aprovechar en combate. Monta en tauntauns o pilota tanques y speeders. Usa la Fuerza para enfrentarte a personajes emblemáticos como Kylo Ren, Darth Maul o Han Solo, y participa en una experiencia de juego inspirada en cuarenta años de películas de Star Wars.
</div>
</div>
</section>
<section class="joc-targeta">
<div>
<a href="https://www.rockstargames.com/es/reddeadredemption2" target="_blank">
<img src="img/red_dead_redemption_2.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>Red Dead Redemption II</h2>
<div class="text">
América, 1899. El ocaso del Salvaje Oeste ha comenzado. Tras un desastroso atraco fallido en la ciudad de Blackwater, Arthur Morgan y la banda de Van der Linde se ven obligados a huir. Con agentes federales y los mejores cazarrecompensas de la nación pisándoles los talones, la banda deberá atracar, robar y luchar para sobrevivir en su camino por el escabroso territorio del corazón de América. Mientras las divisiones internas aumentan y amenazan con separarlos a todos, Arthur deberá elegir entre sus propios ideales y la lealtad a la banda que lo vio crecer.
</div>
</div>
</section>
<section class="joc-targeta">
<div>
<a href="https://www.playstation.com/es-es/games/ghost-of-tsushima/pc/" target="_blank">
<img src="img/ghost_of_tsushima.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>Ghost of Tsushima</h2>
<div class="text">
Ambientada en 1274 en la isla epónima de Tsushima, el juego gira en torno al samurái Jin Sakai (Daisuke Tsuji), uno de los pocos supervivientes de la primera invasión mongola a Japón. Jin tendrá que dominar un nuevo estilo de lucha, el camino del Fantasma, para derrotar a las fuerzas mongolas y luchar por la libertad de su pueblo y de la isla. Jin se ve envuelto en un conflicto moral, ya que según el estricto código samurái (Bushido) luchar sigilosamente es deshonroso. Tampoco recibe la aprobación de su tío, el señor de la isla de Tsushima, que es una figura paterna para él.
</div>
</div>
</section>
<section class="joc-targeta">
<div>
<a href="https://es.bandainamcoent.eu/elden-ring/elden-ring" target="_blank">
<img src="img/elden_ring.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>Elden Ring</h2>
<div class="text">
La Orden Dorada está rota.
Álzate, Sinluz, y que la gracia te guíe para abrazar el poder del Círculo de Elden y encumbrarte como señor del Círculo en las Tierras Intermedias.
En las Tierras Intermedias gobernadas por la Reina Márika, la Eterna, el Círculo de Elden, origen del Árbol Áureo, ha sido destruido.
Los descendientes de Márika, todos semidioses, reclamaron los fragmentos del Círculo de Elden conocidos como Grandes Runas. Fue entonces cuando la demencial corrupción de su renovada fuerza provocó una guerra: la Devastación.
Una guerra que supuso el abandono de la Voluntad Mayor. Y ahora, la gracia que nos guía recaerá sobre el Sinluz desdeñado por la gracia del oro y exiliado de las Tierras Intermedias. Tú que has muerto, pero vives, con tu gracia tiempo ha perdida, recorre la senda hacia las Tierras Intermedias más allá del neblinoso mar para postrarte ante el Círculo de Elden.
Y conviértete en el señor del Círculo.
</div>
</div>
</section>
<section class="joc-targeta">
<div>
<a href="https://www.thewitcher.com/ge/es/witcher3" target="_blank">
<img src="img/the_witcher_3.jpg" alt="no funciona">
</a>
</div>
<div>
<h2>The Witcher 3: Wild Hunt</h2>
<div class="text">
Explora un siniestro mundo abierto de fantasía en la piel del cazador de monstruos Geralt de Rivia en The Witcher 3: Wild Hunt, uno de los juegos de rol más aclamados de todos los tiempos. Desde los turbios cenagales de Velen hasta la bulliciosa ciudad de Novigrado y las animadas islas Skellige, Geralt debe encontrar a su hija adoptiva Ciri antes de que los espectros de la cacería salvaje se hagan con su increíble poder.
</div>
</div>
</section>
</main>
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
<footer>
<div class="address">
<div class="addressTitle">Direcció</div>
<div>Ronda Frederic Mistral, 26</div>
<div>08304, Mataró </div>
</div>
<div class="enlaces">
<div class="politica">
<a href="politicaICC.html">Política de privacitat</a>
</div>
<div>
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
</div>
</div>
</footer class="pie">
<script src="js/script.js"></script>
</body>
</html>

54
HTML-CSS/projecte-final/main/README.md Normal file
View File

@@ -0,0 +1,54 @@
# Investigacions
En aquest README m'encarrego principalment de recopilar totes les coses noves que vagi aprenent mentre faig el projecte, així com noves idees per implementar-hi. Suposo que és una bona pràctica documentar allò que s'aprèn.
---
## 1. Estils Visuals i Efectes
### Glassmorfisme (Efecte Vidre)
Efecte de tipus vidre opac, popularitzat per Apple i Windows Aero. En aquest projecte s'utilitza intensivament a la **Navbar**, el **Footer** i els **Formularis**.
**Com s'aconsegueix en CSS:**
Per aconseguir aquest efecte "glass" sobre fons foscos, hem utilitzat tres propietats clau:
1. **Color semi-transparent:** `background: rgba(255, 255, 255, 0.05);` (molt subtil).
2. **Desenfocament del fons:** `backdrop-filter: blur(12px);` (això és el que fa que el que hi ha darrere es vegi borrós).
3. **Borde subtil:** `border: 1px solid rgba(255, 255, 255, 0.2);` per delimitar el vidre.
### Efecte Neó (Glow)
Per donar l'estètica "Gamer/Ciberpunk", s'utilitzen ombres de colors brillants sobre fons foscos.
* **En text:** `text-shadow: 0 0 10px #00c3ff;` (crea una resplendor al voltant de les lletres).
* **En botons/caixes:** `box-shadow: 0 0 20px rgba(...);`.
* **Enllaços:** Al fer *hover*, el color canvia a cian (`#00c3ff`) o verd, típic de neons.
---
## 2. Layout i Estructura (Maquetació)
### CSS Grid (Graella de Rànquing)
Per a la secció de rànquings (`.ranking-grid`), hem utilitzat **CSS Grid** en lloc de Flexbox.
* **Codi:** `grid-template-columns: repeat(3, 1fr);`
* **Què fa:** Crea automàticament 3 columnes d'igual amplada.
* **Responsive:** Amb una *Media Query*, quan la pantalla és petita (`max-width: 900px`), canviem a `grid-template-columns: 1fr;` perquè les targetes es posin una sota l'altra.
### Flexbox (Navbar i Footer)
S'utilitza per a alineacions unidimensionals (una fila).
* `justify-content: space-between;`: Separa el logo a l'esquerra i els enllaços a la dreta.
* `align-items: center;`: Centra verticalment els elements.
---
## 3. Menú Hamburguesa sense JavaScript (El "Checkbox Hack")
Aquesta és una de les parts més interessants. Hem creat un menú mòbil que s'obre i es tanca **només amb CSS**, sense utilitzar JavaScript.
**Com funciona?**
1. Tenim un `<input type="checkbox" id="menu-toggle">` que està ocult (`display: none`).
2. Tenim una `<label>` amb la icona de l'hamburguesa vinculada a aquest input.
3. Utilitzem el selector de "germans" (`~`) per detectar quan el checkbox està marcat:
```css
#menu-toggle:checked ~ .navbarLinks {
display: flex;
animation: fadeIn 0.4s ease forwards;
}

342
HTML-CSS/projecte-final/main/assets/css/oldstyle.css Normal file
View File

@@ -0,0 +1,342 @@
/*=============INICIO DE ESTILOS DE PLANTILLA==============*/
/*Reset básico: Eliminacion del padding y evita que el tamaño crezca por máargenes internos*/
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/*Estilo básico del cuerpo*/
body
{
font-family: 'Manjari', sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
min-height: 100vh;
}
/*Barra de navegacion fija. Efecto "glassmorphism"*/
.navbar
{
position:fixed;
top: 1rem;
left: 1rem;
right: 1rem;
width: calc(100% - 2rem);
padding: 1rem 1.5rem;
border-radius: 20px;
z-index: 100;
/*Efecto cristal difuminado*/
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display:flex;
justify-content: space-between;
align-items: center;
}
/*Estilo del texto e icono del logo*/
.logoContainer a
{
color: white;
font-size: 1.125rem;
font-weight: bold;
margin-right: 1rem;
text-decoration: none;
}
/*Aumenta el tamaño del logo en pantallas más grandes*/
@media (min-width: 768px){
.logoContainer a
{
font-size: 1.25rem;
}
.navbarLinks
{
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 1rem;
}
/*Espacio entre items del menú*/
.navbarLinks li
{
margin-right: 0.5rem;
}
}
/*Lista de links del menú*/
/*En pantallas grandes, la lista se alinea de manera horizontal*/
@media (min-width: 768px){
.navbarLinks
{
display: flex;
justify-content: flex-end;
align-items: center;
}
}
/*Espacio entre items del menú*/
.navbarLinks li
{
margin-right: 0.5rem;
}
/*En pantallas grandes, los items se muestran en línea con más espacio*/
@media (min-width: 768px) {
.navbarLinks li
{
display: inline-block;
margin-right: 1rem;
}
}
/*Estilos de enlaces del navbar*/
.navbarLinks a
{
text-decoration: none;
color: white;
}
/*Contenedor general centrado*/
.container
{
max-width: 1200px;
margin: 0 auto;
}
/*Estilos del footer. Estilo glassmorphism*/
.footer
{
bottom: 1rem;
left: 1rem;
right: 1rem;
padding: 1rem;
color: white;
z-index: 50;
border-radius: 20px;
/*Efecto cristal difuminado*/
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
/*Fila principal del footer (flex)*/
.footerRow
{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/*Cada columna del footer*/
.footerLinks
{
flex: 1 1 200px;
max-width: 300px;
}
/*Titulos de los bloques del footer*/
.footerLinks h4
{
font-size: 20px;
color: #FFFFFF;
margin-bottom: 25px;
font-weight: 500;
border-bottom: 2px solid #00c3ff;
padding-bottom: 10px;
display: inline-block;
}
/*Enlaces dentro de las columnas del footer*/
.footerLinks ul li a
{
font-size: 18px;
text-decoration: none;
color: #bbbbbb;
display: block;
margin-bottom: 15px;
transition: all .3s ease;
}
/*Hover del footer*/
.footerLinks ul li a:hover
{
color:#ffffff;
padding-left: 6px;
}
/*Iconos redondos de redes sociales*/
.socialLinks a
{
display: inline-block;
min-height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all .5s ease;
}
.socialLinks a:hover
{
background-color: #41eb60;
}
/*Footer responsive para moviles*/
@media(max-width: 991px) {
.footerRow
{
text-align:center;
}
.footerLinks
{
width: 100%;
margin-bottom: 30px;
}
}
/*Zona de Creative Commons*/
.creativeCommons
{
width: 100%;
text-align: center;
margin-top: 2rem;
font-size: 0.875rem;
color: #bbbbbb;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.2em;
}
.creativeCommons a
{
color: #bbbbbb;
text-decoration: none;
margin: 0 0.2em;
transition: color 0.3s ease;
}
.creativeCommons a:hover
{
color: #ffffff;
}
.creativeCommons img
{
vertical-align: middle;
max-width: 1em;
max-height: 1em;
margin-left: 0.2em;
}
/*Espacio para que el contenido no quede oculto por el navbar y el footer*/
.content
{
padding-top: 8rem;
padding-bottom: 12rem;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
/*=============FINAL DE ESTILOS DE PLANTILLA==============*/
/*======================Responsividad=====================*/
#menu-toggle {display: none;}
.hamburguer-label
{
display: none;
font-size:1.5rem;
color: white;
cursor: pointer;
}
@media (max-width:768px) {
.hamburguer-label { display: block;}
.navbarLinks{
position: absolute;
top: 80px;
left:0;
right: 0;
display: none;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding:2rem;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0 ,0 ,0.5)
}
#menu-toogle:checked ~ .navbarLinks{
display: flex;
animation: fadeIn 0.4s ease forwards;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0);}
}
/*============FINAL DE ESTILOS DE RESPONSIVIDAD===========*/
/*====================Seccion juegos======================*/
.sectionTitle
{
text-align: center;
font-size: 2rem;
margin-bottom: 3rem;
color: #00C3FF;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 15px rgba(0, 195, 255, 0.5);
}
.cardsContainer
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
padding: 0 1.5rem;
margin-bottom: 5rem;
}
/*==================Fin seccion juegos====================*/
/*=====================Seccion CTA========================*/
/*===================Fin seccion CTA======================*/

754
HTML-CSS/projecte-final/main/assets/css/style.css Normal file
View File

@@ -0,0 +1,754 @@
/*======Reset y estilos generales======*/
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body
{
font-family: 'Manjari', sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
}
/*=======NAVBAR======*/
.navbar
{
position: fixed;
top: 1rem;
left: 1rem;
right: 1rem;
/*width: calc(100% - 2rem);*/
padding: 1rem 1.5rem;
border-radius: 20px;
z-index: 100;
/*Efecto glassmorphism*/
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
}
.logoContainer a
{
color: white;
font-size: 1.125rem;
font-weight: bold;
margin-right: 0;
}
@media (min-width: 768px){
.logoContainer a { font-size: 1.25rem; }
.navbarLinks{
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 1rem;
}
.navbarLinks li {
margin-left: 1.5rem;
}
}
.navbarLinks a
{
color: white;
transition: color 0.3s ease;
}
.navbarLinks a:hover{
color: #00c3ff;
}
/*=======Menu movil========*/
#menu-toggle {display: none;}
.hamburger-label
{
display: none;
font-size: 1.5rem;
color: white;
cursor: pointer;
}
@media (max-width: 767px){
.hamburger-label { display: block; }
.navbarLinks
{
position: absolute;
top: 6rem;
left: 1rem;
right: 1rem;
display: none;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#menu-toggle:checked ~ .navbarLinks {
display: flex;
animation: fadeIn 0.4s ease forwards;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/*======Footer======*/
.footer
{
padding: 1rem;
padding-top: 3rem;
color: white;
z-index: 50;
border-radius: 20px;
position:static;
margin-top: 3em;
/*Efecto cristal difuminado*/
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
/*Fila principal del footer (flex)*/
.footerRow
{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/*Cada columna del footer*/
.footerLinks
{
flex: 1 1 200px;
max-width: 300px;
}
/*Titulos de los bloques del footer*/
.footerLinks h4
{
font-size: 20px;
color: #FFFFFF;
margin-bottom: 25px;
font-weight: 500;
border-bottom: 2px solid #00c3ff;
padding-bottom: 10px;
display: inline-block;
}
/*Enlaces dentro de las columnas del footer*/
.footerLinks ul li a
{
font-size: 18px;
text-decoration: none;
color: #bbbbbb;
display: block;
margin-bottom: 15px;
transition: all .3s ease;
}
/*Hover del footer*/
.footerLinks ul li a:hover
{
color:#ffffff;
padding-left: 6px;
}
/*Iconos redondos de redes sociales*/
.socialLinks a
{
display: inline-block;
min-height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all .5s ease;
}
.socialLinks a:hover
{
background-color: #41eb60;
}
/*Footer responsive para moviles*/
@media(max-width: 991px) {
.footerRow
{
text-align:center;
}
.footerLinks
{
width: 100%;
margin-bottom: 30px;
}
}
/*Zona de Creative Commons*/
.creativeCommons
{
width: 100%;
text-align: center;
margin-top: 2rem;
font-size: 0.875rem;
color: #bbbbbb;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.2em;
}
.creativeCommons a
{
color: #bbbbbb;
text-decoration: none;
margin: 0 0.2em;
transition: color 0.3s ease;
}
.creativeCommons a:hover
{
color: #ffffff;
}
.creativeCommons img
{
vertical-align: middle;
max-width: 1em;
max-height: 1em;
margin-left: 0.2em;
}
/*Espacio para que el contenido no quede oculto por el navbar y el footer*/
.content
{
padding-top: 7rem;
padding-bottom: 10rem;
max-width: 1200px;
margin: 0 auto;
}
.section-title
{
font-size: 2.5rem;
margin-bottom:3rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.highlight-neon
{
color: #fff;
text-shadow: 0 0 10px #00c3ff, 0 0 20px #00c3ff;
font-style: italic;
margin-left: 10px;
}
/*=======Layout grid========*/
.ranking-grid
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 5rem;
}
.rank-card
{
position: relative;
height: 500px;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(to bottom, #1e293b, #0f172a);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
}
.card-img
{
width: 100%;
height: 60%;
object-fit: cover;
transition: transform 0.5s ease;
filter: brightness(0.8);
}
.card-content
{
height: 40%;
padding: 1.5rem;
background: linear-gradient(to bottom, #1e239b, #0f172a);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.rank-badge
{
position: absolute;
top: 15px;
left: 15px;
width: 45px;
height: 45px;
background: rgba(15, 23, 42, 0.9);
color: #00c3ff;
border: 2px solid #00c3ff;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
font-weight: bold;
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.rank-1 .rank-badge
{
color: #ffd700;
border-color: #ffd700;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.rank-2 .rank-badge
{
color: #c0c0c0;
border-color: #c0c0c0;
box-shadow: 0 0 15px rgba(192, 192, 192, 0.4);
}
.rank-3 .rank-badge
{
color: #cd7f32;
border-color: #cd7f32;
box-shadow: 0 0 15px rgba(205, 127, 50, 0.4);
}
.card-content h3
{
font-size: 1.8rem;
color: #fff;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.genre-tag
{
display: inline;
font-size: 1rem;
color: #00c3ff;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
font-weight: 700;
}
.description
{
font-size: 0.95rem;
color: #94a3b8;
line-height: 1.5;
}
.rank-card:hover
{
transform: translateY(-10px);
/*Mantener box shadow. Al ser css reutilizable, se ha de dejar para el videojocsSAD.html*/
border-color: #00c3ff;
box-shadow: 0 20px 40px -5px rgba(0, 192, 255, 0.15);
}
.rank-card:hover .card-img
{
transform: scale(1.05);
filter: brightness(1.1);
}
.rank-1:hover
{
border-color: #ffd700;
box-shadow: 0 20px 40px -5px rgba(255, 215, 0, 0.15);
}
.rank-2:hover
{
border-color: #c0c0c0;
box-shadow: 0 20px 40px -5px rgba(192, 192, 192, 0.15);
}
.rank-3:hover
{
border-color: #cd7f32;
box-shadow: 0 20px 40px -5px rgba(205, 127, 50, 0.15);
}
/*======SECCION Call To Action (CTA)======*/
.cta-section
{
display: flex;
justify-content: center;
margin-top: 2rem;
}
.cta-card
{
width: 100%;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.8));
border: 1px solid rgba(0, 195, 255, 0.3);
border-radius: 20px;
padding: 3rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-card::before
{
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, #00c3ff, transparent);
opacity: 0.7;
}
@keyframes float
{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.cta-icon
{
font-size: 3rem;
color: #00c3ff;
margin-bottom: 1.5rem;
animation: float 3s ease-in-out infinite;
}
.cta-card h3
{
font-size: 2rem;
margin-bottom: 1rem;
color: #fff;
}
.cta-card p
{
color: #cbd5e1;
margin-bottom: 2rem;
font-size: 1.1rem;
}
.btn-neon
{
padding: 12px 35px;
background: transparent;
color: #00c3ff;
border: 2px solid #00c3ff;
font-weight: bold;
font-size: 1rem;
border-radius: 15px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.5s;
position: relative;
overflow: hidden;
display: inline-block;
}
.btn-neon:hover
{
background: #00c3ff;
color: #0f172a;
box-shadow: 0 0 20px rgba(0, 195, 255, 0.6);
}
@media (max-width: 900px) {
.ranking-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.rank-card {height: auto;}
.card-img { height: 250px;}
.card-content { height: auto; flex: 1;}
}
/*Nueva media query para la navbar.
Tenia el siguiente problema:
- A partir de ~400px de ancho, esta comenzaba a irse a la derecha,
ocultando el desplegador de menu y moviendo la navbar fuera
de la pantalla.
Ocurria por el section-title y el highlight-neon, que hacia que
la barra no pudiera achicarse mas debido a que este estaba limitando
el movimiento por no bajar y separar las palabras como debia.
Es decir:
Antes:
Quedaba "Top 3" arriba
Y quedaba "vendes Setmanals" abajo, sin romperse y ponerse
uno encima de otro o haciendose mas pequeño.
Lo siguiente soluciona el problema:
*/
@media (max-width: 450px) {
.section-title {
font-size: 1.7rem;
line-height: 1.3;
margin-bottom: 2rem;
padding: 0 10px;
}
.highlight-neon {
display:block;
margin-left: 0;
margin-top: 5px;
}
.navbar{
width: auto;
padding: 0.8rem 0.8rem;
/*width: calc(100% - 1rem); */
left: 0.5rem;
right: 0.5rem;
}
.logoContainer a {
font-size: 1rem;
margin-right: 0.5rem;
}
.logoContainer a:last-child {
margin-right: 0;
}
}
/*========Formularios========*/
.register-wrapper
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.glass-form-card
{
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
padding: 3rem;
border-radius: 20px;
width: 100%;
max-width: 500px;
position: relative;
overflow: hidden;
}
.glass-form-card::before
{
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, #00c3ff, transparent);
opacity: 0.7;
}
.form-group
{
margin-bottom: 1.5rem;
position: relative;
}
.form-label
{
display: block;
margin-bottom: 0.5rem;
color: #00c3ff;
font-size: 0.9rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.form-input
{
width: 100%;
padding: 12px 15px;
background: rgba(15, 23, 42, 0.6);
border: 1ox solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: white;
font-family: 'Manjari', sans-serif;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
}
.form-input::placeholder
{
color: rgba(255, 255, 255, 0.3)
}
.form-input:focus
{
border-color: #00c3ff;
box-shadow: 0 0 15px rgba(0, 195, 255, 0.2);
background: rgba(15, 23, 42, 0.9);
}
/*==============Pagina cercar============*/
.options-grid
{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-top: 0.5rem;
}
.option-label
{
display: flex;
align-items: center;
color: #cbd5e1;
font-size: 0.9rem;
cursor: pointer;
}
.option-label input
{
margin-right: 8px;
accent-color: #00c3ff;
}
.buttons-container
{
display: flex;
gap:1rem;
margin-top: 2rem;
}
.btn-reset
{
border-color: #ff4757;
color: #ff4757;
}
.btn-reset:hover
{
background: #ff4757;
color: white;
box-shadow: 0 0 20px rgba(255, 71, 87, 0.6);
}
output
{
display: block;
text-align: center;
color: #00c3ff;
font-weight: bold;
margin-top: 0.5rem;
}
/*================Politica de privacitat==============*/
.policy-container
{
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
padding: 3rem;
border-radius: 20px;
width: 100%;
max-width: 1000px; /* Más ancho para lectura cómoda */
position: relative;
overflow: hidden;
margin: 0 auto;
}
.policy-container::before
{
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, #00c3ff, transparent);
opacity: 0.7;
}
.policy-content h3
{
color: #00c3ff;
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.4rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 5px;
display: inline-block;
}
.policy-content p
{
color: #cbd5e1;
line-height: 1.8;
margin-bottom: 1.2rem;
text-align: justify;
}
/* Ajustes para móviles en la política */
@media (max-width: 768px) {
.policy-container {
padding: 1.5rem;
}
.policy-content h3 {
font-size: 1.2rem;
}
.policy-content p {
font-size: 0.95rem;
}
}

BIN
HTML-CSS/projecte-final/main/assets/img/elden_ring.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
HTML-CSS/projecte-final/main/assets/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
HTML-CSS/projecte-final/main/assets/img/fc24.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
HTML-CSS/projecte-final/main/assets/img/gowr.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
HTML-CSS/projecte-final/main/assets/img/mariokart8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
HTML-CSS/projecte-final/main/assets/img/spider-man2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
HTML-CSS/projecte-final/main/assets/img/zeldatotk.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 MiB

134
HTML-CSS/projecte-final/main/cercarSAD.html Normal file
View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JocsMania - Cercar</title>
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="icon" href="assets/img/favicon.png">
</head>
<body>
<header>
<nav class="navbar">
<div class="logoContainer">
<a href="indexSAD.html"><i class="fa-solid fa-gamepad"></i></a>
<a href="indexSAD.html">JocsMania</a>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger-label">
<i class="fa-solid fa-bars"></i>
</label>
<ul class="navbarLinks">
<li><a href="indexSAD.html">Inici</a></li>
<li><a href="videojocsSAD.html">Videojocs</a></li>
<li><a href="cercarSAD.html">Cercar</a></li>
<li><a href="socisSAD.html">Socis</a></li>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.tiktok.com"><i class="fa-brands fa-tiktok"></i></a></li>
</ul>
</nav>
</header>
<main class="content">
<section>
<h2 class="section-title">Cercar <span class="highlight-neon">Videojocs</span></h2>
<div class="register-wrapper">
<div class="glass-form-card">
<form action="indexSAD.html" method="get">
<div class="form-group">
<label for="edat" class="form-label">Edat del jugador</label>
<input type="range" id="edat" name="edat" class="form-input" min="3" max="18" oninput="this.nextElementSibling.value = this.value + ' anys'">
<output>12 anys</output>
</div>
<div class="form-group">
<label class="form-label">Temàtica</label>
<div class="options-grid">
<label class="option-label">
<input type="radio" name="tematica" value="accio"> Acció
</label>
<label class="option-label">
<input type="radio" name="tematica" value="rpg"> RPG
</label>
<label class="option-label">
<input type="radio" name="tematica" value="esports"> Esports
</label>
<label class="option-label">
<input type="radio" name="tematica" value="accio"> Aventura
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Requisits de maquinari</label>
<div class="options-grid">
<label class="option-label">
<input type="checkbox" name="req" value="8gb_ram"> 8GB RAM
</label>
<label class="option-label">
<input type="checkbox" name="req" value="8gb_ram"> GPU Dedicada
</label>
<label class="option-label">
<input type="checkbox" name="req" value="8gb_ram"> Disc SSD
</label>
<label class="option-label">
<input type="checkbox" name="req" value="8gb_ram"> Windows 11
</label>
</div>
</div>
<div class="buttons-container">
<input type="reset" value="Esborrar" class="btn-neon btn-reset">
<input type="submit" name="Cercar" class="btn-neon">
</div>
</form>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footerRow">
<div class="footerLinks">
<h4>Contactes</h4>
<ul>
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
<li><a href="politicaSAD.html">Política de privadesa</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Socis</h4>
<ul>
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Xarxes socials</h4>
<div class="socialLinks">
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="creativeCommons">
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
</div>
</div>
</div>
</footer>
</body>
</html>

125
HTML-CSS/projecte-final/main/indexSAD.html Normal file
View File

@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JocsMania - Inici</title>
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="icon" href="assets/img/favicon.png">
</head>
<body>
<header>
<nav class="navbar">
<div class="logoContainer">
<a href="indexSAD.html"><i class="fa-solid fa-gamepad"></i></a>
<a href="indexSAD.html">JocsMania</a>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger-label">
<i class="fa-solid fa-bars"></i>
</label>
<ul class="navbarLinks">
<li><a href="indexSAD.html">Inici</a></li>
<li><a href="videojocsSAD.html">Videojocs</a></li>
<li><a href="cercarSAD.html">Cercar</a></li>
<li><a href="socisSAD.html">Socis</a></li>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.tiktok.com"><i class="fa-brands fa-tiktok"></i></a></li>
</ul>
</nav>
</header>
<main class="content">
<section class="top-sales-section">
<h2 class="section-title">Top 3 vendes<span class="highlight-neon">Setmanals</span></h2>
<div class="ranking-grid">
<article class="rank-card rank-1">
<div class="rank-badge">#1</div>
<img class="card-img" src="assets/img/elden_ring.jpg" alt="Elden Ring">
<div class="card-content">
<span class="genre-tag">RPG / Acció</span>
<h3>Elden Ring</h3>
<p class="description">L'obra mestra de món obert. Un món vast i perillós on cada racó amaga un nou desafiament.</p>
</div>
</article>
<article class="rank-card rank-2">
<div class="rank-badge">#2</div>
<img class="card-img" src="assets/img/fc24.jpg" alt="EA FC 24">
<div class="card-content">
<span class="genre-tag">Esports / Simulació</span>
<h3>EA FC 24</h3>
<p class="description">El rei del futbol torna. Realisme pur amb HyperMotionV i integració total del futbol femení.</p>
</div>
</article>
<article class="rank-card rank-3">
<div class="rank-badge">#3</div>
<img class="card-img" src="assets/img/zeldatotk.jpg" alt="Zelda: TOTK">
<div class="card-content">
<span class="genre-tag">Aventura / Puzzle</span>
<h3>Zelda: TOTK</h3>
<p class="description">Creativitat sense límits. Construeix, vola i explora Hyrule com mai abans.</p>
</div>
</article>
</div>
<div class="cta-section">
<div class="cta-card">
<i class="fa-solid fa-layer-group cta-icon"></i>
<h3>Vols veure el catàleg complet?</h3>
<p>Tenim una gran varietat de jocs per a tots els gustos.</p>
<a href="videojocsSAD.html" class="btn-neon">Veure Catàleg Complet</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footerRow">
<div class="footerLinks">
<h4>Contactes</h4>
<ul>
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
<li><a href="politicaSAD.html">Política de privadesa</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Socis</h4>
<ul>
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Xarxes socials</h4>
<div class="socialLinks">
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="creativeCommons">
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
</div>
</div>
</div>
</footer>
</body>
</html>

131
HTML-CSS/projecte-final/main/politicaSAD.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JocsMania - Politica</title>
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="icon" href="assets/img/favicon.png">
</head>
<body>
<header>
<nav class="navbar">
<div class="logoContainer">
<a href="indexSAD.html"><i class="fa-solid fa-gamepad"></i></a>
<a href="indexSAD.html">JocsMania</a>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger-label">
<i class="fa-solid fa-bars"></i>
</label>
<ul class="navbarLinks">
<li><a href="indexSAD.html">Inici</a></li>
<li><a href="videojocsSAD.html">Videojocs</a></li>
<li><a href="cercarSAD.html">Cercar</a></li>
<li><a href="socisSAD.html">Socis</a></li>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.tiktok.com"><i class="fa-brands fa-tiktok"></i></a></li>
</ul>
</nav>
</header>
<main class="content">
<section class="policy-section">
<h2 class="section-title">Política de <span class="highlight-neon">Privacitat</span></h2>
<div class="policy-container">
<div class="policy-content">
<p><strong>POLÍTICA DE PRIVACITAT</strong></p>
<p>
Aquesta Política de Privacitat estableix els termes en què JocsMania utilitza i protegeix la informació que és proporcionada pels seus usuaris en el moment d'utilitzar el seu lloc web. Aquesta companyia està compromesa amb la seguretat de les dades dels seus usuaris. Quan li demanem omplir els camps d'informació personal amb la qual vostè pugui ser identificat, ho fem assegurant que només s'emprarà d'acord amb els termes d'aquest document. No obstant això, aquesta Política de Privacitat pot canviar amb el temps o ser actualitzada, per la qual cosa li recomanem i emfatitzem revisar contínuament aquesta pàgina per assegurar-se que està d'acord amb aquests canvis.
</p>
<h3>Informació que es recull</h3>
<p>
El nostre lloc web podrà recollir informació personal, per exemple: Nom, informació de contacte com la seva adreça de correu electrònic i informació demogràfica. Així mateix, quan sigui necessari, podrà ser requerida informació específica per processar alguna comanda o realitzar un lliurament o facturació.
</p>
<h3>Ús de la informació recollida</h3>
<p>
El nostre lloc web empra la informació amb la finalitat de proporcionar el millor servei possible, particularment per mantenir un registre d'usuaris, de comandes en cas que apliqui, i millorar els nostres productes i serveis. És possible que siguin enviats correus electrònics periòdicament a través del nostre lloc amb ofertes especials, nous productes i altra informació publicitària que considerem rellevant per a vostè o que pugui brindar-li algun benefici; aquests correus electrònics seran enviats a l'adreça que vostè proporcioni i podran ser cancel·lats en qualsevol moment.
</p>
<p>
JocsMania està altament compromès per complir amb el compromís de mantenir la seva informació segura. Usem els sistemes més avançats i els actualitzem constantment per assegurar-nos que no existeixi cap accés no autoritzat.
</p>
<h3>Cookies</h3>
<p>
Una cookie es refereix a un fitxer que és enviat amb la finalitat de sol·licitar permís per emmagatzemar-se al seu ordinador; en acceptar aquest fitxer es crea i la cookie serveix llavors per tenir informació respecte al trànsit web, i també facilita les futures visites a un web recurrent. Una altra funció que tenen les cookies és que amb elles els webs poden reconèixer-te individualment i per tant brindar-te el millor servei personalitzat del seu web.
</p>
<p>
El nostre lloc web empra les cookies per poder identificar les pàgines que són visitades i la seva freqüència. Aquesta informació és emprada únicament per a anàlisi estadística i després la informació s'elimina de forma permanent. Vostè pot eliminar les cookies en qualsevol moment des del seu ordinador. No obstant això, les cookies ajuden a proporcionar un millor servei dels llocs web; aquestes no donen accés a informació del seu ordinador ni de vostè, tret que vostè així ho vulgui i la proporcioni directament.
</p>
<p>
Vostè pot acceptar o negar l'ús de cookies, tot i que la majoria de navegadors accepten cookies automàticament doncs serveix per tenir un millor servei web. També vostè pot canviar la configuració del seu ordinador per declinar les cookies. Si es declinen és possible que no pugui utilitzar alguns dels nostres serveis.
</p>
<h3>Enllaços a Tercers</h3>
<p>
Aquest lloc web podria contenir enllaços a altres llocs que podrien ser del seu interès. Una vegada que vostè faci clic en aquests enllaços i abandoni la nostra pàgina, ja no tenim control sobre el lloc al qual és redirigit i per tant no som responsables dels termes o privacitat ni de la protecció de les seves dades en aquests altres llocs tercers. Aquests llocs estan subjectes a les seves pròpies polítiques de privacitat per la qual cosa és recomanable que els consulti per confirmar que vostè està d'acord amb aquestes.
</p>
<h3>Control de la seva informació personal</h3>
<p>
En qualsevol moment vostè pot restringir la recopilació o l'ús de la informació personal que és proporcionada al nostre lloc web. Cada vegada que se li sol·liciti emplenar un formulari, com el d'alta d'usuari, pot marcar o desmarcar l'opció de rebre informació per correu electrònic. En cas que hagi marcat l'opció de rebre el nostre butlletí o publicitat vostè pot cancel·lar-la en qualsevol moment.
</p>
<p>
Aquesta companyia no vendrà, cedirà ni distribuirà la informació personal que és recopilada sense el seu consentiment, excepte que sigui requerit per un jutge amb una ordre judicial.
</p>
<p>
JocsMania es reserva el dret de canviar els termes de la present Política de Privacitat en qualsevol moment.
</p>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footerRow">
<div class="footerLinks">
<h4>Contactes</h4>
<ul>
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
<li><a href="politicaSAD.html">Política de privadesa</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Socis</h4>
<ul>
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Xarxes socials</h4>
<div class="socialLinks">
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="creativeCommons">
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
</div>
</div>
</div>
</footer>
</body>
</html>

115
HTML-CSS/projecte-final/main/socisSAD.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JocsMania - Socis</title>
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="icon" href="assets/img/favicon.png">
</head>
<body>
<header>
<nav class="navbar">
<div class="logoContainer">
<a href="indexSAD.html"><i class="fa-solid fa-gamepad"></i></a>
<a href="indexSAD.html">JocsMania</a>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger-label">
<i class="fa-solid fa-bars"></i>
</label>
<ul class="navbarLinks">
<li><a href="indexSAD.html">Inici</a></li>
<li><a href="videojocsSAD.html">Videojocs</a></li>
<li><a href="cercarSAD.html">Cercar</a></li>
<li><a href="socisSAD.html">Socis</a></li>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.tiktok.com"><i class="fa-brands fa-tiktok"></i></a></li>
</ul>
</nav>
</header>
<main class="content">
<h2 class="section-title">Zona de <span class="highlight-neon">Socis</span></h2>
<div class="register-wrapper">
<div class="glass-form-card">
<form action="videojocsSAD.html">
<div class="form-group">
<label for="nom" class="form-label">Nom</label>
<input type="text" id="nom" name="nom" class="form-input" placeholder="El teu nom" required>
</div>
<div class="form-group">
<label for="cognoms" class="form-label">Cognoms</label>
<input type="text" id="cognoms" name="cognoms" class="form-input" placeholder="El teus cognoms" required>
</div>
<div class="form-group">
<label for="dni" class="form-label">DNI</label>
<input type="text" id="dni" name="dni" class="form-input" placeholder="00000000X" required pattern="[0-9]{8}[A-Za-z]{1}" title="8 números i una lletra">
</div>
<div class="form-group">
<label for="usuari" class="form-label">Usuari</label>
<input type="text" id="usuari" name="usuari" class="form-input" placeholder="Escull un nickname" required>
</div>
<div class="form-group">
<label for="password" class="form-label">Contrasenya</label>
<input type="text" id="password" name="password" class="form-input" placeholder="·········" required>
</div>
<div class="form-submit-container">
<button type="submit" class="btn-neon">Registrar-se <i class="fa-solid fa-arrow-right"></i></button>
</div>
</form>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="footerRow">
<div class="footerLinks">
<h4>Contactes</h4>
<ul>
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
<li><a href="politicaSAD.html">Política de privadesa</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Socis</h4>
<ul>
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Xarxes socials</h4>
<div class="socialLinks">
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="creativeCommons">
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
</div>
</div>
</div>
</footer>
</body>
</html>

BIN
HTML-CSS/projecte-final/main/video-demostratiuSAD.mp4 Normal file
View File

Binary file not shown.

147
HTML-CSS/projecte-final/main/videojocsSAD.html Normal file
View File

@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JocsMania - Socis</title>
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="icon" href="assets/img/favicon.png">
</head>
<body>
<header>
<nav class="navbar">
<div class="logoContainer">
<a href="indexSAD.html"><i class="fa-solid fa-gamepad"></i></a>
<a href="indexSAD.html">JocsMania</a>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger-label">
<i class="fa-solid fa-bars"></i>
</label>
<ul class="navbarLinks">
<li><a href="indexSAD.html">Inici</a></li>
<li><a href="videojocsSAD.html">Videojocs</a></li>
<li><a href="cercarSAD.html">Cercar</a></li>
<li><a href="socisSAD.html">Socis</a></li>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.tiktok.com"><i class="fa-brands fa-tiktok"></i></a></li>
</ul>
</nav>
</header>
<main class="content">
<section>
<h2 class="section-title">Catàleg <span class="highlight-neon">Complet</span></h2>
<div class="ranking-grid">
<article class="rank-card">
<a href="https://es.bandainamcoent.eu/elden-ring/elden-ring" target="_blank" style="display: contents">
<img src="assets/img/elden_ring.jpg" alt="Elden Ring" class="card-img">
</a>
<div class="card-content">
<span class="genre-tag">RPG / Acció</span>
<h3>Elden Ring</h3>
<p class="description">L'obra mestra de món obert. Un món vast i perillós on cada racó amaga un nou desafiament.</p>
</div>
</article>
<article class="rank-card">
<a href="https://www.ea.com/es-es/games/ea-sports-fc" target="_blank" style="display: contents">
<img src="assets/img/fc24.jpg" alt="EA FC 24" class="card-img">
</a>
<div class="card-content">
<span class="genre-tag">Esports / Simulació</span>
<h3>EA FC 24</h3>
<p class="description">El rei del futbol torna. Realisme pur amb HyperMotionV i integració total del futbol femení.</p>
</div>
</article>
<article class="rank-card">
<a href="https://www.nintendo.com/es-es/Juegos/Juegos-de-Nintendo-Switch/The-Legend-of-Zelda-Tears-of-the-Kingdom-1576884.html" target="_blank" style="display: contents">
<img src="assets/img/zeldatotk.jpg" alt="Zelda: TOTK" class="card-img">
</a>
<div class="card-content">
<span class="genre-tag">Aventura / Puzzle</span>
<h3>The Legend of Zelda: Tears of The Kingdom</h3>
<p class="description">Creativitat sense límits. Construeix, vola i explora Hyrule com mai abans.</p>
</div>
</article>
<article class="rank-card">
<a href="https://www.playstation.com/es-es/games/marvels-spider-man-2/" target="_blank" style="display: contents">
<img src="assets/img/spider-man2.webp" alt="Spider-Man 2" class="card-img">
</a>
<div class="card-content">
<span class="genre-tag">Acció / Món Obert</span>
<h3>Spider-Man 2</h3>
<p class="description">Peter Parker i Miles Morales tornen per enfrontar-se a la prova definitiva contra Venom.</p>
</div>
</article>
<article class="rank-card">
<a href="https://store.nintendo.es/es/mario-kart-8-deluxe-70010000000126" target="_blank" style="display: contents">
<img src="assets/img/mariokart8.jpg" alt="Mario Kart 8 Deluxe" class="card-img">
</a>
<div class="card-content">
<span class="genre-tag">Curses / Família</span>
<h3>Mario Kart 8 Deluxe</h3>
<p class="description">Competeix amb els teus amics en el joc de carreres més divertit i caòtic de la història.</p>
</div>
</article>
<article class="rank-card">
<a href="https://www.playstation.com/es-es/games/god-of-war-ragnarok/" target="_blank" style="display: contents">
<img src="assets/img/gowr.jpg" alt="Elden Ring" class="card-img">
</a>
<div class="card-content">
<span class="genre-tag">Acció / Aventura</span>
<h3>God of War: Ragnarok</h3>
<p class="description">Kratos i Atreus s'endinsen en els Nou Regnes a la recerca de respostes.</p>
</div>
</article>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footerRow">
<div class="footerLinks">
<h4>Contactes</h4>
<ul>
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
<li><a href="politicaSAD.html">Política de privadesa</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Socis</h4>
<ul>
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Xarxes socials</h4>
<div class="socialLinks">
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="creativeCommons">
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
</div>
</div>
</div>
</footer>
</body>
</html>

507
HTML-CSS/projecte-final/testing/assets/css/style.css Normal file
View File

@@ -0,0 +1,507 @@
/* =========================================
1. RESET Y ESTILOS GENERALES
========================================= */
* {
padding: 0;
margin: 0; /* Añadido margin 0 para asegurar reset total */
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body {
font-family: 'Manjari', sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
min-height: 100vh;
}
/* Contenedor principal para evitar que el contenido quede oculto por el navbar/footer fijos */
.content {
padding-top: 8rem; /* Espacio para el Navbar */
padding-bottom: 12rem; /* Espacio para el Footer */
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.section-title {
text-align: center;
font-size: 2rem;
margin-bottom: 3rem;
color: #00c3ff;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 15px rgba(0, 195, 255, 0.6);
}
/* =========================================
2. NAVBAR (Menú de Navegación)
========================================= */
.navbar {
position: fixed;
top: 1rem;
left: 1rem;
right: 1rem;
width: calc(100% - 2rem); /* CORREGIDO: Espacios añadidos en el calc */
padding: 1rem 1.5rem;
border-radius: 20px;
z-index: 100; /* Z-index alto para estar siempre encima */
/* Glassmorphism */
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
}
.logoContainer a {
color: white;
font-size: 1.125rem;
font-weight: bold;
margin-right: 1rem;
}
@media (min-width: 768px) {
.logoContainer a { font-size: 1.25rem; }
.navbarLinks {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 1rem;
}
.navbarLinks li {
margin-left: 1.5rem; /* Separación entre items */
}
}
.navbarLinks a {
color: white;
transition: color 0.3s ease;
}
.navbarLinks a:hover {
color: #00c3ff;
}
/* =========================================
3. MENÚ MÓVIL (Checkbox Hack)
========================================= */
#menu-toggle { display: none; }
.hamburger-label {
display: none; /* Oculto en PC */
font-size: 1.5rem;
color: white;
cursor: pointer;
}
@media (max-width: 768px) {
.hamburger-label { display: block; }
.navbarLinks {
position: absolute;
top: 80px;
left: 0;
right: 0;
display: none; /* Oculto por defecto */
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* Mostrar menú al marcar checkbox */
#menu-toggle:checked ~ .navbarLinks {
display: flex;
animation: fadeIn 0.4s ease forwards;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================
4. NUEVA SECCIÓN TOP VENTAS (Ranking)
========================================= */
.section-title .highlight-neon {
color: #fff;
text-shadow: 0 0 10px #00c3ff, 0 0 20px #00c3ff;
font-style: italic;
margin-left: 10px;
}
.ranking-container {
display: flex;
height: 500px; /* Altura fija necesaria para PC */
gap: 1rem;
padding: 0 1.5rem;
margin-bottom: 5rem;
}
/* Estilo base de la tarjeta */
.rank-card {
position: relative;
flex: 1; /* Todos empiezan igual */
border-radius: 30px;
overflow: hidden;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 2px solid rgba(255, 255, 255, 0.1);
}
/* Imagen de fondo */
.card-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
filter: grayscale(80%) brightness(0.5) contrast(1.2); /* Oscuro por defecto */
transition: all 0.5s ease;
z-index: 1;
}
/* Insignia (#1, #2...) */
.rank-badge {
position: absolute;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
background: rgba(15, 23, 42, 0.8);
color: #00c3ff;
border: 2px solid #00c3ff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
font-weight: bold;
z-index: 3;
box-shadow: 0 0 15px rgba(0, 195, 255, 0.5);
}
/* Estilo especial para el Top 1 (Dorado) */
.rank-1 .rank-badge {
color: #ffd700;
border-color: #ffd700;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
/* Capa de texto */
.card-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 10%, rgba(15, 23, 42, 0.3) 60%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
}
.card-details {
transform: translateY(20px);
transition: all 0.4s ease;
}
.card-details h3 {
font-size: 2rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
color: white;
}
.short-desc {
font-size: 1.1rem;
color: #00c3ff;
font-weight: bold;
margin-bottom: 1rem;
display: block;
}
.full-desc {
font-size: 0.95rem;
color: #d1d5db;
line-height: 1.5;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.5s ease;
}
/* --- INTERACTIVIDAD HOVER (PC) --- */
/* 1. Oscurecer las otras al pasar el mouse */
.ranking-container:hover .rank-card:not(:hover) {
flex: 0.7;
filter: brightness(0.6) blur(1px);
}
/* 2. Expandir la tarjeta activa */
.rank-card:hover {
flex: 2; /* Se ensancha */
border-color: #00c3ff;
box-shadow: 0 10px 40px -10px rgba(0, 195, 255, 0.5);
z-index: 10;
}
/* 3. Activar imagen y texto */
.rank-card:hover .card-bg {
filter: grayscale(0%) brightness(1.1);
transform: scale(1.1) rotate(1deg);
}
.rank-card:hover .card-details {
transform: translateY(0);
}
.rank-card:hover .full-desc {
opacity: 1;
max-height: 100px;
margin-top: 1rem;
}
/* --- RESPONSIVE RANKING (MÓVIL) --- */
@media (max-width: 900px) {
.ranking-container {
flex-direction: column;
height: auto;
gap: 2rem;
}
.rank-card {
height: 350px;
flex: none; /* Desactiva flex dinámico */
width: 100%;
}
/* Desactivar efectos complejos en móvil */
.ranking-container:hover .rank-card:not(:hover) { flex: none; filter: none; }
.rank-card:hover { flex: none; transform: scale(1.02); }
}
/* =========================================
5. CTA SECTION (Botón "Ver catálogo")
========================================= */
.cta-section {
padding: 0 1.5rem;
display: flex;
justify-content: center;
margin-top: 2rem;
}
.cta-content {
width: 100%;
max-width: 900px;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 195, 255, 0.3);
border-radius: 20px;
padding: 3rem 2rem;
text-align: center;
transition: box-shadow 0.3s ease;
}
.cta-content:hover {
box-shadow: 0 0 30px rgba(0, 195, 255, 0.2);
border-color: #00c3ff;
}
.cta-icon {
font-size: 3rem;
color: #00c3ff;
margin-bottom: 1rem;
}
.cta-content p {
font-size: 1.4rem;
margin-bottom: 2rem;
color: #ffffff;
}
.cta-button {
display: inline-block;
padding: 14px 40px;
color: #00c3ff;
border: 2px solid #00c3ff;
font-weight: bold;
font-size: 1.1rem;
border-radius: 50px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-button:hover {
background-color: #00c3ff;
color: #0f172a;
box-shadow: 0 0 25px rgba(0, 195, 255, 0.8);
}
/* =========================================
6. FOOTER
========================================= */
.footer
{
bottom: 1rem;
left: 1rem;
right: 1rem;
padding: 1rem;
color: white;
z-index: 50;
border-radius: 20px;
position:static;
margin-top: 3em;
/*Efecto cristal difuminado*/
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
/*Fila principal del footer (flex)*/
.footerRow
{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/*Cada columna del footer*/
.footerLinks
{
flex: 1 1 200px;
max-width: 300px;
}
/*Titulos de los bloques del footer*/
.footerLinks h4
{
font-size: 20px;
color: #FFFFFF;
margin-bottom: 25px;
font-weight: 500;
border-bottom: 2px solid #00c3ff;
padding-bottom: 10px;
display: inline-block;
}
/*Enlaces dentro de las columnas del footer*/
.footerLinks ul li a
{
font-size: 18px;
text-decoration: none;
color: #bbbbbb;
display: block;
margin-bottom: 15px;
transition: all .3s ease;
}
/*Hover del footer*/
.footerLinks ul li a:hover
{
color:#ffffff;
padding-left: 6px;
}
/*Iconos redondos de redes sociales*/
.socialLinks a
{
display: inline-block;
min-height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all .5s ease;
}
.socialLinks a:hover
{
background-color: #41eb60;
}
/*Footer responsive para moviles*/
@media(max-width: 991px) {
.footerRow
{
text-align:center;
}
.footerLinks
{
width: 100%;
margin-bottom: 30px;
}
}
/*Zona de Creative Commons*/
.creativeCommons
{
width: 100%;
text-align: center;
margin-top: 2rem;
font-size: 0.875rem;
color: #bbbbbb;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.2em;
}
.creativeCommons a
{
color: #bbbbbb;
text-decoration: none;
margin: 0 0.2em;
transition: color 0.3s ease;
}
.creativeCommons a:hover
{
color: #ffffff;
}
.creativeCommons img
{
vertical-align: middle;
max-width: 1em;
max-height: 1em;
margin-left: 0.2em;
}
/*Espacio para que el contenido no quede oculto por el navbar y el footer*/
.content {
padding-top: 7rem;
padding-bottom: 10rem;
max-width: 1200px;
margin: 0 auto;
}

BIN
HTML-CSS/projecte-final/testing/assets/img/elden_ring.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
HTML-CSS/projecte-final/testing/assets/img/fc24.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
HTML-CSS/projecte-final/testing/assets/img/zeldatotk.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 MiB

119
HTML-CSS/projecte-final/testing/index.html Normal file
View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JocsMania - Inici</title>
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="logoContainer">
<a href="indexSAD.html"><i class="fa-solid fa-gamepad"></i></a>
<a href="indexSAD.html">JocsMania</a>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger-label">
<i class="fa-solid fa-bars"></i>
</label>
<ul class="navbarLinks">
<li><a href="indexSAD.html">Inici</a></li>
<li><a href="videojocsSAD.html">Videojocs</a></li>
<li><a href="cercarSAD.html">Cercar</a></li>
<li><a href="socisSAD.html">Socis</a></li>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.tiktok.com"><i class="fa-brands fa-tiktok"></i></a></li>
</ul>
</nav>
</header>
<main class="content">
<section class="top-sales-section ranking-style">
<h2 class="section-title">Top 3 Vendes <span class="highlight-neon">Setmanal</span></h2>
<div class="ranking-container">
<article class="rank-card rank-1">
<div class="card-bg" style="background-image: url('assets/img/elden_ring.jpg');"></div>
<div class="rank-badge">#1</div>
<div class="card-overlay">
<div class="card-details">
<h3>Elden Ring</h3>
<p class="short-desc">Obra mestra de món obert.</p>
<p class="full-desc">Desafia i recompensa a parts iguals en un món vast i perillós creat per Hidetaka Miyazaki i George R. R. Martin.</p>
</div>
</div>
</article>
<article class="rank-card rank-2">
<div class="card-bg" style="background-image: url('assets/img/fc24.jpg');"></div>
<div class="rank-badge">#2</div>
<div class="card-overlay">
<div class="card-details">
<h3>EA FC 24</h3>
<p class="short-desc">El simulador definitiu.</p>
<p class="full-desc">Experimenta el realisme amb HyperMotionV i gaudeix del futbol amb equips masculins i femenins.</p>
</div>
</div>
</article>
<article class="rank-card rank-3">
<div class="card-bg" style="background-image: url('assets/img/zeldatotk.jpg');"></div>
<div class="rank-badge">#3</div>
<div class="card-overlay">
<div class="card-details">
<h3>Zelda: TOTK</h3>
<p class="short-desc">Creativitat sense límits.</p>
<p class="full-desc">Una aventura que redefineix el gènere, on la teva imaginació és l'única eina necessària per explorar Hyrule.</p>
</div>
</div>
</article>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footerRow">
<div class="footerLinks">
<h4>Contactes</h4>
<ul>
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
<li><a href="politicaSAD.html">Política de privadesa</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Socis</h4>
<ul>
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
</ul>
</div>
<div class="footerLinks">
<h4>Redes sociales</h4>
<div class="socialLinks">
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="creativeCommons">
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
</div>
</div>
</div>
</footer>
</body>
</html>