Skip to content

Rafa Cabezas #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RafaCabezas wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Rafa Cabezas #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 124 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formularios</title>

<link rel="stylesheet" href="style.css">
</head>

<body>
<main>
<h1>Asturias</h1>

<div id="forms">
<div class="card">
<h2>El club viejuner</h2><br>

<form action="#" method="post">
<ol>
<fieldset>
<legend>Tú:</legend>

<li><input type="text" placeholder="Nombre"></li>
<li><input type="text" placeholder="Apellidos" autofocus></li>
<li><input type="number" placeholder="Edad" min="0"></li>
<li>
<label>Sexo</label>
<input type="radio" id="masc" name="sexo" value="M">
<label for="masc">M</label>
<input type="radio" id="fem" name="sexo" value="F">
<label for="fem">F</label>
</li>
<li>
<label for="viejuner">Me siento viejuner</label>
<input type="checkbox" id="viejuner" required>
</li>
<li><textarea placeholder="Escribe algo sobre tí"></textarea></li>
</fieldset>

<fieldset>
<legend>Tus circunstancias:</legend>

<li><input type="email" placeholder="Dirección email"></li>
<li><input type="tel" id="tel" placeholder="Tlf"></li>
</fieldset>

<li>
<input type="submit" value="Solicitar unirme">
<input type="reset" value="Resetear">
</li>
</ol>
</form>
</div>

<div class="card">
<h2>Los ladronzuelos de bicicletas</h2><br>

<form action="#" method="post">
<ol>
<li><input type="date" id="fecha"></li>
<li><input type="time" id="hora"></li>
<li><input type="color" id="color"></li>
<li>
<label>Rango de precio:</label>
<input type="range" id="precio">
</li>
<li>
<label for="cars">Tipo de bicicleta:</label>
<select name="tipoBici" id="tipoBicis">
<optgroup label="Paseo">
<option value="senorial">Señorial</option>
<option value="antiplebe">Anti-plebeyos</option>
<option value="hombro">PorEncimaDelHomfa-border</option>
</optgroup>
<optgroup label="Montaña">
<option value="gamu">Gamusinos</option>
<option value="huele">Hueleflores premium</option>
<option value="fango">Fango lover</option>
</optgroup>
<optgroup label="Carreras">
<option value="metro">Metroymedio</option>
<option value="fluor">Fluorescente edition</option>
<option value="grupo">Grupitos</option>
</optgroup>
</select>
</li>
<li>
<select id="" multiple>
<option value="ruedines">Ruedines</option>
<option value="pegatinas">Pegatinas</option>
<option value="cestita">Cestita</option>
<option value="bomba">Bomba de aire</option>
<option value="timbre">Timbre</option>
<option value="foco">Foco</option>
</select>
</li>
<li>
<label for="marca">¿Qúe marca era?</label>
<input list="marcas" id="marca">

<datalist id="marcas">
<option value="specialized">
<option value="trek">
<option value="merida">
<option value="scott">
<option value="giant">
<option value="orbea">
</datalist>
</li>
<li><input type="submit" value="Enviar"></li>
</ol>
</form>
</div>
</div>

</main>
</body>

</html>

</html>
39 changes: 39 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
body {
background-color: rgb(244, 240, 240);
}

#forms {
display: flex;
justify-content: space-around;
width: 100%;
}

.card {
background-color: white;
padding: 25px;
width: 40%;
border: 1px solid black;
border-radius: 10px;
}

h1,
h2 {
text-align: center;
}

fieldset {
border: 0px;
}

ol {
list-style: none;
margin-left: none;
}

ol>li {
margin-top: 10px;
}

ol>li:last-child {
margin-top: 40px;
}