Add files via upload

patradinata · Jun 10, 2024 · f0a7a64 · f0a7a64
1 parent c210a0b
commit f0a7a64
Show file tree

Hide file tree

Showing 28 changed files with 1,059 additions and 0 deletions.
diff --git a/github.svg b/github.svg
diff --git a/img/ITBootcamp.jpeg b/img/ITBootcamp.jpeg
diff --git a/img/Sertifikat-patra Dinata1.jpg b/img/Sertifikat-patra Dinata1.jpg
diff --git a/img/bootstrap (2).png b/img/bootstrap (2).png
diff --git a/img/corel.png b/img/corel.png
diff --git a/img/css.png b/img/css.png
diff --git a/img/eviTriana.jpeg b/img/eviTriana.jpeg
diff --git a/img/figma.png b/img/figma.png
diff --git a/img/footer img.png b/img/footer img.png
diff --git a/img/fotoku.jpeg b/img/fotoku.jpeg
diff --git a/img/fotoku.png b/img/fotoku.png
diff --git a/img/git.png b/img/git.png
diff --git a/img/html.png b/img/html.png
diff --git a/img/javascript.png b/img/javascript.png
diff --git a/img/ms office.png b/img/ms office.png
diff --git a/img/node.js1.png b/img/node.js1.png
diff --git a/img/pr.png b/img/pr.png
diff --git a/img/psd.png b/img/psd.png
diff --git a/img/react.png b/img/react.png
diff --git a/img/sertifikat PKD.jpeg b/img/sertifikat PKD.jpeg
diff --git a/img/tailwind.png b/img/tailwind.png
diff --git a/img/xd.png b/img/xd.png
diff --git a/index.html b/index.html
diff --git a/instagram.svg b/instagram.svg
diff --git a/script.js b/script.js
@@ -0,0 +1,14 @@
+const nav = document.getElementById("nav");
+
+// ketika scrool dijalankan
+window.addEventListener("scroll", function () {
+  scrollposition = window.scrollY;
+  // pengkondisian! if else if
+  if (scrollposition >= 60) {
+    nav.classList.add("nav-dark");
+
+    // ketika di scrool ke atas balik lagi transparan
+  } else if (scrollposition <= 60) {
+    nav.classList.remove("nav-dark");
+  }
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,220 @@
+:root {
+  --mainColor: #252734;
+  --secondaryColor: #333646;
+  --acsentColor: #ff9100;
+}
+
+body {
+  background-color: var(--mainColor);
+  min-height: 900px;
+  font-family: "ubuntu", sans-serif;
+}
+
+section h1 {
+  color: #ffff;
+  font-size: 2.5rem;
+}
+
+/* navbar */
+.nav-link.active {
+  color: var(--acsentColor) !important;
+  font-weight: 700;
+}
+
+.nav-dark {
+  background-color: var(--secondaryColor) !important;
+  z-index: 10;
+  transition: 0.9s;
+}
+/*  end navbar */
+
+/* hero */
+.color-acsent {
+  color: var(--acsentColor);
+}
+
+#hero {
+  color: #ffff;
+  min-height: 100vh;
+  padding-top: 75px;
+}
+
+#hero h1 {
+  font-size: 3rem;
+}
+
+#hero h2 {
+  font-weight: 300;
+}
+
+#hero p {
+  font-size: 1.1rem;
+  font-weight: 300;
+}
+
+/* cta */
+.btn-custom1 {
+  background-color: var(--acsentColor);
+  text-align: center;
+  color: #ffff;
+  min-width: 150px;
+  height: 45px;
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+.btn-custom1:hover {
+  box-shadow: 0 0 5px rgba(255, 166, 0, 0.8);
+}
+
+.cv {
+  color: #ffff;
+  cursor: pointer;
+  font-size: 1.2rem;
+}
+
+.social-icons svg {
+  margin-right: 0.7em;
+  margin-bottom: 10px;
+}
+
+/* about */
+hr {
+  width: 35%;
+  height: 5px;
+  color: var(--acsentColor);
+  margin: 0 auto;
+  opacity: 100%;
+}
+
+#about {
+  min-height: 300px;
+  width: 100%;
+  background-color: var(--secondaryColor);
+  color: #ffff;
+  padding-top: 80px;
+  padding-bottom: 80px;
+  margin-bottom: 80px;
+}
+/* end about */
+
+/* skil */
+#skill {
+  min-height: 600px;
+  width: 100%;
+  color: #ffff;
+}
+
+#skill img {
+  width: 11%;
+  margin: 10px;
+}
+
+#skill .card {
+  background-color: #414558;
+  height: 340px;
+}
+
+#skill .card:hover {
+  background-color: var(--acsentColor);
+}
+
+.skill-konten {
+  margin-top: 120px;
+}
+/* end skil */
+
+/* serifikat start */
+#sertifikat {
+  margin-top: -170;
+  padding-top: 270px;
+  padding-bottom: 80px;
+  background-color: var(--secondaryColor);
+}
+
+#sertifikat p,
+a {
+  color: #ffff !important;
+  text-decoration: none;
+}
+
+#sertifikat img {
+  width: 49%;
+  padding: 10px;
+}
+/* Yang abis ditambahkan */
+#sertifikat img:hover {
+  background-color: white;
+}
+/* serifikat end */
+
+/* galery */
+#portolio .container {
+  padding: 80px 10px;
+}
+/* end */
+
+/*-- Media Queries and Responsive breakpoints  */
+
+@media screen and (max-width: 1200px) {
+  #hero p {
+    font-size: 0.9rem;
+  }
+  #hero h1 {
+    font-size: 2.3rem;
+  }
+}
+@media screen and (max-width: 768px) {
+  #hero img {
+    width: 60%;
+  }
+  .social-icons {
+    left: 50%;
+    transform: translate(-50%);
+  }
+
+  #hero .row {
+    padding-bottom: 85px;
+  }
+
+  .btn-custom1 {
+    width: 80%;
+  }
+
+  #about p {
+    text-align: justify !important;
+  }
+  #skill .card h3 {
+    font-size: 1.3rem;
+  }
+
+  #skill .card {
+    padding-left: 30px !important;
+    padding-right: 30px !important;
+    margin-top: 20px;
+  }
+}
+@media screen and (max-width: 576px) {
+  hr {
+    width: 75%;
+  }
+
+  h1 {
+    font-size: 2rem !important;
+  }
+
+  footer img {
+    width: 75px;
+  }
+
+  footer p {
+    font-size: 0.8rem;
+  }
+}
+@media screen and (max-width: 350px) {
+  #portofolio .col-md-12 {
+    flex-direction: column;
+
+  }
+}
+/*--Media Queries and Responsive breakpoints selesai!-- */
diff --git a/web-design.svg b/web-design.svg
diff --git a/youtube.svg b/youtube.svg