Dinámica: ¿Qué usarías? (Parte 2) + Reto

Casi nunca comparto nada, pero me gusto como quedo jsjs.

1. De nuevo Flexbox, es más fácil ir metiendo todos los íconos y que se vayan acomodando solitos jaja
2. También Flexbox, lo veo más como elementos en bloque que puede tener dos hijos alineados de forma inline 🤔. Aunque también podría usar CSS Grid

.
El 5 lo hice únicamete con Flexbox y el flujo normal del documento uwu:
.

.
Acá el código:
.
HTML

<div class="card">
    
    <div class="card-header">
        
        <div class="circle-image">
            <img src="https://randomfox.ca/images/85.jpg" alt="Zorrito:3">
        </div>

        <div class="info">
            <h2>Title goes here</h2>
            <p>Secondary text</p>
        </div>

    </div>


    <img src="https://randomfox.ca/images/46.jpg" alt="Otro zorrito:3">

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus libero unde ipsa facere atque debitis omnis! Ipsum commodi unde sed fugiat, libero necessitatibus nihil. At temporibus perferendis rerum ea quas.</p>

    <div class="links">
        <a href="#">ACTION 1</a>
        <a href="#">ACTION 2</a>
    </div>

</div>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100%;
}

.card {
    width: 500px;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
    padding: 20px;
    margin: 20px;
}

.card-header {
    display: flex;
    padding: 10px 0;
}

.card-header .circle-image {
    width: 80px;
    height: 80px;
}

.circle-image img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}

.card-header .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 13px;
}

.card p {
    margin: 20px 0;
}

a {
    text-decoration: none;
    font-weight: bold;
    color: #444fe0;
}

Me entusiasmé y me gustó

![](

Les quiero dejar un pequeño descubrimiento que hice. Actualmente estoy armando una plataforma donde una profesora de ingles pueda subir sus clases para los alumnos que ella tiene.
.
Decidí armar una lista similar a la que tiene duolingo para sus cursos, y descubrí que duolingo utiliza grid.

El problema era que no tenía idea de como armar los grids para que se vean así, por lo que me decaté por flexbox y terminó quedando así. De todas formas tuve que usar javascript para hacer una matraca rara y subdividir las clases en divs de 2 y 3, pero esa es otra historia

Aca mi aporte:

Adjunto enlace de mi repositorio de este curso en GitHub para quien desee echarle un vistazo más detalladamente.

Codigo

Reto hecho con css-grid

Html

<main>
   <section class="card">
     <header class="card__header">
       <figure class="card__header-img">
         <img src="./shikimori-small.jpeg" alt="profile-shikimori" />
       </figure>
       <h2 class="card__title">
            Shikimori Micchon<br />
         <span class="card__title--light">Cutie Student</span>
       </h2>
     </header>
     <figure class="card__main-img">
       <img src="./shikimori.jpg" alt="Shikimori micchon" />
     </figure>
     <p class="card__description">
          I'm a very confident, caring, and kind person. I'm also a very
          competitive very athletic and active all the time.
     </p>
     <footer class="card__footer">
       <button class="card__btn card__btn--primary">Follow</button>
       <button class="card__btn card__btn--secondary">Dislike</button>
       <figure class="card__love-icon">
         <img src="./like.svg" alt="like-icon" />
       </figure>
       <figure class="card__share-icon">
         <img src="./share.svg" alt="share-icon" />
       </figure>
     </footer>
   </section>
 </main>

CSS

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  background: #f5bfd6;
}
.card {
  display: grid;
  grid-template-rows: 80px 8fr 2fr 75px;
  width: 50%;
  min-width: 320px;
  max-width: 380px;
  min-height: 400px;
  max-height: 480px;
  background: #303030;
  border-radius: 10px;
}
.card__header {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
}
.card__header-img {
  padding: 12px;
}
.card__header-img img {
  border-radius: 50%;
}
.card__title {
  padding: 0 12px;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}
