diff --git a/history website/images/backLogo.png b/images/backLogo.png similarity index 100% rename from history website/images/backLogo.png rename to images/backLogo.png diff --git a/history website/images/chapter1.jpeg b/images/chapter1.jpeg similarity index 100% rename from history website/images/chapter1.jpeg rename to images/chapter1.jpeg diff --git a/history website/images/chapter1.jpg b/images/chapter1.jpg similarity index 100% rename from history website/images/chapter1.jpg rename to images/chapter1.jpg diff --git a/history website/images/chapter2.jpg b/images/chapter2.jpg similarity index 100% rename from history website/images/chapter2.jpg rename to images/chapter2.jpg diff --git a/history website/images/chapter3.jpg b/images/chapter3.jpg similarity index 100% rename from history website/images/chapter3.jpg rename to images/chapter3.jpg diff --git a/history website/images/chapter4.jpg b/images/chapter4.jpg similarity index 100% rename from history website/images/chapter4.jpg rename to images/chapter4.jpg diff --git a/history website/images/chapter5.jpg b/images/chapter5.jpg similarity index 100% rename from history website/images/chapter5.jpg rename to images/chapter5.jpg diff --git a/history website/images/cover.jpg b/images/cover.jpg similarity index 100% rename from history website/images/cover.jpg rename to images/cover.jpg diff --git a/history website/images/introbg.jpg b/images/introbg.jpg similarity index 100% rename from history website/images/introbg.jpg rename to images/introbg.jpg diff --git a/history website/images/joystick.png b/images/joystick.png similarity index 100% rename from history website/images/joystick.png rename to images/joystick.png diff --git a/history website/images/loader.gif b/images/loader.gif similarity index 100% rename from history website/images/loader.gif rename to images/loader.gif diff --git a/history website/images/mario.gif b/images/mario.gif similarity index 100% rename from history website/images/mario.gif rename to images/mario.gif diff --git a/history website/images/mushroom.gif b/images/mushroom.gif similarity index 100% rename from history website/images/mushroom.gif rename to images/mushroom.gif diff --git a/history website/images/music.mp3 b/images/music.mp3 similarity index 100% rename from history website/images/music.mp3 rename to images/music.mp3 diff --git a/history website/images/navbar.jpg b/images/navbar.jpg similarity index 100% rename from history website/images/navbar.jpg rename to images/navbar.jpg diff --git a/history website/images/wallpaper1.jpg b/images/wallpaper1.jpg similarity index 100% rename from history website/images/wallpaper1.jpg rename to images/wallpaper1.jpg diff --git a/history website/images/wallpaper2.jpg b/images/wallpaper2.jpg similarity index 100% rename from history website/images/wallpaper2.jpg rename to images/wallpaper2.jpg diff --git a/history website/images/wallpaper3.jpg b/images/wallpaper3.jpg similarity index 100% rename from history website/images/wallpaper3.jpg rename to images/wallpaper3.jpg diff --git a/history website/images/wallpaper4.jpg b/images/wallpaper4.jpg similarity index 100% rename from history website/images/wallpaper4.jpg rename to images/wallpaper4.jpg diff --git a/history website/images/wallpaper5.jpg b/images/wallpaper5.jpg similarity index 100% rename from history website/images/wallpaper5.jpg rename to images/wallpaper5.jpg diff --git a/history website/images/wallpaper6.jpg b/images/wallpaper6.jpg similarity index 100% rename from history website/images/wallpaper6.jpg rename to images/wallpaper6.jpg diff --git a/history website/images/wallpaper7.jpg b/images/wallpaper7.jpg similarity index 100% rename from history website/images/wallpaper7.jpg rename to images/wallpaper7.jpg diff --git a/history website/index.html b/index.html similarity index 98% rename from history website/index.html rename to index.html index f18e916..ba324f6 100644 --- a/history website/index.html +++ b/index.html @@ -1,117 +1,117 @@ - - - - - - The 80's - - - - - - -
-
- - -
- -
- - - -
- -
-

"We can't help everyone, but everyone can help someone."
-Ronald Reagan

- -
-
- - - - - - -
-
-

- Back to the Future? -

-Dr. Emmett Brown: Then tell me, future boy, who's President of the United States in 1985? -

-Marty McFly: Ronald Reagan. -

-Dr. Emmett Brown: Ronald Reagan? The actor? [chuckles in disbelief] Then who's vice president? Jerry Lewis?
-

