martinsgundi / social-proof-section-page

Frontend Mentor - Social proof section solution

This is a solution to the Social proof section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• The challenge
• Screenshot
• Links
• Built with
• What I learned
• Useful resources
• Author
• Acknowledgments

The challenge

Users should be able to:

• View the optimal layout for the section depending on their device's screen size

Screenshot

Links

• Solution URL: frontendmentor.io/solutions
• Live Site URL: martinsgundi.github.io

Built with

• HTML5
• CSS3
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

First time working with background images, position, size e.t.c, so this project was a perfect opportunity to get my hands around it and I'm glad I carrried it out successfully Below is a snippet of my background styles:

body {
    background-image: 
        url(../images/bg-pattern-top-mobile.svg),
        url(../images/bg-pattern-bottom-mobile.svg)
    ;
    background-position: top left, bottom right;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 13.5rem, 100% 31rem;
}

Useful resources

• Controlling background-images | CSS Tutorial - This helped me on handling background images, also made know that more than one background image can be inputed and styled in one element. I really liked his pattern and will use it going forward. I encourage anyone reading to check it out!

Author

• Linkedin - Martins Ogundipe
• Frontend Mentor - Martinsgundi
• Twitter - Martinsgundi1

Acknowledgments

A big shoutout to Mr. Kevin Powell who continues to help the front-end community on making CSS easy. His videos help me a lot, helping with background images was just one of them.