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,
|
#inicio,
|
||||||
#equipo {
|
#equipo,
|
||||||
|
#contacto {
|
||||||
scroll-margin-top: 150px;
|
scroll-margin-top: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -68,6 +69,7 @@ main {
|
||||||
margin-top: 3em;
|
margin-top: 3em;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -104,14 +106,14 @@ section p {
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
max-width: 320px;
|
width: 320px;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
border: 3px solid rgb(21, 92, 190);
|
border: 4px solid #2795de;
|
||||||
color: rgb(21, 92, 190);
|
color: #2795de;
|
||||||
}
|
}
|
||||||
.card > img {
|
.card > img {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
width: 80%;
|
max-height: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-details {
|
.card-details {
|
||||||
|
|
@ -129,7 +131,7 @@ section p {
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-details span {
|
.card-details span {
|
||||||
color: rgb(21, 92, 190);
|
color: #2795de;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -163,23 +165,55 @@ footer p {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form_container {
|
.form_main {
|
||||||
padding: 0.5em;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
gap: 0.4em;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
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;
|
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*/
|
/* Definiciones para el boton de subir pagina*/
|
||||||
#subircaja {
|
#subircaja {
|
||||||
|
|
@ -208,10 +242,18 @@ footer p {
|
||||||
main {
|
main {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 230px;
|
width: 230px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex_responsive {
|
||||||
|
display: flex;
|
||||||
|
align-items: normal;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -89,19 +89,60 @@
|
||||||
|
|
||||||
<section id="contacto">
|
<section id="contacto">
|
||||||
<h2>Contacta con nosotros</h2>
|
<h2>Contacta con nosotros</h2>
|
||||||
|
<form class="form_main" action="./gracias.html" method="get">
|
||||||
<form class="form_container" action="./gracias.html" method="get">
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="nombre">Nombre</label>
|
<div class="flex_responsive">
|
||||||
<input type="text" name="nombre" id="nombre" required>
|
<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>
|
</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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<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 Querys para aplicar a dispositivos moviles*/
|
||||||
@media (max-width: 550px) {
|
@media (max-width: 550px) {
|
||||||
.lista_menu li {
|
.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