Maquetación de imagen
Enviado por Blisk01 • 29 de Noviembre de 2023 • Tareas • 639 Palabras (3 Páginas) • 13 Visitas
Ejercicio 01: Realizar la maquetación de la imagen del modelo que se incluye a continuación, observando los siguientes detalles:
1) El ancho de la página es de 1000px.
2) Opcional, usar div contenedor.
3) Los botones de la barra de navegación deben funcionar como vínculos ancla que apunten al correspondiente sector de información.
4) Los botones presentan el siguiente efecto al encontrarse en hover mediante una transición que dure 1 segundo:
5) El botón subir debe tener posicionamiento fijo y el contenido del vínculo es el signo >
6) Verificar que las imágenes que están insertadas en el documento html tengas los parámetros correctos.
7) Se entrega vía classroom con apellido-nombre.rar o .zip
RESPUESTA:
HTML
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio en clase</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Mandá Fruta - Blog</h1>
<nav>
<ul>
<li><a href="#sandia">Sandia</a></li>
<li><a href="#frutilla">Frutilla</a></li>
<li><a href="#pera">Pera</a></li>
<li><a href="#banana">Banana</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Destacadas del mes</h2>
<article id="sandia">
<h3>Sandia</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, similique, nemo, ad cum mollitia provident ea odio ducimus fugit amet est quod quam delectus velit eum voluptatibus distinctio veniam cumque!</p>
<img src="img/sandia.png" alt="">
</article>
<article id="frutilla">
<h3>Frutilla</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, similique, nemo, ad cum mollitia provident ea odio ducimus fugit amet est quod quam delectus velit eum voluptatibus distinctio veniam cumque!</p>
<img src="img/frutilla.png" alt="">
</article>
<article id="pera">
<h3>Pera</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, similique, nemo, ad cum mollitia provident ea odio ducimus fugit amet est quod quam delectus velit eum voluptatibus distinctio veniam cumque!</p>
<img src="img/pera.png" alt="">
</article>
<article id="banana">
<h3>Banana</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, similique, nemo, ad cum mollitia provident ea odio ducimus fugit amet est quod quam delectus velit eum voluptatibus distinctio veniam cumque!</p>
<img src="img/banana.png" alt="">
</article>
<a href="" id="subir">></a>
</section>
</main>
<footer>
<p>Maquetado Y Desarrollo</p>
</footer>
</body>
</html>
CSS
* {box-sizing: border-box;}
body {
width: 1000px;
background-color: rgb(109, 200, 223);
...