Update main.css

history website/main.css

@@ -76,7 +76,7 @@ p.cover1 {
     padding: 0;
     position: fixed;
     top: 0;
-    height: 50px;
+    height: 42px;
     width: 100%;
     border: 1px dotted blue;
     background-image: url(images/wallpaper2.jpg);
@@ -96,21 +96,22 @@ ul.header li {
   color: white;
   padding: 0;
   display: inline-block;
-  /*border: 2px solid pink; */
+  /* border: 2px solid pink; */
   text-shadow: 5px 3px black;
   margin-top: .75%;
+  font-size: 1em;
 }
 li.start{
   margin: 0;
   padding: 0;
-  margin-left: 20%;
+  margin-left: 18%;
-  margin-right: 3%;
+  margin-right: 2%;
 }
 li.end{
   margin: 0;
   padding: 0;
-  margin-left: 3%;
+  margin-left: 2%;
-  margin-right: 20%;
+  margin-right: 18%;
 }
 li.mid{
   margin: 0;
@@ -118,21 +119,18 @@ li.mid{
   margin-left: 3%;
   margin-right: 3%;
 }
-ul.header a:link {
-  color: white;
-  text-decoration: none;
-}
-ul.header a:visited {
-  color: white;
-  text-decoration: none;
-}
-ul.header a:active {
-  color: #473E3F;
-  text-decoration: none;
-}
-ul.header a:active {
 
+ul.header li a:hover {
+  color: rgb(111, 111, 116);
+  text-decoration: none;
+  text-shadow: 8px 5px black;
 }
+ul.header li a {
+  color: rgb(204, 218, 203);
+  text-decoration: none;
+}
+
+
 
 
 /*------intro of Mr.Sewell segment------*/
@@ -210,16 +208,17 @@ p.music1 {
 div.chapters {
   margin:0;
   padding:0;
-  height: 150%;
+  height: 160%;
   width: 100%;
   background-image: url(images/wallpaper3.jpg);
-  background-size: cover;
+  background-size: 100% 100%;
+  background-position: center;
   background-repeat: no-repeat;
   position: relative;
-  top: 0;
+  vertical-align: middle;
   z-index: 6;
   overflow: hidden;
-  bottom: 0;
+  opacity: .9;
 }
 ul.chapters {
   position: absolute;
@@ -230,16 +229,27 @@ ul.chapters {
   width: 100%;
   display:inline-block;
 }
+div.chapters1-3 {
+  margin: 0;
+  padding:0;
+  border: 2px solid black;
+  width: 100%;
+  height: 50%;
+  position: relative;
+}
+
+
 li.chapter1 {
   margin: 0;
   padding:0;
-  height: 450px;
+  height: 370px;
-  width: 300px;
+  width: 250px;
-  border: 2px solid red;
   position: absolute;
   display: inline-block;
   left: 10%;
-  top: 4%;
+  top: 20%;
+  background-image: url(images/chapter1.jpg);
+  background-size: contain;
 }
 li.chapter1:hover {
   box-shadow: inset -4.5px -3px 5px black;
@@ -248,64 +258,144 @@ li.chapter1:hover {
   border-width: 0px;
   opacity: .9;
   background-color: white;
-  height: 445px;
+  height: 360px;
-  width: 295px;
+  width: 240px;
 }
+
+
+
 li.chapter2 {
   margin: 0;
   padding:0;
-  height: 450px;
+  height: 370px;
-  width: 300px;
+  width: 250px;
-  border: 2px solid red;
   position: absolute;
   display:inline-block;
-  top: 4%;
+  top: 20%;
-  left: 40%;
+  left: 42%;
+  background-image: url(images/chapter2.jpg);
+  background-size: contain;
 }
+li.chapter2:hover {
+  box-shadow: inset -4.5px -3px 5px black;
+  border-color: black;
+  border-style: solid;
+  border-width: 0px;
+  opacity: .9;
+  background-color: white;
+  height: 360px;
+  width: 240px;
+}
+
+
+
 li.chapter3 {
   margin: 0;
   padding:0;
-  height: 450px;
+  height: 370px;
-  width: 300px;
+  width: 250px;
-  border: 2px solid red;
   position: absolute;
   display:inline-block;
-  top: 4%;
+  top: 20%;
   right: 10%;
 }
+li.chapter3:hover {
+  box-shadow: inset -4.5px -3px 5px black;
+  border-color: black;
+  border-style: solid;
+  border-width: 0px;
+  opacity: .9;
+  background-color: white;
+  height: 360px;
+  width: 240px;
+}
+
+
+
+
+
+
+
+div.chapters4-6 {
+    margin: 0;
+    padding:0;
+    border: 2px solid white;
+    width: 100%;
+    height: 50%;
+    position: relative;
+}
+
+
+
 li.chapter4 {
   margin: 0;
   padding:0;
-  height: 450px;
+  height: 370px;
-  width: 300px;
+  width: 250px;
-  border: 2px solid red;
   position: absolute;
   display: inline-block;
-  top: 63%;
+  top: 20%;
   left: 10%;
 }
+li.chapter4:hover {
+  box-shadow: inset -4.5px -3px 5px black;
+  border-color: black;
+  border-style: solid;
+  border-width: 0px;
+  opacity: .9;
+  background-color: white;
+  height: 360px;
+  width: 240px;
+}
+
+
+
+
 li.chapter5 {
   margin: 0;
   padding:0;
-  height: 450px;
+  height: 370px;
-  width: 300px;
+  width: 250px;
-  border: 2px solid red;
   position: absolute;
-  display:inline-block;
+  display: inline-block;
   left: 40%;
-  top: 63%;
+  top: 20%;
 }
+li.chapter5:hover {
+  box-shadow: inset -4.5px -3px 5px black;
+  border-color: black;
+  border-style: solid;
+  border-width: 0px;
+  opacity: .9;
+  background-color: white;
+  height: 360px;
+  width: 240px;
+}
+
+
+
+
 li.chapter6 {
   margin: 0;
   padding:0;
-  height: 450px;
+  height: 370px;
-  width: 300px;
+  width: 250px;
-  border: 2px solid red;
   position: absolute;
-  display:inline-block;
+  display: inline-block;
   right: 10%;
-  top: 63%;
+  top: 20%;
 }
+li.chapter6:hover {
+  box-shadow: inset -4.5px -3px 5px black;
+  border-color: black;
+  border-style: solid;
+  border-width: 0px;
+  opacity: .9;
+  background-color: white;
+  height: 360px;
+  width: 240px;
+}
+
 
 
 /*-------about-------*/
@@ -316,8 +406,10 @@ div.about {
   position: relative;
   height: 60%;
   width: 100%;
-  background-image: url(images/wallpaper5.jpg);
+  background-image: url(images/wallpaper6.jpg);
-  background-size: contain;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
   bottom: 0;
   overflow: hidden;
   top: 0;