
<!DOCTYPE html>
<html>
<head>
	<title>gnet</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<script type="text/javascript" src="js/navigation.js" ></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}

.slideshow {
  margin: 150px auto;
  height:323px;
  }

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
  
  
}

.banner_footer {
width: 100%;
	height: 170px;
	margin : 180px auto;
}

/** START **/
#banner_wrapper {
		color:white;
	
	
	/*border-radius:3px 3px 0px 0px;
	-webkit-border-radius:3px 3px 0px 0px;
	-moz-border-radius:3px 3px 0px 0px;*/
	
	-webkit-border-top-left-radius: 100px 110px;
	-moz-border-top-left-radius: 100px 110px;
	border-top-left-radius: 100px 110px;
	
	position:absolute;
	padding:5px;
	text-align:center;
	width:180px;
	border:solid 1px #bfbfbf;
	margin-top:-24px;
	border-bottom:none;
	margin-left:10px;
	/*background:url(../images/bg-footer.jpg) repeat-x top;*/
		background-color:#8b0000;
		font-family:calibri;
		font-weight:bold;
		font-size:12px;
}
#banner_wrapper_footer{
	position:absolute;
	height:5px;
	background:#c1c8f7;
	display:block;
	width:100%;
}
/** END **/

#footermenu {
	width:100%;
	height:50px;
	padding:5px;
	color:#acacac;
	text-align:center;
	font-size:14px;
	background:url(../images/bg_footer.png) repeat-x bottom;
}
#footermenu a{
	color:#f7f2f2;
	font-family:calibri;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}

#footer {
	width:100%;
	padding:5px;
	color:#acacac;
	text-align:center;
	font-size:11px;
}
.footer a {
	color:#acacac;
	font-weight:bold;
}
.footermenu a, #footermenu a {
	color: #636363;
	text-decoration:none;
}

</style>
</head>

<body>
<div class="container-body">
<div id="header">
	<img src='icon/header-logo.png' height='80' title='TAMBAH'>
	<table align="right" width="290"  height="10"  border="0">
	<tr><td><a href='user/daftar.php'><h2><font color='#ff0000' face="Courier New" > Daftar Akun</h2></font></td>
	<td><a href='user/masuk.php'><img src='icon/registerok.png' height='50' title='TAMBAH'></td>	</tr>
	</table>
	<marquee behavior="alternate" scrollamount="10"><h1><font face="Century Gothic" font color="f6f5f9" > Paket Internet Cepat dan Unlimited</h1></marquee></font>
	
</div>
<div id="navigation" class="container">
	<div id="home" class="pri-nav"><div><a href="home">home</a></div></div>
	<div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
	<div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
	<div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
	<div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
</div>
 <!-- END HEADER -->
  <!-- MAIN -->
<div class="slideshow">
	<div class="slideshow-container">
		<div class="mySlides fade">
		<div class="numbertext">1 / 3</div>
		<img src="slide/awan.jpg" style="width:100%">
		<div class="text">Caption Text</div>
		</div>
		<div class="mySlides fade">
		<div class="numbertext">2 / 3</div>
		<img src="slide/langit.jpg" style="width:100%">
		<div class="text">Caption Two</div>
		</div>
		<div class="mySlides fade">
		<div class="numbertext">3 / 3</div>
		<img src="slide/bintang.jpg" style="width:100%">
		<div class="text">Caption Three</div>
		</div>
	</div>
	<div style="text-align:center">
		<span class="dot"></span> 
		<span class="dot"></span> 
		<span class="dot"></span> 
	</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</div>
 <!-- END MAIN -->

 <!-- MENU -->

<div class="content">
	<div class="content-paket" id="content-title" >
	<div id="content-paket" >
							<h4>Paket 5 Mbps <p></h4>
							 </p>
							<div class="post-img">
							<img src="img/Speedometer-20.png" alt="Pelatihan Jurnalis Regio Jawa" class="alignleft" width="60px">
							</div>
							<p>Cocok untuk penggunaan<br> 1 - 2 perangkat
							<br>
							<a class="read" href="v"><nobr>Selengkapnya </nobr></a></p>
			</div>
					<div id="content-paket">
							<h4>Paket 10 Mbps<p></h4>
							</p>
							<div class="post-img">
							<img src="img/Speedometer-30.png" alt="Pelatihan Jurnalis Regio Jawa" class="alignleft" width="60px">
							</div>
							<p>Cocok untuk penggunaan<br> 1 - 4 perangkat
							<br>
							<a class="read" href="v"><nobr>Selengkapnya </nobr></a></p>
					</div>
					<div id="content-paket">
							<h4>Paket 20 Mbps<p></h4>
							</p>
							<div class="post-img">
							<img src="img/Speedometer-50.png" alt="Pelatihan Jurnalis Regio Jawa" class="alignleft" width="60px">
							</div>
							<p>Cocok untuk penggunaan<br> 1 - 6 perangkat
							<br>
							<a class="read" href="v"><nobr>Selengkapnya </nobr></a></p>
					</div>
					<div id="content-paket">
							<h4>Paket 30 Mbps<p></h4>
							</p>
							<div class="post-img">
							<img src="img/Speedometer-30.png" alt="Pelatihan Jurnalis Regio Jawa" class="alignleft" width="60px">
							</div>
							<p>Cocok untuk penggunaan<br> 1 - 8 perangkat
							<br>
							<a class="read" href="v"><nobr>Selengkapnya </nobr></a></p>
					</div>
	
	
	</div>
		
			<!-- the rest of the content-->
</div>
</div>
<div class="banner_footer"></div>


<div id="banner_wrapper">Info Tambahan </div>
		<div id="banner_wrapper_footer"></div>
		<div id="footermenu">
			<p>
				
				<a href="Materi2.html">Dokumen</a>
				|
				<a href="Materi3.html">Tautan</a>		
				|
				 <a href="Materi4.html">Kursus  </a>
				|
				<a href="Materi5.html">Agenda</a>
				|
				<a href="Materi7.html">Iklan</a>
				|
				<a href="Materi8.html">Lowongan Kerja</a>
				|
				<a href="Meteri9.html">Paket</a>
				|
				<a href="Meteri9.html">Makna dan Lambang</a>				</p>
		</div>
		<div id="footer">
			Jl Raya Cimuntuk No 26 Purwakarta Telp 082114008181 Email: gofranetworksolusi@gmail.com
			
		</div>

		<div id="footer">
			<span style="font-size:9px">Copyright (c) 2021 PT. GOFRA NETWORK SOLUSI, All Rights Reserved                                       Designed and developed by Gondi Franciskus Purba</span>		</div>
        <!-- END FOOTER -->
</div>



</body>
</html>