Maquetación de main_section y agregando estilos CSS

Clase 18 de 41 • Curso de HTML y CSS 2019

Resumen

Vamos a trabajar la primera parte de nuestra página web.

En el diseño podemos ver que utilizamos la imagen curve.png por debajo de los productos, para esto debemos añadir la imagen en nuestro CSS en vez de en el HTML, así podremos posicionarla utilizando la propiedad background-image: url(""../images/curve.png"");.

David Antonio Garcia Saaib

student•

Situación gráfica de lo que hicimos, no es tan fácil de ver.

Alexander Valencia

student•

++Nice++

Luis Alfonso Guevara Alvarado

student•

Esa es la mejor forma de entender como es la estructura de un documento,usando el inspector.

Juan Castro

teacher•

Notas de la clase:

📸 Podemos utilizar la etiqueta <img> de HTML para añadir imágenes a nuestro sitio web, sin embargo, si queremos posicionar algún elemento encima de nuestra imagen puede resultar más cómodo utilizar el atributo background-image de CSS 😬
🦁 Para centrar un texto podemos utilizar el atributo text-align: center; también de CSS
🎾 Para buscar imágenes o archivos que no están en la misma carpeta, podemos utilizar ../ para retroceder de carpetas y acomodarnos correctamente

Lautaro Bermudez

student•

Gracias!

Stiven Jiménez

student•

a mi me gusta agregarles bordes rojos para ver bien el espacio de los elementos, es para depurar mejor y los bordes son temporales

Percy Suyco Panibra

student•

Lo aprendimos con Leonidas au au au!

Alejandro Tangarife Rivas

student•

Síí, eso mismo pensé yo :D Leonidas Campeón :D

Héctor Alonso Padilla Ramírez

student•

Make some waves! Les permite generar curvas SVG con sólo un par de líneas de código sin necesidad de utilizar imágenes.

Manuel Rivera

student•

Gracias bro.

Diego Alonzo Abregu Tinoco

student•

gracias bro

Marcelo Javier Pedernera

student•

Intensa la clase pero va saliendo. Yo estoy intentando hacer lo mismo pero con otro contenido. ![](

Juan Pedraza

student•

Nice

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Aca los textos que usamos en la pagina <h1> Este es un producto increible, no se que haces viendo que lo puedes tener. </h1>

<p>Miles de productos hay en el mercado, pero nada como una caja de gatitos</p>

Jonathan David Olivos

student•

Aquí les dejo el headline:

Este es un producto increíble, no se que haces viendo que lo puedes tener

Cristian Bonomo

student•

Otra opción para generar las tarjetas sería asignar un CSS Grid a product, y generar dos columnas, una para cada item content dentro de product. Luego agregamos un grid-gap para separar ambas tarjetas.

andrés eduardo betancourt bescanza

student•

Muchachos, les recomienden que primero tomen el curso de desarrollo web con leonidas. El explica todo desde 0 y podran entender lo que se hace aqui.

Luis Alfonso Guevara Alvarado

student•

Concuerdo contigo!

Elena Parada

student•

Lo tomaré en cuenta porque algunas cosas no estoy entendiendo :/

Santiago Restrepo

student•

No le vi una funcionalidad clara al

background-position: center top;

Alguna buena alma que me colabore. :)

Alexei Alvarez

student•

Yo lo entiendo de esta manera. esa propiedad te permite mover una imagen que esta de fondo dentro de su contenedor. Si tienes una imagen y esta es más grande que su contenedor puedes usar background-position: center para que no se pierda el sentido o el mensaje de la imagen. Espero sea de ayuda.

Luis Alfonso Guevara Alvarado

student•

@Rulótico bien explicado la parte técnica,pero no hubiera sido mejor respetar las conceptos y bases de HTML5, por ejemplo en lugar del div.main_section utilizar un section.main_section; así como también no utilizar tantos h1 en la misma página.Por lo demás bien explicado! A seguir con el curso

Juan Felipe Ángel Martínez Bernal

student•

Es una mala práctica utilizar más de un h1 en un documento html.

Marco Vinicio González Jiménez

student•

A mi me lo centro pero solo hasta la versión tablet, ya para la versión escritorio no se quedo centrado, así que utilicé

