Table of contents

• Table of contents
• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

Screenshot

Desktop

Mobile

Links

• Solution URL: GitHub repository
• Live Site URL: My Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

I learned the basics of CSS grid, how to arrange and how to apply it when using media queries.

@media(max-width:375px) {
    body {
        display: block;
        text-align: center;
    }

    .container {
        border-radius: 25px;
        margin: 0;
        width: 350px;
        height: 650px;
        grid-template-rows: repeat(3, 1fr);
    }

    .image {
        grid-column: 1/6;
        order: -1;
    }

    .image-desktop {
        width: 350px;
        height: 250px;
        object-fit: cover;
    }

    .fondo {
        grid-column: 1/6;
        height: 250px;
        order: -1;
    }

    .text {
        grid-column: 1/6;
        grid-row: 2;
        order: 1;
    }

    .title {
        text-align: center;
        font-size: 20px;
        width: 275px;
        padding: 0;
        padding-left: 30px;
    }

    .content {
        text-align: center;
        width: 225px;
        padding: 0;
        padding-left: 30px;
    }

    .datos-numeros {
        width: 250px;
        text-align: center;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        padding: 0;
        padding-left: 30px;
        margin: 0;
    }
}

Continued development

I want to continue learning how to use and apply CSS grid for layout and how to arrange my HTML elements.

Author

• Frontend Mentor - @Juan13052001