.card__title--light {
  font-size: 1.4rem;
  font-weight: 400;
  text-shadow: 0 0 1px #fff;
}
.card__main-img {
  box-shadow: 0 5px 10px 0 rgb(245 191 214 / 0.5);
}
.card__description {
  padding: 20px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
}
.card__footer {
  display: grid;
  grid-template-columns: repeat(4, 50px) 1fr repeat(2, 50px);
  align-items: center;
  justify-items: center;
  padding: 0 10px;
}
.card__btn {
  padding: 8px 15px;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgb(255 255 255 / 0.2);
}
.card__btn--primary {
  grid-column: 1 / span 2;
  background: linear-gradient(to top left, #d66697 30%, #303030, #d66697 70%);
  border: 1px solid #d66697;
}
.card__btn--secondary {
  grid-column: 3 / span 2;
  justify-self: start;
  background: #303030;
  border: 1px solid #eee;
}
.card__love-icon {
  grid-column: span 1 / -2;
  padding: 13px;
}
.card__share-icon {
  grid-column: span 1 / -1;
  padding: 13px;
}
.card__love-icon img {
  cursor: pointer;
}
.card__share-icon img {
  cursor: pointer;
}

Mi resultado del reto.

There it is :v

Hola! les comparte mi aporte usando parte del Código del compañero @guillermo_farfan_bivanco, no se si sera con las mejores practicas, pero es un buen avance!

<body>
    <div class="card">
        <div class="card-header">
            <div class="circle-image">
                <img src="/assets/logo header blooms desk.png" alt="Zorrito:3">
            </div>
            <div class="info">
                <h2>Cactusito</h2>
                <p>Sol, playa y en la arena</p>
            </div>
        </div>
        <div class="container-img">
            <img class="planta" src="/assets/IMG_20210219_130435.jpg" alt="Otro zorrito:3">
            <div class="right-grid">
                <div class="precio">
                    <h3>3<p>$</p></h3>
                </div>
                <p class="p-bottom">Conoce la plantita mas bonita de la tienda, nuestro cacti es proveniente de zonas áridas y con poca agua, puede pasar 1 mes sin agua pero si necesita del sol.</p>   
            <div class="links">
            <div class="buttom-1">
                <span></span> <a href="#">Agregar al carrito</a>
            </div>
            <div class="buttom-2">
                <span></span> <a href="#"> compartir</a>
            </div>
        </div>
        </div>
    </div>
    </div>
</body>```

• {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  }
  html{
  font-size: 62.5%;
  font-family: ‘Dosis’, sans-serif;
  }

.card {
margin: 0 auto;
margin-top: 2rem;
position: relative;
width: 90%;
min-width: 280px;
max-width: 500px;
height: auto;
box-shadow: 0px 6px 9px 1px rgba(0,0,0,0.37);
border-radius:1rem;
background: rgb(245, 245, 245);
padding: 20px;

}
.card-header {
display: flex;
align-items: center;
}
.card-header .circle-image {
display: flex;
align-content: center;
height: 70px;
width: 70px;
margin:0 0 0 1rem;

}
.circle-image img {
display: flex;
align-content: center;
width: 100%;
height: 100%;
border-radius: 100%;
object-fit:contain;
border: solid darkgreen 1px;
padding: 0.5rem;
}
.card-header .info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 2rem;
}
.info h2{
font-size: 4rem;
font-weight: 400;
color: rgb(34, 34, 34);

}
.info p{
padding: 0 0 1rem 0;
font-size: 1.6rem;
font-weight: 300;
color: darkgrey;
}
.container-img{
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.planta{
width: 100%;
max-width: 400px;
border-radius: 1rem;
margin: 1rem auto;
box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.12);
}
.precio{
width: 100%;
max-width: 400px;
display: flex;
justify-content:flex-end;
padding-right: 2rem;
margin-top: -6rem;
}
.precio h3{
display: flex;
font-size: 5rem;
background-color: rgb(14, 163, 0);
border: white solid 1px;
padding: 0 2rem 0 3rem;
border-radius: 1rem;
color: rgb(230, 255, 231);
}
.precio p{
display: flex;
justify-content: flex-end;
font-size: 1.5rem;
padding-top: 1rem;
padding-left: 1rem;
}
.p-bottom{
line-height: 2rem;
font-size: 1.4rem;
text-align:inherit;
margin: 1.5rem 0.5rem;
color: rgb(33, 43, 28);
}
.links {
display: flex;
justify-content: space-between;
align-items: center;
margin: 2rem 0.5rem 0 0.5rem;
}
.links a{
text-decoration: none;
font-weight: bold;
color: #836f67;
font-size: 1.5rem;
font-family: Helvetica, sans-serif;
padding: 0.5rem;
}
.buttom-1{
display: flex;
align-items:center;
}
.buttom-1 span{
background-image: url(/assets/carrito-de-compras.svg);
background-position: center;
background-size: cover;
width: 30px;
height: 30px;
margin-right: 1rem;
}
.buttom-2{
display: flex;
align-items: center;
}
.buttom-2 span{
background-image: url(/assets/cuenta.svg);
background-position: center;
background-size: cover;
width: 30px;
height: 30px;
margin-right: 1rem;
}```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clase #10</title>
    <link rel="stylesheet" href="/index.css">
    <script src="https://kit.fontawesome.com/a6187c46cf.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="card-zona">
        <article class="card-flexbox">
            <section class="header">
                <div class="logos">
                    <img src="./img/[email protected]" alt="logo-platzi">
                    <img src="./img/logotipo-platzi.webp" alt="logo-platzi">
                </div>
                <p>Sigue Aprendiendo...</p>
            </section>

            <section class="img-center">
                <img src="./img/Captura de pantalla 2023-09-13 113108.png" alt="foto-de-la-profe">
            </section>

            <section class="footer">
                <p>Dinámica: ¿Qué usarías? (Parte 2) + Reto</p>
                <div class="footer-2">
                    <i>Nunca parar de aprender!!!</i>
                    <i class="fa-solid fa-code"></i>
                    <i class="fa-solid fa-gears"></i>
                </div>
            </section>
        </article>
    </div>
</body>

</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

:root {
    --primer-color: #121f3d;
    --segundo-color: #b5e8b8;
    --terser-color: #98ca3f;
    --cuarto-color: #24385b;
    --quinto-color: #33b1ed;
}

.card-zona {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-flexbox {
    width: 280px;
    height: 400px;
    border: 3px solid var(--terser-color);
    border-radius: 8px;
    overflow: hidden;
}

.header {
    width: 100%;
    height: 10%;
    padding: 10px 0;
    background-color: var(--primer-color);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.logos {
    display: flex;
    align-items: center;
    gap: 2px;
}

.logos img:nth-child(1) {
    width: 30px;
    height: 30px;
}

.logos img:nth-child(2) {
    width: 60px;
}

.header p {
    color: white;
}

.img-center {
    width: 100%;
    height: 70%;
    display: flex;
    background: var(--cuarto-color);
}

.img-center img {
    width: 100%;
    margin: auto 0;
}

.footer {
    background-color: var(--primer-color);
    width: 100%;
    height: 20%;
    display: grid;
    grid-template-areas: "p"
                         "div";
    justify-content: center;
    align-items: center;
    padding: 1px;
}

.footer p {
    grid-area: p;
    background: var(--quinto-color);
    padding: 4px;
    text-align: center;
    font-size: 1.5rem;
}

.footer-2 {
    display: grid;
    grid-template-areas: "action1 icon1 icon2";
}

.footer-2 i:nth-child(1) {
    color: var(--segundo-color);
    grid-area: action1;
    justify-self: center;
    align-self: center;
    border: 1px solid var(--terser-color);
    padding: 4px;
    border-radius: 8px;
}

.footer-2 i:nth-child(2) {
    color: var(--terser-color);
    grid-area: icon1;
    justify-self: end;
    align-self: center;
}
.footer-2 i:nth-child(3) {
    color: var(--terser-color);
    grid-area: icon2;
    justify-self: center;
    align-self: center;
}

Con Grid

Con Flexbox

Reto cumplido usando Flexbox

Así quedó mi solución, sin embargo siento que estoy visiado con display: flex.

HTML:

<article>
  <div class="header">
    <img src="https://images.pexels.com/photos/7158634/pexels-photo-7158634.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="imagen">
    <div class="text-container">
      <h1>Title goes here</h1>
      <p>Secondary text</p>
    </div>
  </div>
<img src="https://images.pexels.com/photos/9782717/pexels-photo-9782717.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="imagen principal">
<p>Greyhoun divisely hello coldly wonderfilly magninelly fa upon excluding</p>
<div class="footer">
  <div class="btns">
    <a>ACTION 1</a>
    <a>ACTION 2</a>
  </div>
  <div>
    <button>heart</button>
    <button>shared</button>
  </div>
</div>
</article>

CSS

article{
  width: 400px;
  height: 450px;
  background-color: antiquewhite;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.text-container{
  width: 70%;
  padding-left: 24px;
}
div img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
div h1{
  margin-bottom: 10px;
}
div p{
  margin-top: 0;
}
img{
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top;
}
.footer{
  display: flex;
  justify-content: space-between;
  align-self: flex-end;
}
a{
  color: blueviolet;
  font-weight: bold;
  padding: 0 8px;
}
button{
  border: none;
  background-color: transparent;
  font-weight: bold;
}

Flexbox

<div class="container">
        <div class="header">            
            <img src="images/dish1.png" alt="">
            <div class="texto">
                <h2>Title goes here</h2>
                <p>Secundary text</p>            
            </div>          
        </div>
        <div class="banner">
            <img src="images/video.png" alt="">
            <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding</p>
        </div>
        <div class="actions">
            <div class="action-item actions__buttons">
                <button>ACTION 1</button>
                <button>ACTION 2</button>            
            </div>
            <div class="action-item actions__icons">
                <img src="images/heart.png" alt="">
                <img src="images/share.png" alt="">
            </div>
        </div>
    </div>

.container {    
    margin-top: 10px;
    width: 300px;
    border: 1px solid #d3d3d3;
}

.container h2 {
    font-size: 1rem;
}

.container .header {
    display: flex;    
    align-items: center;
    height: 50px;
}

.header img {
    width: 35px;
    height: 35px;
    object-fit: contain;    
    border-radius: 50px;
    margin: 0 10px;
}

.texto {
    align-self: center;    
    margin-left: 5px;
    width: 100%;
}

.texto p {
    margin: 0;
}

.texto h2 {
    margin: 0;
}

.banner {
    width: 100%;
    height: 100%;      
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner p {
    margin: 10px 0 0 0;
}

.actions {
    margin-top: 15px;
    display: flex;    
    margin-bottom: 10px;
}

.actions__buttons button {
    border: none;
    color: blue;
    background: none;
}

.actions__icons {
    display: flex;
    width: 40%;
    justify-content: end;
}

.actions__icons img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.action-item img {
    margin: 0 10px;
}

Grid Css

.container {    
    margin-top: 10px;
    width: 300px;
    border: 1px solid #d3d3d3;
}

.container h2 {
    font-size: 1rem;
}

.header {
    display: grid;
    grid-template-columns: 1fr 3fr;
    place-items: center;
    margin: 5px 0;
}

.header img {
    width: 35px;
    height: 35px;
    object-fit: contain;    
    border-radius: 50px;
    margin: 0 10px;
}

.texto {    
    margin-left: 5px;
    width: 100%;
}

.texto p {
    margin: 0;
}

.texto h2 {
    margin: 0;
}

.banner {
    width: 100%;
    height: 100%;      
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner p {
    margin: 10px 0 0 0;
}

.actions {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin: 10px 0;
}

.actions__buttons button {
    border: none;
    color: blue;
    background: none;
}

.actions__icons img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

Hice una rama utilizando flexbox y otra rama utilizando grid,
aunque en grid aún no se como hacer la grilla principal, al final
solo use grid y flexbox en el header y footer de la card.
Me gustaría que me comentaran que puedo mejorar de mi código , este es el . repositorio de github

Mi aporte

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}
.main-container {
    width: 300px;
    height: auto;
    border: 1px solid grey;
}
.main-container .header-container {
    display: flex;
    padding: 15px 15px;
    width: 100%;
    height: auto;
}
.header-container .header-icon {
    align-self: center;
    margin-right: 20px;
    width: 30px;
    height: 30px;
    background-color: grey;
    border-radius: 50%;
}
.main-container .body-img-container {
    width: 100%;
    height: 200px;
    background-color: grey;
}
.main-container .body-inf-container {
    padding: 8px;
}
.main-container .footer-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 8px;
}
.footer-container .footer-a {
    align-self: center;
}
.footer-a a:nth-child(1) {
    margin-right: 12px;
}
.footer-container .footer-icons {
    align-self: center;
}
.footer-icons img {
    margin-left: 10px;
    width: 25px; 
}

Reto listo

HTML

<main>
        <section class="main-section-cards--container">
            <div class="section-card--item">
                <div class="title--container">
                    <figure class="title-image--container">
                        <img src="https://cdn.pixabay.com/photo/2013/07/07/13/49/train-143847_960_720.jpg" alt="">
                    </figure>
                    <div class="title-text--container">
                        <h1>Brawa</h1>
                        <p class="secondary-text">Train</p>
                    </div>
                </div>
                <div class="description-card--conatiner">
                    <figure class="image-card--container">
                        <img src="https://cdn.pixabay.com/photo/2022/01/02/19/43/train-6910973_960_720.jpg" alt="">
                    </figure>
                    <p class="secondary-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    </p>
                </div>
                <div class="footer-card--container">
                    <div class="enlaces-card--container">
                        <a class="primary--enlace" href="">Action 1</a>
                        <a class="primary--enlace" href="">Action 2</a>
                    </div>
                    <div class="icons-card--conatiner">
                        <a class="icon-favorite" href=""><span></span></a>
                        <a class="icon-share" href=""><span></span></a>
                    </div>
                </div>
            </div>
        </section>
    </main>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    height: 100%;
}

body{
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
main{
    height: 100%;
}

.main-section-cards--container{
    width: 95%;
    max-width: 1300px;
    min-width: 320px;
    height: auto;
    margin: 0 auto;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
    grid-auto-rows: 500px;
    justify-content: center;
}

.section-card--item{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-rows: auto 2fr auto;
    border: 1px solid #f9f;
    border-radius: 10px;
}

.title--container{
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
}

.title--container .title-image--container {
    width: 50px;
    height: 50px;
}

.title--container .title-image--container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.title--container .title-text--container{
    display: flex;
    flex-direction: column;
}

.title--container .title-text--container h1{
    font-size: 1.8rem;
    line-height: 2rem;
    color: black;

}

.secondary-text{
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: gray;
}
.description-card--conatiner .image-card--container {
    width: 100%;
    height: 80%;
}
.description-card--conatiner .image-card--container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.description-card--conatiner p{
    margin: 8px 12px;
}

.footer-card--container{
    width: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.primary--enlace{
    text-decoration: none;
    font-size: 1.6rem;
    color: violet;
}
.footer-card--container .enlaces-card--container a:nth-child(2){
    margin-left: 8px;
}

.icon-favorite{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('./assets/icons/favorite.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.icon-share{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('./assets/icons/share.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.footer-card--container .icons-card--conatiner a:nth-child(2){
    margin-left: 8px;
}

usé tanto grid como flex

Sí, todo hecho con flexbox XD

Hice una copia de las cards de Instagram (a propósito, aquí mi perfil 😁)

Mi código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <section class="container">
        <nav class="nav-bar">
            <section class="img-perfil">
                <img src="./img/perfil.png" alt="">
            </section>
            <section class="item">
                <p class="name">andresbadillo.co</p>
                <p class="ubication">Club Campestre Kiosko Andalucia</p>
            </section>
        </nav>
        <main class="post-img">
    
        </main>
        <footer class="footer-bar">
            <img src="https://img.icons8.com/material-outlined/48/000000/like--v1.png" alt="">
            <img src="https://img.icons8.com/windows/64/000000/speech-bubble--v1.png" alt="">
            <img src="https://img.icons8.com/external-flatart-icons-outline-flatarticons/64/000000/external-send-instagram-flatart-icons-outline-flatarticons.png" alt="">
        </footer>
    </section>
</body>
</html>

Mi código CSS:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    font-family: 'Roboto', sans-serif;
    font-size: 62.5%;
}
body {
    display: flex;
    width: 100vw;
    height: 100vh;
    background-image: url("./img/img.jpg");
    backdrop-filter: blur(10px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    justify-content: center;
}
.container {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 380px;
    align-self: center;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
}
.nav-bar {
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
}
.nav-bar .img-perfil {
    display: flex;
    align-items: center;
}
.nav-bar .img-perfil img {
    height: 28px;
    width: 28px;
    margin: 8px;
    border-radius: 100%;
}
.item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.item .name {
    font-weight: bold;
    padding-bottom: 1px;
}
.item .ubication {
    font-weight: 300;
}
.post-img {
    height: 100%;
    background-image: url("./img/img.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.footer-bar {
    display: flex;
    height: 50px;
    justify-content: space-around;
    align-items: center;
}
.footer-bar img {
    height: 24px;
    width: 24px;
}

Mi actividad

Creo que con flexbox te ahorrar muchos problemas.

Aquí les dejo el reto, lo hice solo con flex-box: 😃

Aquí el código:

Aportando de vez en cuando por estos sitios, espero que les guste.

La solución de mi reto:

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Card with Flexbox and Grid</title>
   <link rel="stylesheet" href="./style.css"></link>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link
      href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;500;700&family=Rasa:wght@400;700&display=swap" rel="stylesheet"
   > 
</head>
<body>
   <main>
      <section class="cards-container">
         <article class="card">
            <div class="card__header">
               <img src="./img/picture.png" alt="Icono de imagen" class="card__header--img">
               <div class="card__header--info">
                  <h2 class="card__header--title">Diseño de Frontend</h2>
                  <p class="card__header--text">
                     Maquetación en HTML y CSS con diseño responsivo
                  </p>
               </div>
            </div>
            <div class="card__img">
               <img src="./img/coding-400.jpg" alt="Laptop" class="card__img--pic">
            </div>
            <p class="card__description">
               Este es un diseño de una tarjeta hecha con flexbox y CSS grid. Nunca pares de aprender.
            </p>
            <footer class="card__footer">
               <div class="card__footer--action">
                  <a href="#" class="card__footer--link">Action 1</a>
                  <a href="#" class="card__footer--link">Action 2</a>
               </div>
               <div class="card__footer--icons">
                  <span class="card__footer--like"></span>
                  <span class="card__footer--share"></span>
               </div>
            </footer>
         </article>
      </section>
   </main>
</body>
</html>

:root {
   --primary: #005171;
   --secondary: #384955;
   --extra1: #005a39;
   --extra2: #7d3433;
   --dark: #10374b;
   --light: #9baebc;
   --white: #f1f8f2;
   --black: #090f13;
   --font1: 'Mulish', sans-serif;
   --font2: 'Rasa', serif;
   --sm: 1.4rem;
   --md: 1.7rem;
   --lg: 2rem;
   --min-width-card: 285px;
   --max-width-card: 350px;
}
* {
   box-sizing: border-box  ;
   margin: 0;
   padding: 0;
}
html {
   font-size: 62.5%;
   background-color: var(--primary);
}
body {
   font-family: var(--font1);
}
h1, h2, h3, h4, h5, h6 {
   font-family: var(--font2);
}
main {
   width: 100%;
   height: 100vh;
   min-width: 300px;
}
.cards-container{
   display: flex;
   justify-content: center;
   width: 95%;
   max-width: 960px;
   min-width: var(--min-width-card);
   padding: 1rem;
   margin: 0 auto;
}
.card {
   width: 100%;
   min-width: var(--min-width-card);
   max-width: var(--max-width-card);
   background-color: var(--white);
   border: 1px solid var(--light);
   border-radius: 20px;
   overflow: hidden;
   -webkit-box-shadow: 1px 1px 8px 0px rgba(31,31,31,1);
   -moz-box-shadow: 1px 1px 8px 0px rgba(31,31,31,1);
   box-shadow: 1px 1px 8px 0px rgba(31,31,31,1);
}
.card__header {
   display: grid;
   grid-template-columns: 5rem auto;
   grid-auto-rows: auto;
   align-items: center;
   column-gap: 1rem;
   padding: 1rem;
   background-color: var(--light);
}
.card__header--img {
   width: 5rem;
   height: 5rem;
}
.card__header--title {
   font-size: var(--lg);
   color: var(--extra2);
}
.card__header--text {
   font-size: var(--sm);
   color: var(--dark);
}
.card__img {
   width: 100%;
   height: 26rem;
   background-color: var(--dark);
}
.card__img--pic {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.65;
}
.card__description {
   padding: 1rem;
   font-size: var(--md);
   color: var(--black);
   text-align: justify;
}
.card__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
   margin-bottom: 1rem;
   border-radius: 0 0 20px 20px;
   overflow: hidden;
}
.card__footer--link {
   padding: 0.5rem 1rem;
   text-decoration: none;
   font-size: var(--sm);
   color: var(--white);
   background-color: var(--secondary);
   border-radius: 6px;
   margin-right: 1rem;
}
.card__footer--like, .card__footer--share {
   display: inline-block;
   width: 20px;
   height: 20px;
   background: center/cover no-repeat;
   margin-right: 0.6rem;
}
.card__footer--like {
   background-image: url("./img/like.png");
}
.card__footer--share {
   background-image: url("./img/share.png");
}

Fue con puro flexbox, me gusto para practicar de paso media queries.

reto terminado con flexbox

Algunas horas de trabajo y de romperme la cabeza, es sencillo pero realmente agradable lo que se puede llegar a crear. Mil gracias profe y team Platzi !

Así quedo con Flexbox 😄

<body>
    <section class="card">
        <div class="header">
            <img src="./resources/1otomi_embroidery_109.jpg" alt="">
            <div class="header-info">
                <h1>Bordados Tenango</h1>
                <p>Tenango de Doria, Hidalgo, México</p>
            </div>
        </div>

        <img class="img-principal" src="./resources/931341_339173162872161_1931758094_n.jpg" alt="">
        <p class="description">El tenango es un estilo de bordado originario del municipio de Tenango de Doria, en el estado de Hidalgo, México.</p>
        <div class="footer">
            <div class="actions">
                <a href="">Action 1</a>
                <a href="">Action 2</a>
            </div>
            <div class="icons">
                <img src="./resources/like.png" alt="">
                <img src="./resources/share.png" alt="">
            </div>

        </div>
    </section>
</body> 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

.card {
    width: 400px;
    border: 50px;
    border-radius: 10px;
    background-color: rgb(235, 235, 235);
    box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 26%);
}

.header {
    display: flex;
    padding: 0 10px;
}

.header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-self: center;
    margin: 10px;
}

.header-info {
    display: flex;
    flex-direction: column;
    align-self: center;
}

.header-info h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.header-info p {
    font-size: 1.5rem;
}

.img-principal {
    width: 400px;
    margin-top: 10px;
}

.description {
    font-size: 1.5rem;
    padding: 15px;
}

.footer {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}

.footer a {
    font-size: 1.8rem;
    text-decoration: none;
    margin-left: 15px;
}

.footer img {
    width: 20px;
    height: 20px;
    margin-right: 15px;
} 

Title goes here

Secondary text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel commodi aspernatur, culpa tenetur, in porro quaerat numquam cupiditate fuga nihil labore quae? Exercitationem sint corrupti vel suscipit rerum magni hic.

<button type="button">ACTION 1</button> <button type="button">ACTION 2</button>

Hice una copia de la card de post de instagram usando solo flexbox

Repositorio:
https://github.com/YhoshuaBernal/instagram_post/tree/main

Mi card quedó así usando flex box y también con css grid:

Mi aporte 😃

Acá está mi card.

Hola! casi nunca dejo nada, pero en esta ocasión quería unirme a los demás

[Code (https://codepen.io/JuanTalero-DJ/pen/oNJzjpJ)

No es mucho, pero es trabajo honesto!

body>div {
    min-width: 300px;
    min-height: 300px;
    max-width: 500px;
    background-color: rgb(0, 0, 0);
    padding: 10px;
}

body>div>* {
    width: 98%;
    display: flex;
    border-radius: 5px;
    margin: 1%;
}

body>div>*>*{
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}
header {
    align-items: center;
    background-color: magenta;
}
header>*{
    background-color: rgb(255, 0, 98);
}
header>.img-container {
    width: 20%;
    padding: 10px;
}
header>.text-container{
    width: 80%;
}
img {
    width: 100%;
}
main{
    flex-direction: column;
    height: 70%;
    background-color: cyan;
}
main>*{
    background-color: rgb(0, 140, 255);
}
main>.img-container{
    margin: 0;
    padding: 0;
}

footer{
    background-color: yellow;
    justify-content: space-between;
    padding: 10px 0;
}
footer>*{
    background-color: rgb(115, 255, 0);
}

<body>
    <div>
        <header>
            <div class="img-container">
                <img src="../pictures/Dev-icon.png" alt="">
            </div>
            <div class="text-container">
                <h1>titulo</h1>
                <p>párrafo </p>
            </div>
        </header>
        <main>
            <div class="img-container">
                <img src="https://www.tecnolopedia.com/wp-content/uploads/2021/12/Como-abrir-archivos-IMG-.img_.png"
                    alt="">
            </div>
            <div class="text-container">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut cumque, nam praesentium saepe itaque,
                    facilis rem inventore asperiores amet sunt autem ipsum expedita aut voluptatibus ratione molestias
                    ipsa consectetur repellat.
                </p>
            </div>
        </main>
        <footer>
            <div class="actions">
                <button>action1</button>
                <button>action2</button>
            </div>
            <div class="other">
                <button>like</button>
                <button>share</button>
            </div>
        </footer>
    </div>

</body>

askdjalkdja todas dije flexbox xd

Siento que e mejorado mucho a lo largo de los diferentes cursos de platzi
![](

Yo hice el reto así 😸

Aquí el código

<<main>
        <section class="card">
            <div class="card_header">
                <figure class="card_header-logo">
                    <img src="./pics/icon.jpg" alt="Es una maceta con planta">
                </figure>
                <h2>Title goes here</h2>
                <p>Secondary text</p>
            </div>
            <figure class="card_image">
                <img src="./pics/descarga (15).jpg" alt="Un dibujo de un gato hecho con crayones cremosos">
            </figure>
            <div class="card_footer">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum tempora, cumque facere in labore esse.</p>
                <div class="sub_footer">
                    <div class="footer_buttons">
                        <button>ACTION 1</button>
                        <button>ACTION 2</button>
                    </div>
                    <div class="footer_icons">
                        <span class="material-symbols-outlined">favorite</span>
                        <span class="material-symbols-outlined">share</span>
                    </div>
                </div>
            </div>
        </section>
    </main>> 

<main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(0deg, rgb(251, 228, 216) 15%, rgb(223, 182, 178) 33%, rgb(133, 79, 108) 49%, rgb(82, 40, 91) 60%, rgb(43, 18, 76) 76%, rgb(25, 0, 25) 87%);
}

.card {
  width: 400px;
  height: 550px;
  background-color: white;
  font-family: "Tajawal", sans-serif;
}
.card .card_header {
  width: 100%;
  background-color: papayawhip;
  height: 70px;
  padding: 10px 30px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 25px;
}
.card .card_header .card_header-logo {
  width: 60px;
  height: 52px;
  justify-self: center;
}
.card .card_header .card_header-logo img {
  width: 100%;
  height: 52px;
  border-radius: 50%;
  -o-object-position: center;
     object-position: center;
}
.card .card_header h2 {
  font-size: 1.8rem;
}
.card .card_header p {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.6rem;
}
.card .card_image {
  width: 400px;
  height: 380px;
}
.card .card_image img {
  width: 100%;
  height: 380px;
  -o-object-fit: center;
     object-fit: center;
}
.card .card_footer {
  padding: 15px;
}
.card .card_footer p {
  font-size: 1.4rem;
  color: black;
  font-weight: 500;
  margin-bottom: 16px;
}
.card .card_footer .sub_footer {
  display: flex;
  justify-content: space-between;
}
.card .card_footer .sub_footer .footer_buttons {
  display: flex;
  gap: 10px;
}
.card .card_footer .sub_footer .footer_buttons button {
  font-weight: 700;
  border: none;
  background-color: white;
}
.card .card_footer .sub_footer .footer_icons {
  display: flex;
  gap: 10px;
}> 

![](

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;1,600&display=swap" rel="stylesheet">
    <style>
        body{
            background-color: #ebebeb;  
            font-family: 'Poppins', sans-serif;          
        }
        .card{
            width: 100%;
            height: 100vh;            
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container{
            width: 400px;
            border-radius: 8px;
            background-color: white;
            box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
            display: flex;
            flex-direction: column;
        }
        .header{
            display: flex;
            margin: 16px;
            align-items: center;
        }
        .header-img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .header img{
            max-width: 200%;
            max-height: 100%;
        }
        .header-text{
            margin: 16px;
        }
        .header h1{
            margin: 0;
        }
        .header p{
            margin: 0;
        }
        .middle img{
            max-width: 100%;
            max-height: 100%;
        }
        .middle p{
            margin: 16px;
        }
        .footer{
            display: flex;
            justify-content:space-between;
            
        }
        .buttons-footer{
            display: flex;
            align-items: center;
        }
        .footer button{
            margin: 16px;
            padding: 0%;
            appearance: none;
            border: none;
            background: transparent;            
            font-size: 14px;
            color: blueviolet;
            font-weight: bold;            
        }
        .share-footer{
            color: #828282;
            margin: 16px;
            width: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .material-symbols-outlined {
            font-variation-settings:
            'FILL' 1,
            'wght' 600,
            'GRAD' 0,
            'opsz' 48
        }                
        
    </style>
</head>
<body>
    <div class="card">
        <div class="container">
            <div class="header">
                <div class="header-img"><img src="./img/img.jpg" alt="void"></div>
                <div class="header-text">
                    <h1>Title goes here</h1>
                    <p>Secondary text</p>
                </div>                
            </div>
            <div class="middle">
                <div class="img-middle"><img src="./img/img.jpg" alt="void"></div>
                <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
            </div>
            <div class="footer">
                <div class="buttons-footer">
                    <div>
                        <button>ACTION 1</button>
                    </div>
                    <div>
                        <button>ACTION 2</button>
                    </div>                    
                </div>
                <div class="share-footer">
                    <span class="material-symbols-outlined">
                        favorite
                    </span>
                    <span class="material-symbols-outlined">
                        share
                    </span>
                </div>
            </div>
        </div>
    </div>    
</body>
</html>

Listo. Reto completado.
Flex y Grid nos dan posibilidades infinitas

Esta es mi card.

HTML

    <div className={container_card}>
                <div className={header}>
                    <div className={circle}>
                    </div>
                    <div className={title}>
                        <h1>Title goes here</h1>
                        <p>Secondary text</p>
                    </div>
                </div>
                <img/>
                <div className={description}>
                    <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
                </div>
                <footer>
                    <div className={actions}>
                        <p>ACTION 1</p><p>ACTION 2</p>
                    </div>
                    <div className={icons}>
                        <div></div>
                        <div></div>
                    </div>
                </footer>
            </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container_card {
    width: 300px;
    height: 350px;
    display: grid;
    grid-template-rows: 1fr 4fr 1fr 1fr;
}
.header {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.circle {
    width: 33px;
    height: 33px;
    background: gray;
    border: 0 solid gray;
    border-radius: 50%;
    align-self: center;
    justify-self: center;
}
.title {
    grid-row: 1 / 2;
    grid-column: 2 / 6;
    display: flex;
    flex-direction: column;
    padding: 8px;
}
.title h1 {
    font-size: 16px;
}
.title p {
    font-size: 12px;
}
img {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    background: gray;
    width: 100%;
    height: 100%;
}
.description {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    padding: 10px;
}
.description p {
    font-size: 12px;
}
footer {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 100%;
}
footer .actions {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}
footer .actions p {
    font-size: 12px;
    font-weight: bold;
    color: blueviolet;
}
footer .icons {
    grid-row: 1 / 2;
    grid-column: 4 / 5;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.icons div {
    width: 18px;
    height: 18px;
    border: 0 solid gray;
    border-radius: 50%;
    background: gray;
}

En el primero usaría flexbox, para el segundo sería grid y para la tercera también usaría grid.

GG

Lo unico que no logre encontrar fue la img de resto lo hice lo mas parecido posible

Aquí mi resultado con flexbox

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index,follow">
    <meta name="description" content="Esta página web es para un reto del curso de CSS Grid y Flexbox">
    <link rel="stylesheet" href="./style.css">
    <script src="https://kit.fontawesome.com/SU-CÓDIGO" crossorigin="anonymous"></script>
    <title>Primer Reto</title>
</head>
<body>
    <div class="container">
        <section class="header">
            <div class="header__icon">
                <img src="./images/Favicon.png" alt="">
            </div>
            <div class="header__info">
                <h1>Title goes here</h1>
                <p>Secundary text</p>
            </div>
        </section>
        <section class="main">
            <figure>
                <img src="./images/fondoCieloNocturno.jpg" alt="">
            </figure>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi pariatur repellendus fuga quo dignissimos minima quisquam ipsam aliquam corporis eligendi nobis ratione animi magnam, ducimus fugiat ea impedit quia enim.</p>
        </section>
        <section class="footer">
            <div class="footer__button">
                <button>ACTION 1</button>
                <button>ACTION 2</button>
            </div>
            <div class="footer__icon">
                <button><i class="fa-solid fa-heart"></i></button>
                <button><i class="fa-solid fa-share-nodes"></i></button>
            </div>
        </section>
    </div>
</body>
</html>

Código CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    width: 100vw;
    height: 100vh;
}

.container {
    width: 60rem;
    min-height: 50rem;
    background-color: papayawhip;
    margin: 10rem auto;
    border-radius: 1rem;
    box-shadow: 0 0  30px rgba(0, 0, 0, 0.4);
}

.header {
    display: flex;
    min-height: 7rem;
    align-items: center;
}

.header__icon {
    background-color: white;
    padding: 1rem;
    margin: 1rem;
    border-radius: 60px;
}

.header__icon img {
    width: 40px;
    height: 40px;
}

.header__info h1 {
    font-size: 2.5rem;
}

.header__info p {
    font-size: 2rem;
    color: gray;
}

.main figure img {
    width: 100%;
}

.main p {
    padding: 2rem;
    font-size: 2rem;
    color: gray;
}

.footer {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

.footer__button {
    display: flex;
    align-content: center;
}

.footer__button button{
    background-color: transparent;
    border: none;
    color: brown;
    font-weight: bold;
    margin-right: 2rem;
    font-size: 2rem;
}

.footer__icon button {
    background-color: transparent;
    border: none;
    padding: 1rem;
    font-size: 2rem;
}

Mi reto usando flexbox

Y esta usando grid (aun me cuesta ubicar bien los elementos

)

Buenas a todos! no es mucho, pero es trabajo honrado jajaja!

Saludos a todos!

Reto completado

Al hacerlo únicamente con flexbox una de las desventajas que podemos encontrar es que todos los documentos estar acomodados de manera unidimensional y puede generar un poco mas de código a la hora de maquetar. Con el uso de CSS Grid al tener dos dimensiones para los elementos es mucho mas fácil acomodarlos sin tener que hacer uso de muchas propiedades en el css.

Definitivamente la combinación de FlexBox con Css es perfecta para muchos proyectos hoy en día y Hay muchas maneras de hacer uso de ambos Un gran ejemplo es maquetar todo el Layout con CSS Grid y todos los componentes internos con Flexbox o también porque no, una combinación de ambos nuevamente para los elementos contenido en el Layout es una gran ventaja.

Considero que la teoria aporta un enorme capacidad de entendimiento, el porque de las cosas es muy importante para crecer nuestras habilidades como desarrolladores. Sigan el curso, la parte practica la hacemos por nuestra cuenta, seamos proactivos 😃
**Para los que tienen ganas de aprender…

Acá dejo mi ejercicio aplicando css grid y flexbox al mismo tiempo!

Reto cumplido

Done! Usando grid y flexbox para distribuir el espacio entre los elementos y la card en sí dentro del documento:
.
.
.

AQUI TIENEN VARIOS EJEMPLOS DE CSS GRID Y FLEXBOX EN LO QUE ESTUVE TRABAJANDO, CONVINACIONES DE LOS MISMOS. TAMBIEN PARTIENDO DEL CONCEPTO DE MOBIL FIRST

Estuve utilizando algunos preprocesadores como PUG y Sass, Quise recordar lo bueno del aguacate y bueno, qué opinan?

HTML

<<!DOCTYPE html>
<html>
  <head>
    <title>FlexboxGrid</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css">
    <script src="https://kit.fontawesome.com/552ebddad2.js"></script>
  </head>
  <body>
    <main class="section">
      <div class="section__content1"><img class="user-image" src="./images/ben-sweet-2LowviVHZ-E-unsplash.jpg" alt="aguacate">
        <div class="section__content1__tittle">
          <h2>Por qué El aguacate es la mejor comida</h2>
          <p>Por Gustavo Liendo</p>
        </div>
      </div>
      <div class="section__content2"> <img src="./images/thought-catalog-EMX1eJ1BcgU-unsplash.jpg" alt="aguacate">
        <p>Durante años hemos conocido los beneficios del aguacate pero resulta que la mejor forma de consumirlo es ...</p>
      </div>
      <div class="section__content3"> 
        <div class="section__content3__buttons1"><a class="boton-button" href="#">Leer Más</a><a class="boton-button" href="#">Más del autor</a></div>
        <div class="section__content3__buttons2"><a class="boton-button2-1" href="#"> </a><a class="boton-button2-2" href="#"></a></div>
      </div>
    </main>
  </body>
</html>> 

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-family: "Monserrat", sans-serif;
  font-size: 62.5%;
  width: 100%;
  height: 100vh;
  padding: 50px;
  background: rgb(168, 178, 193);
  background: linear-gradient(166deg, rgb(168, 178, 193) 0%, rgb(237, 238, 241) 100%);
}

.section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 40%;
  margin: 0 auto;
  padding: 20px 0px;
  background-color: #e6e6e6;
  height: 60%;
  border-radius: 20px;
  border: 3px solid #c5c5c5;
}
.section__content1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 15px 10px;
}
.section__content1__tittle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: left;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  padding-left: 10px;
}
.section__content1 img {
  width: 50px;
  border-radius: 50em;
  border: 4px solid #c9c9c9;
}
.section__content2 {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.section__content2 img {
  width: inherit;
}
.section__content2 p {
  font-size: 1.4rem;
  font-weight: 400;
  padding: 20px;
  text-align: justify;
}
.section__content3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  text-align: center;
  gap: 20px;
  width: 100%;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.section__content3 a {
  text-decoration: none;
  color: #000;
  font-weight: 600;
  padding: 5px;
  font-size: 1.2rem;
  border: 1px solid #ccc;
  border-radius: 25em;
}
.section__content3__buttons1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 5px;
}
.section__content3__buttons2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 5px;
}
.section__content3__buttons2 .boton-button2-1 {
  background-image: url(./images/heart.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: auto;
  border: none;
}
.section__content3__buttons2 .boton-button2-2 {
  background-image: url(./images/share.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  width: 30px;
  height: auto;
  border: none;
}

Resultado del reto de la card que parece de insta. La verdad siento que usé muchos divs pero se me hace mucho más amigable el uso de grid.

Mi resultado. Unicamente usé flexbox para alinear los elementos dentro de la card. ![](

¡Reto de la clase listo!

![](

aqui me reto de la clase, use flexbox por que se me hace mas comodo para este tipo de layuot

Aquí mi aporte:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
  	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  	<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
  
	<style type="text/css">
		body{
			font-family: 'Quicksand', sans-serif;
			margin: 0;
			background-color: silver;
		}
		h1,p{
			margin: 0;padding: 0;
		}
		.container{
			display: flex;
			justify-content: center;
			padding-top:20px;

		}
		.card-container{
			width: 500px;
			display: flex;
			flex-direction: column;
			background-color: white;
		}
		.card-title{
			
			display: flex;
			align-items: center;
		}
		.card-image img{
			width: 500px;
		}
		.card-title-image img{
			width: 60px;
			border-radius: 50%;
			padding: 16px;
		}
		.card-title-text{

		}
		.card-description p{
			padding: 16px;
		}
		.card-footer{
			display: flex;
			justify-content: space-between;
			padding: 16px;
		}
		.card-share img{
			width: 30px;
		}
		.card-button{
			display: flex;
			justify-content: center;
		}
		.card-button button{
			width: 100px;
			margin-right: 16px;
			background-color: #007bff;
			border: 2px solid #007bff;
			border-radius: 8px;
			padding: 12px;
			color: white;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="card-container">
		  <div class="card-title">
		  	<div class="card-title-image">
		  		<img src="https://play-lh.googleusercontent.com/otWa4-dFZ3PHPfUnc1bAiLEKu0XTEqiLVEaQOm7OwC5mx9w62aBh49OP3NJue3i6JTw=s256-rw" alt="logo">
		  	</div>
		  	<div class="card-title-text">
		  		<h1>Canis lupus familiaris</h1>
		  		<p>Promedio de vida: 10 – 13 años</p>
		  	</div>
		  </div>
		  <div class="card-image">
		  	<img src="https://i.ytimg.com/vi/_2YJfQcvngU/maxresdefault.jpg" alt="perro">
		  </div>
		  <div class="card-description">
		  	<p>El perro, llamado perro doméstico o can, y en algunos lugares coloquialmente llamado chucho, tuso, choco, entre otros; es un mamífero carnívoro de la familia de los cánidos, que constituye una especie del género Canis.</p>
		  </div>
		  <div class="card-footer">
		  	<div class="card-button">
		  		<button>SAVE</button>
		  		<button>CANCEL</button>
		  	</div>
		  	<div class="card-share">
		  		<img src="https://cdn-icons-png.flaticon.com/128/275/275882.png" alt="share heart">
		  		<img src="https://images.vexels.com/media/users/3/136818/isolated/lists/69b086c3753289c9acad2f9b0c53de79-icono-de-compartir-colorido.png" alt="share-share">
		  	</div>
		  </div>
		</div>
	</div>
</body>
</html>

Cumplimos ☺

Link reto

Hice una carta de Yugi Oh! con FlexBox aun faltan detalles pero ahi quedo jeje

Codigo

Reto logrado! 💻💚🚀

Lo hice con CSS Grid y Flexbox

HTML

<div class="container-card-1">
      <div class="info-initial">
        <figure>
          <img
            src="https://images.pexels.com/photos/1458922/pexels-photo-1458922.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt="Cachorro Maltés"
          />
        </figure>
        <div class="header-text">
          <h1>Card versión CSS Grid y Flexbox</h1>
          <p>Secondary text</p>
        </div>
      </div>
      <div class="info-media">
        <figure>
          <img
            src="https://images.pexels.com/photos/5214405/pexels-photo-5214405.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt="Pitbull color café"
          />
        </figure>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum.</p>
      </div>
      <div class="info-final">
          <a class="links item-1" href="#">ACTION 1</a>
          <a class="links item-2" href="#">ACTION 2</a>
          <i class="item-3 fa-regular fa-heart"></i>
          <i class="item-4 fa-solid fa-share-nodes"></i>
      </div>
    </div>

CSS

:root {
  /* Colores */
  --warm-black: #201E1C;
  --black: #282623;
  --light-gray: #a39f9f;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}
body {
	font-family: 'Roboto', sans-serif;
}
a {
	text-decoration: none;
}
.container-card-1 {
	width: 380px;
	padding: 15px;
	border-radius: 5px;
}
.info-initial {
	width: 100%;
	display: flex;
}
.info-initial figure {
	align-self: center;
}
.info-initial figure img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}
.info-initial .header-text {
	padding: 10px 10px;
}
.info-initial .header-text p {
	font-size: 1.5rem;
	color: var(--light-gray);
	padding-top: 5px;
}
.info-media {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: 10px 0 25px 0;
}
.info-media figure img {
	width: 100%;
	height: 380px;
	object-fit: cover;
}
.info-media p {
	text-align: justify;
	margin-top: 8px;
	font-size: 1.6rem;
	color: var(--warm-black);
}
.info-final {
	width: 100%;
  height: 40px;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	align-items: center;
	justify-items: center;
}
.info-final .links {
	color: var(--black);
	font-size: 1.5rem;
	font-weight: bold;
}
.info-final i {
	transform: scale(1.7);
	color: var(--warm-black);
}
.info-final .item-1 {
	grid-column: 1 / 3;
}
.info-final .item-2 {
	grid-column: 3 / 5;
}
.info-final .item-3 {
	grid-column: 7;
}
.info-final .item-4 {
	grid-column: 8;
}

En todos los casos presentados, personalmente yo optaria por usar flexbox

Reto!!

Asi quedo usando solo flexbox

Mi version del reto:
(aunque se me fue un poco de las manos xd)