Skip to content

Commit 98e7f3b

Browse files
GrouvexGrouvex
authored
Update equipo.html (#133)
* Update equipo.html Signed-off-by: Grouvex <168425996+Grouvex@users.noreply.github.com> * Update equipo.html Signed-off-by: Grouvex <168425996+Grouvex@users.noreply.github.com> * Update equipo.html Signed-off-by: Grouvex <168425996+Grouvex@users.noreply.github.com> * Update temas.css Signed-off-by: Grouvex <168425996+Grouvex@users.noreply.github.com> --------- Signed-off-by: Grouvex <168425996+Grouvex@users.noreply.github.com>
1 parent 5c69276 commit 98e7f3b

File tree

2 files changed

+58
-100
lines changed

2 files changed

+58
-100
lines changed

‎equipo.html‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -45,37 +45,38 @@ <h1>Grouvex Studios</h1>
4545
<p>Grouvex Studios es un grupo que se encarga de crear videos y también un <n>sello discográfico</n></p>
4646
</section>
4747
<h1>Equipo General</h1>
48-
<div class="cajetines2">
49-
<a class="cajetin2">
50-
<div class="cajetin-left-section">
51-
<img src="../img/GROUVEX.png" alt="">
52-
</div>
53-
<div class="cajetin-right-section">
54-
<p class="cajetin-titulo2">Grouvex Studios</p>
55-
<p class="cajetin-description2">Propietario</p>
56-
<p class="cajetin-footer2">grouvex.studio@gmail.com</p>
57-
</div>
58-
</a>
59-
<a class="cajetin2">
60-
<div class="cajetin-left-section">
61-
<img src="../img/Tarlight_Etherall.png" alt="">
62-
</div>
63-
<div class="cajetin-right-section">
64-
<p class="cajetin-titulo2">Tarlight Etherall</p>
65-
<p class="cajetin-description2">Moderador</p>
66-
<p class="cajetin-footer2">tarlight.etherall@grouvex.com</p>
67-
</div>
68-
</a>
69-
<a class="cajetin2">
70-
<div class="cajetin-left-section">
71-
<img src="../img/GROUVEX.png" alt="">
72-
</div>
73-
<div class="cajetin-right-section">
74-
<p class="cajetin-titulo2">Grouvex</p>
75-
<p class="cajetin-description2">Administrador</p>
76-
<p class="cajetin-footer2">grouvex.phoenix@grouvex.com</p>
77-
</div>
78-
</a>
48+
<h2>Propietario</h2>
49+
<div class="tarjetas">
50+
<div class="tarjeta">
51+
<img src="../img/GROUVEX.png" alt="">
52+
<div>
53+
<h2>Grouvex Studios</h2>
54+
<p>Jefe</p>
55+
<a href="mailto:grouvex.studio@gmail.com" style="color:white"><footer>grouvex.studio@gmail.com</footer></a>
56+
</div>
57+
</div>
58+
</div>
59+
<h2>Administrador</h2>
60+
<div class="tarjetas">
61+
<div class="tarjeta">
62+
<img src="../img/GROUVEX.png" alt="">
63+
<div>
64+
<h2>Grouvex Phoenix</h2>
65+
<p>Jefe</p>
66+
<a href="mailto:grouvex.phoenix@grouvex.com" style="color:white"><footer>grouvex.phoenix@grouvex.com</footer></a>
67+
</div>
68+
</div>
69+
</div>
70+
<h2>Moderador</h2>
71+
<div class="tarjetas">
72+
<div class="tarjeta">
73+
<img src="../img/Tarlight_Etherall.png" alt="">
74+
<div>
75+
<h2>Tarlight Etherall, Energy</h2>
76+
<p>Jefe</p>
77+
<a href="mailto:tarlight.etherall@grouvex.com" style="color:white"><footer>tarlight.etherall@grouvex.com</footer></a>
78+
</div>
79+
</div>
7980
</div>
8081
</article>
8182
</main>

‎temas.css‎

Lines changed: 26 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1413,82 +1413,39 @@ footer {
14131413
vertical-align: middle; /* Alineación vertical con el texto */
14141414
}
14151415

1416-
/* Cajetines2*/
1417-
.cajetin-fechas2 {
1418-
background: transparent;
1419-
overflow-y: auto;
1420-
box-sizing: border-box;
1421-
text-align: left;
1422-
word-wrap: break-word;
1423-
max-width: 100%;
1424-
color: black;
1425-
display: block;
1426-
margin-bottom: 10px;
1427-
opacity: .8;
1428-
font-size: 10px;
1429-
}
1430-
.cajetin-titulo2 {
1431-
background: transparent;
1432-
overflow-y: auto;
1433-
text-align: left;
1434-
max-width: 100%;
1435-
word-wrap: break-word;
1436-
color: white;
1437-
display: contents;
1438-
font-size: 15px;
1439-
}
1440-
.cajetin-description2 {
1441-
background: transparent;
1442-
overflow-y: auto;
1443-
text-align: left;
1444-
word-wrap: break-word;
1445-
max-width: 100%;
1446-
color: white;
1447-
display: contents;
1448-
font-size: 10px;
1449-
1450-
}
1451-
.cajetin-footer2 {
1452-
background: transparent;
1453-
overflow-y: auto;
1454-
text-align: left;
1455-
max-width: 100%;
1456-
color: white;
1457-
display: contents;
1458-
font-size: 8px;
1459-
}
1460-
.cajetines2 {
1416+
.tarjetas{
1417+
display: flex;
14611418
overflow-y: auto; /* Agrega una barra de desplazamiento vertical */
1462-
max-height: 800px;
1419+
max-height: 200px;
14631420
width: 100%;
14641421
flex-wrap: wrap; /* Muestra los cajetines en varias filas */
14651422
gap: 10px; /* Espacio entre los cajetines */
1466-
}
1467-
.cajetin2 {
1468-
width: 90%;
1469-
max-width: 300px;
1470-
height: auto;
1471-
/* Estilos para cada cajetín */
1472-
padding-top: 0px;
1423+
}
1424+
.tarjeta {
1425+
display: flex;
1426+
align-items: center;
1427+
border-radius: 10px;
1428+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
1429+
margin: 20px;
1430+
padding: 20px;
1431+
width: 90%;
1432+
height: auto;
1433+
width: 300px;
1434+
padding-top: 0px;
14731435
padding-left: 10px;
14741436
padding-right: 10px;
14751437
flex-basis: calc(25% - 40px); /* 4 cajetines por fila */
1476-
background: linear-gradient(0deg, transparent, rgb(0, 255, 179), rgb(0, 255, 42)); /* Fondo del texto */
1477-
}
1478-
.cajetin-left-section img {
1479-
max-width: 60%;
1480-
height: auto;
1481-
}
1482-
.cajetin-right-section{
1483-
display: flexbox;
1484-
word-wrap: break-word;
1485-
text-align: left;
1486-
flex: 1;
1487-
overflow-x: auto;
1488-
overflow-y: auto;
1489-
max-height: 300px;
1490-
max-width: 100px;
1491-
}
1438+
}
1439+
.tarjeta img {
1440+
border-radius: 50%;
1441+
width: 50px;
1442+
height: 50px;
1443+
object-fit: cover;
1444+
margin-right: 20px;
1445+
}
1446+
.tarjeta h2 { margin: 0 0 5px; }
1447+
.tarjeta p { margin: 0 0 2.5px; color: #555; }
1448+
.tarjeta footer { font-size: 0.7em; color: #888; }
14921449

14931450
.musica-section {
14941451
display: flex;

0 commit comments

Comments
 (0)