Gambar acuan dan Struktur :
Hasil reduplikasi :
Script :
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet" type="text/css"
href="bootstrap.css">
<title>Tugas
Web Desain</title>
<style>
.header {
margin-top:10px;
height:100px;
padding:5px;
}
.align-center {
text-align:center;
}
div.isi img {
transition:
all 0.5s ease-in-out;
}
div.isi:hover img {
transform:
scale(1.05, 1.05);
}
h2 {
color:grey;
font-size:25px;
font-family:Comic
Sans MS;
}
div.menu img {
width:100%;
height:225px;
}
.footer_bar {
height:75px;
width:100%;
font-family:Comic
Sans MS;
border-top:1px
solid rgb(144, 176, 255);
color:rgb(144,
176, 255);
font-weight:bold;
padding-top:25px;
}
menu {
height:200px;
}
div.foot img {
width:20%;
height:50%;
}
figcaption {
color:white;
font-family:Stencil;
font-size:25px;
}
.footer_nav {
font-family:Comic Sans MS;
padding:10px;
height:auto;
background-color:rgb(144, 176,
255);
}
.footer_nav li {
padding:5px;
}
.footer_nav ul {
list-style-type:none;
padding:10px;
}
.footer_nav a {
text-decoration:none;
color:black;
}
.footer_nav a:hover {
color:white;
transition: color 0.2s;
}
.back_menu {
background-position:center
center;background-size:cover;
}
.padtop {
padding-top:29px;
}
</style>
</head>
<body>
<!-- Header -->
<div
class="container-fluid">
<div
class="header">
<div
class="row">
<div class="col-lg-2
col-md-2 col-sm-6 col-xs-6 padtop" style="padding-top:29px">
<a
href="jajal.html"><img src="Header/logo.png"
width="160px" height="100%"
title="Anang's"></a>
</div>
<div class="col-lg-3
col-md-3 col-xs-12 padtop" style="height:90px;">
<ul class="nav
nav-pills">
<li
role="presentation"><a href="#">Apa itu
Rubik?</a></li>
<li
role="presentation"><a href="#">Macam-macam
Rubik</a></li>
</ul>
</div>
<div class="col-md-5
col-md-5 col-xs-12 padtop" style="height:90px;">
<ul class="nav
nav-pills">
<li
role="presentation"><a
href="#">Tutorial</a></li>
<li
role="presentation"><a
href="#">Kontak</a></li>
</ul>
</div>
<div class="col-lg-1
col-md-1 col-xs-6 padtop align-center">
<button
type="button" class="btn btn-default">
<span class="glyphicon
glyphicon-user" aria-hidden="true"></span> Profil
</button>
</div>
<div class="col-lg-1
col-md-1 col-xs-6 padtop align-center">
<button
type="button" class="btn btn-default">
<span class="glyphicon
glyphicon-search" aria-hidden="true"></span> Cari
</button>
</div>
</div>
</div>
</div>
<!-- Headline -->
<div
class="container-fluid">
<div
class="row">
<div
class="col-md-12" style="margin-top:20px;">
<img
src="Headline/maxresdefault1.jpg" width="100%">
</div>
</div>
</div>
<!-- Konten -->
<div
class="container-fluid">
<div class="row"
style="margin-top:30px">
<a href="#">
<div class="col-md-3
col-xs-6 isi">
<img class=""
src="Konten/2.jpg" width="100%">
<h2
class="align-center"> Rubik's 2x2</h2>
</div>
</a>
<a href="#">
<div class="col-md-3
col-xs-6 isi">
<img class=""
src="Konten/3.jpg" width="100%">
<h2
class="align-center"> Rubik's 3x3</h2>
</div>
</a>
<a href="#">
<div class="col-md-3
col-xs-6 isi">
<img class=""
src="Konten/4.jpg" width="100%">
<h2
class="align-center"> Rubik's 4x4</h2>
</div>
</a>
<a href="#">
<div class="col-md-3
col-xs-6 isi">
<img class=""
src="Konten/5.jpg" width="100%">
<h2
class="align-center"> Rubik's 5x5</h2>
</div>
</a>
</div>
</div>
<!-- Menu -->
<div
class="container-fluid" style="margin-top:40px;">
<div
class="row">
<figure>
<a href="#">
<div class="col-md-3
col-sm-6 col-xs-12 menu back_menu" style="background-image:
url('Menu/maxresdefault.jpg');">
<img src="01.jpg"
style="opacity:0">
<figcaption
class="align-center">
<p>KOMUNITAS</p>
</figcaption>
</div>
</a>
</figure>
<figure>
<a href="#">
<div class="col-md-3
col-sm-6 col-xs-12 menu back_menu" style="background-image:
url('Menu/maxresdefault2.jpg')">
<img src="01.jpg"
style="opacity:0">
<figcaption
class="align-center">
<p>KOMPETISI</p>
</figcaption>
</div>
</a>
</figure>
<figure>
<a href="#">
<div class="col-md-3
col-sm-6 col-xs-12 menu back_menu" style="background-image:
url('Menu/WCAlogo blue.jpg')">
<img src="01.jpg"
style="opacity:0">
<figcaption
class="align-center">
<p>ORGANISASI
DUNIA</p>
</figcaption>
</div>
</a>
</figure>
<figure>
<a href="#">
<div class="col-md-3
col-sm-6 col-xs-12 menu back_menu" style="background-image:
url('Menu/maxresdefault3.jpg')">
<img src="01.jpg"
style="opacity:0">
<figcaption
class="align-center">
<p>TOKO
RUBIK</p>
</figcaption>
</div>
</a>
</figure>
</div>
</div>
<!-- Footer nav -->
<div
class="footer_nav">
<div
class="container-fluid">
<div
class="row">
<div class="col-md-3
col-xs-12">
<h4>Forum Diskusi
Rubik</h4>
<ul>
<li><a
href="#">Komunitas Rubik Indonesia</a></li>
<li><a
href="#">Nusantara Speedcubing Association</a></li>
</ul>
</div>
<div class="col-md-3
col-xs-12">
<h4>Stopwatch/Timer
Rubik</h4>
<ul>
<li><a
href="#">Rubik's Cube Timer 1.8</a></li>
<li><a
href="#">BRANOVETS Rubik's Stopwatch</a></li>
<li><a
href="#">Prisma Puzzle Timer</a></li>
</ul>
</div>
<div class="col-md-3
col-xs-12">
<h4>WCA
Delegate</h4>
<ul>
<li><a
href="#">Cendy Cahyo Rahmat</a></li>
</ul>
</div>
<div class="col-md-3
col-xs-12">
<h4>WCA
Regulation/Regulasi WCA</h4>
<ul>
<li><a
href="#">English</a></li>
<li><a
href="#">Indonesia</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div
class="footer_bar">
<div class="col-md-3
align-center">
Copyright
© Anang Soko
</div>
<div class="col-md-6
foot align-center">
<img
src="Footer/logoo.png">
</div>
</div>
</body>
</html>