Week 5: Carousel Images

This week I’ve been working on updating a few issues on my site in response to feedback I’ve gotten. I’ve been able to implement most of the features I wanted, but there are still some elements (like responsive design) that I haven’t had the time to properly look into yet.

The major achievement for me this week was creating a carousel of images on my homepage – basically having a hero image which changes every few sections, scrolling through my portfolio works. I used a guide over at w3schools.com which was by far the easiest to implement out of all the different methods I looked into. I’m hoping to potentially be able to include links with these images to their respective portfolio page, but that will probably take some time to wrangle.





As you can see, the first image is the initial state will cycle through each of the portfolio project images, as seen in the second state in the image below. This cycles every three seconds, so visitors can see at a glance some of my work in a short amount of time.

I’ve also been working on this week’s SBEs; here’s a screengrab and the code below:




It’s a little hard to see, but the nav menu with the white background is being hovered over, using a: hover to change its state.

I’ve been working primarily on creating a back button on the individual project pages, which you can see below:




This helps it act in a much more user friendly manner, and doesn’t leave users ‘stranded’ so to speak, when they access each individual page.

The site is:

C2 By Design

Feel free to take a look, and I’d love to hear any feedback about it!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s