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

Overview of the challenge

A landing page website for a modern publishing platfrom called Blogr. This project tested my css layout skills and a little bit of my Javascript knowledge.

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

DROP DOWN MENU AND NAVIGATION

![](./screenshots/Blogr-Dropdown_menu.png) ![](./screenshots/Mobile-Menu.png)

This was the most challenging part of the challenge because it tested my css skills of how to position elements using the absolute and relative positions. The most challenging part of it was that I have to achieve the dropdown menu effect using Javascript by utilizing the event listeners of "Mouseover" and "Mouseleave".

2.HERO SECTION

![](./screenshots/Blogr-Hero-Section.png) ![](./screenshots/Mobile-Hero.png)This section was relatively easy to achieve, but the part that almost seemed overwhelming was position the background Image. I achieved the effect by setting the "url" of the image and a "linear gradient" to the backgroung-image property.

3.DESIGNED FOR THE FUTURE SECTION

![](./screenshots/Blogr-designed%20for%20the%20future%20section.png)This part wasn't difilcult, because I was able to utilize the power of css flexbox. I was able to achieve the effect of the images pushed to the coner by using "negative margins" and setting the body' horizontal overflow property to hidden.

4.STATE OF THE ART INFRASTRUCTURE SECTION

![](./screenshots/Blogr-Infastructure-Section.png) ![](./screenshots/infas-mobile.png)It took me more time to really get the solution of this section. I used relative and absolute positioning together with some negative margins to come up with the effect both for the mobile and desktop versions.

5.FREE, OPEN, SIMPLE SECTION

![](./screenshots/Blogr-free-open-simple-section.png)This was just a repition of the "designed for the future" section. The only deifference was that the position of the text and image was alternate.

6.FOOTER SECTION

![](./screenshots/Blogr-footer-section.png)I did this using css flexbox.

### Links-

Solution URL: https://www.frontendmentor.io/solutions/blogr-landing-page-LAM-0Xjhq-

Live Site URL:https://wonderful-semolina-c5bed7.netlify.app/

## My processI

I used a desktop first aprroach in carrying out this project. I started out with structing my HTML code for the website and then I started adding my css styles for the desktop version first and them I used media queries to make it responsive and then added some special stylings for the mobile version. Javascript was added last for the functionality of the toggle menu

.### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Desktop-first workflow

- Vanilla Javascript

### What I learned

- How to use Negative margins

- How to position elements using relative, absolute and static positin values

- How to combine linear gradients and images for the backgroung-image property

- How to postion background Images

```css.proud-of-this-css {background-image: url("images/bg-pattern-intro-desktop.svg"), linear-gradient(135deg, hsl(13, 100%, 72%) 0%, hsl(353, 100%, 62%) 100%) ;;}```

### Continued development

I will continue focusing on how absolute and relative positioning works.###

## Author

- Website - Ovie Nathaniel

- Frontend Mentor - @ovie-best

Twitter - @oviebest_2