Merge branch 'dev' into array-styles
This commit is contained in:
commit
9d45af9515
2 changed files with 136 additions and 0 deletions
112
assets/styles/components/articles/articles.css
Normal file
112
assets/styles/components/articles/articles.css
Normal file
|
@ -0,0 +1,112 @@
|
||||||
|
/* Orden de los estilos
|
||||||
|
1. Posicionamineto
|
||||||
|
2. Modelo de caja
|
||||||
|
3. Tipografia
|
||||||
|
4. Visuales
|
||||||
|
5. Otros
|
||||||
|
Metodologia => BEM
|
||||||
|
*/
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 290px;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
/* background-color: tomato; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 259px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner__image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__info {
|
||||||
|
padding: 16px 24px 9px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #9D9D9D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__text {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
min-width: 241px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-secondary-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__copy {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__details {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Imagen de perfil*/
|
||||||
|
.profile {
|
||||||
|
display: block;
|
||||||
|
width: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile__image {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__author {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__stats {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0 7px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__stats > span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__stats-hearth {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
background-image: url(../../../icons/heart-icon.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__stats-comment {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
background-image: url(../../../icons/comment-icon.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__stats-numlike,
|
||||||
|
.card__stats-numcom {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
|
@ -1,5 +1,29 @@
|
||||||
<?php defined('NABU') || exit ?>
|
<?php defined('NABU') || exit ?>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<picture class="banner">
|
||||||
|
<img src="https://static.collectui.com/shots/4415922/lady-on-balcony-large" alt="Inspirandome en la ventana, con mi gato" class="banner__image">
|
||||||
|
</picture>
|
||||||
|
<div class="card__info">
|
||||||
|
<div class="card__text">
|
||||||
|
<h3 class="card__title">Lugares donde la inspiracion y las ideas pueden llegar</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>
|
||||||
|
<div class="card__stats">
|
||||||
|
<span class = "card__stats-hearth"></span>
|
||||||
|
<span class = "card__stats-numlike">12</span>
|
||||||
|
<span class="card__stats-comment"></span>
|
||||||
|
<span class="card__stats-numcom">2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<?php foreach ($articles as $article): ?>
|
<?php foreach ($articles as $article): ?>
|
||||||
<hr>
|
<hr>
|
||||||
<img src="<?= $article['cover'] ?>" alt="Portada del artículo">
|
<img src="<?= $article['cover'] ?>" alt="Portada del artículo">
|
||||||
|
|
Loading…
Reference in a new issue