Home Explore Help
Sign In
fgm
/
front__coursera-responsive-design
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

Album, photos, and single photo pages.

Frederic G. MARAND 9 years ago
parent
5d2442b64d
commit
1240d352d6
5 changed files with 177 additions and 4 deletions
Split View Show Diff Stats
  1. 53 0
      albums.html
  2. 12 0
      css/styles.css
  3. 6 4
      index.html
  4. 50 0
      photo1.html
  5. 56 0
      photos.html

+ 53 - 0
albums.html
View File 

@@ -0,0 +1,53 @@
 
+<!DOCTYPE html>
 
+<html lang="en"> 
+  <head>
 
+   <title></title>
 
+
 
+    <link href="css/bootstrap.css" rel="stylesheet" /> <!-- pulls in the main bootstrap content we need -->
 
+    <link href="css/styles.css" rel="stylesheet" />
 
+    
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
+    <!--[if lt IE 9]>
 
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
+    <![endif]-->
 
+
 
+  </head>
 
+  
+  <body>
 
+    <nav class="navbar navbar-default">
 
+      <div class="container-fluid">
 
+        <!-- collapsed navbar -->
 
+        <div class="navbar-header">
 
+          <button type="button"
 
+            class="navbar-toggle collapsed"
 
+            data-toggle="collapse"
 
+            data-target="#main_navbar"
 
+            aria-expanded="false">open!</button>
 
+        </div><!-- /collapsed navbar -->
 
+
 
+        <!-- uncollapsed navbar -->
 
+        <div id="main_navbar" class="collapse navbar-collapse">
 
+          <ul class="nav navbar-nav">
 
+            <li class="active"><a href="index.html">Home</a></li>
 
+            <li><a href="albums.html">Albums</a></li>
 
+            <li><a href="photos.html">All photos</a></li>
 
+          </ul>
 
+        </div><!-- /uncollapsed navbar -->
 
+      </div>
 
+    </nav>
 
+
 
+    <div class="container">
 
+      <h1>Here are my albums</h1>
 
+
 
+      <a href="photos.html"><img class="album_cover" src="images/img_1.jpg" alt="Graffiti cover image" /></a>
 
+      <a href="photos.html"><img class="album_cover" src="images/img_2.jpg" alt="Full english breakfast" /></a>
 
+      <a href="photos.html"><img class="album_cover" src="images/img_3.jpg" alt="Racks of cheese!" /></a>
 
+    </div>
 
+  
+    <script src="js/jquery.min.js"></script> <!-- jquery libraries -->
 
+    <script src="js/bootstrap.min.js"></script> <!-- bootsrap libraries -->
 
+
 
+  </body>
 
+</html>

+ 12 - 0
css/styles.css
View File 

@@ -0,0 +1,12 @@
 
+.album_cover {
 
+  border: 20px solid gray;
 
+  width: 25%;
 
+}
 
+
 
+.photo_list {
 
+  width: 25%;
 
+}
 
+
 
+.single_photo {
 
+  width: 75%;
 
+}

+ 6 - 4
index.html
View File 

@@ -3,8 +3,9 @@
 
   <head>
 
    <title></title>
 
 
-    <link href="css/bootstrap.css" rel="stylesheet"> <!-- pulls in the main bootstrap content we need -->
 
-    
+    <link href="css/bootstrap.css" rel="stylesheet" /> <!-- pulls in the main bootstrap content we need -->
 
+    <link href="css/styles.css" rel="stylesheet" />
 
+
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
     <!--[if lt IE 9]>
 
@@ -29,8 +30,9 @@
 
         <!-- uncollapsed navbar -->
 
         <div id="main_navbar" class="collapse navbar-collapse">
 
           <ul class="nav navbar-nav">
 
-            <li class="active"><a href="#">Home</a></li>
 
-            <li><a href="#">My photos</a></li>
 
+            <li class="active"><a href="index.html">Home</a></li>
 
+            <li><a href="albums.html">Albums</a></li>
 
+            <li><a href="photos.html">All photos</a></li>
 
           </ul>
 
         </div><!-- /uncollapsed navbar -->
 
       </div>

+ 50 - 0
photo1.html
View File 

@@ -0,0 +1,50 @@
 
