diff --git a/cv.css b/cv.css new file mode 100644 index 0000000..8b1be81 --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/cv.html b/cv.html new file mode 100644 index 0000000..b47222e --- /dev/null +++ b/cv.html @@ -0,0 +1,68 @@ + + + + + Exercise 1 + + + + +
+

Biodata

+

Yufi Ariftiyo Sidi

+
+ foto +
+
+ +

Profile

+

+ 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. +

+ +

Address

+

+ Pondok Pakulonan Blok H2/17 RT 03/04 Kel. Pakualam Kec. Serpong Utara Tangerang Selatan +

+ +

Contact

+

+ PHONE: 0857-1630-5228
+ EMAIL: yupi41@gmail.com +

+ +

Education

+

+ Mercu Buana University 2015 - 2019 | Bachelor Degree of Information System with GPA 3.71
+ SMA Yuppentek 1 Tangerang 2013 - 2015 | IPA +

+ +

Work Experience

+

+ PT. Paragon Technology Innovation - ETL Internship | March 2018 – June 2018 | Working with Pentaho Data + Integration and PostgreSQL.
+ + PT. Jagat Genta Teknologi - Programmer | June 2018 – November 2018 | Develop a web application to benchmark + smartphone battery for JagatReview +

+ +

Skills

+ + +
+ Back to main page +
+ + + \ No newline at end of file diff --git a/form.css b/form.css new file mode 100644 index 0000000..b77b124 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/form.html b/form.html new file mode 100644 index 0000000..2d240a2 --- /dev/null +++ b/form.html @@ -0,0 +1,27 @@ + + + + + Exercise 4 + + + + +
+

You can send me message through this form

+
+
+
+
+
+
+
+
+
+ +
+
Back to main page
+
+ + + \ No newline at end of file diff --git a/foto.jpg b/foto.jpg new file mode 100644 index 0000000..d1b27b5 Binary files /dev/null and b/foto.jpg differ diff --git a/index.html b/index.html index c0550dd..5249a77 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,57 @@ + Exercise 4 + +

Final Project

+ +
+ +
+ +
Click Me!
+
+ +
+ +
You can leave me message
+ Send me message here +
+
+ +
+ +
Check My CV
+ Take a look +
+
+ + + +
+
+ +
+ + + +
+ + + + + + diff --git a/pic1.jpg b/pic1.jpg new file mode 100644 index 0000000..3ccaca9 Binary files /dev/null and b/pic1.jpg differ diff --git a/pic2.jpg b/pic2.jpg new file mode 100644 index 0000000..ca028b1 Binary files /dev/null and b/pic2.jpg differ diff --git a/pic3.jpg b/pic3.jpg new file mode 100644 index 0000000..5cbf872 Binary files /dev/null and b/pic3.jpg differ diff --git a/slider.js b/slider.js new file mode 100644 index 0000000..0d50226 --- /dev/null +++ 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"; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0d4cdb8 --- /dev/null +++ b/style.css @@ -0,0 +1,159 @@ +* {box-sizing:border-box} + + +.slideshow-container { + max-width: 1600px; + position: relative; + margin: auto; +} + +.button { + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + +.mySlides { + display: none; +} + +.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; +} + +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +.prev:hover, .next:hover { + background-color: rgba(0,0,0,0.8); +} + +.text { + + padding: 8px 12px; + position: absolute; + bottom: 8px; + width: 100%; + text-align: center; +} + +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +.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; +} + +.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} +} + +.caption { + color: #f2f2f2; + font-size: 28px; + position:absolute; + top:50%; + left:50%; + transform:translate(-50%,-50%); + -ms-transform:translate(-50%,-50%) +} + +.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; +} \ No newline at end of file