h4ckx0r/LMSGI-2024-25
1
0
Fork 0
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
Code Issues Actions Packages Projects Releases Wiki Activity

feat(ch 3): added

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Unidad_03_HTML/Flexbox/Ejercicios Flexbox.docx Normal file
View File

Binary file not shown.

BIN
Unidad_03_HTML/Flexbox/Ejercicios Flexbox.pdf Normal file
View File

Binary file not shown.

33
Unidad_03_HTML/Flexbox/ejercicio01/index.css Normal file
View File

@@ -0,0 +1,33 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
border: 10px solid red;
height: 100vh; /* Utiliza el 100% del alto del viewport (parte visible de la página) */
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, .1);
padding: 10px;
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

27
Unidad_03_HTML/Flexbox/ejercicio01/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>