Insure landing page-Design to HTML/CSS

Photo by Jakob Owens on Unsplash

In this post we are going to create the Insure Landing Page from Frontend mentor.

Insure

After downloading the resources, I had extracted the zip file and copied it in the Frontend-mentor-challenges folder. After that opened the index.html file with Live Server.

Insure

Next, we will be removing the unnecessary things from the index.html file and adding the structure. Since it have a lot of structure, we are adding the the navigation first.

Navigation

Next, we will put the structure for header.

Header

Now, our site is taking some shape with these structured html.

Structured

Next, we will create the structure for the first section for the site.

section

And it is looking structured in localhost.

section

Next, we will write the structure for the last section and the footer.

<section class="container bg-violet">
<div class="flex">
<div>
<h2>Find out more about how we work</h2>
</div>
<button class="btn">How we work</button>
</div>
</section>

Now, our structure is complete and it’s looking structured.

Structured

We will start with the basic CSS first and this time we are storing all colors in root variables. After that we are doing the styling for h1, h2, h3 and p.

@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display|Karla:400,700&display=swap');

Next, we will do the basic styling for most of the html, using flexbox.

.container {
padding: 0 20px;
margin: 0 auto;
max-width: 100%;
width: 1200px;
}

Now, our layout have started to take shape and looking ok.

Looking good

Now, we will style the navbar with the styling.

nav {
background-color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100vw;
z-index: 100;
}

Now, our navbar is looking perfect.

Navbar

Now, it’s time to style our header. It actually contains three images, so we are using pseudo elements here.

header {
background-color: var(--dark-violet);
color: #fff;
padding: 100px 0;
position: relative;
margin-top: 80px;
margin-bottom: 250px;
}

Also, give the style for the buttons.

.btn {
background-color: transparent;
border: 2px solid #fff;
display: inline-block;
color: #fff;
cursor: pointer;
padding: 15px 25px;
letter-spacing: 2px;
text-transform: uppercase;
}

Now, our header and button are looking awesome.

Looking awesome

We will write the styling for section and lines next.

/* Section styling */
.bg-violet {
background-color: var(--dark-violet);
background-image: url('./images/bg-pattern-how-we-work-desktop.svg');
background-repeat: no-repeat;
background-position: top right;
background-size: 50% 100%;
padding: 70px;
margin: 100px auto;
}

Now our section and lines are showing perfect in localhost.

localhost

Now, it’s time to move to the footer, where again we are using a background image to give a cool pattern.

/* Footer styling */
footer {
background-color: var(--very-light-gray);
background-image: url('./images/bg-pattern-footer-desktop.svg');
background-repeat: no-repeat;
background-position: top left;
padding: 60px 0 30px;
}

Now, our footer is looking perfect in localhost.

Footer

Now, our desktop view is done and we will start with our mobile view. We will first start with our basic styling and footer.

Mobile view

Next, we will put the code for the next section for mobile and it is looking good.

Next section

We will now fix the header, which contains our big image and text.

Header with image

Now, we will be adding the code for the hamburger menu used in navigation for our mobile screen.

nav {
padding: 20px 0;
}

For the hamburger menu to work, we need to add the code for toggle in main.js file.

main.js

Now, our app is complete and looking awesome in both view. You can find the code for the same here.

Both views

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger