El nostre css per al registre de la LAN Party es el seguent:
<style>
:root {
--neon-blue: #00f2ff;
--neon-purple: #bc13fe;
--bg-color: #0d0d0d;
}
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background-color: var(--bg-color);
color: white;
display: flex;
justify-content: center;
padding: 40px 20px;
margin: 0;
}
.container {
background: #1a1a1a;
padding: 30px;
border-radius: 15px;
box-shadow: 0 0 20px var(--neon-blue);
width: 100%;
max-width: 500px;
}
h2 { text-align: center; color: var(--neon-blue); text-transform: uppercase; margin-bottom: 25px; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-size: 0.9rem; color: #ccc; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
width: 100%;
padding: 10px;
background: #2a2a2a;
border: 1px solid var(--neon-purple);
color: white;
border-radius: 5px;
box-sizing: border-box;
}
.days-group {
display: flex;
gap: 15px;
background: #2a2a2a;
padding: 10px;
border-radius: 5px;
border: 1px solid var(--neon-purple);
}
.day-option { display: flex; align-items: center; gap: 5px; cursor: pointer; }
button {
width: 100%;
padding: 15px;
background: var(--neon-purple);
border: none;
color: white;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
transition: 0.3s;
}
button:hover { background: var(--neon-blue); color: black; }
.success-msg {
background: rgba(0, 255, 136, 0.2);
color: #00ff88;
padding: 10px;
border-radius: 5px;
text-align: center;
margin-bottom: 20px;
}
</style>Hem decidit fer amb un estil neó ja que ens quadra amb la LAN Party i així es veu millor quan es fosc
La nostra pàgina sense css es veu així:
En canvi amb css es veu així:
i en móvil es veuria una cosa així:
També hem afegit una animació que al clicar el botó de finalitzar registre també es posi en blau
les linea de codi que fa aixó
button:hover { background: var(--neon-blue); color: black; }el :hover fa que el button quan estàs a sobre façi el que estigui entre { }