LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Musician | Innovator | Dreamer

The Man Behind the Project

Owl City is the popular brainchild of Adam Young, a man with a great, multi-faceted talent for music. Hailing from the quaint city of Owatonna, Minnesota, where he began his world-renowned career from his parents' basement, Young has never failed to impress listeners everywhere with his plethora of musical skills. His prolific discography, spanning six studio albums and numerous EPs to date, features music ranging in genres from pop, EDM, rock, country, dubstep, orchestral, to pop again. It's quite difficult to describe such a person in a simple sentence or two. Despite his vast musical aptitude, Young is also a very humble person and a devout Christian, who has stated that his faith is the only thing more important than his music. He also has a knack for inventing words and writing the most bizarre childhood stories, which make up an entire series featured on his Instagram profile.

Of June

Description of album goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat leo sed facilisis suscipit. Maecenas ac congue leo, non consequat tellus. Integer placerat elit vel ullamcorper imperdiet. Curabitur lorem nisi, ullamcorper vel sapien et, dignissim scelerisque dolor.

CSS
* {
  margin: 0;
  padding: 0;
  font-family: 'Avenir', sans-serif;
}

.panel {
  height: 100vh;
}

.hero {
  background: url(http://blog.shure.com/wp-content/uploads/2016/10/owlcity-body-01.jpg);
  background-size: cover;
  background-position: center center;
  padding: 0;
  position: relative;
  text-align: center;
  color: white;
}

.hero .name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.hero img {
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
}

h5 {
  margin-top: 20px;
}

.overlay {
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px 0 50px;
  background: -webkit-linear-gradient(-45deg, #09302f 0%,#145d7f 49%,#145d7f 50%,#1d8bb7 100%);
  color: white;
}

.music {
  background: -webkit-linear-gradient(-45deg, #f9b070 0%,#fe9090 45%,#ef3e6d 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.music-nav .row {
  display: flex;
  justify-content: space-around;
}

.tabs a {
  display: inline-block;
  background: coral;
  width: 500px;
  padding: 15px 5px;
  margin: 1px;
  text-align: center;
  text-decoration: none;
  color: black;
}

#oj { background: linear-gradient(to bottom, #fbad6c, #f13c6b); }
#mid { background: linear-gradient(to bottom, #ffffff, #cccccc); }
#oe { background: linear-gradient(to bottom, #b3dae8, #6b9ce6); color: white;}
#atbab { background: linear-gradient(to bottom, #9ac751, #22a74d); }
#tms { background: linear-gradient(to bottom, #36cfe3, #0e7761);  color: lightgray;}
#mo { background: linear-gradient(to bottom, #fd9c48, #ad5c19); }

.album-info .row {
  display: flex;
  justify-content: center;
  margin: 0 50px;
}

.album-info .info {
  width: 400px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.album-info img {
  width: 300px;
  height: 300px;
}

.album-info h2 {
  margin-bottom: 30px;
}
JS
// ID: {properties}
var styles = {
  "oj": {
    "title": "Of June",
    "desc": "Of June is the first EP by American electronica project Owl City in 2007. It was uploaded by Adam Young to his MySpace page on August 29, 2007.",
    "background": "-webkit-linear-gradient(-45deg, #f9b070 0%,#fe9090 45%,#ef3e6d 100%)",
    "image": "https://fanart.tv/api/download.php?type=download&image=72153§ion=2"
  },
  "mid": {
    "title": "Maybe I'm Dreaming",
    "desc": "Maybe I'm Dreaming is Owl City's debut studio album, released on March 17, 2008. Despite having been self-released and not recorded by any major producer, it managed to reach the top 20 of the Billboard Electronic Music Album Chart. The seventh track, \"The Technicolor Phase\", is featured on Alice in Wonderland's compilation album, Almost Alice.",
    "background": "-webkit-linear-gradient(-45deg, #ffffff 0%,#fe9090 50%,#59c9f5 100%)",
    "image": "https://upload.wikimedia.org/wikipedia/en/b/bf/Owl_City_-_Maybe_I%27m_Dreaming.jpg"
  },
  "oe": {
    "title": "Ocean Eyes",
    "desc": "Ocean Eyes is the second studio album by Owl City. It features a photograph of the Burj Al Arab as its album artwork. A vinyl edition was released, followed by a deluxe edition available on January 26, 2010. The deluxe edition incorporates four new tracks, including a remix of \"Hello Seattle\". The album contains guest vocals by Relient K vocalist Matt Thiessen on the songs \"Fireflies\", \"Cave In\", \"The Bird and the Worm\", and \"Tidal Wave\".",
    "background": "-webkit-linear-gradient(-45deg, #61e0fd 0%,#2155ca 50%,#02182b 100%)",
    "image": "https://shaharaine.files.wordpress.com/2010/02/ocean-eyes.jpg"
  },
  "atbab": {
    "title": "All Things Bright and Beautiful",
    "desc": "All Things Bright and Beautiful is Owl City's third studio album, released on June 14, 2011. Despite receiving mixed critical reviews, it became a commercial success, reaching the No. 6 slot on the Billboard 200 album chart. The album's name is based on the hymn of the same name.",
    "background": "-webkit-linear-gradient(-45deg, #e5f9d2 0%,#66ad6b 50%,#0c3802 100%)",
    "image": "https://images-na.ssl-images-amazon.com/images/I/51xHCQNLFwL._SX466_.jpg"
  },
  "tms": {
    "title": "The Midsummer Station",
    "desc": "The fourth studio album, The Midsummer Station, was released on August 17, 2012. Unlike his previous albums, Young worked with different songwriters and producers for the first time, including Stargate and Emily Wright. However, Young again collaborated with Matthew Thiessen for his third album in a row along with Ocean Eyes and All Things Bright and Beautiful.",
    "background": "-webkit-linear-gradient(-45deg, #76ffee 0%,#1d909a 50%,#11250c 100%)",
    "image": "https://is1-ssl.mzstatic.com/image/thumb/Music/v4/b6/c5/7e/b6c57e41-251a-ca91-2b66-4543a10c33b1/UMG_cvrart_00602537090464_01_RGB72_1200x1200_12UMGIM33874.jpg/1200x630bb.jpg"
  },
  "mo": {
    "title": "Mobile Orchestra",
    "desc": "Mobile Orchestra, the fifth studio album, was revealed on May 12, 2015 along with its artwork, track listing and release date. Young collaborated with several artists to provide additional vocals for the other songs on the album: U.K. artist Sarah Russell, country singer Jake Owen, Avicii's \"Wake Me Up!\" vocalist Aloe Blacc, and Hanson.",
    "background": "-webkit-linear-gradient(-45deg, #f5b793 0%,#a24b0f 50%,#25130c 100%)",
    "image": "https://upload.wikimedia.org/wikipedia/en/f/f1/Owl_City_-_Mobile_Orchestra.png"
  },
}

$(document).ready(function() {
  $(".album-btn").click(function(){
    changeView(event.target.id);
    event.preventDefault();
  });
  // Set view to Of June album
  changeView("oj");
});

function changeView(albumID) {
  var style = styles[albumID]
  var albumInfo = $(".album-info");
  
  // Update background
  albumInfo.parent().css("background", style["background"]);
  // Update title
  albumInfo.find(".row .info h2").html(style["title"]);
  // Update description
  albumInfo.find(".row .info p").html(style["desc"]);
  // Update image
  albumInfo.find("img").prop("src", style["image"]);
}

Description

A tribute page project built for freeCodeCamp's Front End certification program.
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv