166 lines
7.3 KiB
HTML
166 lines
7.3 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>
|
|
<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="text" name="correo" id="correo" placeholder="Escribe tu correo" required>
|
|
</div>
|
|
</fieldset>
|
|
<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>
|
|
<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> |