mirror of
https://gitlab.com/tutorial-java-rafa-munoz/tutorial-java-2024-25/LMSGI-2024-25.git
synced 2025-11-09 18:03:06 +01:00
feat(ch 3): added
This commit is contained in:
85
Unidad_03_HTML/HTML/HarryPotter/css/index.css
Normal file
85
Unidad_03_HTML/HTML/HarryPotter/css/index.css
Normal 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;
|
||||
}
|
||||
1
Unidad_03_HTML/HTML/HarryPotter/harry.html
Normal file
1
Unidad_03_HTML/HTML/HarryPotter/harry.html
Normal file
@@ -0,0 +1 @@
|
||||
hola
|
||||
BIN
Unidad_03_HTML/HTML/HarryPotter/images/harry.jpg
Normal file
BIN
Unidad_03_HTML/HTML/HarryPotter/images/harry.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
54
Unidad_03_HTML/HTML/HarryPotter/index.html
Normal file
54
Unidad_03_HTML/HTML/HarryPotter/index.html
Normal 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>
|
||||
Reference in New Issue
Block a user