take out root folder "historyWebsite"
This commit is contained in:
Arjun Patel
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 666 KiB After Width: | Height: | Size: 666 KiB |
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
|
Before Width: | Height: | Size: 489 KiB After Width: | Height: | Size: 489 KiB |
|
Before Width: | Height: | Size: 797 KiB After Width: | Height: | Size: 797 KiB |
|
Before Width: | Height: | Size: 666 KiB After Width: | Height: | Size: 666 KiB |
|
Before Width: | Height: | Size: 6.3 MiB After Width: | Height: | Size: 6.3 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 555 KiB After Width: | Height: | Size: 555 KiB |
|
Before Width: | Height: | Size: 783 KiB After Width: | Height: | Size: 783 KiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 157 KiB |
|
Before Width: | Height: | Size: 343 KiB After Width: | Height: | Size: 343 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 109 KiB |
@@ -1,117 +1,117 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" type="text/css" href="main.css"></link>
|
<link rel="stylesheet" type="text/css" href="main.css"></link>
|
||||||
<link href='https://fonts.googleapis.com/css?family =Press+Start+2P' rel='stylesheet' type='text/css'>
|
<link href='https://fonts.googleapis.com/css?family =Press+Start+2P' rel='stylesheet' type='text/css'>
|
||||||
<link href='https://fonts.googleapis.com/css?family =Raleway' rel='stylesheet' type='text/css'>
|
<link href='https://fonts.googleapis.com/css?family =Raleway' rel='stylesheet' type='text/css'>
|
||||||
<title>The 80's</title>
|
<title>The 80's</title>
|
||||||
|
|
||||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="script.js"></script>
|
<script type="text/javascript" src="script.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="loader">
|
<div class="loader">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<ul class="header">
|
<ul class="header">
|
||||||
<li class="start"><a href="#one">Cover</a></li>
|
<li class="start"><a href="#one">Cover</a></li>
|
||||||
<li class="mid"><a href="#two">Intro</a></li>
|
<li class="mid"><a href="#two">Intro</a></li>
|
||||||
<li class="mid"><a href="#three">Music</a></li>
|
<li class="mid"><a href="#three">Music</a></li>
|
||||||
<li class="mid"><a href="#four">Chapters</a></li>
|
<li class="mid"><a href="#four">Chapters</a></li>
|
||||||
<li class="end"><a href="#five">About</a></li>
|
<li class="end"><a href="#five">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<a name="one">
|
<a name="one">
|
||||||
<div class="cover">
|
<div class="cover">
|
||||||
|
|
||||||
<div class="cover2"></div>
|
<div class="cover2"></div>
|
||||||
<p class="cover1"><i>"We can't help everyone, but everyone can help someone."<br>-Ronald Reagan</i></p>
|
<p class="cover1"><i>"We can't help everyone, but everyone can help someone."<br>-Ronald Reagan</i></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a name="two">
|
<a name="two">
|
||||||
<div class="intro">
|
<div class="intro">
|
||||||
<div class="introcanvas"></div>
|
<div class="introcanvas"></div>
|
||||||
<p class="intro">
|
<p class="intro">
|
||||||
<b style="font-size: 1.5em;">Back to the Future?</b>
|
<b style="font-size: 1.5em;">Back to the Future?</b>
|
||||||
<br><br><i style="font-size: 1.25em;">
|
<br><br><i style="font-size: 1.25em;">
|
||||||
<u>Dr. Emmett Brown</u>: Then tell me, future boy, who's President of the United States in 1985?
|
<u>Dr. Emmett Brown</u>: Then tell me, future boy, who's President of the United States in 1985?
|
||||||
<br><br>
|
<br><br>
|
||||||
<u>Marty McFly</u>: Ronald Reagan.
|
<u>Marty McFly</u>: Ronald Reagan.
|
||||||
<br><br>
|
<br><br>
|
||||||
<u>Dr. Emmett Brown</u>: Ronald Reagan? The actor? [chuckles in disbelief] Then who's vice president? Jerry Lewis?</i>
|
<u>Dr. Emmett Brown</u>: Ronald Reagan? The actor? [chuckles in disbelief] Then who's vice president? Jerry Lewis?</i>
|
||||||
<br><br>
|
<br><br>
|
||||||
The iconic 1985 film <q>Back to the Future,</q> 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 <q>baby boomers,</q> 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 <q>liberal media</q> 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.
|
The iconic 1985 film <q>Back to the Future,</q> 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 <q>baby boomers,</q> 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 <q>liberal media</q> 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.
|
||||||
<br><br>
|
<br><br>
|
||||||
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
|
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
|
||||||
<br><br>
|
<br><br>
|
||||||
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.
|
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.
|
||||||
<br><br>
|
<br><br>
|
||||||
The irony of the Eighties is that it is seen as a time of going <q>Back</q> to conservatism, traditional values, and smaller government, yet the technological and sociological changes and the end of the Cold War were taking us <q>to the Future</q> 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 <q>Roads? Where we're going, we don't need roads.</q>
|
The irony of the Eighties is that it is seen as a time of going <q>Back</q> to conservatism, traditional values, and smaller government, yet the technological and sociological changes and the end of the Cold War were taking us <q>to the Future</q> 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 <q>Roads? Where we're going, we don't need roads.</q>
|
||||||
<br><br>
|
<br><br>
|
||||||
<i>Steve Sewell</i>, 5/30/2016
|
<i>Steve Sewell</i>, 5/30/2016
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a name="three">
|
<a name="three">
|
||||||
<div class="music">
|
<div class="music">
|
||||||
|
|
||||||
<audio controls class ="music1">
|
<audio controls class ="music1">
|
||||||
<source src="images/music.mp3" type="audio/mpeg">
|
<source src="images/music.mp3" type="audio/mpeg">
|
||||||
Your browser does not support the audio element.
|
Your browser does not support the audio element.
|
||||||
</audio>
|
</audio>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a name="four">
|
<a name="four">
|
||||||
<div class="chapters">
|
<div class="chapters">
|
||||||
<ul class="chapters">
|
<ul class="chapters">
|
||||||
<div class="chapters1-3">
|
<div class="chapters1-3">
|
||||||
<li class="chapter1"></li>
|
<li class="chapter1"></li>
|
||||||
<li class="chapter2"></li>
|
<li class="chapter2"></li>
|
||||||
<li class="chapter3"></li>
|
<li class="chapter3"></li>
|
||||||
</div>
|
</div>
|
||||||
<div class="chapters4-5">
|
<div class="chapters4-5">
|
||||||
<li class="chapter4"></li>
|
<li class="chapter4"></li>
|
||||||
<li class="chapter5"></li>
|
<li class="chapter5"></li>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
<a name="five">
|
<a name="five">
|
||||||
<div class="about">
|
<div class="about">
|
||||||
<button class="about">
|
<button class="about">
|
||||||
Learn About the Team!
|
Learn About the Team!
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
+435
-435
@@ -1,435 +1,435 @@
|
|||||||
html {
|
html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin:0;
|
margin:0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: 'Press Start 2P', cursive;
|
font-family: 'Press Start 2P', cursive;
|
||||||
background-color: rgb(7, 81, 119);
|
background-color: rgb(7, 81, 119);
|
||||||
background-position: top left;
|
background-position: top left;
|
||||||
min-width: 950px;
|
min-width: 950px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
-webkit-box-shadow: inset 0 0 6px black;
|
-webkit-box-shadow: inset 0 0 6px black;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
-webkit-box-shadow: inset 0 0 6px black;
|
-webkit-box-shadow: inset 0 0 6px black;
|
||||||
}
|
}
|
||||||
/*-------loading game page-----*/
|
/*-------loading game page-----*/
|
||||||
div.loader {
|
div.loader {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
background-image: url(images/loader.gif);
|
background-image: url(images/loader.gif);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 100% 100%;
|
background-position: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*------Cover/Title------*/
|
/*------Cover/Title------*/
|
||||||
div.cover {
|
div.cover {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
background-image: url(images/cover.jpg);
|
background-image: url(images/cover.jpg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 45% 135%;
|
background-size: 45% 135%;
|
||||||
background-position: 10%;
|
background-position: 10%;
|
||||||
background-color: #080a0a;
|
background-color: #080a0a;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 950px;
|
min-width: 950px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p.cover1 {
|
p.cover1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
right: 5%;
|
right: 5%;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 650px;
|
width: 650px;
|
||||||
/* border: 1px solid red; */<-------border of title/quotes place
|
/* border: 1px solid red; */<-------border of title/quotes place
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: rgb(222, 88, 22);
|
color: rgb(222, 88, 22);
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-family: 'Raleway', sans-serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.cover2 {
|
div.cover2 {
|
||||||
background-image: url(images/backLogo.png);
|
background-image: url(images/backLogo.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
height: 450px;
|
height: 450px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
width: 650px;
|
width: 650px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 5%;
|
right: 5%;
|
||||||
/* border: 2px solid red; */
|
/* border: 2px solid red; */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* nav Bar */
|
/* nav Bar */
|
||||||
.header {
|
.header {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px dotted blue;
|
border: 1px dotted blue;
|
||||||
background-image: url(images/wallpaper2.jpg);
|
background-image: url(images/wallpaper2.jpg);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border-bottom-right-radius: 15px;
|
border-bottom-right-radius: 15px;
|
||||||
border-bottom-left-radius: 15px;
|
border-bottom-left-radius: 15px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
opacity: .9;
|
opacity: .9;
|
||||||
font-family: 'Raleway', sans-serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 950px;
|
min-width: 950px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.header {
|
ul.header {
|
||||||
border: 2px solid black;
|
border: 2px solid black;
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
ul.header li {
|
ul.header li {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* border: 2px solid pink; */
|
/* border: 2px solid pink; */
|
||||||
text-shadow: 5px 3px black;
|
text-shadow: 5px 3px black;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
li.start{
|
li.start{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-left: 25%;
|
margin-left: 25%;
|
||||||
margin-right: 2%;
|
margin-right: 2%;
|
||||||
}
|
}
|
||||||
li.end{
|
li.end{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-left: 2%;
|
margin-left: 2%;
|
||||||
margin-right: 20%;
|
margin-right: 20%;
|
||||||
}
|
}
|
||||||
li.mid{
|
li.mid{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-left: 3%;
|
margin-left: 3%;
|
||||||
margin-right: 3%;
|
margin-right: 3%;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.header li a:hover {
|
ul.header li a:hover {
|
||||||
color: rgb(111, 111, 116);
|
color: rgb(111, 111, 116);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-shadow: 8px 5px black;
|
text-shadow: 8px 5px black;
|
||||||
}
|
}
|
||||||
ul.header li a {
|
ul.header li a {
|
||||||
color: rgb(204, 218, 203);
|
color: rgb(204, 218, 203);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*------intro of Mr.Sewell segment------*/
|
/*------intro of Mr.Sewell segment------*/
|
||||||
div.intro {
|
div.intro {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-image: url(images/wallpaper1.jpg);
|
background-image: url(images/wallpaper1.jpg);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
div.introcanvas {
|
div.introcanvas {
|
||||||
margin: 10px 0px;
|
margin: 10px 0px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
opacity: .75;
|
opacity: .75;
|
||||||
}
|
}
|
||||||
p.intro{
|
p.intro{
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: rockwell;
|
font-family: rockwell;
|
||||||
font-size: 1.15em;
|
font-size: 1.15em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*---------music section-----*/
|
/*---------music section-----*/
|
||||||
|
|
||||||
|
|
||||||
div.music {
|
div.music {
|
||||||
margin:0;
|
margin:0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 40%;
|
height: 40%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: url(images/wallpaper2.jpg);
|
background-image: url(images/wallpaper2.jpg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
audio {
|
audio {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*--------Chapters---------*/
|
/*--------Chapters---------*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
div.chapters {
|
div.chapters {
|
||||||
margin:0;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
height: 1000px;
|
height: 1000px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: url(images/wallpaper3.jpg);
|
background-image: url(images/wallpaper3.jpg);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
ul.chapters {
|
ul.chapters {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* border: 2px solid black; */
|
/* border: 2px solid black; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
div.chapters1-3 {
|
div.chapters1-3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
/* border: 2px solid black; */
|
/* border: 2px solid black; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
li.chapter1 {
|
li.chapter1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
height: 370px;
|
height: 370px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
left: 10%;
|
left: 10%;
|
||||||
top: 20%;
|
top: 20%;
|
||||||
background-image: url(images/chapter1.jpeg);
|
background-image: url(images/chapter1.jpeg);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
}
|
}
|
||||||
li.chapter1:hover {
|
li.chapter1:hover {
|
||||||
box-shadow: inset -4.5px -3px 5px black;
|
box-shadow: inset -4.5px -3px 5px black;
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
opacity: .9;
|
opacity: .9;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
height: 360px;
|
height: 360px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
li.chapter2 {
|
li.chapter2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
height: 370px;
|
height: 370px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
top: 20%;
|
top: 20%;
|
||||||
left: 42%;
|
left: 42%;
|
||||||
background-image: url(images/chapter2.jpg);
|
background-image: url(images/chapter2.jpg);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
}
|
}
|
||||||
li.chapter2:hover {
|
li.chapter2:hover {
|
||||||
box-shadow: inset -4.5px -3px 5px black;
|
box-shadow: inset -4.5px -3px 5px black;
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
opacity: .9;
|
opacity: .9;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
height: 360px;
|
height: 360px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
li.chapter3 {
|
li.chapter3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
height: 370px;
|
height: 370px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
top: 20%;
|
top: 20%;
|
||||||
right: 10%;
|
right: 10%;
|
||||||
background-image: url(images/chapter3.jpg);
|
background-image: url(images/chapter3.jpg);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
}
|
}
|
||||||
li.chapter3:hover {
|
li.chapter3:hover {
|
||||||
box-shadow: inset -4.5px -3px 5px black;
|
box-shadow: inset -4.5px -3px 5px black;
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
opacity: .9;
|
opacity: .9;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
height: 360px;
|
height: 360px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
div.chapters4-5 {
|
div.chapters4-5 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
/* border: 2px solid white; */
|
/* border: 2px solid white; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
li.chapter4 {
|
li.chapter4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
height: 370px;
|
height: 370px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
top: 20%;
|
top: 20%;
|
||||||
left: 25%;
|
left: 25%;
|
||||||
background-image: url(images/chapter4.jpg);
|
background-image: url(images/chapter4.jpg);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
}
|
}
|
||||||
li.chapter4:hover {
|
li.chapter4:hover {
|
||||||
box-shadow: inset -4.5px -3px 5px black;
|
box-shadow: inset -4.5px -3px 5px black;
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
opacity: .9;
|
opacity: .9;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
height: 360px;
|
height: 360px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
li.chapter5 {
|
li.chapter5 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding:0;
|
padding:0;
|
||||||
height: 370px;
|
height: 370px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
left: 60%;
|
left: 60%;
|
||||||
top: 20%;
|
top: 20%;
|
||||||
background-image: url(images/chapter5.jpg);
|
background-image: url(images/chapter5.jpg);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
}
|
}
|
||||||
li.chapter5:hover {
|
li.chapter5:hover {
|
||||||
box-shadow: inset -4.5px -3px 5px black;
|
box-shadow: inset -4.5px -3px 5px black;
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
opacity: .9;
|
opacity: .9;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
height: 360px;
|
height: 360px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*-------about-------*/
|
/*-------about-------*/
|
||||||
|
|
||||||
div.about {
|
div.about {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-image: url(images/wallpaper7.jpg);
|
background-image: url(images/wallpaper7.jpg);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: rgb(14, 115, 189);
|
background-color: rgb(14, 115, 189);
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Raleway', sans-serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 45%;
|
left: 45%;
|
||||||
top: 60%;
|
top: 60%;
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,77 +1,77 @@
|
|||||||
/*----------------loading screen disappears---------*/
|
/*----------------loading screen disappears---------*/
|
||||||
|
|
||||||
|
|
||||||
$(window).load(function(){
|
$(window).load(function(){
|
||||||
$(".loader").fadeOut(3000);
|
$(".loader").fadeOut(3000);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*---------hide and showing of navbar with scroll up and down-----*/
|
/*---------hide and showing of navbar with scroll up and down-----*/
|
||||||
|
|
||||||
$(window).scroll(
|
$(window).scroll(
|
||||||
{
|
{
|
||||||
previousTop: 0
|
previousTop: 0
|
||||||
},
|
},
|
||||||
function () {
|
function () {
|
||||||
var currentTop = $(window).scrollTop();
|
var currentTop = $(window).scrollTop();
|
||||||
if (currentTop < 900) {
|
if (currentTop < 900) {
|
||||||
$(".header").fadeIn("medium");
|
$(".header").fadeIn("medium");
|
||||||
}
|
}
|
||||||
else if (currentTop < this.previousTop) {
|
else if (currentTop < this.previousTop) {
|
||||||
$(".header").fadeIn("medium");
|
$(".header").fadeIn("medium");
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
$(".header").fadeOut("medium");
|
$(".header").fadeOut("medium");
|
||||||
}
|
}
|
||||||
this.previousTop = currentTop;
|
this.previousTop = currentTop;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*-------------Parallax--------------*/
|
/*-------------Parallax--------------*/
|
||||||
|
|
||||||
$(window).scroll(function(){
|
$(window).scroll(function(){
|
||||||
|
|
||||||
var wScroll = $(this).scrollTop();
|
var wScroll = $(this).scrollTop();
|
||||||
|
|
||||||
$('.cover').css({
|
$('.cover').css({
|
||||||
'transform' : 'translate(0px, '+ wScroll /16 +'%)'
|
'transform' : 'translate(0px, '+ wScroll /16 +'%)'
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.cover1').css({
|
$('.cover1').css({
|
||||||
'transform' : 'translate(0px, -'+ wScroll /15 +'%)'
|
'transform' : 'translate(0px, -'+ wScroll /15 +'%)'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$('.music1').css({
|
$('.music1').css({
|
||||||
'transform' : 'translate(0px, '+ wScroll /5 +'%)'
|
'transform' : 'translate(0px, '+ wScroll /5 +'%)'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
/*-----------Smooth Scroll from clicking on link in navbar-----*/
|
/*-----------Smooth Scroll from clicking on link in navbar-----*/
|
||||||
|
|
||||||
$(function(){
|
$(function(){
|
||||||
$('a[href^="#"]').click(function(e){
|
$('a[href^="#"]').click(function(e){
|
||||||
var target = $(this).attr('href');
|
var target = $(this).attr('href');
|
||||||
var strip = target.slice(1);
|
var strip = target.slice(1);
|
||||||
var anchor = $("a[name='"+ strip +"']");
|
var anchor = $("a[name='"+ strip +"']");
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
$('html, body').animate({
|
$('html, body').animate({
|
||||||
|
|
||||||
scrollTop: anchor.offset().top
|
scrollTop: anchor.offset().top
|
||||||
|
|
||||||
|
|
||||||
}, 'slow');
|
}, 'slow');
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
Reference in New Issue
Block a user