I recently created a new website design for a Mario Kart fan-site called Mario Stadium and integrated a new Content Management System; Wordpress.
The site itself is comprised of various elements to produce some of its effects. I decided to post about the resources and tutorials used to help me develop the site, to help any web designers wanting to produce similar effects. The site uses a variety of jQuery snippets for site navigation and uses a grid layout for its responsive layout. The grid layout allows the site to adapt to different resolutions (whether being viewed on a mobile device or tablet).
For its responsive design I use 1140 CSS Grid – which is very easy to use and to customise to the way you want.
The website uses a carousel navigation for its menu. When the tab below the banner is clicked it opens the carousel menu.
I used the following tutorial: Simple Toggle with CSS & jQuery to create the toggling effect with the tab, hiding and showing the carousel menu when clicked.
The infinite carousel that holds links to all of the different games uses the following piece of jQuery: jquery-infinite-carousel with some minor modifications to make it adapt with the responsive layout.
Scroll to Top
When going to sections at the bottom of the website, you’ll notice a small graphic appears with an arrow pointing upwards. When clicked, it leads you to the top of the page. This is executed by using a tutorial provided by Web Designer Wall.
Premium Pixels is a great website providing free PSD resources. The ribbon on the banner was taken from this website.