Nov 27 - Modifying the homepage

After consulting with my client on how I can improve my website, I changed my website according to what we agreed on. Here is what I changed, and how it affected the website:

The first thing I changed, was the transition times for the drop-down menu bar. It was set on the "* :before, :after" rule in CSS. In order to create different transition times for each transition in the website, I moved the 'transition-duration'  to each one that needs a transition time. This would mean that if I were to collectively change the transition time, for each transition I would need to do more actions, but this would also allow me to have a different transition duration for each transition. Two examples of rules containing the 'transition-duration' are shown below:

       I also changed the color for the website drop-down navigation bar. Aside from changing the drop-down menu transition time to have a longer duration, the menu bar would also change color when it is hovered. It used to only change the border of the navigation bar, but it now changes the color of the navigation bar as a whole. Here is what the code looks like now:

Using this, it changes the navigation bar to red when I hover over it, gradually over 1 second.

The border-radius was added here, so that I can improve the visual appeal. I will follow up with my client later to see if she approves with this. I also removed the box-shadows, since it doesn't look minimalist and I believe it looks better when I removed it.

Another thing I changed was the animation when I clicked on/hovered on an item. In this example, I changed the radio buttons, so that when I click on them their color (or to be exact, their opacity) would change. It used to change the position by 'margin-top'  set to a negative PX, but I think this increases the visual appeal and will look more minimalist.

Here is what the website looked without modifying it (the picture in the slideshow was from the tutorial that I used to create this slideshow):

And this is the result after modification:

I will start working on the final part of the homepage next lesson, and also follow up with my client on the progress of our website.