Responsive Web

abril 13, 2020 css, grid, html

En esta seccion crearemos un sitio web responsive usando grillas css
Recursos:
Este es un ejemplo sin dar formatos

Para las imagenes usamos:

src="https://loremflickr.com/640/360"

En dondee podemos cambiar el tamaño de la imagen al gusto

Aqui esta el html

<div>
  {/**Title */}
  <header className="title">
    <h1>Web</h1>
  </header>

  {/**Contenedor principal */}
  <div className="container">
    <header className="header">
      <h1>Logo</h1>
    </header>

    {/**Contenido principal */}
    <main className="content">
      <article className="article">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi tenetur non quisquam sunt nam voluptatum fugiat nostrum sapiente quas.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, vitae!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, eaque!</p>
      </article>

      <article className="article">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi teneturnon quisquam sunt nam ab voluptatum fugiat nostrum sapiente quas.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, vitae!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, eaque!</p>
      </article>

      <article className="article">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit. Excepturi tenetur non quisquam sunt nam ab voluptatum fugiat nostrum sapiente quas.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, vitae!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, eaque!</p>
      </article>
    </main>
    
    {/**Contenido lateral */}
    <sidebar className="sidebar">
      <div>
        <img src="https://loremflickr.com/300/200/sport" alt="" width="100%" /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, maiores?</p>
      </div>

      <div>
        <img src="https://loremflickr.com/300/200/city" alt="" width="100%" /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, maiores?</p>
      </div>

      <div>
        <img src="https://loremflickr.com/300/200/people" alt="" width="100%" /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, maiores?</p>
      </div>

    </sidebar>
    {/** Post Relacionados */}
    <div className="related-post">Another Post</div>
    <div className="related-post">Another Post</div>
    <div className="related-post">Another Post</div>
    <div className="related-post">Another Post</div>
    <div className="related-post">Another Post</div>

    {/** Footer */}
    <div className="footer">
      <h4>React Web 2020*</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, culpa?</p>
    </div>
  </div>

</div>

Aqui esta el css

/**
Reseteamos estilos
*/
* {
margin:0;
padding:0;
}

/**
Agregamos fondo y fuente
freefronted background demo and code (css background patters)
Agregamos la fuente, antes la buscamos en google fonts manjari y la pegamos en index.html
*/
body {
background-image: linear-gradient(45deg, transparent 20%, black 25%, transparent 25%), 
linear-gradient(-45deg, transparent 20%, black 25%, transparent 25%), 
linear-gradient(-45deg, transparent 75%, black 80%, transparent 0),
radial-gradient(gray 2px, transparent 0);
background-size: 30px 30px, 30px 30px;
font-family: 'Manjari', sans-serif;
}

/** HEADER 
estilizamos title y h1 espacio arriba y abajo, centrado, fuente y uppercase
*/
.title h1{
padding: 20px 0;
text-align: center;
font-size: 2.9em;
text-transform: uppercase;
}

/**
Estilizamos contenedor principal
Container
que ocupe 90%
que maximo va a llegar a 1000px
centrar usando margin 1.6em arriba y abajo y automatico a los lados

activamos para ordenar grid y gap para poner espaciado entre los contenedores

agregamos 5 columnas al contenedor

*/
.container{
background: #fff;
width: 90%;
max-width: 1000px;
margin: 1.6em auto;

display: grid;
gap: 1.6em;

grid-template-columns: repeat(5,1fr);

}

/**
Seleccionamos los elementos principales y a cada elemento le aplicamos 
un padding, un backgroudn y un borde
*/
.container > .header,
.container > .content,
.container > .sidebar,
.container > .related-post,
.container > .footer {
border: 1px solid #000;
}

/**
HEADER FOOTER
Seleccionamos el header y el footer y los ponemos a que abarque las 5 columnas
significa que tenemos 6 lineas de 1-6
*/
.container > .header,
.container >.footer {
background: #1e272e;
color: #fff;
grid-column: 1/6;
}

/**
CONTENT
Para el contenedor principal le decimos que abarca 3 columnas
podemos usar span n
*/
.container > .content{
grid-column: span 3;
}

/**
CONTENT --> ARTICLE
Para los articulos que esten dentro del content
le aplicamos un margen al componente
un padding en relacion al texto,
fondo y color de texto
*/
.content > .article {
border: 1px solid #000;
background: skyblue;
padding: 20px;
margin: 20px;
color:royalblue;
}

/**
Le damos un espacio al texto que hay en article con padding a h1 y p
*/
.content > .article > h1,
.content > .article > p{
padding: 10px;
}


/**+
SIDEBAR
Para el sidebar le decimos que abarca 2 columnas
podemos usar span n
le ponemos background

para centrar el contenido verticalmente aplicamos flexbox
para el sidebar aplicamos flexbox
le decimos que esta centrado arriba y abajo
le decimos que lo acomode verticalmente

*/
.container > .sidebar{
grid-column: span 2;
background: #fff;

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

/**
CADA SIDEBAR
*/
.sidebar > div {
border: 1px solid #000;
margin: 20px;
background: goldenrod;
}

/**
RELATED POST
Fondo negro, color blanco de texto, alto de 180px
centrado usando flex justifycontent y alight items
*/
.container > .related-post{
background: #000;
color: #fff;
height: 180px;

display: flex;
justify-content: center;
align-items: center;

transition: all 0.5s ease;
}

/**
Añadir efecto a los related post depende transition de la clase de arriba
*/
.container > .related-post:hover{
cursor: pointer;
background:#fff;
color: #000;
}


/*****************EMPIEZA EL RESPONSIVE**********************************/
@media screen and (max-width: 768px){
.container > .header{
text-align: center;
}

/**
  porque son son 5 columnas y 6 lineas 1-6
  */
.container > .content{
grid-column: 1/6;
}

/**
  porque son son 5 columnas y 6 lineas 1/-1 (esta es otra forma)
  */
.container > .sidebar{
grid-column: 1/-1;
}

/**
  Otra forma de poner todas las columnas que abarque span 5
  */
.container > .related-post{
grid-column: span 5;
}

}

No hay comentarios.

Suscribirse a: Comentarios de la entrada ( Atom )