Lab-RPL-ITS · rantositorus · Aug 20, 2023 · Aug 21, 2023 · Aug 22, 2023 · Aug 25, 2023
diff --git a/...s/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_landing1.jpeg b/...s/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_landing1.jpeg
diff --git a/...s/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_landing2.jpeg b/...s/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_landing2.jpeg
diff --git a/...s/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_landing3.jpeg b/...s/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_landing3.jpeg
diff --git a/...-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/fiony_alveria.jpg b/...-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/fiony_alveria.jpg
diff --git a/...-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/freya_jayawardana.jpg b/...-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/freya_jayawardana.jpg
diff --git a/...023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/gita_sekar_andarini.jpg b/...023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/gita_sekar_andarini.jpg
diff --git a/...an-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/reva_fidela.jpg b/...an-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/reva_fidela.jpg
diff --git a/...-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/shania_gracia.jpg b/...-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/assets/foto_member/shania_gracia.jpg
diff --git a/tugas/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/index.html b/tugas/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Tugas</title>
+  </head>
+  <body>
+    <header>
+      <h1 id="Judul">JKT48</h1>
+      <nav>
+        <a href="#landing">About</a>
+        <a href="#member-page">Member</a>
+        <a href="">bagian 3</a>
+      </nav>
+    </header>
+    <section id="landing">
+      <div>
+        <h2>Lorem, ipsum.</h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident,
+          harum!
+        </p>
+      </div>
+      <div class="slider-wrapper">
+        <div class="slider">
+          <img id="slide-1" src="./assets/foto_landing1.jpeg" alt="" />
+          <img id="slide-2" src="./assets/foto_landing2.jpeg" alt="" />
+          <img id="slide-3" src="./assets/foto_landing3.jpeg" alt="" />
+        </div>
+        <div class="slider-nav">
+          <a href="#slide-1"></a>
+          <a href="#slide-2"></a>
+          <a href="#slide-3"></a>
+        </div>
+      </div>
+    </section>
+    <section id="member-page">
+      <div id="jikoshoukai">
+        <h2 id="fiony">
+          "Seperti simfoni yang menenangkan hati. Halo, aku Fiony"
+        </h2>
+      </div>
+      <div id="foto-member">
+        <div>
+          <img src="./assets/foto_member/fiony_alveria.jpg" alt="" />
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/tugas/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/styles.css b/tugas/pelatihan-vcs-2023/Ranto_Bastara_Hamonangan_Sitorus/styles.css
@@ -0,0 +1,153 @@
+* {
+  font-family: "Montserrat";
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+header {
+  position: sticky;
+  display: flex;
+  padding: 16px 100px;
+  top: 0;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 5;
+  background-color: #fff;
+  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.1);
+}
+
+header img {
+  size: 50%;
+}
+
+nav > a {
+  font-size: 20px;
+  color: black;
+  text-decoration: none;
+  padding: 0px 16px;
+}
+
+nav > a:hover {
+  color: #ed1b24;
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 45px;
+  margin: 0 0 0 0;
+}
+
+#Judul {
+  color: #ed1b24;
+}
+
+section {
+  padding: 64px 128px;
+}
+
+.slider-wrapper {
+  position: relative;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.slider {
+  display: flex;
+  aspect-ratio: 16/9;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
+}
+
+.slider img {
+  flex: 1 0 100%;
+  scroll-snap-align: start;
+  object-fit: cover;
+}
+
+.slider-nav {
+  display: flex;
+  column-gap: 1rem;
+  position: absolute;
+  bottom: 1.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.slider-nav a {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: #fff;
+  opacity: 0.75;
+  transition: opacity ease 250ms;
+}
+
+.slider-nav a:hover {
+  opacity: 1;
+}
+
+#landing {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+}
+
+#landing h2 {
+  font-size: 64px;
+  margin-bottom: 0;
+}
+
+#landing p {
+  font-size: 32px;
+  margin-top: 0;
+}
+
+#member-page {
+  display: flex;
+  height: 100vh;
+  margin: 0 -10vh;
+  text-align: center;
+}
+
+#member-page div {
+  height: 50%;
+  transform: skew(-15deg);
+}
+
+#foto-member {
+  width: 40%;
+  box-shadow: 4px 2px 4px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+#jikoshoukai {
+  display: flex;
+  width: 60%;
+  box-shadow: 4px 2px 4px 4px rgba(0, 0, 0, 0.1);
+  align-items: center;
+  justify-content: center;
+}
+
+#foto-member div + div {
+  margin-left: 3vh;
+}
+
+#foto-member div img {
+  object-fit: contain;
+  transform: skew(20deg);
+  margin: 0 -20%;
+}
+
+#jikoshoukai h2 {
+  color: #ed1b24;
+}