body{
 background:url(image/Universe-art-the-universe-22238785-1920-1200.jpg) no-repeat;
 padding:0px;
 font-size:12px;
 margin:0px 0px 0px 0px;
 background-attachment:fixed;
 
}

#countainer{
 width:1020px;
 height:auto;
 margin:auto;
 padding:0px; 
 
}

.header{
 height:300px;
 width:1020px;
 background:url(image/header%20copy.jpg);
 border:5px #FFFF00 solid;
}

.file{
 height:1000px;
 width:1020px;
 background-color:#000000;
 font-size:30px;
 border:5px #FFFF00 solid;
}

.menu{
 width:1020px;
 height:50px;
}

ul.menu1{
 margin:auto;
 padding:0px;
 height:50px;
 float:left;
 margin:0px 0px 0px 221px;
 
}
ul.menu1 li{
 display:inline;
 font-size:25px;
 font-weight:normal;
 line-height:50px;
 list-style-type:none;
}
a.menu_link:link, a.menu_link:visited{
 display:block;
 float:left;
 padding: 0px 0px 0px 0px;
 margin:0px 48px 0px 0px;
 height:50px;
 text-decoration:none;
 color:#FFFF33;
}
a.menu_link:hover{
 color:#FF0000;
}

.footer{
height:100px;
width:1020px;

}

.foottulis {
font-size: 17px;
color: #FFFF00;
text-align: center;
padding: 32px 0px 0px 0px;
border-bottom:2px #FF0000 solid;
}




/*------------------slider------------------------*/
img {
 border: none;
}
 a {
  outline: none;
 }
 /* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */
 @-webkit-keyframes fadeIn {
  0% {
   opacity: 0;
   
  }
  
  50% { 
   opacity: 0;
  }
  
  100% { 
   opacity: 1;
  }
 }

 #box {
  text-align: left;
  width: 605px;
  height: 488px;
  margin: 30px auto 0 auto;
  background: #000;
  overflow: hidden;
  border: 10px solid #000;
  -webkit-box-shadow: #131313 0px 2px 10px;
  -moz-box-shadow: #131313 0px 3px 10px;
  box-shadow: #131313 0px 3px 10px; 
  -webkit-animation-name: fadeIn; 
  -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 0s;
 }

 ul#slider{
  -webkit-border-radius: 10px;
  margin: 0px;
  padding: 0px;
  list-style: none;
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden; 
 }

 ul#thumb {
  overflow: none;
  padding: 0px;
  list-style: none;
  position: relative;
  background: #000;
  overflow: auto;
  width: 550px;
  
 }

 ul#thumb a {
  -webkit-transition: opacity .2s ease-in-out;
  width: 25px;
  height: 25px;
  display: block;
  overflow: hidden;
  float: left;
  margin: -6px 0px 0px 83px;
  opacity: 0.75;
 }

 ul#thumb a:hover {
  opacity: 1;
 } 

 ul#slider li { 
  width: 550px;
  height: 340px;
  position: absolute;
  }
  
 ul#slider li p {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: inherit;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  width: 100%;
 }

 ul#slider li p span {
  line-height: 1.2em;
  padding: 10px;
  display: block;
 }

 /* Animation for the :target image. Slides the image in. */

 @-webkit-keyframes moveTarget {
  0% {
   left:-550px;
   
  }
  
  100% { 
   left:0px;
  }
 }


 ul#slider li:target {
  -webkit-animation-name: moveTarget; 
  -webkit-animation-duration: .5s; 
  -webkit-animation-iteration-count: 1;
  weight:550; 
  height: 395px;
  top:0px;
  left: 0px;
  z-index: 10;
 }

 /*
 Animation for the current image. Slides it out the frame and back to the starting position. 
 Adds a lower z-index than the now current image.
 */

 @-webkit-keyframes moveIt {
  0% {
   left:0px;
   
  }
  50% {
   left:550px;
   
  }
  100% { 
   left:-550px;
   z-index: 5;
  }
 }

 ul#slider li:not(:target) {
  -webkit-animation-name: moveIt; 
  -webkit-animation-duration: 1.5s; 
  -webkit-animation-iteration-count: 1;
  top:0px;
  left: 0px;
 }
