Sample webpage is well on its way.

Check out ListingBootstrap.html to see how we've worked with Bootstrap so far.
arc12012 · Nov 9, 2016 · fd75590 · fd75590
1 parent 9b32b76
commit fd75590
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 128 deletions.
diff --git a/html/ListingBootstrap.html b/html/ListingBootstrap.html
@@ -0,0 +1,88 @@
+<html lang="en"><head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Synchrony Financial</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+      <style>body { padding-top: 80px; }</style>
+      <style>
+    table {
+      border-collapse: collapse;
+    }
+    tr:nth-child(even) {background-color: #f2f2f2}
+    th, td {
+      text-align: center;
+      width: 100px;
+    }
+  </style>
+      </head>
+
+  <body>
+
+    <nav class="navbar navbar-inverse navbar-fixed-top" style = "height: 80px;">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="line-height: 48px;">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#"><img src="imgs/synchrony-financial-logo-dlpx.png"></a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;">
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="#" style="line-height: 48px;">Home</a></li>
+            <li><a href="#" style="line-height: 48px;">Request Device</a></li>
+            <li><a href="#" style="line-height: 48px;">Return Device</a></li>
+            <li><a href="#" style="line-height: 48px;">Device Listing</a></li>
+            <li><a href="#" style="line-height: 48px;">User Information</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <div class="col-sm-3 col-md-2 sidebar" style = "display: inline-block; border-right-style: solid; height: 100%; width: 200px;">
+          <ul class="nav nav-sidebar" style = "padding: 0px;">
+            <h4>Device Options</h4>
+            <li><a href="#">Phones</a></li>
+            <li><a href="#">Tablets</a></li>
+            <li><a href="#">PCs</a></li>
+          </ul>
+          <br>
+          <ul class="nav nav-sidebar" style = "padding: 0px;">
+            <h4>Operating Systems</h4>
+            <li><a href="#">Linux</a></li>
+            <li><a href="#">Windows</a></li>
+            <li><a href="#">OSX</a></li>
+          </ul>
+    </div>
+
+    <div style = "display: inline-block; position: absolute; padding-left: 30px;">
+        <h2>Available Devices</h2>
+        <div style="border: solid; border-width: thin; padding: 15px;">
+          <div style = "display: inline-block; text-align: center;">
+          <img src="imgs/iphone.png" style="display: block; height: 20%;">
+          George
+          </div>
+          <div style="display: inline-block; width: 200px; text-align: center; vertical-align: center;"><p>George is probably the coolest iPhone to exist. Ever. Point blank, period.</p><button type="button" style="display: block; margin: auto;">Order device</button>
+          </div>          
+        </div>
+        <br>
+        <div style="border: solid; border-width: thin; padding: 15px;">
+          <div style = "display: inline-block; text-align: center;">
+          <img src="imgs/ipad.png" style="display: block; height: 20%;">
+          Linkin Park
+          </div>
+          <div style="display: inline-block; width: 200px; text-align: center; vertical-align: center;"><p>"The hardest part of ending is starting again."</p><button type="button" style="display: block; margin: auto;">Order device</button>
+          </div>          
+        </div>
+    </div>
+</body>
+</html>
diff --git a/html/header.html b/html/header.html
diff --git a/html/imgs/ipad.png b/html/imgs/ipad.png
diff --git a/html/imgs/iphone.png b/html/imgs/iphone.png
diff --git a/html/synchrony-financial-logo-dlpx.png → html/imgs/synchrony-financial-logo-dlpx.png b/html/synchrony-financial-logo-dlpx.png → html/imgs/synchrony-financial-logo-dlpx.png
diff --git a/html/user_icon.png → html/imgs/user_icon.png b/html/user_icon.png → html/imgs/user_icon.png
diff --git a/html/orderPage.html b/html/orderPage.html