9. HTML & CSS: Collection View

Bloc · Sep 28, 2015 · 998f2a8 · 998f2a8
1 parent 92037ee
commit 998f2a8
Show file tree

Hide file tree

Showing 28 changed files with 156 additions and 2 deletions.
diff --git a/assets/images/album_covers/01.png b/assets/images/album_covers/01.png
diff --git a/assets/images/album_covers/02.png b/assets/images/album_covers/02.png
diff --git a/assets/images/album_covers/03.png b/assets/images/album_covers/03.png
diff --git a/assets/images/album_covers/04.png b/assets/images/album_covers/04.png
diff --git a/assets/images/album_covers/05.png b/assets/images/album_covers/05.png
diff --git a/assets/images/album_covers/06.png b/assets/images/album_covers/06.png
diff --git a/assets/images/album_covers/07.png b/assets/images/album_covers/07.png
diff --git a/assets/images/album_covers/08.png b/assets/images/album_covers/08.png
diff --git a/assets/images/album_covers/09.png b/assets/images/album_covers/09.png
diff --git a/assets/images/album_covers/10.png b/assets/images/album_covers/10.png
diff --git a/assets/images/album_covers/11.png b/assets/images/album_covers/11.png
diff --git a/assets/images/album_covers/12.png b/assets/images/album_covers/12.png
diff --git a/assets/images/album_covers/13.png b/assets/images/album_covers/13.png
diff --git a/assets/images/album_covers/14.png b/assets/images/album_covers/14.png
diff --git a/assets/images/album_covers/15.png b/assets/images/album_covers/15.png
diff --git a/assets/images/album_covers/16.png b/assets/images/album_covers/16.png
diff --git a/assets/images/album_covers/17.png b/assets/images/album_covers/17.png
diff --git a/assets/images/album_covers/18.png b/assets/images/album_covers/18.png
diff --git a/assets/images/album_covers/19.png b/assets/images/album_covers/19.png
diff --git a/assets/images/album_covers/20.png b/assets/images/album_covers/20.png
diff --git a/assets/images/album_covers/21.png b/assets/images/album_covers/21.png
diff --git a/assets/images/blurred_backgrounds/blur_bg_1.jpg b/assets/images/blurred_backgrounds/blur_bg_1.jpg
diff --git a/assets/images/blurred_backgrounds/blur_bg_2.jpg b/assets/images/blurred_backgrounds/blur_bg_2.jpg
diff --git a/assets/images/blurred_backgrounds/blur_bg_3.jpg b/assets/images/blurred_backgrounds/blur_bg_3.jpg
diff --git a/collection.html b/collection.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Bloc Jams</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
+        <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+        <link rel="stylesheet" type="text/css" href="styles/normalize.css">
+        <link rel="stylesheet" type="text/css" href="styles/main.css">
+        <link rel="stylesheet" type="text/css" href="styles/collection.css">
+    </head>
+    <body class="collection">
+        <nav class="navbar">
+            <a href="index.html" class="logo">
+                <img src="assets/images/bloc_jams_logo.png" alt="bloc jams logo">
+            </a>
+            <div class="links-container">
+                <a href="collection.html" class="navbar-link">Collection</a>
+            </div>
+        </nav>
+
+        <section class="album-covers container clearfix">
+            <div class="collection-album-container column fourth">
+                <img src="assets/images/album_covers/01.png"/>
+                <div class="collection-album-info caption">
+                    <p>
+                        <a class="album-name" href="#">The Colors</a>
+                        <br/>
+                        <a href="#">Pablo Picasso</a>
+                        <br/>
+                        X songs
+                        <br/>
+                    </p>
+                </div>
+            </div>
+            <div class="collection-album-container column fourth">
+                <img src="assets/images/album_covers/01.png"/>
+                <div class="collection-album-info caption">
+                    <p>
+                        <a class="album-name" href="#">The Colors</a>
+                        <br/>
+                        <a href="#">Pablo Picasso</a>
+                        <br/>
+                        X songs
+                        <br/>
+                    </p>
+                </div>
+            </div>
+            <div class="collection-album-container column fourth">
+                <img src="assets/images/album_covers/01.png"/>
+                <div class="collection-album-info caption">
+                    <p>
+                        <a class="album-name" href="#">The Colors</a>
+                        <br/>
+                        <a href="#">Pablo Picasso</a>
+                        <br/>
+                        X songs
+                        <br/>
+                    </p>
+                </div>
+            </div>
+            <div class="collection-album-container column fourth">
+                <img src="assets/images/album_covers/01.png"/>
+                <div class="collection-album-info caption">
+                    <p>
+                        <a class="album-name" href="#">The Colors</a>
+                        <br/>
+                        <a href="#">Pablo Picasso</a>
+                        <br/>
+                        X songs
+                        <br/>
+                    </p>
+                </div>
+            </div>  
+        </section>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -11,7 +11,12 @@
     </head>
     <body class="landing">
         <nav class="navbar">
-            <img src="assets/images/bloc_jams_logo.png" alt="bloc jams logo" class="logo">
+            <a href="index.html" class="logo">
+                <img src="assets/images/bloc_jams_logo.png" alt="bloc jams logo">
+            </a>
+            <div class="links-container">
+                <a href="collection.html" class="navbar-link">Collection</a>
+            </div>
         </nav>
 
         <section class="hero-content">

diff --git a/styles/collection.css b/styles/collection.css
@@ -0,0 +1,39 @@
+body.collection {
+    background-image: url(../assets/images/blurred_backgrounds/blur_bg_2.jpg);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center center;
+    background-size: cover;
+}
+
+.album-covers {
+    position: relative;
+}
+
+.collection-album-container {
+    position: relative;
+    margin-top: 30px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.collection-album-container .caption {
+    margin-top: 10px;
+}
+.collection-album-container .caption p {
+    font-size: 1rem;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.collection-album-container .caption p a {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.collection-album-container .caption p a.album-name {
+    color: white;
+}
+
+.collection-album-container img {
+    width: 80%;
+}
diff --git a/styles/main.css b/styles/main.css
@@ -15,13 +15,46 @@ body {
 }
 
 .navbar {
+    position: relative;
     padding: 0.5rem;
-    background-color: rgb(101,18,95);
+    background-color: rgba(101,18,95,0.5);
+    z-index: 1;
 }
 
 .navbar .logo {
     position: relative;
     left: 2rem;
+    cursor: pointer;
+}
+
+.navbar .links-container {
+    display: table;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100px;
+    color: white;
+    text-decoration: none;
+}
+
+.links-container .navbar-link {
+    display: table-cell;
+    position: relative;
+    height: 100%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    vertical-align: middle;
+    color: white;
+    font-size: 0.625rem;
+    letter-spacing: 0.05rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.links-container .navbar-link:hover {
+    color: rgb(233,50,117);
 }
 
 .container {