Welcome! 👋

Thanks for checking out this front-end coding challenge.

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
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Styled Components - For styles
• Modern css reset - piccalil

What I learned

how to use grid, manipulation them between the desktop screen and mobile.

        <div class="theird-grid-container">
            <img class="desktop" src="./images/desktop/image-gallery-milkbottles.jpg" alt="">
            <img class="desktop" src="./images/desktop/image-gallery-orange.jpg" alt="">
            <img class="desktop" src="./images/desktop/image-gallery-cone.jpg" alt="">
            <img class="desktop" src="./images/desktop/image-gallery-sugarcubes.jpg" alt="">

            <img class="mobile" src="./images/mobile/image-gallery-milkbottles.jpg" alt="">
            <img class="mobile" src="./images/mobile/image-gallery-orange.jpg" alt="">
            <img class="mobile" src="./images/mobile/image-gallery-cone.jpg" alt="">
            <img class="mobile" src="./images/mobile/image-gallery-sugar-cubes.jpg" alt="">
        </div><!-- theird-grid-container -->

/* changin grid */
    .first-grid-container{
        display: grid;
        grid-template-areas:
        'a'
        'b'
        'c'
        'd'
        'e'
        'f'
        'g';
        grid-template-columns: repeat(1, 1fr);
        max-width: 80rem;
        align-items: center;
    }
    .grid-two-container{
        grid-area: c;
    }
    .grid-one-container{
        background-image: url('./images/mobile/image-header.jpg');
        grid-column: span 1;
        padding-bottom: 10rem;
        background-position: 0 0;
    }
    .person-grid-comment-container {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        max-width: 80%;
        grid-gap: 1.5rem;
    }
    .title-second-grid-container{
        grid-column: span 1;
        display: flex;
        justify-content: center;
    }
    .theird-grid-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

const menuBtn = document.getElementById('menuBtn');
const menuContent = document.getElementById('mobile-menu-container');

menuBtn.addEventListener('click',function (){
    const state = menuContent.getAttribute('state');
    if (state == 'not-active'){
        menuContent.setAttribute('state','active');
    } else if (state == 'active'){
        menuContent.setAttribute('state','not-active');
    }
})

window.addEventListener('click',function(e){
    if (!menuBtn.contains(e.target) & !menuContent.contains(e.target)){
        menuContent.setAttribute('state','not-active');
    }
})

Continued development

My first project with full grid usage, Im so glad for finishing this work. Specialy the mobile version with the transition between the 2 columnn grid and 1 column grid.

Useful resources

• W3schools - This helped me for javaScript eventListener. I really liked this pattern and will use it going forward.
• stackoverflow - this website help me on the javascript when i get stock.

Author

• Website - Mohamed Sagou
• Frontend Mentor - @medsagou
• Twitter - @sagoumohamed

Acknowledgments

nothing for this project.