+<!DOCTYPE html>
 
+<html lang="en"> 
+  <head>
 
+   <title></title>
 
+
 
+    <link href="css/bootstrap.css" rel="stylesheet" /> <!-- pulls in the main bootstrap content we need -->
 
+    <link href="css/styles.css" rel="stylesheet" />
 
+    
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
+    <!--[if lt IE 9]>
 
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
+    <![endif]-->
 
+
 
+  </head>
 
+  
+  <body>
 
+    <nav class="navbar navbar-default">
 
+      <div class="container-fluid">
 
+        <!-- collapsed navbar -->
 
+        <div class="navbar-header">
 
+          <button type="button"
 
+            class="navbar-toggle collapsed"
 
+            data-toggle="collapse"
 
+            data-target="#main_navbar"
 
+            aria-expanded="false">open!</button>
 
+        </div><!-- /collapsed navbar -->
 
+
 
+        <!-- uncollapsed navbar -->
 
+        <div id="main_navbar" class="collapse navbar-collapse">
 
+          <ul class="nav navbar-nav">
 
+            <li class="active"><a href="index.html">Home</a></li>
 
+            <li><a href="albums.html">Albums</a></li>
 
+            <li><a href="photos.html">All photos</a></li>
 
+          </ul>
 
+        </div><!-- /uncollapsed navbar -->
 
+      </div>
 
+    </nav>
 
+
 
+    <div class="container">
 
+      <h1>Some graffiti I found</h1>
 
+      <img src="images/img_1.jpg" alt="Some graffiti" class="single_photo" />
 
+    </div>
 
+  
+    <script src="js/jquery.min.js"></script> <!-- jquery libraries -->
 
+    <script src="js/bootstrap.min.js"></script> <!-- bootsrap libraries -->
 
+
 
+  </body>
 
+</html>

+ 56 - 0
photos.html
View File 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en"> 
+  <head>
 
+   <title></title>
 
+
 
+    <link href="css/bootstrap.css" rel="stylesheet" /> <!-- pulls in the main bootstrap content we need -->
 
+    <link href="css/styles.css" rel="stylesheet" />
 
+
 
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
+    <!--[if lt IE 9]>
 
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
+    <![endif]-->
 
+
 
+  </head>
 
+  
+  <body>
 
+    <nav class="navbar navbar-default">
 
+      <div class="container-fluid">
 
+        <!-- collapsed navbar -->
 
+        <div class="navbar-header">
 
+          <button type="button"
 
+            class="navbar-toggle collapsed"
 
+            data-toggle="collapse"
 
+            data-target="#main_navbar"
 
+            aria-expanded="false">open!</button>
 
+        </div><!-- /collapsed navbar -->
 
+
 
+        <!-- uncollapsed navbar -->
 
+        <div id="main_navbar" class="collapse navbar-collapse">
 
+          <ul class="nav navbar-nav">
 
+            <li class="active"><a href="index.html">Home</a></li>
 
+            <li><a href="albums.html">Albums</a></li>
 
+            <li><a href="photos.html">All photos</a></li>
 
+          </ul>
 
+        </div><!-- /uncollapsed navbar -->
 
+      </div>
 
+    </nav>
 
+
 
+    <div class="container">
 
+      <h1>Here are the photos</h1>
 
+
 
+      <a href="photo1.html"><img class="photo_list" src="images/img_1.jpg" alt="Graffiti cover image" /></a>
 
+      <a href="photo1.html"><img class="photo_list" src="images/img_2.jpg" alt="Graffiti cover image" /></a>
 
+      <a href="photo1.html"><img class="photo_list" src="images/img_3.jpg" alt="Graffiti cover image" /></a>
 
+      <a href="photo1.html"><img class="photo_list" src="images/img_4.jpg" alt="Graffiti cover image" /></a>
 
+      <a href="photo1.html"><img class="photo_list" src="images/img_5.jpg" alt="Graffiti cover image" /></a>
 
+
 
+    </div>
 
+  
+    <script src="js/jquery.min.js"></script> <!-- jquery libraries -->
 
+    <script src="js/bootstrap.min.js"></script> <!-- bootsrap libraries -->
 
+
 
+  </body>
 
+</html>