Script HTML cocok untuk deface

Selamat malam semua kali ini BARLINUX akan berbagi script HTML . sebenernya sih ini tugas dari Pemograman Web dari kuliah saya . Teknik Informatika . tapi script ini saya coba buat deface bisa juga.
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>

Read more