projectchance | web design final

  • Web Design Final (HTML/ CSS/ JavaScript coding)

    For my web design final, the objective was to design and bring to life a website for any artist - I chose Chance the Rapper. The website had to be built in a manner which shows the personality of the artist in a playful manner and in addition, the website had to entice the user with subtle design elements/ features. 
    Content used for the website are owed by the respective parties. 
    // 2015
  • Planning and Research 
    The key to creating a successful website was down to examining Chance's current website: It iwas vital to understanding what HE would have wanted for this website. So I begin to break down and attempt to discover the purpose behind the current website layout.
    Keeping this in mind, I picked the four main pages to be redesigned and coded:
  • The general rule applied to all the sections/pages: as little information as possible, but just enough for users/ fans to understand who he and SoX are. 
    So the planning began:
  • Understanding z-index
    Before we get to digitizng plans, understanding the CSS property z-index was important: 
    Similar to layers, the z-index property allows us to create a stack order of different elements. Giving a z-index of 0 to a particular <div> places it at the bottom of the stack, a value of 1 stacks that on-top etc. The higher the value, the higher the importance. This is crutial because, the manner in which the website is designed is heavly dependent on the creation of a hierarchy of layers. 
  • Mocks/ General Design Elements
  • Home Page
  • Menu
  • News
  • Shows
  • Sox
  • Video Background Loop

    With the introduction of HTML5, it has become easier to insert video conrent into a website, yet alone have a loop running as a background. To add to the design, I decided to take this route.
    Understanding the Code:
    In order to make it work, we need a video with an ID in the HTML and customization in the CSS. 
    In the HTML, I give the video an ID of "bg-video"; have 3 different sources in case one fails; .mp4, .webm (web media) and an image incase user is unable to load both videos. 
    In the CSS, I give rules that basically  translate to: i want the video to be fixed on the page (position: fixed;) , i want it centered on the page, and i want the video to take up all the space in a given window (min-width= 100%; min height = 100%) and most importantly, I want the video to be at the bottom of my stack/ hierarchy (z-index: 0).
  • <div class="intro fullscreen">
       <div class="pattern-overlay"></div>
          <div class="bgimg"></div>
          <video preload loop autoplay muted id="bg-vid">
             <source src="vid/home.mp4" type="video/mp4">
             <source src="vid/home.webm" type="video/webm">
             <img src="img/chance-7.jpg" width="100%">
  • video#bg-vid{
      position: fixed;
      left: 50%; top: 50%;
      min-width: 100%; min-height: 100%;
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      z-index: 0;
  • Screen Simulations
  • Final Product
    Live website here:
  • Menu
  • Thank You
    2015 © All Rights Reserved