/*------------------slider------------------------*/


.facebook{
width:200px;
height:200px;
margin:0px 0px 0px 0px;
float : left;
}
.facebook a{
 opacity:.5;
}
.facebook a:hover{
 opacity:1;

}
.steam{
width:200px;
height:200px;
margin:0px 0px 0px 45px;
float : left;

}

.steam a{
 opacity:.5;
}
.steam a:hover{
 opacity:1;

}

.youtube{
width:200px;
height:200px;
margin:0px 0px 0px 49px;
float : left;
}

.youtube a{
 opacity:.5;
}
.youtube a:hover{
 opacity:1;

}

.atas{

width:694px;
height:200px;
background-color:#000000;
margin:30px 0px 0px 160px;

}

.tulisandisk{
color:#FFFF00;
font-size:24px;
margin: 41px 0px 0px 165px;
width:700px;
height:700px;
float:left;
text-indent:15px;

}

.tulisanregis{
color:#FFFF00;
font-size:30px;
margin: 41px 0px 0px 165px;
width:700px;
height:100px;
float:left;
text-indent:15px;
text-align:center;
}

.badanform{
width: 1000px;
height: 883px;
float: left;
margin:-92px 0px 0px 0px;

}

.input
{
 width:150px;
 height:25px;
 float:right;
 margin : 6px 0px 0px 3px;
 border-radius : 8px 8px 8px 8px;
}

.formkotak{
width: 600px;
height: 790px;
float: left;
margin: 33px 0px 0px 279px;
background:url(image/logo.jpg);
}

