Reto 3: implementación del sistema de grillas

Clase 29 de 41 • Curso de HTML y CSS 2019

¡Bienvenido al tercer reto!

En esta ocasión aprendiste cómo funciona un sistema de columnas, con este conocimiento vamos a maquetar la sección de productos.

Aquí encontrarás los recursos necesarios para resolver este reto: https://xd.adobe.com/spec/2c9c033b-9245-42a1-495d-4ed75543bc3f-5aad/screen/92d69c70-3e3d-4c6e-ae7d-5b4fe57f8293/Home-3/

Como puedes notar, cada producto está dentro de un contenedor y esto permite que no llegue al borde de los extremos, ahora usa los números de columnas para distribuir los elementos de forma indicada.

Por ejemplo por aquí podemos ver una columna 4 y una de 8 , recuerda que siempre tienes que lograr las doce columnas. 8+4=12

Y cuando está al revés, invertimos los números, primero la columna de 8 y luego la columna de 4.

¡Ahora ya sabes maquetar con columnas!

Comparte el resultado de tu reto en la sección de discusiones.

Marco Vinicio González Jiménez

student•

¡Listo¡ Igual que el home el diseño es diferente.

Héctor Alonso Padilla Ramírez

student•

  <div class="grid-container">
    <figure class="product-img-1"><img src="img/50-PetShop-Icons_4.png" alt="producto1"></figure>
    <div class="product-1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>

  .grid-container {
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;

  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(4, 200px);
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "product-img-1 product-img-1 product-1 product-1"
    "product-2 product-2 product-img-2 product-img-2"
    "product-img-3 product-img-3 product-3 product-3"
    "product-4 product-4 product-img-4 product-img-4";
  margin: 80px auto;
}

.product-img-1 {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: product-img-1;
}

.product-1 {
  padding: 10px;
  display: flex;
  align-items: center;
  grid-area: product-1;
}

Luis Rivero

student•

Ángela Lobo

student•

¡Está genial! ¿Hiciste tú mismo las ilustraciones o las tomaste de algún lado?

Luis Rivero

student•

Muchas graciaas, y no, busque las ilustraciones por google, Flaticon y freepik son de gran ayuda.

Tetsu Osnaya

student•

¡Challenge completed!

Janet Guadalupe Torres Ménera

student•

Reto logrado

David Antonio Garcia Saaib

student•

yo hice algo asi con Grid, aunque tuve problemas al definir el padding y margin

.container{
    max-width: 900px;
    margin:auto;
}
.row{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    margin:20px 0px;
    
}
.border{
    border:1px solid black;
}
.grey_bg{
    background:var(--white-color);
}
.col-1{
    grid-column: 1 span;
}
.col-2{
    grid-column: 2 span;
}
.col-3{
    grid-column: 3 span;
}
.col-4{
    grid-column: 4 span;
}
.col-5{
    grid-column: 5 span;
}
.col-6{
    grid-column: 6 span;
}
.col-7{
    grid-column: 7 span;
}
.col-8{
    grid-column: 8 span;
}
.col-9{
    grid-column: 9 span;
}
.col-10{
    grid-column: 10 span;
}
.col-11{
    grid-column: 11 span;
}
.col-12{
    grid-column: 12 span;
}

.col-7.text_content{
    margin:20px;
    display:flex;
    flex-direction: column;
    justify-content: center;
   

}

y así quedo:

David Antonio Garcia Saaib

student•

Eduardo Reyes

student•

Así quedó la página de producto

Codigo HTML

    <section class="producto">
      <div class="background-photo-1 col-4"></div>
      <div class="producto-1 col-5">
        <h2 class="producto-product-titulo">
          Cat Plan
        </h2>
        <p class="producto-plan-drescription">
          Este seria el primer plan para tu caja para gatos, incluye solamente
          la caja.
        </p>
        <a href="/carrito" class="producto-comprar"> Comprar</a>
      </div>
      <div class="producto-2 col-5">
        <h2 class="producto-product-titulo">
          SuperCat Plan
        </h2>
        <p class="producto-plan-drescription">
          Este seria el segundo plan para tu caja para gatos, incluye solamente
          la caja pero grande.
        </p>
        <a href="/carrito" class="producto-comprar"> Comprar</a>
      </div>
      <div class="background-photo-2 col-4"></div>

