[Arreglar] detalles de dimension de la card y agregando anclas
This commit is contained in:
parent
0dc019160f
commit
07507d6fba
3 changed files with 24 additions and 11 deletions
|
@ -11,9 +11,10 @@ Metodologia => BEM
|
|||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
max-width: 360px;
|
||||
width: auto;
|
||||
max-width: 340px;
|
||||
min-width: 288px;
|
||||
max-height: 406px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
|
||||
|
@ -46,11 +47,16 @@ Metodologia => BEM
|
|||
min-width: 241px;
|
||||
}
|
||||
|
||||
.card__title-link {
|
||||
text-decoration: none;
|
||||
color: var(--color-secondary-purple);
|
||||
}
|
||||
|
||||
.card__title {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-secondary-purple);
|
||||
|
||||
}
|
||||
|
||||
.card__copy {
|
||||
|
@ -67,7 +73,8 @@ Metodologia => BEM
|
|||
/*Imagen de perfil*/
|
||||
.profile {
|
||||
display: block;
|
||||
width: 28px;
|
||||
min-width: 25px;
|
||||
width: 25px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
@ -77,8 +84,15 @@ Metodologia => BEM
|
|||
}
|
||||
|
||||
.card__author {
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #9D9D9D;
|
||||
}
|
||||
|
||||
.card__author:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--color-secondary-purple);
|
||||
}
|
||||
|
||||
.card__stats {
|
||||
|
|
|
@ -44,11 +44,6 @@
|
|||
width: 280px;
|
||||
}
|
||||
|
||||
/* Esta regla se pondra en los estilos de la card del componenete */
|
||||
.popular-cards__container .card:not(.card:last-child) .profile {
|
||||
min-width: 27px;
|
||||
}
|
||||
|
||||
.popular-cards__container .card:not(.card:last-child) .card__author {
|
||||
opacity: 0;
|
||||
transition: all ease-in 400ms;
|
||||
|
|
|
@ -6,14 +6,18 @@
|
|||
</picture>
|
||||
<div class="card__info">
|
||||
<div class="card__text">
|
||||
<h3 class="card__title">Lugares donde la inspiracion y las ideas pueden llegar</h3>
|
||||
<h3 class="card__title">
|
||||
<a href="#" class="card__title-link">
|
||||
Lugares donde la inspiracion y las ideas pueden llegar
|
||||
</a>
|
||||
</h3>
|
||||
<p class="card__copy">La creatividad a veces no llega en el momento deseado, pero puede alcanzarnos en el momento menos esperado...</p>
|
||||
</div>
|
||||
<div class="card__details">
|
||||
<picture class="profile">
|
||||
<img src="https://scontent-lax3-1.xx.fbcdn.net/v/t1.6435-9/103564332_100818335008500_4987535241959814468_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=174925&_nc_eui2=AeFLfQ6m44wh0nGXbCIoQp9rQi_G7p1L5IpCL8bunUvkipd7MyfqDBh6lvl5slEJxg2JfKqtfoJLLSFgbZBhQ1tV&_nc_ohc=2Ht3awmMIc0AX975ljD&_nc_ht=scontent-lax3-1.xx&oh=aa5254a401801cdf23a8e02ae0239237&oe=616EB288" alt="" class="profile__image">
|
||||
</picture>
|
||||
<span class = "card__author">by Ricardo Adrian Gomez</span>
|
||||
<a class="card__author" href="#">by Ricardo Adrian Gomez</a>
|
||||
<div class="card__stats">
|
||||
<span class = "card__stats-hearth"></span>
|
||||
<span class = "card__stats-numlike">12</span>
|
||||
|
|
Loading…
Reference in a new issue