diff --git a/Game.html b/Game.html
index fdcbefc..81c5a85 100644
--- a/Game.html
+++ b/Game.html
@@ -1,38 +1,41 @@
-
-
-
-
-
-
- Our Mini game
-
-
-
-
- 
-
-
- Guessing Number Game!
- Guess a number between 1-10!
- Your opponent will be the compueter!
-
-
-
-
-
-
+
+
+
+
+
+
+ Our Mini game
+
+
+
+
+
+
+
+
+ Guessing Number Game!
+ Guess a number between 1-10!
+ Your opponent will be the compueter!
+
+
+
+
+
+
+
+
diff --git a/Index.html b/Index.html
index 97fe16e..bd413ce 100644
--- a/Index.html
+++ b/Index.html
@@ -1,3 +1,4 @@
+
@@ -195,3 +196,4 @@ Sign Up!
+
diff --git a/MHA.html b/MHA.html
index 5aa7544..018ede6 100644
--- a/MHA.html
+++ b/MHA.html
@@ -1,3 +1,4 @@
+
@@ -117,3 +118,4 @@ The League Of Villains
+
diff --git a/Script.js b/Script.js
index 0a87187..b4c880b 100644
--- a/Script.js
+++ b/Script.js
@@ -1,3 +1,29 @@
+
+//Sean
+ function guessNum(){
+
+ var randNum = Math.floor(Math.random() * 30); //Uses randomisation,Uses number only from 1-10,it only returns integer values of this range
+
+ //This produces an output of the random number
+ print(randNum);
+
+ var userInput= prompt("Enter any number between 1-30");
+ //User inputs number ("Enter any number between 1-30+randNum")
+
+ if(userInput < randNum){
+ window.alert("Correct! you are right!");// this message will pop up if you guessed the number correctly
+
+ }else if(userInput > randNum){
+ window.alert(" You guessed it too low,you lose!");//This message pops up if you have guess it toow
+ }
+ else if (userInput == randNum){
+ window.alert("You guessed it too high,you lose!");
+ }
+ else{
+ window.alert("This is not valid,ERROR!"); //This message prints if the value is not an integer
+ }
+}
+
//presley-JavaScript fr contact page
function validate(){
var formData = []; // array that holds data from the form fields
@@ -54,3 +80,4 @@ function validate(){
hamburger.addEventListener('click', () => {
nav.classList.toggle('show');
});
+
diff --git a/Style.css b/Style.css
index 6f2d37a..26d0d8d 100644
--- a/Style.css
+++ b/Style.css
@@ -1,3 +1,553 @@
+
+/*Sean*/
+#h_bar{
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden; /*This is the navagtion bar styling*/
+ background-color:black;
+}
+/*Sean*/
+#h_bar li {
+
+ float:left;
+
+}
+/*Sean*/
+#h_bar li a{
+ display:inline-block;
+ color:white;
+ text-align: center;
+ padding: 14px 15px;
+ text-decoration: none;
+ /*pres;ey*/
+ box-shadow:inset 0 0 0 0 yellow;
+ transition: ease-out 1s;
+ position: relative;
+ outline:none;
+ cursor:pointer;
+}
+
+
+
+/*presley- adds a hover on nav bar that changes color, and also gives an animation when cursor is pointed in it*/
+#h_bar li a:hover{
+ box-shadow: inset 0 0 0 2px yellow;
+ color:gray;
+ cursor:pointer;
+}
+/*Sean*/
+.para1{
+ font-family: 'Oswald',
+ sans-serif;
+ font-family: 'Shippori Antique',
+ sans-serif;
+ float:left;
+
+}
+
+.para2{
+
+}
+/*Sean*/
+.
+
+/*css for manual navigation*/
+/*Sean*/
+.navigation-manual{
+ position: absolute;
+ width: 800px;
+ margin-top: -40px;
+ display: flex;
+ justify-content: center;
+
+}
+/*Sean*/
+.manual-btn{
+ border: 2px solid black;
+ padding: 5px;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: 2s;
+}
+/*Sean*/
+
+
+
+/*Sean*/
+
+/*This is used for radio buttons*/
+.slideshow{
+ width:700px;
+ height:500px;
+ overflow: hidden;
+
+}
+/*Sean*/
+.para2,.para4{
+ font-family: 'Noto Sans JP',
+ sans-serif;
+ font-family: 'Oswald',
+ sans-serif;
+ font-family: 'Shippori Antique',
+ sans-serif;
+}
+/*Sean*/
+.para3{
+
+ font-family: 'Noto Sans JP',
+ sans-serif;
+
+}
+
+/*Sean*/
+a{
+ font-family: 'Noto Sans JP',
+ sans-serif;
+ font-family: 'Oswald',
+ sans-serif;
+ font-family: 'Shippori Antique',
+ sans-serif;
+ color: yellow;
+
+}
+
+
+
+
+
+
+
+
+
+
+
+.para1{
+ float:right;
+ padding-left: 5%;
+ font-size: medium;
+
+}
+
+/*presley*/
+.kirito_and_co{
+ width:240px;
+ height:380px;
+ border-radius:15px;
+ float:right;
+ margin: 5px;
+
+}
+/*presley*/
+.sao_cover{
+ width:240px;
+ height:380px;
+ border-radius:15px;
+ float:left;
+ margin: 5px;
+}
+/*presley*/
+.kirito_alfheim{
+ position:relative;
+ float: right;
+ border-radius:15px;
+ width:640px;
+ height:360px;
+}
+/*presley*/
+.sao_para,.contact-h2{
+ font-family: 'Noto Sans JP',
+ sans-serif;
+ font-family: 'Oswald',
+ sans-serif;
+ font-family: 'Shippori Antique',
+ sans-serif;
+}
+/*presley*/
+.sao_list,.sao_list2{
+ position:relative;
+ right: -20px;
+ font-family: 'Noto Sans JP',
+ sans-serif;
+ font-family: 'Oswald',
+ sans-serif;
+ font-family: 'Shippori Antique',
+ sans-serif;
+}
+
+/*Sean*/
+.MHA{
+ padding:0;
+ margin:0;
+}
+
+/*Sean*/
+.container{
+ padding:30px;
+ font-size:15px;
+ font-weight: 300;
+ line-height: 24px;;
+
+}
+
+.container p{
+ margin-bottom: 15px;
+}
+/*Sean*/
+.picture{
+ width:450px;
+ position:relative;
+ box-shadow: 0 0 5px rgba(0, 0, 0, .4);
+ background-color: antiquewhite;
+ overflow: hidden;
+ border-radius: 8px;
+ margin-bottom: 10px;
+}
+
+/*Sean*/
+.picture:before{
+ content:'';
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ border: 8px solid #fff;
+ z-index: 2;
+ overflow:hidden;
+ box-sizing: border-box;
+}
+
+/*solomon*/
+.kage{
+ width: 55%;
+ height: 15%;
+ position: relative;
+ right: -250px;
+}
+/*solomon*/
+.characters{
+ position: relative;
+ right:-600px;
+}
+/*solomon*/
+table{
+ position: relative;
+ top:-225px;
+ }
+ /*solomon*/
+ .narutopara1{
+ font-family: 'Noto Sans JP',
+ sans-serif;
+ font-family: 'Oswald',
+ sans-serif;
+ font-family: 'Shippori Antique',
+ sans-serif;
+ }
+
+ /*solomon*/
+table, th, td {
+ border: 1px solid black;
+}
+
+/*prsley*/
+.contact-page{
+ margin: 0;
+ padding: 0;
+}
+/*presley*/
+.contact{
+ width: 500px;
+ box-shadow: 0 0 40px 0 grey;
+ position: absolute;
+ top: 30%;
+ left: 31%;
+ transform: translate( -30%. -50%);
+}
+/*presley*/
+.input{
+ width: 400px;
+ height: 50px;
+ padding-right:10px;
+ padding-left: 10px;
+ margin-top: 20px;
+ border: 1px grey;
+ border-radius:14px;
+ outline: none;
+}
+/*presley*/
+.contact-form{
+ margin: 25px;
+}
+/*presley*/
+.textarea-field{
+ height: 150px;
+ padding-top: 10px;
+}
+
+/*presley*/
+.button{
+ margin-top:14px;
+ padding: 5px;
+ background-color: Transparent;
+ background-repeat: no-repeat;
+ background-color:white;
+ border-radius: 10%;
+ color:black;
+ font-size:15px;
+ border: none;
+ box-shadow: inset 0 0 0 0 #000080;
+ transition: ease-out 0.3s;
+ cursor: pointer;
+ overflow: hidden;
+ outline:none;
+ position: relative;
+ right: -40%;
+ }
+
+/*prsley - the transition of button wehn hovering*/
+.button:hover{
+ box-shadow: inset 100px 0 0 0 #000080;
+ cursor: pointer;
+ color: white;
+
+}
+
+/*presley*/
+ .contact-h2{
+ text-align: center;
+ }
+
+ /*presley*/
+.SAO{
+ margin: 0;
+ padding: 0;
+}
+
+/*Sean*/
+
+.intro{
+
+ font-family: 'Titillium Web',
+ sans-serif;
+
+}
+
+/*Sean*/
+.otaku{
+
+ font-family: 'Titillium Web',
+ sans-serif;
+
+}
+
+/*Sean*/
+.anime {
+ border: 10 px solid 2px black;
+ padding: 10 px;
+ /*This styling is for the table*/
+ border-spacing: 0;
+
+
+}
+
+/*Sean*/
+.age {
+
+ width: 40%;
+ padding: 20px;
+ /*This is for the age input*/
+ margin: auto;
+
+
+}
+
+.email {
+
+ width: 40%;
+ padding: 20px;
+ margin: auto;
+ /*Email input*/
+}
+
+/*Sean*/
+
+.gender {
+ width: 40%;
+ padding: 20 px;
+ margin: auto;
+}
+
+/*Sean*/
+.phone {
+
+ width: 40%;
+ padding: 20 px;
+ margin: auto;
+}
+
+/*Sean*/
+.surname {
+
+ width: 40%;
+ padding: 20 px; /*surname field for user input*/
+ margin: auto;
+}
+
+/*Sean*/
+
+.firstname {
+
+ width: 40%;
+ padding: 20px;
+ margin: auto; /*firstname field*/
+}
+
+/*Sean*/
+.shonen {
+
+ width: 100%;
+ height: 500px;
+ align-items: center;
+}
+/*Sean*/
+#div1{
+
+ float:left;
+ width:33%;
+ height: 500px; /*This is a div for the paragraghs*/
+}
+/*Sean*/
+#div2{
+
+ width: 33%;
+ float: right;
+ height:500px;
+}
+/*Sean*/
+#div3{
+
+ width: 33%;
+ margin: 0 auto;
+ height:500px;
+}
+/*Sean*/
+.stats{
+
+ border: 1px solid black;
+
+
+}
+/*Sean*/
+.MHApic{
+
+ height:235 px;
+ width:590 px;
+ justify-content: center;
+ align-items: center;
+ align-self: center;
+}
+
+/*Image gallery*/
+/*Sean*/
+.image-container{
+ width:2400px;
+ height: 600px;
+ position:relative; /*Clever Techie*/
+ transition: left 2s;
+ -webkit-transition: left 2s;
+ -moz-transition: left 2s; /*transition in all relative browsers*/
+ -o-transition: left 2s;
+}
+/*Sean*/
+
+/*Sean*/
+.button-container{
+
+ top: -20px;
+ position:relative;
+}
+/*Sean*/
+
+
+/*Sean*/
+.imgS{
+
+ height:400px;
+ width: 600px;
+}
+
+/*Sean*/
+.Home{
+
+ margin:0;
+ padding:0;
+ background-image: bac
+}
+
+.container1{
+
+ color:black;
+ height:100%;
+ width:1000px;
+ background-image: url("Images/Graphic_Background.jpg");
+ background-repeat:no-repeat;
+ background-position: 50 px;
+ position:relative;
+
+}
+
+.color-overlay{
+ width:100%;
+ height:100%;
+ opacity: .5;
+ position:absolute;
+
+}
+/*Sean*/
+.villians{
+
+ height:auto;
+ width:auto;
+}
+/*Styling for the images*/
+/*Sean*/
+.main{
+ position: absolute;
+ justify-content: center;
+ align-items: center;
+ margin-top: 10px;
+ display:grid;
+ grid-template-columns: repeat(auto-fill,minmax(300px,300px));
+ column-gap: 40px;
+ row-gap: 40px;
+}
+/*Sean*/
+.gallery{
+ width:300px;
+ height:300px;
+ object-fit: cover;
+ object-position: center; /*CSS for the image gallery to be formated in the center with having equal size*/
+
+}
+.text1{
+
+ display:none;
+}
+
+
+
+.para5{
+
+ color: black;
+ font-family: 'Oswald',
+ sans-serif;
+ font-family: 'Shippori Antique',
+ sans-serif;
+ float:left;
+ justify-content: center;
+}
+=======
body{
background-color:yellow;
font-size: 13pt;
@@ -75,37 +625,8 @@ body{
.para2{
}
-/*Sean*/
-.slider{
-
- width:800px;
- height: 500px;
- border-radius: 10px;
- overflow:hidden;
-
-}
-/*Sean*/
-.slides{
- width: 500%;
- height:500px;
- display: flex;
-}
-/*Sean*/
-.slides input{
- display: none;
-}
-/*Sean*/
-.slide{
- width: 20%;
- transition: 4s;
-}
-/*Sean*/
-.slide img{
- width:800px;
- height:500px;
-}
/*css for manual navigation*/
/*Sean*/
@@ -117,42 +638,7 @@ body{
justify-content: center;
}
-/*Sean*/
-.manual-btn{
- border: 2px solid black;
- padding: 5px;
- border-radius: 10px;
- cursor: pointer;
- transition: 2s;
-}
-/*Sean*/
-.manual-btn:not(:last-child){
-
- margin-right: 40px;
-
-}
-/*Sean*/
-.manual-btn:hover{
- background:black;
-
-}
-/*Sean*/
-#radio1:checked ~ .first{
- margin-left: 0;
-}
-
-#radio2:checked~.first {
- margin-left: -20%;
-}
-
-#radio3:checked~.first {
- margin-left: -30%;
-}
-#radio4:checked~.first {
- margin-left: -50%;
-}
-/*This is used for radio buttons*/
h1{
}
@@ -474,3 +960,4 @@ table, th, td {
.sao_main{
margin: 10px;
}
+