.namatulis{
 font-size: 23px;
 margin: 72px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.namakotak{
 width: 392px;
 height: 22px;
 float: left;
 margin: 5px 0px 0px 0px;
}

.tanggaltulis
{
 font-size: 23px;
margin: 41px 0px 0px 32px;
color: #FFFF00;
float: left;
}

.tanggalkotak{
 width: 901px;
 height: 30px;
 float: left;
 margin: 0px 0px 0px 0px;
}

.emailtulis{
 font-size: 23px;
margin: 40px 0px 0px 32px;
color: #FFFF00;
float: left;
}

.emailkotak{
 width: 262px;
 height: 15px;
 float: left;
 margin: 6px 0px 0px 0px;
}

.passwordtulis{
 font-size: 23px;
 margin: 30px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.passwordkotak{
 width: 392px;
 height: 22px;
 float: left;
 margin: 5px 0px 0px 0px;
}

.passwordulangtulis{
 font-size: 23px;
 margin: 30px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.passwordulangkotak{
 width: 392px;
 height: 22px;
 float: left;
 margin: 5px 0px 0px 0px;
}

.hinttulis{
font-size: 23px;
 margin: 23px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.hintkotak{
 margin: 4px 0px 0px 0px;
height: 32px;
width: 396px;
float:left;
}

.answertulis{
font-size: 23px;
 margin: 27px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.answerkotak{
margin: 3px 0px 0px 0px;
height: 23px;
width: 393px;
float: left;
}

.sign{
height: 30px;
width: 75px;
float: left;
margin: 27px 0px 0px 172px;
background-color: #CCCCCC;
border: 5px #666666 inset;

}

.huruf
{
font-weight: bold;
font-size: 16px;
margin: 6px 0px 0px 5px;
color:#666666;
}

.huruf a{
 text-decoration:none;
 color:#666666;
}

.huruf a:hover{
 color:#FFFF00;
}

.navigasi{
 width:1030px;
 height:20px;
 font-size:13px;
 font-weight:bold;
 margin:0px 0px 0px 0px;
 color:#000000;
 background-color:#FFFF00;
}

.navigasi a{
 
 text-decoration:none;
 color:#000000;
}
.navigasi a:hover{
 color:#FF0000;
}

.kotakslide
{
margin:109px 0px 0px 165px;
height:586px;
width:700px;
border:2px #FFFF00 dotted;
}

.tulisangalery{
color:#FFFF00;
font-size:30px;
margin: 41px 0px 0px 165px;
width:700px;
height:100px;
float:left;
text-indent:15px;
text-align:center;
}

.video{
width:700px;
margin: 63px 0px 0px 181px;
border:2px #FFFF00 dotted;
}

.tulisangame{
height: 500px;
width: 984px;
color: #FFFF00;
font-size: 14px;
margin: 28px 0px 0px 25px;
}

.tulisanhome{
height: 100px;
width: 984px;
color: #FFFF00;
font-size: 51px;
margin: 28px 0px 0px 302px;
}

.holover{
margin:-29px 0px 0px 350px;
height:305px;
}

.tulisanisi{
height: 500px;
width: 890px;
color: #FFFF00;
font-size: 19px;
margin: 30px 0px 0px 75px;

}

html
--------------
<!DOCTYPE html>
<html>

<head>
<title>FTL : Faster Than Light</title>
<link rel="stylesheet"" type="text/css" href="style.css">
</head>

<body>
<div id="countainer">
    <div class="header">
       
        </div>
       
        <div class = "menu">
        <ul class="menu1">
            <li><a href="Home.html" class="menu_link"> Home</a>
               
                </li>
               
                <li><a href="Galery.html" class="menu_link">Galery</a>
               
                </li>
               
                <li><a href="Regis.html" class="menu_link">Register</a>
               
                </li>
               
                <li><a href="Gameplay.html" class="menu_link">Game Play</a>
               
                </li>
               
                 <li><a href="Aboutus.html" class="menu_link">About Us</a>
               
                </li>
            </ul>
       
        </div>
       
         <div class="navigasi">
        Navigation : <a href="Galery.html">Galery</a>
        </div>
       
        <div class="file">
     
       <div class = "tulisangalery">
        Photo Gallery
       </div>
     
        <div class = "kotakslide">
        <div id="box">
              <ul id="slider">
                <li id="1">
                  <img src="image/gambar1.jpg">
                </li>
                <li id="2">
                  <img src="image/gambar4.jpg" >
                </li>
                <li id="3">
                  <img src="image/gambar2.jpg" >
                <li id="4">
                  <img src="image/gambar3.jpg" >
                </li>
                <li id="5">
                  <img src="image/gambar5.jpg" >
                </li>  
              </ul>
             
              <ul id="thumb">
                <li><a href="galery.html#1"><img src="image/note.png"></a></li>
                <li><a href="galery.html#2"><img src="image/note.png"></a></li>
                <li><a href="galery.html#3"><img src="image/note.png"></a></li>
              <li><a href="galery.html#4"><img src="image/note.png"></a></li>
              <li><a href="galery.html#5"><img src="image/note.png"></a></li>
              </ul>
         </div>

        </div>
       
        </div>
       
        <div class = "footer">
        <div class = "foottulis">
        Copyright.Hesky@Pardamean<br/>
                 2053<br/><br/>
        </div>
        </div>
       
    </div>


</body>
</html>

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

css
-------------
/*------------------slider------------------------*/
img {
border: none;
}
a {
outline: none;
}
/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;

}

50% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#box {
text-align: left;
width: 605px;
height: 488px;
margin: 30px auto 0 auto;
background: #000;
overflow: hidden;
border: 10px solid #000;
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
}

ul#slider{
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}

ul#thumb {
overflow: none;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 550px;

}

ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
width: 25px;
height: 25px;
display: block;
overflow: hidden;
float: left;
margin: -6px 0px 0px 83px;
opacity: 0.75;
}

ul#thumb a:hover {
opacity: 1;
}

ul#slider li {
width: 550px;
height: 340px;
position: absolute;
}

ul#slider li p {
position: absolute;
bottom: 0;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}

ul#slider li p span {
line-height: 1.2em;
padding: 10px;
display: block;
}

/* Animation for the :target image. Slides the image in. */

@-webkit-keyframes moveTarget {
0% {
left:-550px;

}

100% {
left:0px;
}
}


ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
weight:550;
height: 395px;
top:0px;
left: 0px;
z-index: 10;
}

/*
Animation for the current image. Slides it out the frame and back to the starting position.
Adds a lower z-index than the now current image.
*/

@-webkit-keyframes moveIt {
0% {
left:0px;

}
50% {
left:550px;

}
100% {
left:-550px;
z-index: 5;
}
}

ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}
/*------------------slider------------------------*/