bisa disesuaikan / diedit dengan yang kalian mau ya. ini cuma HTML dan CSS biasa kok
ini penampakan script nya
dan ini source kode nya :
<!DOCTYPE html>
<html>
<head>
<style>
h4{
font-family:calibri;
font-style:italic;
}
img{
border: solid 8px;
border-color: #c293d4;
border-radius: 200px 0px 200px 0px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s,
-o-transform 2s; /* Opera */
}
img:hover{
border: solid 8px;
border-color: #c293d4;
width:250px; height:180px;
transform:rotate(720deg);
-moz-transform:rotate(720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
border-radius: 0px 0px 0px 0px;
}
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
.wrapper {
width: 700px;
margin: auto;
padding: 10px;
margin-top: 30px;
}
.wrapper:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,0,255,1);
-moz-box-shadow: 0px 0px 20px rgba(255,0,255,1);
box-shadow: 0px 0px 20px rgba(255,0,255,1);
}
.bayu {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.bayu > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
background:#8b46aa;color:white;
text-shadow: black;
font-size: 20px;
display: none;
}
.article:hover {
text-align: center;
background:#8b46aa;color:white;
text-shadow: black;
font-size: 20px;
display: none;
}
header {background: #5a1e6c;color:white;}
footer {background: #34153e;color:white;}
@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7B2292;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #5A1B6B;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #551E63;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #A64EBD}
.dropdown:hover .dropdown-content {
display: block;
}
.button {
border-radius: 4px;
background-color: #A649BF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 19px;
padding: 0px;
width: 90px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
height: 50px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
body {
background-color: #000;
}
</style>
<script>
</script>
<title>HOME</title>
</head>
<body>
<div class="wrapper">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="dropdown">
<a href="video.html" class="dropbtn">Video</a>
<div class="dropdown-content">
<a href="video.html">Link</a>
</div>
</li>
</ul>
<div class="bayu">
<header>
<img src="img2.jpg" width="150"height="100"style="float:center" />
<h1>BAYU AFRIZATUL RIZKI</h1>
<h4>"hanya yang bukan siapa siapa"</h4>
<form action="./biodata.html">
<button class="button"><span>Biodata</span></button>
</form>
</header>
<article class="article">
<h1>Welcome ..</h1>
<p>Selamat datang di website khusus biodata saya.</p>
<p>Untuk mengetahui lebih banyak tentang saya klik pada button BIODATA diatas</p>
<p><strong>Terimakasih.</strong></p>
</article>
<footer>Design by © BayuAfrizatulRizki</footer>
</div>
</div>
</body>
</html>