hacktiv8 · yufias · Nov 22, 2019 · Nov 22, 2019
diff --git a/cv.css b/cv.css
@@ -0,0 +1,47 @@
+body{
+    background: linear-gradient(94deg, rgba(11,9,43,1) 0%, rgba(17,17,139,1) 43%, rgba(2,18,80,0.6138830532212884) 100%);
+}
+
+h1{
+    color: gold;
+}
+
+h2{
+    color: gold;
+    font: 22px arial, sans-serif;
+    font-weight: bold;
+}
+
+.foto{
+  float: center;
+  width: 180px;
+}
+
+p{
+    color: whitesmoke;
+    font-family: arial;
+    font-size: 16px;
+    padding: 0px;
+    margin:5px;
+    text-align: justify;
+}
+
+li{
+    color: whitesmoke;
+    font-family: arial;
+    font-size: 16px;
+    padding: 0px;
+    margin:5px;
+    text-align: justify;
+}
+
+.button {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+  }
diff --git a/cv.html b/cv.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Exercise 1</title>
+    <link rel="stylesheet" href="cv.css" type="text/css">
+</head>
+
+<body>
+    <center>
+        <h1>Biodata</h1>
+        <h2>Yufi Ariftiyo Sidi</h2>
+        <hr color="gold">
+        <img src="foto.jpg" class="foto" alt="foto">
+    </center>
+    <br>
+
+    <h2>Profile</h2>
+    <p>
+        Hello, my name is Yufi Ariftiyo Sidi. My friends and my family call me yupi. I’m a fresh graduate student from
+        Mercu Buana University. I love to learn something new, I can work in team and
+        individual as well.
+    </p>
+
+    <h2>Address</h2>
+    <p>
+        Pondok Pakulonan Blok H2/17 RT 03/04 Kel. Pakualam Kec. Serpong Utara Tangerang Selatan
+    </p>
+
+    <h2>Contact</h2>
+    <p>
+        PHONE: 0857-1630-5228 <br>
+        EMAIL: yupi41@gmail.com
+    </p>
+
+    <h2>Education</h2>
+    <p>
+        Mercu Buana University 2015 - 2019 | Bachelor Degree of Information System with GPA 3.71 <br>
+        SMA Yuppentek 1 Tangerang 2013 - 2015 | IPA
+    </p>
+
+    <h2>Work Experience</h2>
+    <p>
+        PT. Paragon Technology Innovation - ETL Internship | March 2018 – June 2018 | Working with Pentaho Data
+        Integration and PostgreSQL. <br>
+
+        PT. Jagat Genta Teknologi - Programmer | June 2018 – November 2018 | Develop a web application to benchmark
+        smartphone battery for JagatReview
+    </p>
+
+    <h2>Skills</h2>
+    <ul>
+        <li>PHP</li>
+        <li>SQL</li>
+        <li>CSS</li>
+        <li>CodeIgniter</li>
+        <li>JavaScript</li>
+        <li>Java</li>
+        <li>C++</li>
+        <li>Microsoft Office</li>
+    </ul>
+
+    <center>
+        <a class="button" href="index.html">Back to main page</a>
+    </center>
+</body>
+
+</html>
diff --git a/form.css b/form.css
@@ -0,0 +1,41 @@
+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,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Exercise 4</title>
+    <link rel="stylesheet" href="form.css">
+</head>
+
+<body>
+    <center>
+        <h2>You can send me message through this form</h2>
+    </center>
+    <div>
+        <form action="https://formspree.io/xyyyqkjz" method="POST">
+            <label for="name">Full Name</label> <br>
+            <input type="text" name="name" placeholder="Full Name"> <br>
+            <label for="email">Your Email</label><br>
+            <input type="email" name="email" placeholder="Email Address"><br>
+            <label for="email">Send your message</label><br>
+            <input type="text" name="message" placeholder="You can leave your message here..."><br>
+            <input type="submit" value="Send">
+        </form>
+        <center><a href="index.html">Back to main page</a></center>
+    </div>
+</body>
+
+</html>
diff --git a/foto.jpg b/foto.jpg
diff --git a/index.html b/index.html
@@ -1,11 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>Exercise 4</title>
+    <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
     <center>
         <h1>Final Project</h1>
     </center>
+
+    <div class="slideshow-container">
+
+        <div class="mySlides fade">
+            <img src="pic1.jpg" style="width:100%">
+            <div class="caption"><a class="button" href="#openModal">Click Me!</a> </div>
+        </div>
+
+        <div class="mySlides fade">
+            <img src="pic2.jpg" style="width:100%">
+            <div class="caption">You can leave me message <br>
+                <a class="button" href="form.html">Send me message here</a>
+            </div>
+        </div>
+
+        <div class="mySlides fade">
+            <img src="pic3.jpg" style="width:100%">
+            <div class="caption">Check My CV <br>
+                <a class="button" href="cv.html">Take a look</a>
+            </div>
+        </div>
+
+        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+        <a class="next" onclick="plusSlides(1)">&#10095;</a>
+    </div>
+    <br>
+
+    <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>
+
+    <script src="slider.js"></script>
+
+    <div id="openModal" 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/pic1.jpg b/pic1.jpg
diff --git a/pic2.jpg b/pic2.jpg
diff --git a/pic3.jpg b/pic3.jpg
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";
+}