Codigo CSS Grid

.row {
  display: flex;
}

.col-1 {
  width: 11.11‬%;
}
.col-2 {
  width: 22.22%;
}
.col-3 {
  width: 33.33%;
}
.col-4 {
  width: 44.44%;
}
.col-5 {
  width: 55.55%;
}
.col-6 {
  width: 66.66%;
}
.col-7 {
  width: 77.77%;
}
.col-8 {
  width: 88.88%;
}
.col-9 {
  width: 100%;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
  padding: 0;
}

@media (max-width: 900px) {
  .row {
    display: inherit;
  }
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9 {
    width: 100%;
  }
}

Código en el archivo CSS de estilos


.producto {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.producto-1 {
  height: 260px;
  background-color: var(--main-yelow);
  color: white;
  padding: 0px;
  max-width: 55.55%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.producto-2 {
  height: 260px;
  background-color: white;
  color: var(--main-yelow);
  padding: 0px;
  max-width: 55.55%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.producto-product-titulo {
  font-weight: bold;
  font-size: 50px;
  margin: 0px;
  margin-top: 20px;
  margin-left: 40px;
}

.producto-plan-drescription {
  font-weight: normal;
  font-size: 30px;
  margin: 10px 40px;
}

.producto-comprar {
  width: 50%;
  margin: 10px 40px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: var(--link-blue);
  color: white;
  text-decoration: none;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border-radius: 25px;
}

.producto-comprar:hover {
  background-color: var(--link-blue-hover);
}

.background-photo-1 {
  height: 260px;
  background-image: url(https://images.pexels.com/photos/177809/pexels-photo-177809.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.background-photo-2 {
  height: 260px;
  background-image: url(https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  left: 55.55%;
}

Usuario anónimo

user•

Es sencillo, pero el terminar de acomodar todo para que se vea bien en móviles sí que está potente. aqui el reto ya realizado.

Joel Dominguez Merino

student•

Super bonito el resultado! Solo checa el color de las letras del footer ya que están en negro. Excelente trabajo :D

Alberto Flores

student•

![](

Cristian Daniel Jesus Rios

student•

no sabia de donde sacar las img o bajarlas del adobe XD, asi que capture la pantalla y las corte EkisDe

Joel Dominguez Merino

student•

jaja aún así excelente trabajo! Yo lo que hago es ir a la siguiente clase y descargar la carpeta de imágenes que comparte en la sección de archivos :p

Exal Rodríguez

student•

![](


    <div class="container">

      <!-- Row 1 -->
      <div class="row">
        <div class="col-12 title">
          <h1>Productos</h1>
        </div>
      </div>

      <!-- Row 2 -->
      <div class="row">
        <div class="col-4"><img src="images/ben1.png" alt="catBox"> </div>
        <div class="col-8">
          <h2>Producto1</h2>
          <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos.</p>
        </div>
      </div>

      <!-- Row 3 -->
      <div class="row">
        <div class="col-8">
          <h2>Producto1</h2>
          <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
        </div>
        <div class="col-4">
          <img src="images/ben2.png" alt="catWhite">
        </div>
      </div>

      <div class="row">
        <div class="col-4"><img src="images/ben3.png" alt="catBlack"> </div>
        <div class="col-8">
          <h2>Producto1</h2>
          <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
        </div>
      </div>

.col-12, .col-4, .col-8 {
  margin: 2%;
  align-self: center;
}

.col-8 h2{
  text-align: inherit;
}

.col-4 img {
  width: 230px;
  height: 230px;
  margin: auto;
  display: block;
}```

Bruno Gabriel Cal Olivera

student•

HTML: producto.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/grid.css">
  <link rel="stylesheet" href="css/animation.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/estilos.css">
  <link rel="stylesheet" href="css/mobile.css">
  <title>Brand</title>
</head> <!-- Cierra head -->
<body>
  <nav class="fadeInDown">
    <img src="images/logo.png" alt="">
    <ul>
      <li>
        <a href="#">Faqs</a></li>
      <li>
        <a href="#">Producto y descripción</a></li>
    </ul>
  </nav>
  <div class="title">
    <h1>Productos</h1>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="product-img fadeInUpTwo">
          <img src="images/ben1.png" alt="">
        </div>
      </div>
      <div class="col-8">
        <div class="product-text fadeInLeft">
          <h1>Producto 1</h1>
          <h3>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-8">
        <div class="product-text fadeInRight">
          <h1>Producto 2</h1>
          <h3>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</h3>
        </div>
      </div>
      <div class="col-4">
        <div class="product-img fadeInUpTwo">
          <img src="images/ben2.png" alt="">
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="product-img fadeInUpTwo">
          <img src="images/ben3.png" alt="">
        </div>
      </div>
      <div class="col-8">
        <div class="product-text fadeInLeft">
          <h1>Producto 3</h1>
          <h3>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</h3>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="option">Terminos y condiciones</div>
    <div class="option">contacto@brand.com</div>
  </footer>
</body> <!-- Cierra body -->
</html> <!-- Cierra html -->

CSS: grid.css

:root{
  --col-width: 8.33333333333%;
}

.container{
  max-width: 900px;
  margin: auto;
  margin-top: 4%;
  margin-bottom: 4%;
}

.row{
  display: flex;
}

.col-1{
  width: var(--col-width);
}
.col-2{
  width: calc(var(--col-width)*2);
}
.col-3{
  width: calc(var(--col-width)*3);
}
.col-4{
  width: calc(var(--col-width)*4);
}
.col-5{
  width: calc(var(--col-width)*5);
}
.col-6{
  width: calc(var(--col-width)*6);
}
.col-7{
  width: calc(var(--col-width)*7);
}
.col-8{
  width: calc(var(--col-width)*8);
}
.col-9{
  width: calc(var(--col-width)*9);
}
.col-10{
  width: calc(var(--col-width)*10);
}
.col-11{
  width: calc(var(--col-width)*11);
}
.col-12{
  width: calc(var(--col-width)*12);
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
  padding: 10px;
}

@media (max-width: 900px){
  .row{
    display: inherit;
  }
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
    width: 100%;
  }
}

animation.css

.fadeIn{
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-name: fadeIn;
  -webkit-animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
}

@keyframes fadeIn {
from{
  opacity: 0;
}
to{
  opacity: 1;
}
}

.fadeInDown{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
}

@keyframes fadeInDown {
from{
  opacity: 0;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
}

.fadeInUp{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
}

@keyframes fadeInUp {
from{
  opacity: 0;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}
}

.fadeInUpTwo{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUpTwo;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInUpTwo;
}

@keyframes fadeInUpTwo {
from{
  opacity: 0;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
}

.fadeInLeft{
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
from{
  opacity: 0;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
}

.fadeInRight{
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-name: fadeInRight;
  -webkit-animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInRight;
}

@keyframes fadeInRight {
from{
  opacity: 0;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
}

estilos.css

/* Producto.html */
.title{
  justify-content: center;
  text-align: left;
  font-size: 20px;
  padding: 10px;
  max-width: 1200px;
  margin-left: 20%;
}

.product-img img{
  max-width: 230px;
  max-height: 230px;
}
.product-text{
  margin-top: 3%;
  text-align: left;
  font-style: normal;
  font-size: 14px;
}

Camilo Jaramillo

student•

Muy buen trabajo. Genial que hayas aplicado las variables para no tener que multiplicar.

Manuel Camacho

student•

Wow, no tenía idea que se podían usar las variables para multiplicar y no tener que dividir. Excelente tip!

Renee Enriquez Montalvan

student•

listo!

Daniel Esteban Ossa Vanegas

student•

![](

Miguel Angel Ramos Valdivia

student•

Asi quedo el reto, les comparto el link para que lo vean: Git Hub

Jesus Cruz Dominguez

student•

Alejandro Tangarife Rivas

student•

Desktop

Mobile

Miguel Sequera

student•

Epale bro, como estas?

Una pregunta, como hiciste para que te quedara así en mobile?

A mi se me desordena cuando pasa a mobile debido que en la primera esta el texto luego imagen, y en la otra es al revés, te dejo imagen para que me entiendas mejor.

Saludos, espero que me puedas ayudar.

Alejandro Tangarife Rivas

student•

Hola miguel :)! Bueno, revisando el orden de tus productos...todos están colocados de manera igual? Probablemente tienes productos con la imagen arriba y otros con la imagen abajo, algo así:

	<div class="producto producto_1">
  		<figure>
      			<img src="/img/Cat_vtg2.png" alt="Producto_1">
  		</figure>
  		// imagen arriba
  		<p>
     			// texto 
  		</p>
	</div>
	<div class="producto producto_2">
  		<p>
     			// texto 
  		</p>
  			// imagen abajo
  		<figure>
      			<img src="/img/Cat_vtg2.png" alt="Producto_1">
  		</figure>
	</div>

Reconozco que fue creativo :), pero no te recomiendo hacerlo asi, pues hace que: al momento de contraer la página se genere ese error de flujo :/. Para que puedas solucionar esto coloca todos los productos de la siguiete manera: (recuerda colocar a cada producto una clase única)

	<div class="producto producto_1"> // clase producto_1 (1, 2, 3...)
  		<figure>
      			<img src="/img/product.png" alt="Producto_#">
  		</figure>
  		<p>
     			// texto 
  		</p>
	</div>

Ahora que todos están colocados en el mismo orden, puedes hacer que los productos vuelvan a estar como antes (texto a la izquierda, img a la derecha) con esto:

.producto_2, .producto_4 etc...{
	flex-flow: row-reverse; // Esto hace que se cambie el orden de salida de los elementos. el que iba de segundo ahora irá de primero.
}

Con esto, llegas a productos especificos y les das ese orden que quieres. Ahora debes colocar en ( mobile.css ) lo siguiente, para la clase producto (que va en todos los productos)

@media (max-width: 600px) {
	
    // Código las otras páginas
	
    /* ------------------------------ Pág de Productos */
    .producto {
        flex-wrap: wrap; // Los productos caen al contraer página
    }
    /* ------------------------------ Fin productos */
}

Con esto logras hacer que, al momento de contraer la página cada producto va a caer como lo muestro en mi proyecto. Tú luego puedes modificar el orden de caída de los objetos, cambiando el orden de flujo de los bloques y listo!

Esto haberte ayudado, cualquier cosa, no dudes en preguntar :)

Jesus Cruz Dominguez

student•

Adrian Victor Montesinos Salinas

student•

Nicolas Cardenas

student•

Hecho con grid

  <div class="grid-container">
    <figure class="product-img-1"><img src="img/50-PetShop-Icons_4.png" alt="producto1"></figure>
    <div class="product-1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>

  .grid-container {
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;

  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(4, 200px);
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "product-img-1 product-img-1 product-1 product-1"
    "product-2 product-2 product-img-2 product-img-2"
    "product-img-3 product-img-3 product-3 product-3"
    "product-4 product-4 product-img-4 product-img-4";
  margin: 80px auto;
}

.product-img-1 {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: product-img-1;
}

.product-1 {
  padding: 10px;
  display: flex;
  align-items: center;
  grid-area: product-1;
}

.container{
    max-width: 900px;
    margin:auto;
}
.row{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    margin:20px 0px;
    
}
.border{
    border:1px solid black;
}
.grey_bg{
    background:var(--white-color);
}
.col-1{
    grid-column: 1 span;
}
.col-2{
    grid-column: 2 span;
}
.col-3{
    grid-column: 3 span;
}
.col-4{
    grid-column: 4 span;
}
.col-5{
    grid-column: 5 span;
}
.col-6{
    grid-column: 6 span;
}
.col-7{
    grid-column: 7 span;
}
.col-8{
    grid-column: 8 span;
}
.col-9{
    grid-column: 9 span;
}
.col-10{
    grid-column: 10 span;
}
.col-11{
    grid-column: 11 span;
}
.col-12{
    grid-column: 12 span;
}

.col-7.text_content{
    margin:20px;
    display:flex;
    flex-direction: column;
    justify-content: center;
   

}

    <section class="producto">
      <div class="background-photo-1 col-4"></div>
      <div class="producto-1 col-5">
        <h2 class="producto-product-titulo">
          Cat Plan
        </h2>
        <p class="producto-plan-drescription">
          Este seria el primer plan para tu caja para gatos, incluye solamente
          la caja.
        </p>
        <a href="/carrito" class="producto-comprar"> Comprar</a>
      </div>
      <div class="producto-2 col-5">
        <h2 class="producto-product-titulo">
          SuperCat Plan
        </h2>
        <p class="producto-plan-drescription">
          Este seria el segundo plan para tu caja para gatos, incluye solamente
          la caja pero grande.
        </p>
        <a href="/carrito" class="producto-comprar"> Comprar</a>
      </div>
      <div class="background-photo-2 col-4"></div>

.row {
  display: flex;
}

.col-1 {
  width: 11.11‬%;
}
.col-2 {
  width: 22.22%;
}
.col-3 {
  width: 33.33%;
}
.col-4 {
  width: 44.44%;
}
.col-5 {
  width: 55.55%;
}
.col-6 {
  width: 66.66%;
}
.col-7 {
  width: 77.77%;
}
.col-8 {
  width: 88.88%;
}
.col-9 {
  width: 100%;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
  padding: 0;
}

@media (max-width: 900px) {
  .row {
    display: inherit;
  }
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9 {
    width: 100%;
  }
}

.producto {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.producto-1 {
  height: 260px;
  background-color: var(--main-yelow);
  color: white;
  padding: 0px;
  max-width: 55.55%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.producto-2 {
  height: 260px;
  background-color: white;
  color: var(--main-yelow);
  padding: 0px;
  max-width: 55.55%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.producto-product-titulo {
  font-weight: bold;
  font-size: 50px;
  margin: 0px;
  margin-top: 20px;
  margin-left: 40px;
}

.producto-plan-drescription {
  font-weight: normal;
  font-size: 30px;
  margin: 10px 40px;
}

.producto-comprar {
  width: 50%;
  margin: 10px 40px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: var(--link-blue);
  color: white;
  text-decoration: none;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border-radius: 25px;
}

.producto-comprar:hover {
  background-color: var(--link-blue-hover);
}

.background-photo-1 {
  height: 260px;
  background-image: url(https://images.pexels.com/photos/177809/pexels-photo-177809.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.background-photo-2 {
  height: 260px;
  background-image: url(https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  left: 55.55%;
}

    <div class="container">

      <!-- Row 1 -->
      <div class="row">
        <div class="col-12 title">
          <h1>Productos</h1>
        </div>
      </div>

      <!-- Row 2 -->
      <div class="row">
        <div class="col-4"><img src="images/ben1.png" alt="catBox"> </div>
        <div class="col-8">
          <h2>Producto1</h2>
          <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos.</p>
        </div>
      </div>

      <!-- Row 3 -->
      <div class="row">
        <div class="col-8">
          <h2>Producto1</h2>
          <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
        </div>
        <div class="col-4">
          <img src="images/ben2.png" alt="catWhite">
        </div>
      </div>

      <div class="row">
        <div class="col-4"><img src="images/ben3.png" alt="catBlack"> </div>
        <div class="col-8">
          <h2>Producto1</h2>
          <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
        </div>
      </div>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/grid.css">
  <link rel="stylesheet" href="css/animation.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/estilos.css">
  <link rel="stylesheet" href="css/mobile.css">
  <title>Brand</title>
</head> <!-- Cierra head -->
<body>
  <nav class="fadeInDown">
    <img src="images/logo.png" alt="">
    <ul>
      <li>
        <a href="#">Faqs</a></li>
      <li>
        <a href="#">Producto y descripción</a></li>
    </ul>
  </nav>
  <div class="title">
    <h1>Productos</h1>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="product-img fadeInUpTwo">
          <img src="images/ben1.png" alt="">
        </div>
      </div>
      <div class="col-8">
        <div class="product-text fadeInLeft">
          <h1>Producto 1</h1>
          <h3>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-8">
        <div class="product-text fadeInRight">
          <h1>Producto 2</h1>
          <h3>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</h3>
        </div>
      </div>
      <div class="col-4">
        <div class="product-img fadeInUpTwo">
          <img src="images/ben2.png" alt="">
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="product-img fadeInUpTwo">
          <img src="images/ben3.png" alt="">
        </div>
      </div>
      <div class="col-8">
        <div class="product-text fadeInLeft">
          <h1>Producto 3</h1>
          <h3>Miles de productos hay en el mercado, pero nada como una caja con gatitos, Miles de productos hay en el mercado, pero nada como una caja con gatitos</h3>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="option">Terminos y condiciones</div>
    <div class="option">contacto@brand.com</div>
  </footer>
</body> <!-- Cierra body -->
</html> <!-- Cierra html -->

:root{
  --col-width: 8.33333333333%;
}

.container{
  max-width: 900px;
  margin: auto;
  margin-top: 4%;
  margin-bottom: 4%;
}

.row{
  display: flex;
}

.col-1{
  width: var(--col-width);
}
.col-2{
  width: calc(var(--col-width)*2);
}
.col-3{
  width: calc(var(--col-width)*3);
}
.col-4{
  width: calc(var(--col-width)*4);
}
.col-5{
  width: calc(var(--col-width)*5);
}
.col-6{
  width: calc(var(--col-width)*6);
}
.col-7{
  width: calc(var(--col-width)*7);
}
.col-8{
  width: calc(var(--col-width)*8);
}
.col-9{
  width: calc(var(--col-width)*9);
}
.col-10{
  width: calc(var(--col-width)*10);
}
.col-11{
  width: calc(var(--col-width)*11);
}
.col-12{
  width: calc(var(--col-width)*12);
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
  padding: 10px;
}

@media (max-width: 900px){
  .row{
    display: inherit;
  }
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
    width: 100%;
  }
}

.fadeIn{
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-name: fadeIn;
  -webkit-animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
}

@keyframes fadeIn {
from{
  opacity: 0;
}
to{
  opacity: 1;
}
}

.fadeInDown{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
}

@keyframes fadeInDown {
from{
  opacity: 0;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
}

.fadeInUp{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
}

@keyframes fadeInUp {
from{
  opacity: 0;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}
}

.fadeInUpTwo{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUpTwo;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInUpTwo;
}

@keyframes fadeInUpTwo {
from{
  opacity: 0;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
}

.fadeInLeft{
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
from{
  opacity: 0;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
}

.fadeInRight{
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-name: fadeInRight;
  -webkit-animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInRight;
}

@keyframes fadeInRight {
from{
  opacity: 0;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}
to{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
}

/* Producto.html */
.title{
  justify-content: center;
  text-align: left;
  font-size: 20px;
  padding: 10px;
  max-width: 1200px;
  margin-left: 20%;
}

.product-img img{
  max-width: 230px;
  max-height: 230px;
}
.product-text{
  margin-top: 3%;
  text-align: left;
  font-style: normal;
  font-size: 14px;
}

	<div class="producto producto_1">
  		<figure>
      			<img src="/img/Cat_vtg2.png" alt="Producto_1">
  		</figure>
  		// imagen arriba
  		<p>
     			// texto 
  		</p>
	</div>
	<div class="producto producto_2">
  		<p>
     			// texto 
  		</p>
  			// imagen abajo
  		<figure>
      			<img src="/img/Cat_vtg2.png" alt="Producto_1">
  		</figure>
	</div>

@media (max-width: 600px) {
	
    // Código las otras páginas
	
    /* ------------------------------ Pág de Productos */
    .producto {
        flex-wrap: wrap; // Los productos caen al contraer página
    }
    /* ------------------------------ Fin productos */
}

Reto 3: implementación del sistema de grillas

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework