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 |