This past week I was able to make a few tweaks to my work portfolio website to bring some more consistency to the webpages. I was also able to get back to my client project for the music teacher. I started coding the music classroom website. This site is similar to the previous teacher classroom sites that I have been making. One thing I wanted to try was to provide a little animation to the navigation links.
I used this website to get some inspiration: https://freefrontend.com/css-link-styles/
I wanted to add something subtle so I tried to implement one similar to this one:
https://codepen.io/team/css-tricks/pen/xxPOgmZ
To add some interactivity to the nav links, I used a ::before pseudo-element to create a thin line underneath each item. The line is styled using a set height, full width, and a background color to match the site’s accent color. At first, the line is hidden using transform: scaleX(0), and when the user hovers over a link, it expands from the center to the full width of the element using transform: scaleX(1). It’s a simple effect but it helps the site feel a little more interactive.
Here is sample of what it the navigation links look like:
As my internship class winds down I have a few other tasks that I need to complete to finish out the semester. I need to review, test, and validate the website before being able to launch it. Once I finish reviewing I can finalize the hosting to get all the projects uploaded. I still need to create some training materials so they can do some basic updating of information on their sites. I am excited to conclude these projects to finish up the semester and my time in school!
0 Comments