ClubEnsayos.com - Ensayos de Calidad, Tareas y Monografias
Buscar

Maquetación de imagen


Enviado por   •  29 de Noviembre de 2023  •  Tarea  •  639 Palabras (3 Páginas)  •  33 Visitas

Página 1 de 3

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

...

Descargar como (para miembros actualizados) txt (5 Kb) pdf (48 Kb) docx (11 Kb)
Leer 2 páginas más »
Disponible sólo en Clubensayos.com