justify-content: center;```

En la clase .products

Juan Carlos García Esquivel

student•

Les comparto mi avance:

Aquí el código HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Home</title>
    <link rel="stylesheet" href="src/css/styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <div class="brand">
          <img src="/src/images/logo.png" alt="" />
        </div>
        <div class="menu">
          <ul>
            <li><a href="">Faqs</a></li>
            <li><a href="">Producto y descripción</a></li>
          </ul>
        </div>
      </nav>
    </header>
    <main class="main_section">
      <h1>
        Este producto es increíble, no se que haces 
        viendo lo que puedes comprar
      </h1>
    </main>
    <div class="products">
      <div class="product_card">
        <div class="product_info">
          <!-- <img src="src/images/box2.png" alt=""> -->
          <h1>Hola</h1>
          <p>
            Miles de productos hay en el mercado, pero nada 
            como una caja con
            gatitos.
          </p>
        </div>
      </div>
      <div class="product_card">
        <div class="product_info">
          <!-- <img src="src/images/box2.png" alt=""> -->
          <h1>Hola</h1>
          <p>
            Miles de productos hay en el mercado, pero nada como una caja con
            gatitos.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Aquí el código CSS


html, body {
  margin: 0px;
  padding: 0px;
}

header {
  width: 100%;
}

nav {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #7acc2d;
}

nav .brand {
  margin-left: 20px;
}

nav ul {
  display: flex;
  list-style: none;
  margin-right: 20px;
}

nav ul li {
  margin: 0px 2px;
  padding-right: 8px;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

nav ul li a:hover {
  text-decoration: none;
  color: white;
}

/*MAIN STYLES*/
main.main_section {
  padding: 7% 15%;
}

.products {
  height: 200px;
  background-image: url("/src/images/curve.png");
  background-size: cover;
  background-position: center top;
  padding: 2% 15%;
  display: flex;
  justify-content: center;
}

.product_card {
  background-color: white;
  margin: 10px;
  border-radius: 7px;
  padding: 10px;
  box-shadow: 0px 0px 8px 2px rgb(0,0,0,0.2);
}

.product_card:hover {
  box-shadow: 0px 0px 10px 5px rgb(0,0,0,0.2);
}

Oscar Armando Del Angel Casillas

student•

cuando damos padding con un % el % es en relacion a que?

Jair Yara

student•

El porcentaje que apliques es con respecto al bloque que esté conteniendo el elemento

Erik Elyager

student•

En el caso del padding es en relación al width del contenedor, por ejemplo: si el contenedor mide 200px de ancho y pones un padding de 10% va a ser de 20px y se va adaptar conforme el contenedor cambie de tamaño, esa es la ventaja de usar porcentajes.

En algunas propiedades el procentaje hace referencia al font-size por ejemplo, aquí puedes leer más.

Milena Castro Correa

student•

Buenas tardes,

En qué momento sé si debo usar px, %, em?

No me queda claro

Roger Carlos Ariel Alba

student•

Hola! No hay un "caso" en particular.

Conforme avances en el curso y en la carrera encontrarás que es más por la forma en que los equipos de trabajo estén cómodos o bien por el framework o sistema de diseño que usen. Lo importante es que sepas identificar cada unidad de medida y usarla cuando sea necesario.

Alexei Alvarez

student•

Son unidades relativas y absolutas. Entiendo que las unidades relativas como "em, rem. %" que su valor va a cambiar. Este tipo de unidades son de ayuda para hacer responsive web desing.

Never Andrés Aparicio Hernandéz

student•

en mi pininon este curso no deberia haber sido el primero, de todas maneras esta muy bueno

Erick Adrian Gutierrez Hernandez

student•

César Andrés Aguilar Párraga

student•

Cual piensas que debe ser el primero??

JuanC M

student•

César Andrés Aguilar Párraga

student•

Si quieres que el curve.png te salga en toda la pagina en el main_section en css dejale el padding en 0px, igual te quedo super bien

Daniel Cabrera Ramirez

student•

Muy buena idea para crear una web portafolio a la par

Edgar Jesus Carreño Layton

student•

me agradan las clases, aunque me confunde con ideales tomados de clases de leonidas

Gutierrez Diego

student•

Recuerda que cada quien maqueta a su manera, si bien es cierto muchos programadores pueden hacer muy similar una maquetación o un programa pero es muy difícil que se haga con el mismo código, te recomiendo ea que tomes lo que mas fácil puedas comprender y practicar.

Alejandro Soria

student•

como hiciste para que el texto te salga centrado??? :|

Moises Ramirez

student•

Hola que texto depende de que quieras alinear al centro tenemos muchas formas de hacer lo mismo en css para texto se utiliza la etiqueta Text-align:center; con esto puedes alinear un texto como gustes.

César Andrés Aguilar Párraga

student•

A products en css agregale justify-content:center

Maquetación de main_section y agregando estilos CSS

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