Skip to content

Commit 3f34eb5

Browse files
Emjey25Emjey25
committed
[feature]:creamos dos archivos para abarcar el contenido de la clase de hoy
1 parent 5a48e3f commit 3f34eb5

2 files changed

Lines changed: 134 additions & 0 deletions

File tree

‎Tutoria4/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Mi primer blog personal</title>
7+
<link rel="stylesheet" href="/Tutoria4/style.css" />
8+
</head>
9+
<body>
10+
<header class="header">
11+
<div class="logo">My Blog</div>
12+
<nav class="nav">
13+
<a href="#">Inicio</a>
14+
<a href="#">Articulos</a>
15+
<a href="">contactos</a>
16+
</nav>
17+
</header>
18+
<main class="container">
19+
<aside class="sidebar">
20+
<h2>Categorias</h2>
21+
<ul>
22+
<li><a href="#">Tecnologia</a></li>
23+
<li><a href="#">Desarrollo soft</a></li>
24+
<li><a href="#">Analisis de datos</a></li>
25+
<li><a href="#">Ciberseguridad</a></li>
26+
</ul>
27+
</aside>
28+
<section class="content">
29+
<article class="card">
30+
<h3>Aprendamos flexBox paso a paso</h3>
31+
<p>
32+
Flexbox es una propiedad de css que nos permite el diseño de los
33+
elementos flexibles
34+
</p>
35+
</article>
36+
<article class="card">
37+
<h3>Aprendamos flexBox paso a paso</h3>
38+
<p>
39+
Flexbox es una propiedad de css que nos permite el diseño de los
40+
elementos flexibles
41+
</p>
42+
</article>
43+
</section>
44+
</main>
45+
<footer class="footer">
46+
<p>&copy; 2025 blog cohorte5. Desarrollador maria jose causil</p>
47+
</footer>
48+
</body>
49+
</html>

‎Tutoria4/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
body {
2+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
3+
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4+
margin: 0;
5+
background-color: #f5f5f5;
6+
}
7+
8+
/*HEADER UTILIZANDO FLEXBOX*/
9+
.header {
10+
display: flex;
11+
justify-content: space-between; /*separa el logo y nav*/
12+
align-items: center; /*centrar verticalmente*/
13+
color: black;
14+
padding: 1rem 2rem;
15+
}
16+
17+
.nav a {
18+
text-decoration: none;
19+
color: black;
20+
margin-left: 1rem;
21+
}
22+
23+
/*=== LAYOUT PRINCIPAL HECHO CON GRID*/
24+
25+
.container {
26+
display: grid; /*urilizamos grid porque nos permite y necesitamos una estructura de 2 columnas*/
27+
grid-template-columns: 250px 1fr;
28+
gap: 20px;
29+
padding: 20px;
30+
}
31+
32+
/*sidebar*/
33+
34+
.sidebar {
35+
background-color: white;
36+
padding: 1rem;
37+
border-radius: 10px;
38+
}
39+
40+
.sidebar ul {
41+
list-style: none;
42+
padding: 0;
43+
}
44+
45+
.sidebar a {
46+
text-decoration: none;
47+
color: #333;
48+
}
49+
50+
/*CONTENIDO*/
51+
52+
.content {
53+
display: flex; /*utilizamos flex porque queremos alinear las tarjetas una al lado de la otra*/
54+
flex-direction: column;
55+
gap: 20px;
56+
}
57+
58+
.card {
59+
background-color: white;
60+
padding: 1.5rem;
61+
border-radius: 10px;
62+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
63+
}
64+
65+
.footer {
66+
display: flex; /*Alinear el texto al centro en un fila*/
67+
justify-content: center;
68+
align-items: center;
69+
padding: 1rem;
70+
background-color: #222;
71+
color: white;
72+
margin-top: 20px;
73+
border-radius: 10px;
74+
}
75+
76+
/*responsive*/
77+
78+
@media (max-width: 768px) {
79+
.container {
80+
grid-template-columns: 1fr; /*una sola columna*/
81+
}
82+
.content {
83+
flex-direction: column; /*las tarjetas una debajo de la otra*/
84+
}
85+
}

0 commit comments

Comments
 (0)