feat(ch 3): added

This commit is contained in:
Rafa Muñoz
2024-10-28 13:59:54 +01:00
parent 7ae2986c97
commit f189ff2f1c
117 changed files with 4307 additions and 0 deletions

View File

@@ -0,0 +1,85 @@
body {
background: white;
font-family: 'Lato', sans-serif;
}
.anchoContenedorPrincipal {
width: 90%;
}
.centrarDiv {
margin-left: auto;
margin-right: auto;
}
#divPrincipal {
background: turquoise;
vertical-align: top;
}
#imgBanner {
display: inline-block;
width: 25%;
}
#textBanner {
display: inline-block;
background: white;
vertical-align: top;
}
.fila {
text-align: center;
background: violet;
margin-top: 5px;
}
.tarjeta {
margin-right: auto;
margin-left: auto;
display: inline-block;
border: 1px solid #000000;
width: 23%;
vertical-align: top;
height: 230px;
}
.tarjeta img {
width: 100%;
height: 150px;
}
.tarjeta .descripcion {
height: 75px;
background: white;
}
.tarjeta .descripcion span {
vertical-align: middle;
}
#menu {
background: black;
text-align: center;
}
#menu li{
display: inline-block;
color: white;
width: 100px;
}
#menu li:hover {
background: #757575;
}
#menu a {
color: yellow;
text-decoration: underline;
}
#menu a:visited {
color: yellow;
text-decoration: underline;
}

View File

@@ -0,0 +1 @@
hola

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>Harry Potter</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div id="divPrincipal" class="anchoContenedorPrincipal centrarDiv">
<div id="menu" class="anchoContenedorPrincipal centrarDiv">
<ul>
<li><a href="harry.html">Harry Potter</a></li>
<li>Hermione</li>
<li>Ron</li>
<li>Luna</li>
</ul>
</div>
<img id="imgBanner" src="images/harry.jpg" />
<div id="textBanner">Este es Harry Potter, nuestro héroe</div>
<!-- asdfsadf -->
<div class="fila">
<div class="tarjeta"><a href="harry.html">
<img src="images/harry.jpg" />
Harry Potter es el más listo del cole</a>
</div>
<div class="tarjeta">
<img
src="https://fotografias.antena3.com/clipping/cmsimages01/2018/08/30/9C0AD319-7D67-45B1-B833-E820EB6AA4F8/58.jpg" />
Hermione es la que más sabe
</div>
<div class="tarjeta">
<img
src="https://static.wikia.nocookie.net/esharrypotter/images/5/56/P5_Ron_Weasley_poster.jpg/revision/latest/scale-to-width-down/340?cb=20070718013816" />
<div class="descripcion"><span>Ron</span></div>
</div>
<div class="tarjeta">
<img src="https://i.pinimg.com/originals/a7/c7/d0/a7c7d00f79908dffa6f751fd5388180c.jpg" />
Malfoy
</div>
</div>
<div class="fila">
<form method="POST" action="">
<input type="button" value="Enviar con input"></input> <!-- Este sí -->
<button>Enviar</button>
</form>
</div>
</div>
</body>
</html>