Merge branch 'dev' into array-styles

assets/styles/components/articles/articles.css

@@ -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;
+}

views/components/articles.php

@@ -1,5 +1,29 @@
 <?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): ?>
 <hr>
     <img src="<?= $article['cover'] ?>" alt="Portada del artículo">