WEB AUTHORING / Website Progress / Term 4, Term Break

Inspirations & coding help!

https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/

screen-shot-2017-01-01-at-6-01-56-pm
Helpful javascript library to add responsive audio to the page. Will use this for my discography page!
screen-shot-2017-01-01-at-5-52-33-pm
slideToggle function;  will use this to build the discography page (where clicking on the image will trigger a drop down which contains track list & audio preview)

Progress so far with the website:

  • Edited the navbar (tried to make it transparent. Needs a new font though)
  • Edited the background
  • Am thinking of editing the discography page; the carousel doesn’t feel effective at all.
  • Footer not fixed yet

This slideshow requires JavaScript.

Fullscreen view

960px view

Small device view

29/12/2016

screen-shot-2016-12-29-at-10-29-25-am
Can’t seem to get that button right. ughhhh.

screen-shot-2016-12-29-at-10-27-23-amscreen-shot-2016-12-29-at-10-26-33-amscreen-shot-2016-12-29-at-10-24-25-am

screen-shot-2016-12-29-at-9-37-22-am
Changed the discography page – text too small?
screen-shot-2016-12-29-at-9-36-58-am
Tour page as sleek as ever
screen-shot-2016-12-29-at-9-36-39-am
End page / footer
screen-shot-2016-12-29-at-9-36-29-am
Tour-Contact page
screen-shot-2016-12-29-at-9-36-17-am
Discography page

screen-shot-2016-12-29-at-9-36-07-amscreen-shot-2016-12-29-at-9-35-49-amscreen-shot-2016-12-29-at-9-35-35-am

01/01/2017 

So I tried to do the dropdown function with javascript/jquery, but it didn’t work at all (not to mention the jquery is really messy? What on earth happened to it?), so I ended up using the bootstrap built-in Accordion function (I copied the div classes and collapse functions onto my own div class).screen-shot-2017-01-01-at-8-16-21-pm

screen-shot-2017-01-01-at-8-31-57-pm
Desktop view; Some images need to be edited so it is darker (to improve text visibility). Description seems a bit too small (it was set it at 0.5em)

screen-shot-2017-01-01-at-8-32-08-pm

screen-shot-2017-01-01-at-8-32-20-pm
Panel expanded
screen-shot-2017-01-01-at-8-32-27-pm
Panel expanded
screen-shot-2017-01-01-at-8-32-42-pm
Smaller device view

screen-shot-2017-01-01-at-8-32-54-pm

screen-shot-2017-01-01-at-8-33-13-pm
Small device view

It still look like a mess when the browser size is small.

The problem I have with this is that when the page loads, it shows the panel directly instead of hiding it. Will fix this issue soon.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s