--------------
<!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------------------------*/
Tidak ada komentar:
Posting Komentar