saakarx / sunnyside-agency-landing-page

Frontend Mentor - Sunnyside agency landing page solution

This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Code URL
• Live Site URL: Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

Stacking Using Display Grid

Learned this from WesBos' CSSGrid Course

• For this you need to set grid-template-columns and grid-template-rows to 1
• Then set the style for the tags you need by grid-column: 1 / -1 and grid-row: 1 / -1

---

A look at how I used it in the styles

.gc-1-1fr {
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1;
}
.graphic-design__content,
.graphic-design__image {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

Author

• Frontend Mentor - @saakarx
• Twitter - @SaakarX