Desktop version Ended

[mrcbq]

I made the following changes:

🏁 End all the changes for the desktop version. sections: Main, Works, About me, Contact.

👉🏼 I use media queries in the CSS file to make the desktop version look like template 2 (Desktop: >=768px). 👉🏼 I use Grid and Flexbox, To lay out the elements on the page.

Everything is fully responsive for the mobile and desktop versions.

[mrcbq]

@Nemwel-Boniface many thanks for your guide, you rocks!

Hello @mrcbq ,

I am Nemwel your reviewer.

This is an additional review as a result of the second opinion request.

I have received your second opinion request and read through this requested change by @emmiiorji which you say can only be implemented using javascript. However, kindly note that this feature can easily be implemented using HTML nad CSS3 only without needing to use JavScript anywhere.

Note: to show you that this is actually possible, I will include a working solution for you below. KIndly note that it is not very perfect and you will still need to fine tune the styling to make it match the provided Figma design.

1. On desktop view, you need to first set the value of the buttons as display none (Which you did raised_hands ). This is so that when you load the page the only things being shown is the background image, the text and the languages for a specific project.
2. Then add an on-hover condition for the whole project in your case I can see it is proArt and ideally when you hover it, you want to change the background image and also display the button. You could implement it like the below: (The code below is added in the media-querys.css file)

  .proArt:hover .see-prj {
    display: block;
  }

  .proArt:hover {
    background: url(./images/card1.png);
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.5s ease-in-out;
  }

To proof that it actually work, I will share with you a screencast of both the before and after effect.

How it looks without the hover being implemented (Notice nothing works)

How it works with the hover implemented:

This feature implemented, kindly ensure you make all the other requested changes and when you are done kindly request for another review in your dashboard.

In case anything is not 100% clear tag me @Nemwel-Boniface so that I get the notification.

Keep rocking rocket!

@Nemwel-Boniface Thank you very much for your help and guide, you not only showed me that I was wrong, but you also showed me a guide to see how to do it.

You rocks man! 👍🏼 👍🏼 👍🏼

[Nemwel-Boniface]

You are most welcome @mrcbq :pray: