/blogr-landing-page

Landing page for Blogr built using HTML, CSS and JS

Primary LanguageCSS

Blogr landing page

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

Welcome! 👋

Table of contents

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

Screenshot

Blogr landing page coding challenge

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Desktop-first workflow then Mobile
  • Vanilla JS for mobile navigation toggle

What I learned

The dropdown menu is the highlight of my learning while working through this project. This is something I have never worked on before and had no prior knowledge how to go about it. I had to do a little research (Stackover flow to the rescue... lol). At the end, I was a able to complete the dropdown menu using just HTML and CSS- no JS.

I faced a little challenge having a background color and a background image for a parent container. Below is a code snippet of how I was able to achieve it.

.header{
    width: 100%;
    height: 100vh;
    position: relative;
    background: url(images/bg-pattern-intro.svg);
    background-position: center;
    background-size: 150%;
    padding: 4rem 10rem;
    border-bottom-left-radius: 6rem;
    background-repeat: no-repeat;
    background-color: hsl(353, 100%, 62%);
}

Continued development

While working through this project, I noticed I still needed to perfect using JS for mobile navigation toggle. I believe I can make a smoother transition for the mobile navigation toggle. So, I'll be working on that for the next couple of days.

Author

Thanks for checking out this project.