CUNYTechPrep · waiyanphyohein · Sep 8, 2017 · Sep 8, 2017 · Sep 8, 2017 · Sep 8, 2017
diff --git a/.gitignore → .gitignore.gitignore b/.gitignore → .gitignore.gitignore
diff --git a/css/bootstrap.css b/css/bootstrap.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/mdb.css b/css/mdb.css
diff --git a/css/mdb.min.css b/css/mdb.min.css
diff --git a/css/navbar-top-fixed.css b/css/navbar-top-fixed.css
@@ -0,0 +1,5 @@
+/* Show it is fixed to the top */
+body {
+    min-height: 75rem;
+    padding-top: 4.5rem;
+  }
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1 @@
+/* YOUR CUSTOM STYLES */
diff --git a/css/styles.css b/css/styles.css
@@ -1 +1,51 @@
+.thumbnail {
+    position: relative;
+}
+
+.caption {
+    position: absolute;
+    top: 45%;
+    left: 0;
+    width: 100%;
+}
+#contact_us
+{
+	background-color: lightblue;	
+}
+.row
+{
+	padding-bottom: 25px; 
+}
+button
+{
+	font-family: 'Times New Roman', Times, serif;
+	font-size: 15px;
+	background-color: RED;
+	color: White;
+}
+
+#banner 
+{
+	height: 600px;
+	background: url("../img/milkbg.jpg") no-repeat center #00f;
+	background-size: cover;
+	position: relative;
+}
+.jumbotron
+{
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translateY(-50%) translateX(-50%);
+	background-color: rgba(0,0,0,0.5);
+	color: #eee;
+}
+#New
+{
+	size: 15px;
+}
+.about_us
+{
+	background-color: gray;
+}
 
diff --git a/font/fa/FontAwesome.otf b/font/fa/FontAwesome.otf
diff --git a/font/fa/fontawesome-webfont.eot b/font/fa/fontawesome-webfont.eot
diff --git a/font/fa/fontawesome-webfont.svg b/font/fa/fontawesome-webfont.svg
diff --git a/font/fa/fontawesome-webfont.ttf b/font/fa/fontawesome-webfont.ttf
diff --git a/font/fa/fontawesome-webfont.woff b/font/fa/fontawesome-webfont.woff
diff --git a/font/fa/fontawesome-webfont.woff2 b/font/fa/fontawesome-webfont.woff2
diff --git a/font/roboto/Roboto-Bold.eot b/font/roboto/Roboto-Bold.eot
diff --git a/font/roboto/Roboto-Bold.ttf b/font/roboto/Roboto-Bold.ttf
diff --git a/font/roboto/Roboto-Bold.woff b/font/roboto/Roboto-Bold.woff
diff --git a/font/roboto/Roboto-Bold.woff2 b/font/roboto/Roboto-Bold.woff2
diff --git a/font/roboto/Roboto-Light.eot b/font/roboto/Roboto-Light.eot
diff --git a/font/roboto/Roboto-Light.ttf b/font/roboto/Roboto-Light.ttf
diff --git a/font/roboto/Roboto-Light.woff b/font/roboto/Roboto-Light.woff
diff --git a/font/roboto/Roboto-Light.woff2 b/font/roboto/Roboto-Light.woff2
diff --git a/font/roboto/Roboto-Medium.eot b/font/roboto/Roboto-Medium.eot
diff --git a/font/roboto/Roboto-Medium.ttf b/font/roboto/Roboto-Medium.ttf
diff --git a/font/roboto/Roboto-Medium.woff b/font/roboto/Roboto-Medium.woff
diff --git a/font/roboto/Roboto-Medium.woff2 b/font/roboto/Roboto-Medium.woff2
diff --git a/font/roboto/Roboto-Regular.eot b/font/roboto/Roboto-Regular.eot
diff --git a/font/roboto/Roboto-Regular.ttf b/font/roboto/Roboto-Regular.ttf
diff --git a/font/roboto/Roboto-Regular.woff b/font/roboto/Roboto-Regular.woff
diff --git a/font/roboto/Roboto-Regular.woff2 b/font/roboto/Roboto-Regular.woff2
diff --git a/font/roboto/Roboto-Thin.eot b/font/roboto/Roboto-Thin.eot
diff --git a/font/roboto/Roboto-Thin.ttf b/font/roboto/Roboto-Thin.ttf
diff --git a/font/roboto/Roboto-Thin.woff b/font/roboto/Roboto-Thin.woff
diff --git a/font/roboto/Roboto-Thin.woff2 b/font/roboto/Roboto-Thin.woff2
diff --git a/img/lightbox/default-skin.png b/img/lightbox/default-skin.png
diff --git a/img/lightbox/default-skin.svg b/img/lightbox/default-skin.svg
diff --git a/img/lightbox/preloader.gif b/img/lightbox/preloader.gif
diff --git a/img/new_red2.png b/img/new_red2.png
diff --git a/img/overlays/01.png b/img/overlays/01.png
diff --git a/img/overlays/02.png b/img/overlays/02.png
diff --git a/img/overlays/03.png b/img/overlays/03.png
diff --git a/img/overlays/04.png b/img/overlays/04.png
diff --git a/img/overlays/04.png~HEAD b/img/overlays/04.png~HEAD
diff --git a/img/overlays/04.png~ecacfc5c730e25dcad92fe8f4a80cba6c23a4b6b b/img/overlays/04.png~ecacfc5c730e25dcad92fe8f4a80cba6c23a4b6b
diff --git a/img/overlays/05.png b/img/overlays/05.png
diff --git a/img/overlays/06.png b/img/overlays/06.png
diff --git a/img/overlays/07.png b/img/overlays/07.png
diff --git a/img/overlays/08.png b/img/overlays/08.png
diff --git a/img/overlays/09.png b/img/overlays/09.png
diff --git a/img/svg/arrow_left.svg b/img/svg/arrow_left.svg
diff --git a/img/svg/arrow_right.svg b/img/svg/arrow_right.svg
diff --git a/index.html b/index.html
@@ -2,45 +2,145 @@
 <html>
 <head>
   <title>Cookie Store</title>
+  <!-- Latest compiled and minified CSS -->
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+<link rel="stylesheet" type="text/css" href="./css/styles.css">
+
 </head>
 <body>
+    <nav class="navbar navbar-inverse">
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <a class="navbar-brand" href="index.html">COOKIE STORE</a>
+          </div>
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1</a>      
+            </li>
+            <li><a href="#">Page 2</a></li>
+            <li><a href="#">Page 3</a></li>
+          </ul>
+        </div>
+      </nav>      
+
+<div class = "container-fluid">
+  <div class = "row" id = banner>
+    <div class = "jumbotron text-center center-block">
+    <h1 class =" text-center" >Cookie Store</h1>
+    <p class=" text-center">Buy our awesome cookies. All proceeds go to charity!</p>
+    </div>
+  </div>     
+<h2 class="text-center text-capitalize"><i>The Cookies</i> </h2>
 
 
-<h1>Cookie Store</h1>
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+<div class = "row text-center">
+<div class = "col-md-12 text-center">  
+
+ <hr class = "featurette-divider">
 
-<h2>The Cookies</h2>
+  <div class = "container">
+
+    <div class = "row featurette">
+
+      <div class = "col-sm-3 col-sm-push-6 center-block">
+        <h3>Thin Mint Cookies<button>NEW</button></h3>
+        <p>Tasty mint chocolate cookies</p>
+      </div>
+
+      <div class ="col-sm-4 col-sm-pull-2 center-block">  
+        <img class = "img-circle img-responsive center-block" src="img/mint.png">
+      </div> 
+
+    </div>
+
+  </div>
+  <hr class = "featurette-divider">
+
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+  <div class = "container"> 
+      <div class = "row featurette">
+
+        <div class = "col-sm-3 col-sm-push-1 center-block" >
+          <h3>Peanut Butter Cookies</h3>
+          <p>Yummy peanut buttery goodness!</p>
+        </div>
+
+        <div class ="col-sm-4 col-sm-push-3 center-block">
+          <img class = "img-circle img-responsive center-block" src="img/peanut.png">
+       </div> 
+
+      </div> 
+ </div>
 
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+  <hr class = "featurette-divider">
+
+  <div class = "container">      
+    <div class = "row featurette"> 
+        <div class = "col-sm-3 col-sm-push-6 center-block" >
+          <h3>Short Bread Cookies</h3>
+          <p>Santa's favorite classic.</p>
+        </div>
+        <div class = "col-sm-4 col-sm-pull-2 center-block">
+          <img class = "img-circle img-responsive center-block" src="img/shortbread.png">
+        </div>
+    </div>
+  </div>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
+  <hr class = "featurette-divider">
+
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+ <div class = "container">
+    <div class = "row featurette">
+
+        <div class = "col-sm-3 col-sm-push-1 center-block" >
+          <h3>Smore's Cookies</h3>
+          <p>Camp fire favorite!</p>
+        </div>
+
+        <div class = "col-sm-4 col-sm-push-3 center-block">
+          <img class = "img-circle img-responsive center-block"  src="img/smores.png">
+        </div>
 
-<h2>About us</h2>
-<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+    </div>
+ </div>
+  <hr class = "featurette-divider">
 
-<h2>Contact us</h2>
+
+
+<div class = "container-fluid about_us" >
+  <div class = "col-md-4"  >
+    <img src = "img/cmonster.png">
+  </div>
+
+  <div class = "col-md-8">
+    <h2 class="text-center">About us</h2>
+    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+  </div>
+</div>
 <div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
+  <div class = "row text-center" id = "contact_us">
+  <h2 class="text-center">Contact us</h2>
+  <div >
+    100 Broadway Avenue,<br>
+    New York, NY 10001 <br>
+    (212) 555-1234
+  </div>
+</div>
 </div>
 
 </body>