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.
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
- Solution URL: GitHub solution
- Live Site URL: Hosted on Netlify
- 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
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;
}
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.
- Frontend Mentor - @Trayshmhirk
- Twitter - @TrayShmhirk01