INDONESIAN BATIK COMUNITY
Tampilan Home:
Tampilan Struktur:
Source Code Home
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="UTS page 1.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-sm-6">
<h2>INDONESIAN *** BATIK *** COMUNITY</h2>
<p>The Masterpiece of Nusantara</p>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="UTS page 1.html"></a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="UTS page 1.html">Home</a></li>
<li><a href="UTS page 3.html">Profil</a></li>
<li><a href="UTS page 2.html">Gallery</a></li>
<li><a href="UTS page 4.html">Contact Us</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</nav>
</div>
<div class="container" >
<div class="row">
<h1 style="color: white;">Pride of Indonesia</h1>
<p style="color: white;">Every culture have its own color and we have thousands</p>
</div>
<div class="row">
<div class="col-md-12 slide-row ">
<!--carousel-->
<div id="carousel-example-generic" class="carousel slide " data-ride="carausel">
<!-- indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!--wrapper for slide-->
<div class="carousel-inner">
<div class="item active">
<img src="batik2.jpg" alt="">
<div class="carousel-caption">
<h3>Colorfull</h3>
</div>
</div>
<div class="item">
<img src="batik3.jpg" alt="">
<div class="carousel-caption">
<h3>Classic</h3>
</div>
</div>
<div class="item">
<img src="batik5.jpg" alt="">
<div class="carousel-caption">
<h3>Exclusive</h3>
</div>
</div>
<div class="item">
<img src="batik8.jpg" alt="">
<div class="carousel-caption">
<h3>Traditional</h3>
</div>
</div>
<!--control-->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-4">
<div class="gallery">
<a target="_blank" href="image/galery/1.jpg">
<img src="pengrajin.jpg" alt="" >
</a>
<h3>Selamatkan Pengrajin Batik</h3>
</div>
</div>
<div class="col-sm-4">
<div class="gallery">
<a target="_blank" href="image/galery/1.jpg">
<img src="pelajaran.jpg" alt="" >
</a>
<h3>Dukung Batik Masuk Kurikulum SMA</h3>
</div>
</div>
<div class="col-sm-4">
<div class="gallery">
<a target="_blank" href="pameran.jpg">
<img src="pameran.jpg" alt="" >
</a>
<h3>Pameran Batik Nasional</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 bottom">
<p>contact us</p>
<p>no : 123457890</p>
<p>email : WWFcontact@gmail.com</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Source Code Profil
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<link href="UTS page 2.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-sm-6">
<h2 style="color: white;background-color: black;">INDONESIAN *** BATIK *** COMUNITY</h2>
<p style="color: white;background-color: black;">The Masterpiece of Nusantara</p>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="UTS page 1.html"></a>
</div>
<ul class="nav navbar-nav">
<li><a href="UTS page 1.html">Home</a></li>
<li class="active"><a href="UTS page 3.html">Profil</a></li>
<li><a href="UTS page 2.html">Gallery</a></li>
<li><a href="UTS page 4.html">Contact Us</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</nav>
</div>
<h2>Struktur komunitas</h2>
<img src="1.jpg" style="width:1000px;height:1500px;">
<div class="row">
<div class="col-md-12 bottom">
<p>contact us</p>
<p>no : 123457890</p>
<p>email : WWFcontact@gmail.com</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Source Code Gallery
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="UTS page 2.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-sm-6">
<h2 style="color: white;background-color: black;">INDONESIAN *** BATIK *** COMUNITY</h2>
<p style="color: white;background-color: black;">The Masterpiece of Nusantara</p>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="UTS page 1.html"></a>
</div>
<ul class="nav navbar-nav">
<li><a href="UTS page 1.html">Home</a></li>
<li><a href="UTS page 3.html">Profil</a></li>
<li class="active"><a href="UTS page 2.html">Gallery</a></li>
<li><a href="UTS page 4.html">Contact Us</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</nav>
</div>
<div class="container" >
<div class="row">
<div class="col-md-6 slide-row ">
<!--carousel-->
<div id="carousel-example-generic" class="carousel slide " data-ride="carausel">
<!-- indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!--wrapper for slide-->
<div class="carousel-inner">
<div class="item active">
<img src="pekalongan1.jpg" alt="">
<div class="carousel-caption">
<h3>pekalongan</h3>
</div>
</div>
<div class="item">
<img src="pekalongan5.jpg" alt="">
<div class="carousel-caption">
<h3>Classic</h3>
</div>
</div>
<div class="item">
<img src="pekalongan3.jpg" alt="">
<div class="carousel-caption">
<h3>pekalongan</h3>
</div>
</div>
<div class="item">
<img src="pekalongan4.jpg" alt="">
<div class="carousel-caption">
<h3>pekalongan</h3>
</div>
</div>
<!--control-->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
<div class="col-md-6 slide-row ">
<!--carousel-->
<div id="carousel-example-generic0" class="carousel slide " data-ride="carausel">
<!-- indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic0" data-slide-to="4" class="active"></li>
<li data-target="#carousel-example-generic0" data-slide-to="5"></li>
<li data-target="#carousel-example-generic0" data-slide-to="6"></li>
<li data-target="#carousel-example-generic0" data-slide-to="7"></li>
</ol>
<!--wrapper for slide-->
<div class="carousel-inner">
<div class="item active">
<img src="solo1.jpg" alt="">
<div class="carousel-caption">
<h3>solo</h3>
</div>
</div>
<div class="item">
<img src="solo3.jpg" alt="">
<div class="carousel-caption">
<h3>solo</h3>
</div>
</div>
<div class="item">
<img src="batik5.jpg" alt="">
<div class="carousel-caption">
<h3>solo</h3>
</div>
</div>
<div class="item">
<img src="solo4.jpg" alt="">
<div class="carousel-caption">
<h3>solo</h3>
</div>
</div>
<!--control-->
<a class="left carousel-control" href="#carousel-example-generic0" data-slide="prev"
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic0" data-slide="next"
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<hr />
</div>
<div class="container" >
<div class="row">
<div class="col-md-6 slide-row ">
<!--carousel-->
<div id="carousel-example-generic1" class="carousel slide " data-ride="carausel">
<!-- indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="8" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="9"></li>
<li data-target="#carousel-example-generic1" data-slide-to="10"></li>
<li data-target="#carousel-example-generic1" data-slide-to="11"></li>
</ol>
<!--wrapper for slide-->
<div class="carousel-inner">
<div class="item active">
<img src="cirebon2.jpg" alt="">
<div class="carousel-caption">
<h3>cirebon</h3>
</div>
</div>
<div class="item">
<img src="cirebon3.jpg" alt="">
<div class="carousel-caption">
<h3>cirebon</h3>
</div>
</div>
<div class="item">
<img src="cirebon1.jpg" alt="">
<div class="carousel-caption">
<h3>cirebon</h3>
</div>
</div>
<div class="item">
<img src="cirebon4.jpg" alt="">
<div class="carousel-caption">
<h3>cirebon</h3>
</div>
</div>
<!--control-->
<a class="left carousel-control" href="#carousel-example-generic1" data-slide="prev"
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" data-slide="next"
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
<div class="col-md-6 slide-row ">
<!--carousel-->
<div id="carousel-example-generic2" class="carousel slide " data-ride="carausel">
<!-- indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic2" data-slide-to="12" class="active"></li>
<li data-target="#carousel-example-generic2" data-slide-to="13"></li>
<li data-target="#carousel-example-generic2" data-slide-to="14"></li>
<li data-target="#carousel-example-generic2" data-slide-to="15"></li>
</ol>
<!--wrapper for slide-->
<div class="carousel-inner">
<div class="item active">
<img src="jogja1.jpg" alt="">
<div class="carousel-caption">
<h3>jogja</h3>
</div>
</div>
<div class="item">
<img src="jogja3.jpg" alt="">
<div class="carousel-caption">
<h3>jogja</h3>
</div>
</div>
<div class="item">
<img src="jogja2.jpg" alt="">
<div class="carousel-caption">
<h3>jogja</h3>
</div>
</div>
<div class="item">
<img src="jogja4.jpg" alt="">
<div class="carousel-caption">
<h3>jogja</h3>
</div>
</div>
<!--control-->
<a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev"
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" data-slide="next"
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-12 bottom">
<p>contact us</p>
<p>no : 123457890</p>
<p>email : WWFcontact@gmail.com</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Source Code Contact
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<link href="UTS page 4.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-sm-11">
<h2></h2>
<p></p>
</div>
<div class="col-sm-1">
<img src="image/logo.png" alt="">
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="UTS page 1.html"></a>
</div>
<ul class="nav navbar-nav">
<li><a href="UTS page 1.html">Home</a></li>
<li><a href="UTS page 3.html">Profil</a></li>
<li><a href="UTS page 2.html">Gallery</a></li>
<li class="active"><a href="UTS page 4.html">Contact Us</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</nav>
</div>
<div class="row">
<div class="col-md-12 bottom">
<p style="color: white;">contact us</p>
<p style="color: white;">no : 123457890</p>
<p style="color: white;";>email : WWFcontact@gmail.com</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
CSS HOME
body {
background: linear-gradient(to bottom, black, white);
}
.jumbotron {
height: 200px;
background-image: url("batik1.jpg");
}
.jumbotron img{
width: 90px;
}
.nav li:hover {
border-radius: 10px;
background-color: #9dcc9e;
}
.carousel img{
border-radius: 50px;
overflow: hidden;
}
.col-sm-6 h2{
background-color: black;
color : white;
font-style: bold;
font-style: italic;
}
.col-sm-6 p{
background-color: black;
color : white;
font-style: bold;
font-style: italic;
}
.profil1 {
border-style: outset;
border-radius: 50px;
background-color: #d8d8d8;
}
.profil1 p{
font-size: 12px;
text-align: justify;
}
.profil1 ul{
list-style-type: circle;
}
.profil1 li{
font-size: 12px;
text-align: justify;
}
.profil1 h3 {
text-align: center;
}
.row.bawah img {
width: 400px;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent) , to(rgba(250, 250, 250, 0.1)));
}
.col-md-4.con2 p {
font-size: 20px;
color: white;
text-align: center;
}
.col-md-8.style1 {
height: 300px;
position: relative;
background-color: lightgrey;
}
.col-md-8.style1 p {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
.col-md-8.style1 img{
width: 200px;
}
.img1{
position: absolute;
bottom: 0px;
right: 16px;
border-radius: 50%;
}
.text1{
position: absolute;
bottom: 70px;
right: 70px;
font-size: 30px;
font-style: bold;
color: black;
}
.img2{
position: absolute;
bottom: 0px;
left: 16px;
border-radius: 50%;
}
.text2{
position: absolute;
bottom: 70px;
left: 70px;
font-size: 30px;
font-style: bold;
color: black;
}
.img3{
position: absolute;
right: 400px;
border-radius: 50%;
}
.text3{
position: absolute;
bottom: 225px;
right: 50%;
font-size: 30px;
font-style: bold;
color: black;
}
.col-md-12.bottom {
text-align: center;
font-size: 20px;
font-style:bold;
background-image: url("batik1.jpg");
}
CSS GALLERY
body {
background: linear-gradient(to bottom, black, white);
}
.jumbotron {
height: 200px;
background-image: url("batik1.jpg");
}
.jumbotron img{
width: 90px;
}
.nav li:hover {
border-radius: 10px;
background-color: #9dcc9e;
}
.carousel img{
border-radius: 50px;
overflow: hidden;
}
div.desc {
padding: 15px;
text-align: center;
}
.col-md-12.bottom {
text-align: center;
font-size: 20px;
font-style:bold;
background-image: url("batik1.jpg");
}
CSS PROFIL
body {
background: linear-gradient(to bottom, black, white);
}
.jumbotron {
height: 200px;
background-image: url("batik1.jpg");
}
.jumbotron img{
width: 90px;
}
.nav li:hover {
border-radius: 10px;
background-color: #9dcc9e;
}
.carousel img{
border-radius: 50px;
overflow: hidden;
}
div.desc {
padding: 15px;
text-align: center;
}
.col-md-12.bottom {
text-align: center;
font-size: 20px;
font-style:bold;
background-image: url("batik1.jpg");
}
CSS CONTACT
body {
background-color: #595959;
}
.jumbotron {
height: 200px;
background-image: url("batik1.jpg");
}
.jumbotron img{
width: 90px;
}
.nav li:hover {
border-radius: 10px;
background-color: #9dcc9e;
}
.carousel img{
border-radius: 50px;
overflow: hidden;
}
div.desc {
padding: 15px;
text-align: center;
}
.col-md-12.bottom {
text-align: center;
font-size: 20px;
font-style:bold;
background-color: black;
}
