visual changes

Customized EDU/Online University/css/main.css

@@ -85,7 +85,7 @@ header img {
 .column {
     display: inline-block;
     float: left;
-    width: 280px;
+    width: 253px;
     margin-right: 20px;
 }
 .column:first-child {
@@ -122,64 +122,58 @@ header img {
 .tile h3 {
     margin:0;
     padding: 10px 20px 5px;
-    color: #ca2345;
+    color: #556;
+    -webkit-text-stroke: 0.2px;
+    font-family:open-sans,sans-serif;
+    font-weight:300;
+    font-size:1.1em;
     text-shadow: 0px 1px 0px #fff;
 }
 .tile p {
     margin:0;
     padding: 5px 20px;
-    color: #444;
+    -webkit-text-stroke: 0.1px;
+    color: #344;
+    font-size: 0.7em;
 }
 .tile a.download-button {
     position:absolute;
-    text-align: center;
+    text-align: left;
     bottom:10px;
-    width: 220px;
+    width: 190px;
     margin: 0 10px;
     padding:10px 20px;
     border-radius:3px;
 
-    background: rgb(41,137,216);
-    background: -moz-linear-gradient(top, rgba(41,137,216,1) 10%, rgba(30,87,153,1) 90%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(41,137,216,1)), color-stop(90%,rgba(30,87,153,1)));
-    background: -webkit-linear-gradient(top, rgba(41,137,216,1) 10%,rgba(30,87,153,1) 90%);
-    background: -o-linear-gradient(top, rgba(41,137,216,1) 10%,rgba(30,87,153,1) 90%);
-    background: -ms-linear-gradient(top, rgba(41,137,216,1) 10%,rgba(30,87,153,1) 90%);
-    background: linear-gradient(to bottom, rgba(41,137,216,1) 10%,rgba(30,87,153,1) 90%);
+    background: #c4c6c8 url('../img/icons/read-ico.png') no-repeat 95% center;
 
-    color: rgba(255,255,255,0.8);
-    font-weight:700;
-    font-size:0.9em;
+    color: #333;
+    font-weight:800;
+    font-size:0.8em;
     letter-spacing:2px;
-    text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
-
-    animation: blip 5s ease-in-out infinite;
-    -webkit-animation: blip 5s ease-in-out infinite;
 
     -webkit-transition: all 0.15s ease-in-out;
     -moz-transition: all 0.15s ease-in-out;
     -o-transition: all 0.15s ease-in-out;
     transition: all 0.15s ease-in-out;
 }
 .tile a.download-button:active {
-    color: rgba(255,255,255,1);
 
-    background: rgb(41,137,216);
-    background: -moz-linear-gradient(top, rgba(46,142,221,1) 10%, rgba(30,87,153,1) 90%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(46,142,221,1)), color-stop(90%,rgba(30,87,153,1)));
-    background: -webkit-linear-gradient(top, rgba(46,142,221,1) 10%,rgba(30,87,153,1) 90%);
-    background: -o-linear-gradient(top, rgba(46,142,221,1) 10%,rgba(30,87,153,1) 90%);
-    background: -ms-linear-gradient(top, rgba(46,142,221,1) 10%,rgba(30,87,153,1) 90%);
-    background: linear-gradient(to bottom, rgba(46,142,221,1) 10%,rgba(30,87,153,1) 90%);
+    background: #79d;
+    color: #fff;
+    text-shadow: 0px -1px 0px rgba(0,0,0,0.15);
+}
+.tile a.download-button.button-spotify {
+background: #c4c6c8 url('../img/icons/rarr.png') no-repeat 95% center;
 }
 .tile.small {
-    height: 210px;
+    height: 190px;
 }
 .tile.medium {
-    height: 420px;
+    height: 400px;
 }
 .tile.big {
-    height: 650px;
+    height: 610px;
 }
 .tile:active {
     background: #fff;
@@ -260,6 +254,36 @@ header img {
     top: 0%;
     margin-left:-20px;
 }
+/* ================ DESIGN PARALLAX ================ */
+.page-4 .background-layer {
+    z-index: 0;
+    position:fixed;
+    background-color: #000;
+    background-image: url('../img/design/bg.jpg');
+    background-size: 1228px;
+    background-repeat:no-repeat;
+    background-position: 0% 0%;
+}
+.page-4 .hero-layer .content img {
+    position: absolute;
+    top: 0%;
+    margin-left:-20px;
+}
+/* ================ MUSIC PARALLAX ================ */
+.page-5 .background-layer {
+    z-index: 0;
+    position:fixed;
+    background-color: #000;
+    background-image: url('../img/music/bg.jpg');
+    background-size: 1228px;
+    background-repeat:no-repeat;
+    background-position: 0% 0%;
+}
+.page-5 .hero-layer .content img {
+    position: absolute;
+    top: 0%;
+    margin-left:-20px;
+}
 /* ================ ANIMATIONS ================ */
 @-webkit-keyframes blip
 { 

Customized EDU/Online University/css/parallaxVertical.css

@@ -81,7 +81,6 @@ h1 {
 }
 p {
 	position: relative;
-	width: 280px;
 	padding: 10px;
 }
 .content {

Customized EDU/Online University/index.html

@@ -9,6 +9,8 @@
     <link href="css/parallaxVertical.css" rel="stylesheet" type="text/css" />
     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
     <script src="js/jquery.parallaxSwipe.js" type="text/javascript"></script>
+
+    <script src="//use.edgefonts.net/open-sans:n3,i3,n4,i4,n7,i7,n8,i8.js"></script>
 
     <script type="text/javascript">
     $(document).ready(function () {
@@ -42,8 +44,8 @@
             <div data-icon="img/icons/photography-" data-page="1" class="menu-item" id="photography"><img src="img/icons/photography-ico-off.png"/></div>
             <div data-icon="img/icons/painting-" data-page="2" class="menu-item" id="painting"><img src="img/icons/painting-ico-off.png"/></div>
             <div data-icon="img/icons/architecture-" data-page="3" class="menu-item" id="architecture"><img src="img/icons/architecture-ico-off.png"/></div>
-            <div data-icon="img/icons/design-" class="menu-item" id="design"><img src="img/icons/design-ico-off.png"/></div>
-            <div data-icon="img/icons/music-" class="menu-item" id="music"><img src="img/icons/music-ico-off.png"/></div>
+            <div data-icon="img/icons/design-"data-page="4" class="menu-item" id="design"><img src="img/icons/design-ico-off.png"/></div>
+            <div data-icon="img/icons/music-" data-page="5" class="menu-item" id="music"><img src="img/icons/music-ico-off.png"/></div>
         </div>
     </header>
 
@@ -80,7 +82,7 @@ <h3>The Florencian Connection</h3>
                             <img class="cover" src="img/covers/cover-v-05.png">
                             <h3>New Video Tour</h3>
                             <p><strong>Hours of New Footage:</strong><br/>The effect of the Diadochi<br/>Hellenistic Sculpture<br/>Famous Frescoes</p>
-                            <a class="download-button">$25.00</a>
+                            <a class="download-button">BUY FOR $25.00</a>
                         </div>
                     </div>
                     <div class="column">
@@ -98,7 +100,7 @@ <h3>Thinking with Type</h3><p>Thinking with Type is the definitive guide to usin
                         </div>
                     </div>
                     <div class="column">
-                        <div class="tile medium"><iframe src="https://embed.spotify.com/?uri=spotify:user:istrack:playlist:0pcJoO3s7HLSHx8itmP4yn" width="280" height="480" frameborder="0" allowtransparency="true"></iframe><br/><a class="download-button">VISIT SPOTIFY</a></div>
+                        <div class="tile medium"><iframe src="https://embed.spotify.com/?uri=spotify:user:istrack:playlist:0pcJoO3s7HLSHx8itmP4yn" width="253" height="480" frameborder="0" allowtransparency="true"></iframe><br/><a class="download-button button-spotify">VISIT SPOTIFY</a></div>
                         <div class="tile small"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p></div>
                     </div>
                 </section>