Trayshmhirk / insure-landing-page

A landing page project from Frontend Mentor created using HTML, CSS and Javascript

Frontend Mentor - Insure landing page solution

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

Table of contents

• Frontend Mentor - Insure landing page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • 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
• Navigate the nav bar in the mobile design

Screenshot

Links

• Solution URL: GitHub solution
• Live Site URL: Hosted on Netlify

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Vanilla Javascript
• font DM serif - For font family
• font Karla 400, 700 - For font family
• font awesome icons - for social link icons

What I learned

I learned a lot of things during the process of this project.

• Using css :pseudoselectors
• Structuring html tags properly (using html5 semantics, and naming classes and ids properly), to have a clean html code that would be easier to style.

To see how you can add code snippets, see below:

<nav id="mobile-nav" class="mobile-nav position-nav">
  <div class="container">
      <div class="logo">
          <img src="images/logo.svg" alt="">

          <div class="bttn btn-2">
              <img id="close-mobile-nav" src="images/icons/icon-close.svg" alt="">
          </div>
      </div>

      <div class="links">
          <ul>
              <li><a href="#">How we work</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Account</a></li>
          </ul>
          <button class="bttn-2">View Plans</button>
      </div>
  </div>
</nav>

• This is the styling for the links: an animation happens on hover. A line moves beneath the links from the left to the right on hovering over the links, and the link color changes.

a:hover{
    color: var(--link-hover-color);
}

a::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--link-hover-color);
    height: 2px;
    
    transform: scale(0);
    transform-origin: right;
    transition: transform 300ms cubic-bezier(0.07, 0.29, 1, 1);
}

a:hover::after{
    transform: scale(1);
    transform-origin: left;
}

Continued development

I would want to continue developing complex, dynamic and responsive landing pages using some of the properties and styling of this project. Structuring the HTML alone was a hassle, as well as incorporating some of the images on the landing page body. I'm proud of this development, but i know i'd need to learn better technologies to make the process even swifter.

Author

• Frontend Mentor - @Trayshmhirk
• Twitter - @TrayShmhirk01