-The iconic 1985 film Back to the Future, has fun with a little liberal political commentary, when the hero of the film Marty McFly goes back to the 1950s and talks to the scientist, Dr. Brown, who will one day invent the time machine that makes this encounter possible. Although few, other than aging baby boomers, know who Jerry Lewis is, everybody knows Ronald Reagan: for good or bad, arguably the most influential President of the last half century. It was a shock to the liberals of the 1960s, no doubt including these liberal media film makers, that Reagan would be elected in the first place and worse that it would signal a shift to the Right that still dominates the politics of 2016. -

-But the Eighties were not just about political change. The decade is perhaps even better remembered for its economic, social, cultural, and technological shifts. The perceived prosperity of the 1980s (compared to the stagflation of the 1970s) was not all due to Reaganomics, but stabilization of oil prices, new industries, and the rise of “Yuppies” (Young Urban Professionals). New immigration of Latinos, Middle Easterners, South and East Asians, many as refugees, began to create real diversity in American society. Urban areas continued to be plagued by crime and drugs, but some progress was made as minorities began to gain more influence. America’s favorite T.V. dad was a black man, the now controversial Bill Cosby. Personal computers first began to change business and the lives of increasing numbers of Americans with arrival of Apple and the Mac, Microsoft, and the rise of Nintendo and other computer games. It was a memorable era for wild colors, goofy fashion trends, Punk, Rap, New Wave, Madonna and Michael Jackson, and movies like the Terminator, E.T., and the Indiana Jones and Star Wars trilogies -

-This year we had little time to select a theme, so we followed last year’s look at the 1970s with our attempt to analyze the 1980s. We quickly formed a talented team of seven volunteer editors to organize our project on our tight time schedule. The forty remaining members of my two APUS History classes had to pick topics created from a list put together by the editors and myself. They then had to find a serious contemporary historical work on the topic, read it in about a week, and write an expanded summary and analysis of the work, of about eight pages with endnotes. Three rounds of editing followed and the final papers were sent digitally to the editors who had been diligently designing the look of the book and its structure, and now had to put it all together. It is a completely student created book that is a tribute to my student authors and the extraordinarily talented editors, led by the indefatigable and patient, Brian Zhou. -

-The irony of the Eighties is that it is seen as a time of going Back to conservatism, traditional values, and smaller government, yet the technological and sociological changes and the end of the Cold War were taking us to the Future more progressive than the supposedly liberal 1960s. Perhaps Dr. Brown was more accurate than he knew about the unpredictability of the future when he said Roads? Where we're going, we don't need roads. -

-Steve Sewell, 5/30/2016 -

- -
-
- - - - - -
- - - - -
-
- - - - - - -
- -
-
- - - -
- -
-
- - - - - - + + + + + + The 80's + + + + + + +
+
+ + +
+ +
+ + + +
+ +
+

"We can't help everyone, but everyone can help someone."
-Ronald Reagan

+ +
+
+ + + + + + +
+
+

+ Back to the Future? +

+Dr. Emmett Brown: Then tell me, future boy, who's President of the United States in 1985? +

+Marty McFly: Ronald Reagan. +

+Dr. Emmett Brown: Ronald Reagan? The actor? [chuckles in disbelief] Then who's vice president? Jerry Lewis?
+

+The iconic 1985 film Back to the Future, has fun with a little liberal political commentary, when the hero of the film Marty McFly goes back to the 1950s and talks to the scientist, Dr. Brown, who will one day invent the time machine that makes this encounter possible. Although few, other than aging baby boomers, know who Jerry Lewis is, everybody knows Ronald Reagan: for good or bad, arguably the most influential President of the last half century. It was a shock to the liberals of the 1960s, no doubt including these liberal media film makers, that Reagan would be elected in the first place and worse that it would signal a shift to the Right that still dominates the politics of 2016. +

+But the Eighties were not just about political change. The decade is perhaps even better remembered for its economic, social, cultural, and technological shifts. The perceived prosperity of the 1980s (compared to the stagflation of the 1970s) was not all due to Reaganomics, but stabilization of oil prices, new industries, and the rise of “Yuppies” (Young Urban Professionals). New immigration of Latinos, Middle Easterners, South and East Asians, many as refugees, began to create real diversity in American society. Urban areas continued to be plagued by crime and drugs, but some progress was made as minorities began to gain more influence. America’s favorite T.V. dad was a black man, the now controversial Bill Cosby. Personal computers first began to change business and the lives of increasing numbers of Americans with arrival of Apple and the Mac, Microsoft, and the rise of Nintendo and other computer games. It was a memorable era for wild colors, goofy fashion trends, Punk, Rap, New Wave, Madonna and Michael Jackson, and movies like the Terminator, E.T., and the Indiana Jones and Star Wars trilogies +

+This year we had little time to select a theme, so we followed last year’s look at the 1970s with our attempt to analyze the 1980s. We quickly formed a talented team of seven volunteer editors to organize our project on our tight time schedule. The forty remaining members of my two APUS History classes had to pick topics created from a list put together by the editors and myself. They then had to find a serious contemporary historical work on the topic, read it in about a week, and write an expanded summary and analysis of the work, of about eight pages with endnotes. Three rounds of editing followed and the final papers were sent digitally to the editors who had been diligently designing the look of the book and its structure, and now had to put it all together. It is a completely student created book that is a tribute to my student authors and the extraordinarily talented editors, led by the indefatigable and patient, Brian Zhou. +

+The irony of the Eighties is that it is seen as a time of going Back to conservatism, traditional values, and smaller government, yet the technological and sociological changes and the end of the Cold War were taking us to the Future more progressive than the supposedly liberal 1960s. Perhaps Dr. Brown was more accurate than he knew about the unpredictability of the future when he said Roads? Where we're going, we don't need roads. +

+Steve Sewell, 5/30/2016 +

+ +
+
+ + + + + +
+ + + + +
+
+ + + + + + +
+ +
+
+ + + +
+ +
+
+ + + + + + diff --git a/history website/jquery-1.12.3.min.js b/jquery-1.12.3.min.js similarity index 100% rename from history website/jquery-1.12.3.min.js rename to jquery-1.12.3.min.js diff --git a/history website/main.css b/main.css similarity index 94% rename from history website/main.css rename to main.css index 99ca180..fb79c47 100644 --- a/history website/main.css +++ b/main.css @@ -1,435 +1,435 @@ -html { - margin: 0; - padding: 0; - width: 100%; - height: 100%; -} -body { - margin:0; - padding: 0; - height: 100%; - width: 100%; - font-family: 'Press Start 2P', cursive; - background-color: rgb(7, 81, 119); - background-position: top left; - min-width: 950px; -} - -::-webkit-scrollbar { - width: 12px; -} - -::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px black; - border-radius: 10px; -} - -::-webkit-scrollbar-thumb { - border-radius: 10px; - -webkit-box-shadow: inset 0 0 6px black; -} -/*-------loading game page-----*/ -div.loader { - background-color: black; - height: 100%; - width: 100%; - position: fixed; - z-index: 1001; - background-image: url(images/loader.gif); - background-repeat: no-repeat; - background-position: 100% 100%; -} - - -/*------Cover/Title------*/ -div.cover { - margin: 0; - padding: 0; - height: 100%; - width: 100%; - position: relative; - background-color: white; - background-image: url(images/cover.jpg); - background-repeat: no-repeat; - background-size: 45% 135%; - background-position: 10%; - background-color: #080a0a; - overflow: hidden; - min-width: 950px; -} - -p.cover1 { - margin: 0; - padding: 0; - right: 5%; - bottom: 30px; - text-align: right; - height: 200px; - position: absolute; - width: 650px; - /* border: 1px solid red; */<-------border of title/quotes place - font-weight: normal; - color: rgb(222, 88, 22); - font-size: 40px; - font-family: 'Raleway', sans-serif; -} - -div.cover2 { - background-image: url(images/backLogo.png); - background-repeat: no-repeat; - background-size: contain; - height: 450px; - margin-top: 30px; - width: 650px; - position: absolute; - right: 5%; - /* border: 2px solid red; */ -} - -/* nav Bar */ -.header { - margin: 0; - padding: 0; - position: fixed; - top: 0; - height: 40px; - width: 100%; - border: 1px dotted blue; - background-image: url(images/wallpaper2.jpg); - background-size: cover; - border-bottom-right-radius: 15px; - border-bottom-left-radius: 15px; - z-index: 1000; - opacity: .9; - font-family: 'Raleway', sans-serif; - overflow: hidden; - min-width: 950px; -} - -ul.header { - border: 2px solid black; - margin: 0px auto; - position: static; -} -ul.header li { - text-align: center; - color: white; - padding: 0; - display: inline-block; - /* border: 2px solid pink; */ - text-shadow: 5px 3px black; - font-size: 20px; - position: static; -} -li.start{ - margin: 0; - padding: 0; - margin-left: 25%; - margin-right: 2%; -} -li.end{ - margin: 0; - padding: 0; - margin-left: 2%; - margin-right: 20%; -} -li.mid{ - margin: 0; - padding: 0; - margin-left: 3%; - margin-right: 3%; -} - -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------*/ -div.intro { - margin: 0; - padding: 0; - height: auto; - width: 100%; - position: relative; - background-image: url(images/wallpaper1.jpg); - background-size: cover; - background-repeat: no-repeat; - z-index: 1; - overflow: hidden; -} -div.introcanvas { - margin: 10px 0px; - padding: 0; - position: absolute; - height: 100%; - width: 100%; - background-color: black; - opacity: .75; -} -p.intro{ - margin: 20px 0; - padding: 0; - left: 0; - position: relative; - height: auto; - width: 100%; - color: white; - font-family: rockwell; - font-size: 1.15em; - text-align: center; -} - - - -/*---------music section-----*/ - - -div.music { - margin:0; - padding: 0; - height: 40%; - position: relative; - background-position: center; - width: 100%; - background-image: url(images/wallpaper2.jpg); - background-repeat: no-repeat; - overflow: hidden; - background-attachment: fixed; - background-size: cover; -} - - -audio { - position: absolute; - top: 0; - left: 20px; -} - - -/*--------Chapters---------*/ - - - -div.chapters { - margin:0; - padding:0; - height: 1000px; - width: 100%; - background-image: url(images/wallpaper3.jpg); - background-size: cover; - background-repeat: no-repeat; - position: relative; - vertical-align: middle; - z-index: 6; - overflow: hidden; -} -ul.chapters { - position: absolute; - margin: 0; - padding: 0; - height: 100%; - /* border: 2px solid black; */ - width: 100%; - display: inline-block; -} -div.chapters1-3 { - margin: 0; - padding:0; - /* border: 2px solid black; */ - width: 100%; - height: 500px; - position: relative; -} - - -li.chapter1 { - margin: 0; - padding:0; - height: 370px; - width: 250px; - position: absolute; - display: inline-block; - left: 10%; - top: 20%; - background-image: url(images/chapter1.jpeg); - background-size: 100% 100%; - background-repeat: no-repeat; - border: 2px solid white; -} -li.chapter1: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.chapter2 { - margin: 0; - padding:0; - height: 370px; - width: 250px; - position: absolute; - display:inline-block; - top: 20%; - left: 42%; - background-image: url(images/chapter2.jpg); - background-size: 100% 100%; - background-repeat: no-repeat; - border: 2px solid white; -} -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: 370px; - width: 250px; - position: absolute; - display:inline-block; - top: 20%; - right: 10%; - background-image: url(images/chapter3.jpg); - background-size: 100% 100%; - background-repeat: no-repeat; - border: 2px solid white; -} -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-5 { - margin: 0; - padding:0; - /* border: 2px solid white; */ - width: 100%; - height: 500px; - position: relative; -} - - - -li.chapter4 { - margin: 0; - padding:0; - height: 370px; - width: 250px; - position: absolute; - display: inline-block; - top: 20%; - left: 25%; - background-image: url(images/chapter4.jpg); - background-size: 100% 100%; - background-repeat: no-repeat; - border: 2px solid white; -} -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: 370px; - width: 250px; - position: absolute; - display: inline-block; - left: 60%; - top: 20%; - background-image: url(images/chapter5.jpg); - background-size: 100% 100%; - background-repeat: no-repeat; - border: 2px solid white; -} -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; -} - - - - - - -/*-------about-------*/ - -div.about { - margin: 0; - padding: 0; - height: 350px; - width: 100%; - position: relative; - background-image: url(images/wallpaper7.jpg); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - overflow: hidden; - background-attachment: fixed; -} - -button { - background-color: rgb(14, 115, 189); - color: white; - font-family: 'Raleway', sans-serif; - border-radius: 15px; - font-weight: bold; - height: 30px; - position: absolute; - left: 45%; - top: 60%; - -} +html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} +body { + margin:0; + padding: 0; + height: 100%; + width: 100%; + font-family: 'Press Start 2P', cursive; + background-color: rgb(7, 81, 119); + background-position: top left; + min-width: 950px; +} + +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px black; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px black; +} +/*-------loading game page-----*/ +div.loader { + background-color: black; + height: 100%; + width: 100%; + position: fixed; + z-index: 1001; + background-image: url(images/loader.gif); + background-repeat: no-repeat; + background-position: 100% 100%; +} + + +/*------Cover/Title------*/ +div.cover { + margin: 0; + padding: 0; + height: 100%; + width: 100%; + position: relative; + background-color: white; + background-image: url(images/cover.jpg); + background-repeat: no-repeat; + background-size: 45% 135%; + background-position: 10%; + background-color: #080a0a; + overflow: hidden; + min-width: 950px; +} + +p.cover1 { + margin: 0; + padding: 0; + right: 5%; + bottom: 30px; + text-align: right; + height: 200px; + position: absolute; + width: 650px; + /* border: 1px solid red; */<-------border of title/quotes place + font-weight: normal; + color: rgb(222, 88, 22); + font-size: 40px; + font-family: 'Raleway', sans-serif; +} + +div.cover2 { + background-image: url(images/backLogo.png); + background-repeat: no-repeat; + background-size: contain; + height: 450px; + margin-top: 30px; + width: 650px; + position: absolute; + right: 5%; + /* border: 2px solid red; */ +} + +/* nav Bar */ +.header { + margin: 0; + padding: 0; + position: fixed; + top: 0; + height: 40px; + width: 100%; + border: 1px dotted blue; + background-image: url(images/wallpaper2.jpg); + background-size: cover; + border-bottom-right-radius: 15px; + border-bottom-left-radius: 15px; + z-index: 1000; + opacity: .9; + font-family: 'Raleway', sans-serif; + overflow: hidden; + min-width: 950px; +} + +ul.header { + border: 2px solid black; + margin: 0px auto; + position: static; +} +ul.header li { + text-align: center; + color: white; + padding: 0; + display: inline-block; + /* border: 2px solid pink; */ + text-shadow: 5px 3px black; + font-size: 20px; + position: static; +} +li.start{ + margin: 0; + padding: 0; + margin-left: 25%; + margin-right: 2%; +} +li.end{ + margin: 0; + padding: 0; + margin-left: 2%; + margin-right: 20%; +} +li.mid{ + margin: 0; + padding: 0; + margin-left: 3%; + margin-right: 3%; +} + +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------*/ +div.intro { + margin: 0; + padding: 0; + height: auto; + width: 100%; + position: relative; + background-image: url(images/wallpaper1.jpg); + background-size: cover; + background-repeat: no-repeat; + z-index: 1; + overflow: hidden; +} +div.introcanvas { + margin: 10px 0px; + padding: 0; + position: absolute; + height: 100%; + width: 100%; + background-color: black; + opacity: .75; +} +p.intro{ + margin: 20px 0; + padding: 0; + left: 0; + position: relative; + height: auto; + width: 100%; + color: white; + font-family: rockwell; + font-size: 1.15em; + text-align: center; +} + + + +/*---------music section-----*/ + + +div.music { + margin:0; + padding: 0; + height: 40%; + position: relative; + background-position: center; + width: 100%; + background-image: url(images/wallpaper2.jpg); + background-repeat: no-repeat; + overflow: hidden; + background-attachment: fixed; + background-size: cover; +} + + +audio { + position: absolute; + top: 0; + left: 20px; +} + + +/*--------Chapters---------*/ + + + +div.chapters { + margin:0; + padding:0; + height: 1000px; + width: 100%; + background-image: url(images/wallpaper3.jpg); + background-size: cover; + background-repeat: no-repeat; + position: relative; + vertical-align: middle; + z-index: 6; + overflow: hidden; +} +ul.chapters { + position: absolute; + margin: 0; + padding: 0; + height: 100%; + /* border: 2px solid black; */ + width: 100%; + display: inline-block; +} +div.chapters1-3 { + margin: 0; + padding:0; + /* border: 2px solid black; */ + width: 100%; + height: 500px; + position: relative; +} + + +li.chapter1 { + margin: 0; + padding:0; + height: 370px; + width: 250px; + position: absolute; + display: inline-block; + left: 10%; + top: 20%; + background-image: url(images/chapter1.jpeg); + background-size: 100% 100%; + background-repeat: no-repeat; + border: 2px solid white; +} +li.chapter1: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.chapter2 { + margin: 0; + padding:0; + height: 370px; + width: 250px; + position: absolute; + display:inline-block; + top: 20%; + left: 42%; + background-image: url(images/chapter2.jpg); + background-size: 100% 100%; + background-repeat: no-repeat; + border: 2px solid white; +} +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: 370px; + width: 250px; + position: absolute; + display:inline-block; + top: 20%; + right: 10%; + background-image: url(images/chapter3.jpg); + background-size: 100% 100%; + background-repeat: no-repeat; + border: 2px solid white; +} +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-5 { + margin: 0; + padding:0; + /* border: 2px solid white; */ + width: 100%; + height: 500px; + position: relative; +} + + + +li.chapter4 { + margin: 0; + padding:0; + height: 370px; + width: 250px; + position: absolute; + display: inline-block; + top: 20%; + left: 25%; + background-image: url(images/chapter4.jpg); + background-size: 100% 100%; + background-repeat: no-repeat; + border: 2px solid white; +} +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: 370px; + width: 250px; + position: absolute; + display: inline-block; + left: 60%; + top: 20%; + background-image: url(images/chapter5.jpg); + background-size: 100% 100%; + background-repeat: no-repeat; + border: 2px solid white; +} +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; +} + + + + + + +/*-------about-------*/ + +div.about { + margin: 0; + padding: 0; + height: 350px; + width: 100%; + position: relative; + background-image: url(images/wallpaper7.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + overflow: hidden; + background-attachment: fixed; +} + +button { + background-color: rgb(14, 115, 189); + color: white; + font-family: 'Raleway', sans-serif; + border-radius: 15px; + font-weight: bold; + height: 30px; + position: absolute; + left: 45%; + top: 60%; + +} diff --git a/history website/script.js b/script.js similarity index 94% rename from history website/script.js rename to script.js index 6fd9162..148e95c 100644 --- a/history website/script.js +++ b/script.js @@ -1,77 +1,77 @@ -/*----------------loading screen disappears---------*/ - - -$(window).load(function(){ - $(".loader").fadeOut(3000); - -}); - - - -/*---------hide and showing of navbar with scroll up and down-----*/ - -$(window).scroll( - { - previousTop: 0 - }, - function () { - var currentTop = $(window).scrollTop(); - if (currentTop < 900) { - $(".header").fadeIn("medium"); - } - else if (currentTop < this.previousTop) { - $(".header").fadeIn("medium"); - } - else { - $(".header").fadeOut("medium"); - } - this.previousTop = currentTop; -}); - - - -/*-------------Parallax--------------*/ - -$(window).scroll(function(){ - - var wScroll = $(this).scrollTop(); - - $('.cover').css({ - 'transform' : 'translate(0px, '+ wScroll /16 +'%)' - }); - - $('.cover1').css({ - 'transform' : 'translate(0px, -'+ wScroll /15 +'%)' - }); - - - - $('.music1').css({ - 'transform' : 'translate(0px, '+ wScroll /5 +'%)' - }); - - - -}); - - -/*-----------Smooth Scroll from clicking on link in navbar-----*/ - -$(function(){ - $('a[href^="#"]').click(function(e){ - var target = $(this).attr('href'); - var strip = target.slice(1); - var anchor = $("a[name='"+ strip +"']"); - - e.preventDefault(); - - $('html, body').animate({ - - scrollTop: anchor.offset().top - - - }, 'slow'); - return false; - }); - -}); +/*----------------loading screen disappears---------*/ + + +$(window).load(function(){ + $(".loader").fadeOut(3000); + +}); + + + +/*---------hide and showing of navbar with scroll up and down-----*/ + +$(window).scroll( + { + previousTop: 0 + }, + function () { + var currentTop = $(window).scrollTop(); + if (currentTop < 900) { + $(".header").fadeIn("medium"); + } + else if (currentTop < this.previousTop) { + $(".header").fadeIn("medium"); + } + else { + $(".header").fadeOut("medium"); + } + this.previousTop = currentTop; +}); + + + +/*-------------Parallax--------------*/ + +$(window).scroll(function(){ + + var wScroll = $(this).scrollTop(); + + $('.cover').css({ + 'transform' : 'translate(0px, '+ wScroll /16 +'%)' + }); + + $('.cover1').css({ + 'transform' : 'translate(0px, -'+ wScroll /15 +'%)' + }); + + + + $('.music1').css({ + 'transform' : 'translate(0px, '+ wScroll /5 +'%)' + }); + + + +}); + + +/*-----------Smooth Scroll from clicking on link in navbar-----*/ + +$(function(){ + $('a[href^="#"]').click(function(e){ + var target = $(this).attr('href'); + var strip = target.slice(1); + var anchor = $("a[name='"+ strip +"']"); + + e.preventDefault(); + + $('html, body').animate({ + + scrollTop: anchor.offset().top + + + }, 'slow'); + return false; + }); + +});