165 lines
7.4 KiB
HTML
165 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Repaso 2</title>
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header id="main_header">
|
|
<img src="./imagenes/logo.png" alt="logotipo">
|
|
<nav>
|
|
<ul class="menu">
|
|
<li> <a href="#inicio">Inicio</a></li>
|
|
<li> <a href="#equipo">Equipo</a></li>
|
|
<li> <a href="#servicio">Servicio</a></li>
|
|
<li> <a href="#trabajos">Trabajos</a></li>
|
|
<li> <a href="#contacto">Contacto</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
|
|
<main class="main_container">
|
|
<section id="inicio">
|
|
<H1>AlexCG Design</H1>
|
|
<h2>Agencia de desarrollo web</h2>
|
|
<img src="./imagenes/desarrollo.jpg" width="90%" alt="Imagen de desarrollo">
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos tenetur illo id magnam ea inventore
|
|
recusandae ad facilis nisi quas, optio possimus similique, saepe dolor aliquid, eligendi quidem
|
|
obcaecati. Libero.</p>
|
|
</section>
|
|
|
|
<section id="equipo">
|
|
<h2>Equipo</h2>
|
|
<div class="equipo-content">
|
|
<div class="card">
|
|
<p>Mary Salert</p>
|
|
<img src="./imagenes/people1.jpg" alt="avatar mary">
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_arquitecto.jpg" alt="">
|
|
<p><span>Ocupacion:</span> Diseñadora Web</p>
|
|
</div>
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_area.jpg" alt="">
|
|
<p><span>Area de trabajo:</span> Desarrollo de aplicaciones</p>
|
|
</div>
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_calendario.jpg" alt="">
|
|
<p><span>Año de incorporacion:</span> Diseñadora Web</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<p>Mary Salert</p>
|
|
<img src="./imagenes/people2.jpg" alt="avatar mary">
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_arquitecto.jpg" alt="">
|
|
<p><span>Ocupacion:</span> Diseñadora Web</p>
|
|
</div>
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_area.jpg" alt="">
|
|
<p><span>Area de trabajo:</span> Desarrollo de aplicaciones</p>
|
|
</div>
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_calendario.jpg" alt="">
|
|
<p><span>Año de incorporacion:</span> Diseñadora Web</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<p>Mary Salert</p>
|
|
<img src="./imagenes/people3.jpg" alt="avatar mary">
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_arquitecto.jpg" alt="">
|
|
<p><span>Ocupacion:</span> Diseñadora Web</p>
|
|
</div>
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_area.jpg" alt="">
|
|
<p><span>Area de trabajo:</span> Desarrollo de aplicaciones</p>
|
|
</div>
|
|
<div class="card-details">
|
|
<img src="./imagenes/icono_calendario.jpg" alt="">
|
|
<p><span>Año de incorporacion:</span> Diseñadora Web</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contacto">
|
|
<h2>Contacta con nosotros</h2>
|
|
<form class="form_main" action="./gracias.html" method="get">
|
|
<fieldset>
|
|
<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="email" name="correo" id="correo" placeholder="Escribe tu correo" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<div>
|
|
<label for="asunto">Asunto:</label>
|
|
<select name="asunto" id="asunto" required>
|
|
<option value="" disabled selected>-- Selecciona --</option>
|
|
<option value="opcion1">Opción 1</option>
|
|
<option value="opcion2">Opción 2</option>
|
|
<option value="opcion3">Opción 3</option>
|
|
</select>
|
|
</div>
|
|
<label style="width: auto;">¿Como 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 for="observaciones" style="width: auto;">Escribe tu mensaje:</label>
|
|
<textarea name="observaciones" id="observaciones" rows="5" required></textarea>
|
|
<div>
|
|
<input type="checkbox" name="politica" id="politica" required>
|
|
<label for="politica" style="width: auto; color: white;">He leído y acepto <a style="color: #2795de;" href="#">aviso legal y la política de privacidad</a></label>
|
|
</div>
|
|
</fieldset>
|
|
<div>
|
|
<input class="form_btn" type="submit" value="Ok">
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<img src="./imagenes/logo.png" alt="logo">
|
|
<div class="redes">
|
|
<a href=""><img src="./imagenes/twitter.png" alt="logo twitter"></a>
|
|
<a href=""><img src="./imagenes/facebook.png" alt="logo facebook"></a>
|
|
<a href=""><img src="./imagenes/youtube.png" alt="logo youtube"></a>
|
|
</div>
|
|
<p>La pasion e innovacion es lo que nos distingue del resto</p>
|
|
</footer>
|
|
|
|
|
|
<div id="subircaja">
|
|
<a href="#inicio">
|
|
<img id="subirimg" src="./imagenes/subir.png" alt="icono subir">
|
|
</a>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |