add instructions, hide end images

tscotn · tscotn · commit 5a4a7b0d2c7e · 2020-07-05T18:11:37.000-06:00
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -9,27 +9,27 @@ main {
     margin-top: 100px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    padding: 50px;
+    padding: 46px;
     justify-items: center;
     grid-gap: 30px 0px;
     background-color: #99ccff;
 }
 
 header {
-    display: flex;
+/*    display: flex;*/
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: 100px;
-    line-height: 50px;
+    line-height: 20px;
     background-color: #75a3a3;
     align-items: center;
     justify-content: center;
     border: 3px solid #47476b;
 }
 
-h1 {
+h1, p {
     color: #47476b;
     text-align: center;
 }
@@ -38,36 +38,22 @@ h1 {
     border: 3px solid #47476b;
 }
 
-header * {
-    display: inline;
-    height: 50px;
-}
-
-header ul {
-    padding: 0;
-}
-
-header li {
-    margin-left: 20px;
-}
-
 section {
 /*    float: left; this makes the sections line up left to right*/
-    float: left;
-    height: 80vh;
+  float: left;
+  height: 80vh;
 /*    margin-right: 150px; this adds a margin on the right*/
-    padding-left: 2px;
-    padding-top: 2px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  padding-left: 2px;
+  padding-top: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 /*    text-align: center;*/
-
-    background-size: cover;
-    background-position: center top;
-    background-color: #c6c3cc;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
+  background-size: cover;
+  background-position: center top;
+  background-color: #c6c3cc;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
 }
 
 footer {
@@ -98,16 +84,10 @@ div#sink figure {
   margin: 0;
 }
 
-div#sink figure > img {
-  position: relative;
-  width: 100%;
-}
-
 div#sink figure div {
   background-image: url('/Users/scot/Desktop/GitHub/architecture_visualizer/assets/images/sink_after.jpg');
   background-size: cover;
   position: absolute;
-  width: 100%;
   box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
   overflow: hidden;
   bottom: 0;
@@ -134,16 +114,10 @@ div#island figure {
   margin: 0;
 }
 
-div#island figure > img {
-  position: relative;
-  width: 100%;
-}
-
 div#island figure div {
   background-image: url('/Users/scot/Desktop/GitHub/architecture_visualizer/assets/images/floor_after.jpg');
   background-size: cover;
   position: absolute;
-  width: 100%;
   box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
   overflow: hidden;
   bottom: 0;
@@ -170,16 +144,10 @@ div#oven figure {
   margin: 0;
 }
 
-div#oven figure > img {
-  position: relative;
-  width: 100%;
-}
-
 div#oven figure div {
   background-image: url('/Users/scot/Desktop/GitHub/architecture_visualizer/assets/images/oven_after.jpg');
   background-size: cover;
   position: absolute;
-  width: 100%;
   box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
   overflow: hidden;
   bottom: 0;
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
 <body>
   <header>
     <h1>Kitchen Prototype</h1>
+    <p>Slide the buttons to the right to see your kitchen transformation!</p>
   </header>
     
 <main>
@@ -36,7 +37,7 @@ <h1>Kitchen Prototype</h1>
     </figure>
     <input type="range" min="0" max="100" value="0" id="oven_slider" oninput="moveOven_Divisor()">
   </div>
-
+  
 </main>
 <!--js scripts containing slider functions-->
   <script src="./js/scripts.js"></script>
