hacktiv8 · wali91 · Nov 28, 2019 · Nov 28, 2019 · Nov 28, 2019 · Nov 28, 2019
diff --git a/cv.html b/cv.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Biodata Diri</title>
+<style type="text/css">
+  body{ font-family: Arial;}
+  td{ padding: 10px;}
+  table{margin: auto;
+  margin-top: 90px;}
+</style>
+</head>
+
+<body bgcolor="grey">
+        <center>
+                <h1>Biodata</h1>
+            </center>
+<table border="0" width="600" cellpadding="0" cellspacing="0">
+    <tr>
+        <th colspan="3"> <img src="header-blueBurst.jpg" width="100%"></th>
+    </tr>
+    <tr bgcolor="a8e7e6">
+            <td width="150"><b><i>Nama Lengkap </i></b></td>
+            <td width="250"><b><i>Waliey Rahman</i></b></td>
+            <td rowspan="9"><img src="profile.jpeg" width="250"></td>
+    </tr>
+    <tr bgcolor="#a8e7e6">
+    <td><b><i>Hobby </i></b></td>
+    <td><b><i>Ngoding,jalan-jalan ke alam seperti laut dan gunung,olahraga sepeda dan sepak bola</i></b></td>
+    </tr>
+    <tr bgcolor ="a8e7e6">
+            <td><b><i>Tempat, Tanggal Lahir</i></b></td>
+            <td><b><i>Jakarta, 27-05-1991 </i></b></td>
+        </tr>
+
+    <tr bgcolor="a8e7e6">
+        <td><b><i>pendidikan Terakhir dan jurusaan</i></b></td>
+        <td><b><i>S1(Telekomunikasi)</i></b></td>
+    </tr>
+    <tr bgcolor="a8e7e6">
+        <td><b><i>Alamat </td></i></b>
+        <td><b><i>Kp.Rawaterate Rt 005/001 No 29 Jakarta Timur </td></i></b>
+        </tr>
+    <tr bgcolor="a8e7e6"> 
+        <td><b><i> Riwayat </td></i></b>
+        <td colspan="1" align="left"><b><i>Berikut detail riwayat Hidup saya </i></b><a href="detail.html">
+        <input type="button" value="riwayat hidup">
+        </a>
+        </td>
+        </tr>
+</body>
+</html>
diff --git a/form.css b/form.css
@@ -0,0 +1,48 @@
+body {
+    background-color: blueviolet;
+}
+.dom {
+    background-color: cadetblue;
+}
+input[type=submit] {
+    width: 100%;
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  input[type=submit]:hover {
+    background-color: #45a049;
+  }
+
+  input[type=text] {
+      width: 100%;
+      padding: 12px 20px;
+      margin: 8px 0;
+      display: inline-block;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+
+    input[type=email], select {
+      width: 100%;
+      padding: 12px 20px;
+      margin: 8px 0;
+      display: inline-block;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+
+
+  div {
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px;
+  } 
+
diff --git a/form.html b/form.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Exercise 4</title>
+    <link rel="stylesheet" href="form.css">
+</head>
+<body>
+    <center>
+    <h2>You can register through this form</h2>
+    </center>
+
+    <div class="dom">
+    <form action="https://formspree.io/task_4_buat_form" method="POST"></form>"
+        <label for="name"> Name </label> </br>
+        <input type="text" name="name" class="form-control" id="name" placeholder="full-name">
+        <label for="email"> Your Email </label> <br>
+        <input type="email" name="email" class="form-control" id="email" placeholder="Email Address">
+        <label for="age"> Age </label> </br>
+        <input type="number" name="age" class="form-control" id="age" placeholder="your Age"> </br> 
+    </br>
+        <label for="kelamin">Gender</label>
+        <input type="radio" name="kelamin" value="laki-laki"/><label for="laki-laki">Laki-Laki</label>
+        <input type="radio" name="kelamin" value="perempuan"/><label for="perempuan">Perempuan</label> </br></br>
+        <label for="address">Alamat</label> </br>
+        <input type="text" name="address" class="form-control" id="address" placeholder="address"> </br>
+        <input type="submit" value="Send">
+    </form>
+        <center><a href="index.html">Back to main page</a></center>
+    </div>
+</body>
+</html>
diff --git a/header-blueBurst.jpg b/header-blueBurst.jpg
diff --git a/img1 b/img1
diff --git a/img2 b/img2
diff --git a/img3.jpeg b/img3.jpeg
diff --git a/index.html b/index.html
@@ -2,10 +2,57 @@
 <html lang="en">
 <head>
     <title>Exercise 4</title>
+    <link rel="stylesheet" href="style.css"> 
 </head>
 <body>
     <center>
         <h1>Final Project</h1>
     </center>
+
+    <!--Slideshow Container-->
+    <div class="slideshow-container">
+
+        <div class="numberslide">1/3</div>
+            <div class="mySlides fade">
+            <img src="img1" style="width:100%;">
+            <div class="caption"><a class="rmt" href="#beginModal">Open here Now</a> </div>
+        </div>
+
+    <div class="mySlides fade">
+        <div class="numberslide">2/3</div>
+        <img src="img2" style="width: 100%;">
+        <div class="caption"><b>if you interest you can send me your biodata</b> <br>
+        <a class="rmt" href="form1.html">Create your biodata in here</a></div>
+    </div>
+
+    <div class="mySlides fade">
+        <div class="numberslide">3/3</div>
+        <img src="img3.jpeg" style="width: 100%;">
+        <div class="caption">Check my cv <br>
+        <a class="rmt" href="cv1.html">please a look</a></div>
+    </div>
+
+    <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+
+<!-- The dot/circles -->
+<div style="text-align:center">
+  <span class="dot" onclick="currentSlide(1)"></span>
+  <span class="dot" onclick="currentSlide(2)"></span>
+  <span class="dot" onclick="currentSlide(3)"></span>
+</div>
+
+<!--slide show -->
+<script src="slider.js"></script>
+
+    <div id="beginModal" class="modal">
+        <div> <a href="#close" title="Close" class="close">X</a>
+            <h2>Hacktiv8</h2>
+            <p>Devc Exercise 4</p>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/profile.jpeg b/profile.jpeg
diff --git a/slider.js b/slider.js
@@ -0,0 +1,28 @@
+var slideIndex = 1;
+showSlides(slideIndex);
+
+// Next/previous controls
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+// Thumbnail image controls
+function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+  var i;
+  var slides = document.getElementsByClassName("mySlides");
+  var dots = document.getElementsByClassName("dot");
+  if (n > slides.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+      slides[i].style.display = "none";
+  }
+  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";
+} 
diff --git a/style.css b/style.css
@@ -0,0 +1,173 @@
+* {box-sizing:border-box}
+body 
+{
+    font-family: Verdana, sans-serif; margin:0
+}
+img 
+{
+    vertical-align: middle;
+}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 1000px;
+  position: relative;
+  margin: auto;
+}
+.rmt {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+  }
+
+.slide {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+  }
+
+/* Hide the images by default */
+.mySlides {
+  display: none;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
+/* Caption text */
+.caption {
+  color: #f2f2f2;
+  font-size: 15px;
+  padding: 8px 12px;
+  position: absolute;
+  bottom: 8px;
+  width: 100%;
+  text-align: center;
+}
+
+/* Number text (1/3 etc) */
+.numberslide {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* The dot/bullets/indicators */
+.dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+.active, .dot:hover {
+  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}
+}
+.modal {
+    position: fixed;
+    font-family: Arial, Helvetica, sans-serif;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 99999;
+    opacity:0;
+    -webkit-transition: opacity 400ms ease-in;
+    -moz-transition: opacity 400ms ease-in;
+    transition: opacity 400ms ease-in;
+    pointer-events: none;
+}
+.modal:target {
+    opacity:1;
+    pointer-events: auto;
+}
+.modal > div {
+    width: 400px;
+    position: relative;
+    margin: 10% auto;
+    padding: 5px 20px 13px 20px;
+    border-radius: 10px;
+    background: #fff;
+    background: -moz-linear-gradient(#fff, #999);
+    background: -webkit-linear-gradient(#fff, #999);
+    background: -o-linear-gradient(#fff, #999);
+}
+.close {
+    background: #606061;
+    color: #FFFFFF;
+    line-height: 25px;
+    position: absolute;
+    right: -12px;
+    text-align: center;
+    top: -10px;
+    width: 24px;
+    text-decoration: none;
+    font-weight: bold;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+    -moz-box-shadow: 1px 1px 3px #000;
+    -webkit-box-shadow: 1px 1px 3px #000;
+    box-shadow: 1px 1px 3px #000;
+}
+.close:hover {
+    background: #00d9ff;
+}