Dia 23
This commit is contained in:
Marcos Lopez
parent
11c4ccddc5
commit
1afaa1b1c0
BIN
Practicas/Practicas HTML/Repaso 2/Repaso2.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso 2/Repaso2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
|
|
@ -55,7 +55,8 @@ body {
|
|||
}
|
||||
|
||||
#inicio,
|
||||
#equipo {
|
||||
#equipo,
|
||||
#contacto {
|
||||
scroll-margin-top: 150px;
|
||||
}
|
||||
|
||||
|
|
@ -68,6 +69,7 @@ main {
|
|||
margin-top: 3em;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -104,14 +106,14 @@ section p {
|
|||
}
|
||||
|
||||
.card {
|
||||
max-width: 320px;
|
||||
width: 320px;
|
||||
padding: 0.5em;
|
||||
border: 3px solid rgb(21, 92, 190);
|
||||
color: rgb(21, 92, 190);
|
||||
border: 4px solid #2795de;
|
||||
color: #2795de;
|
||||
}
|
||||
.card > img {
|
||||
margin-top: 1em;
|
||||
width: 80%;
|
||||
max-height: 320px;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
|
|
@ -129,7 +131,7 @@ section p {
|
|||
}
|
||||
|
||||
.card-details span {
|
||||
color: rgb(21, 92, 190);
|
||||
color: #2795de;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -163,23 +165,55 @@ footer p {
|
|||
height: 48px;
|
||||
}
|
||||
|
||||
.form_container {
|
||||
padding: 0.5em;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
gap: 0.4em;
|
||||
flex-direction: column;
|
||||
.form_main {
|
||||
width: 100%;
|
||||
border: 3px solid blue;
|
||||
border: 4px solid #2795de;
|
||||
color: #2795de;
|
||||
box-sizing: border-box;
|
||||
padding: 0.3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.form_container .subform {
|
||||
.form_main > fieldset {
|
||||
text-align: start;
|
||||
border: 4px solid #2795de;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5em;
|
||||
border: 3px solid blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background-color: rgb(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
height: 2em;
|
||||
padding: 0 0.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 98%;
|
||||
height: 200px;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
/* Definiciones para el boton de subir pagina*/
|
||||
#subircaja {
|
||||
|
|
@ -208,10 +242,18 @@ footer p {
|
|||
main {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
align-items: normal;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,19 +89,60 @@
|
|||
|
||||
<section id="contacto">
|
||||
<h2>Contacta con nosotros</h2>
|
||||
|
||||
<form class="form_container" action="./gracias.html" method="get">
|
||||
<form class="form_main" action="./gracias.html" method="get">
|
||||
<fieldset>
|
||||
<label for="nombre">Nombre</label>
|
||||
<input type="text" name="nombre" id="nombre" required>
|
||||
<div class="flex_responsive">
|
||||
<label for="nombre">Nombre</label>
|
||||
<input type="text" name="nombre" id="nombre" placeholder="Escribe tu nombre .." required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="correo">Correo</label>
|
||||
<input type="text" name="correo" id="correo" placeholder="Escribe tu correo" required>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="subform">
|
||||
|
||||
<fieldset>
|
||||
<div>
|
||||
<label for="asunto">Asunto</label>
|
||||
<select name="asunto" id="asunto" required>
|
||||
<option value="" disabled selected>-- Selecciona --</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="">opcion 1</option>
|
||||
</select>
|
||||
</div>
|
||||
<label style="width: auto;">¿Cómo nos ha conocido?</label>
|
||||
<div class="flex_responsive">
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="amigo" value="amigo" required>
|
||||
<label for="amigo">Un amigo</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="google" value="google">
|
||||
<label for="google">Googleando</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="buzoneo" value="buzoneo">
|
||||
<label for="buzoneo">Buzoneo</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="otros" value="otros">
|
||||
<label for="otros">Otros</label>
|
||||
</div>
|
||||
</div>
|
||||
<label style="width: auto;" for="observaciones">Escribe tu mensaje</label>
|
||||
<textarea name="observaciones" id="observaciones" rows="10" required></textarea>
|
||||
<div>
|
||||
<input type="checkbox" name="politica" id="politica" minlength="10" required>
|
||||
<label for="politica" style="width: auto;">He leído y acepto <a href="">aviso legal y la
|
||||
politica de privacidad</a> </label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div>
|
||||
<input class="btn" type="submit" value="Ok">
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
BIN
Practicas/Practicas HTML/Repaso 2/web_diseno.zip
Normal file
BIN
Practicas/Practicas HTML/Repaso 2/web_diseno.zip
Normal file
Binary file not shown.
|
|
@ -245,11 +245,6 @@ input:focus {
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*Media Querys para aplicar a dispositivos moviles*/
|
||||
@media (max-width: 550px) {
|
||||
.lista_menu li {
|
||||
|
|
|
|||
12
Practicas/Practicas HTML/landing/index.html
Normal file
12
Practicas/Practicas HTML/landing/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Landing page</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="http://marklogo.atwebpages.com/constructora/">1- Constructora</a> <br>
|
||||
<a href="http://marklogo.atwebpages.com/webdiseno/">2- Web Diseño</a>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user