Componente QR code

Esta es la solucion a QR code component challenge on Frontend Mentor.

Contenido

• Componente QR code
  • Contenido
  • Informacion general
    • Screenshots
    • Links
    • Construido con
    • Que aprendi
    • Recursos utiles
  • Autor

Informacion general

Screenshots

Links

• Solucion URL: https://github.com/NicolasGula/QR-Code
• Sitio URL: https://nicolasgula.github.io/QR-Code/

Construido con

• HTML5
• CSS
• Responsive Web Design

Que aprendi

Posicionar un elemento dentro del body y adaptarlo para dispositivos moviles.

Posicionando el elemento card en el centro del body

.card{
    width: 210px;
    height: 350px;
    padding: 12px;
    padding-bottom: 0;
    border-radius: 5%;
    /* white */
    background-color: hsl(0, 0%, 100%);
    margin: 0;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 2px 20px 0px rgb(200, 199, 199);
}

Si la ventana del navegador tiene 375px o menos, se aplican los siguientes cambios.

@media only screen and (max-width: 375px) {
    .card{
        width: 75%;
        height: 70%;
        padding: 15px;
        padding-bottom: 0;
        border-radius: 5%;
        /* white */
        background-color: hsl(0, 0%, 100%);
        margin: 0;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .title {
        font-size: 20px;
        font-weight:700;
        /* dark blue */
        color: hsl(218, 44%, 22%);
        width:90%;
        margin:20px auto ;
   }
    
    .sub-title{
        font-size: 16px;
        font-weight: 400;
        color: hsl(220, 15%, 55%);
        width:90%;
        margin: 10px auto;
    }
    
  }

Recursos utiles

• Propiedad position - Ayuda a entender la propiedad position en CSS
• Responsive Web design - Para compender el diseno web responsive.

Autor

• Website - Nicolas Gula