Añadido la actividad 2.7
93
ACT27_sad/ACT27_sad.html
Executable file
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<title>Mascotas</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="estilos.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Adopta una mascota</h1>
|
||||
<nav>
|
||||
<ul id="menu">
|
||||
<li><a href="#">Nosotros</a></li>
|
||||
<li><a href="#">Campañas</a></li>
|
||||
<li><a href="#">Socios</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="mascotas">
|
||||
<article class="mascota">
|
||||
<img src="images/mascota1.jpg" alt="" />
|
||||
<div class="info">
|
||||
<h3>Praesent quis orcidiam viverralopr</h3>
|
||||
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="mascota">
|
||||
<img src="images/mascota2.jpg" alt="" />
|
||||
<div class="info">
|
||||
<h3>Praesent quis orcidiam viverralopr</h3>
|
||||
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="mascota">
|
||||
<img src="images/mascota3.jpg" alt="" />
|
||||
<div class="info">
|
||||
<h3>Praesent quis orcidiam viverralopr</h3>
|
||||
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="mascota">
|
||||
<img src="images/mascota4.jpg" alt="" />
|
||||
<div class="info">
|
||||
<h3>Praesent quis orcidiam viverralopr</h3>
|
||||
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="mascota">
|
||||
<img src="images/mascota5.jpg" alt="" />
|
||||
<div class="info">
|
||||
<h3>Praesent quis orcidiam viverralopr</h3>
|
||||
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="mascota">
|
||||
<img src="images/mascota6.jpg" alt="" />
|
||||
<div class="info">
|
||||
<h3>Praesent quis orcidiam viverralopr</h3>
|
||||
<p>Raes quis orci eget diam viverralopr con equat. Fusce sagit quam ihui hyhy kolo opirlo pulvinarhjkjo.</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="colaboradores">
|
||||
<div class="colaborador">
|
||||
<img src="images/cara1.jpg" alt="" />
|
||||
<h3>Colaborador</h3>
|
||||
<p>colaborador1@gmail.com</p>
|
||||
</div>
|
||||
<div class="colaborador">
|
||||
<img src="images/cara2.jpg" alt="" />
|
||||
<h3>Colaboradora</h3>
|
||||
<p>colaborador1@gmail.com</p>
|
||||
</div>
|
||||
<div class="colaborador">
|
||||
<img src="images/cara3.jpg" alt="" />
|
||||
<h3>Colaboradora</h3>
|
||||
<p>colaborador1@gmail.com</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>Contacto principal: <a href="mailto:adoptaunamascota@gmail.com">adoptaunamascota@gmail.com</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
151
ACT27_sad/estilos.css
Executable file
@@ -0,0 +1,151 @@
|
||||
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
header, main, footer
|
||||
{
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #103610;
|
||||
padding: 10px 20px;
|
||||
|
||||
}
|
||||
|
||||
header h1
|
||||
{
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-size: 3em;
|
||||
margin: 30px 30px 30px;
|
||||
}
|
||||
|
||||
#menu
|
||||
{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#menu li
|
||||
{
|
||||
padding: 0 15px;
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
#menu li:last-child
|
||||
{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
|
||||
#menu a
|
||||
{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
display: block;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
main
|
||||
{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#mascotas
|
||||
{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.mascota
|
||||
{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
max-width: 500px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.mascota .info h3
|
||||
{
|
||||
margin-top: 0;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.mascota .info p
|
||||
{
|
||||
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#colaboradores
|
||||
{
|
||||
|
||||
background-color: #103610;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.colaborador
|
||||
{
|
||||
flex-shrink: 0;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border-right: 1px solid white;
|
||||
padding: 20px 30px
|
||||
}
|
||||
|
||||
#colaboradores .colaborador:last-child
|
||||
{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.colaborador img
|
||||
{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
border: 10px solid #8aad8a;
|
||||
margin: 0 auto 15px auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.colaborador h3
|
||||
{
|
||||
color:white;
|
||||
}
|
||||
.colaborador p
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer
|
||||
{
|
||||
background-color: #103610;
|
||||
text-align: center;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
BIN
ACT27_sad/images/cara1.jpg
Executable file
|
After Width: | Height: | Size: 9.2 KiB |
BIN
ACT27_sad/images/cara2.jpg
Executable file
|
After Width: | Height: | Size: 8.3 KiB |
BIN
ACT27_sad/images/cara3.jpg
Executable file
|
After Width: | Height: | Size: 9.3 KiB |
BIN
ACT27_sad/images/mascota1.jpg
Executable file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
ACT27_sad/images/mascota2.jpg
Executable file
|
After Width: | Height: | Size: 15 KiB |
BIN
ACT27_sad/images/mascota3.jpg
Executable file
|
After Width: | Height: | Size: 13 KiB |
BIN
ACT27_sad/images/mascota4.jpg
Executable file
|
After Width: | Height: | Size: 19 KiB |
BIN
ACT27_sad/images/mascota5.jpg
Executable file
|
After Width: | Height: | Size: 13 KiB |
BIN
ACT27_sad/images/mascota6.jpg
Executable file
|
After Width: | Height: | Size: 7.0 KiB |
BIN
ACT27_sad/resultat.png
Executable file
|
After Width: | Height: | Size: 362 KiB |