Landing Page with Single Introductory

This is one of the Challenges from Frontend Mentor

Except the codes, all colors and design are contributed by Frontend Mentor.

click to see result

What I've learnt from this:

scale and create reusable image classes. Through creating a class of imgbox which is positioned under the layout I want for the page. The image needed to be added in HTML so the classes could be reused.

.imgbox-inner {
 width: 100%;
 padding-top: 75%;
 position: relative;
}

.imgbox-inner .image {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0px;
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: left;
}

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Violet: hsl(257, 40%, 49%)
• Soft Magenta: hsl(300, 69%, 71%)

Typography

Headings

• Family: Poppins
• Weights: 400, 600

Body

• Family: Open Sans
• Weights: 400

Icons

For the social icons, you can use a font icon library. Some suggestions can be found below:

• Font Awesome
• IcoMoon
• Ionicons