Last active
September 25, 2018 06:09
-
-
Save widiu7omo/8ff1cd3a0c987dcdeff576e43a755984 to your computer and use it in GitHub Desktop.
Memperindah tampilan babyshark
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Baby Shark</title> | |
<link rel="shortcut icon" href="hiu.png" type="image/x-icon" /> | |
<meta charset="UTF-8"> | |
<!--IE Compatibility modes--> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<!--Mobile first--> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<!-- Bootstrap --> | |
<link rel="stylesheet" href="/css/bootstrap.css"> | |
<link href="css/bootstrap.min.css" rel="stylesheet"> | |
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"> | |
<!-- JS --> | |
<script src="js/bootstrap.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<style> | |
body { | |
margin: 0; | |
padding: 0; | |
text-align: center; | |
font-family: 'Playfair Display', serif; | |
} | |
.bg { | |
width: 100%; | |
height: 100%; | |
position: fixed; | |
z-index: 1; | |
float: left; | |
left: 0; | |
} | |
.isi { | |
width: 80%; | |
height: auto; | |
margin: 0 auto; | |
position: relative; | |
z-index: 5; | |
background: transparent; | |
padding: 20px; | |
text-align: left; | |
border: 5px solid black; | |
} | |
.font { | |
font-weight: bold; | |
color: cyan; | |
font-size: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<img src="background.jpg" alt="gambar" class="bg" /> | |
<div class="isi" style="margin-top:15px; margin-bottom:15px;"> | |
<div class="row"> | |
<div class="col-lg-12 col-md-12 col-sm-12 text-center"> | |
<h1><b>LIRIK LAGU BABY SHARK</b></h1> | |
</div> | |
</div> | |
<?php | |
$lirik = "doo doo, doo doo doo doo"; | |
$lagu = array("Baby Shark","Mummy Shark","Daddy Shark","Grandma Shark","Granpa Shark","Lets go hunt","Run away","Safe at last","It's the end"); | |
for ($i=0; $i <9; $i++) | |
{ | |
for ($j=0; $j <=5; $j++) | |
{ | |
if($i == $i && $j<4){ | |
if($i == $i && $j<3){ | |
echo' | |
<div class="row text-center"> | |
<div class="col-sm-2 col-md-3 col-lg-3"> | |
</div> | |
<div class="col-sm-8 col-md-6 col-lg-6 font"> | |
'.$lagu[$i].' '.$lirik.' <br> | |
</div> | |
<div class="col-sm-2 col-md-3 col-lg-3"> | |
</div> | |
</div> | |
'; | |
} | |
else{ | |
echo' | |
<div class="row text-center"> | |
<div class="col-sm-2 col-md-3 col-lg-3"> | |
</div> | |
<div class="col-sm-8 col-md-6 col-lg-6 font"> | |
'.$lagu[$i].' <br><br> | |
</div> | |
<div class="col-sm-2 col-md-3 col-lg-3"> | |
</div> | |
</div> | |
'; | |
} | |
} | |
} | |
} | |
?> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment