QR Code Component Solution [Using Semantic HTML5 markup & CSS Grids]

What are you most proud of, and what would you do differently next time?

This was my first challenge with Frontend Mentor, I found myself thinking... what a wonderful concept & service they have provided myself and others like me who are passionate, motivated, & constantly curious about web development & its steady evolution.

I had a lot of fun completing this challenge! I initially considered integrating TailwindCss, React & TypeScript for my solution, but decided to use only semantic HTML, CSS, & a simple layout using CSS grids.

  
    
    
      
        Improve your front-end skills by building projects.
      
        Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
    
  

.container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'card';
    grid-template: "card";
    justify-content: center;
}

.card {
    grid-area: card;
    background-color: hsl(0, 0%, 100%);
    width: 320px;
    height: 499px;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 16px 16px 40px;
    outline: 1px solid hsl(0, 0%, 80%);
    box-shadow: 5 5 5px 0 hsl(0, 0%, 80%);
    max-height: 499px;
    max-width: 320px;
}

What challenges did you encounter, and how did you overcome them?

I did not encounter any challenges in creating a solution.