Fahreza17 · farahdwi24 · Oct 22, 2023 · Nov 17, 2023 · Dec 8, 2023
diff --git a/H071221001/.DS_Store b/H071221001/.DS_Store
diff --git a/H071221001/PRAKTIKUM-2/img/.DS_Store b/H071221001/PRAKTIKUM-2/img/.DS_Store
diff --git a/H071221001/PRAKTIKUM-2/img/1.JPG b/H071221001/PRAKTIKUM-2/img/1.JPG
diff --git a/H071221001/PRAKTIKUM-2/img/10.png b/H071221001/PRAKTIKUM-2/img/10.png
diff --git a/H071221001/PRAKTIKUM-2/img/2.JPG b/H071221001/PRAKTIKUM-2/img/2.JPG
diff --git a/H071221001/PRAKTIKUM-2/img/3.JPG b/H071221001/PRAKTIKUM-2/img/3.JPG
diff --git a/H071221001/PRAKTIKUM-2/img/4.JPG b/H071221001/PRAKTIKUM-2/img/4.JPG
diff --git a/H071221001/PRAKTIKUM-2/img/5.jpg b/H071221001/PRAKTIKUM-2/img/5.jpg
diff --git a/H071221001/PRAKTIKUM-2/img/6.png b/H071221001/PRAKTIKUM-2/img/6.png
diff --git a/H071221001/PRAKTIKUM-2/img/7.JPG b/H071221001/PRAKTIKUM-2/img/7.JPG
diff --git a/H071221001/PRAKTIKUM-2/img/8.jpg b/H071221001/PRAKTIKUM-2/img/8.jpg
diff --git a/H071221001/PRAKTIKUM-2/img/9.JPG b/H071221001/PRAKTIKUM-2/img/9.JPG
diff --git a/H071221001/PRAKTIKUM-2/index.html b/H071221001/PRAKTIKUM-2/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tugas Praktikum</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="#about">About</a></li>
+                <li><a href="#gallery">Gallery</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <div class="container">
+        <div class="intro" id="about">
+            <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias obcaecati cumque vel ipsum
+                dolores minima, nam voluptatum eaque fugit minus, quibusdam explicabo officiis laboriosam deserunt.
+                Ipsam dolorem officiis aspernatur quod?
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur dolorem possimus ipsa earum
+                similique dolorum voluptatum, nostrum excepturi reprehenderit sapiente alias, temporibus, cupiditate
+                asperiores impedit cumque nobis autem expedita rerum.
+                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus, amet. Ducimus, ab autem hic
+                obcaecati nisi totam quisquam delectus voluptatum consequuntur, error vitae ipsum in tempore porro
+                voluptas? Voluptates, error?
+            </p>
+        </div>
+    </div>
+    <div class="img-container">
+        <div class="grid" id="gallery">
+            <img src="img/1.jpg" alt="" class="img" />
+            <img src="img/2.jpg" alt="" class="img" />
+            <img src="img/3.jpg" alt="" class="img" />
+            <img src="img/4.jpg" alt="" class="img" />
+            <img src="img/5.jpg" alt="" class="img" />
+            <img src="img/6.png" alt="" class="img" />
+            <img src="img/7.jpg" alt="" class="img" />
+            <img src="img/8.jpg" alt="" class="img" />
+            <img src="img/9.jpg" alt="" class="img" />
+        </div>
+    </div>
+    <footer>
+        <div class="foot" id="contact">
+            <img src="img/10.png" alt="10" class="img-foot" />
+            <p>Universitas Hasanuddin</p>
+        </div>
+        <div class="foot-cont">
+            <p>Phone number : 0812345678</p>
+            <p>Email : username@gmail.com</p>
+            <p>Instagram : @username</p>
+            <p>Facebook : username</p>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/H071221001/PRAKTIKUM-2/style.css b/H071221001/PRAKTIKUM-2/style.css
@@ -0,0 +1,147 @@
+*, html, body {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: Helvetica;
+	scroll-behavior: smooth;
+}
+
+header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+	background: #ff6600;
+	color: #eaeaea;
+	display: flex;
+	justify-content: center;
+    z-index: 1;
+    padding: 20px;
+}
+
+nav ul{
+	display: flex;
+    gap: 100px;
+}
+
+li {
+	list-style-type: none;
+	padding: 10px;
+}
+
+li a {
+    font-size: 20px;
+    text-decoration: none;
+    color: white;
+}
+
+li:hover {
+    background-color: #461e00;
+    transform: scale(1.08);
+}
+
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 70px 0;
+}
+
+.desc {
+	font-size: 24px;
+    text-align: justify;
+    padding-top: 100px;
+    padding-left: 100px;
+    padding-right: 100px;
+}
+
+.img-container {
+    width: 1200px;
+    height: 1200px;
+    margin: 0 auto;
+    overflow: hidden;
+    margin-bottom: 30px;
+}
+
+.img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.img:hover {
+    transform: scale(1.05);
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+
+footer {
+    display: flex;
+	padding: 20px;
+    align-items: center;
+	background: #005003;
+	color: #eaeaea;
+    justify-content: space-between;
+}
+
+.img-foot {
+    width: 100px;
+}
+
+.foot {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
+@media screen and (max-width: 1200px) {
+
+    .img-container {
+		width: 95%;
+        height: 100%;
+	}
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 10px;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+
+    .img-container {
+		width: 95%;
+        height: 100%;
+	}
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+    }
+}
+
+@media screen and (max-width: 750px) {
+
+	.img-container {
+		width: 95%;
+        height: 100%;
+	}
+
+    footer {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        gap: 10px;
+    }
+}
diff --git a/H071221001/PRAKTIKUM-3/.DS_Store b/H071221001/PRAKTIKUM-3/.DS_Store
diff --git a/H071221001/PRAKTIKUM-3/.vscode/settings.json b/H071221001/PRAKTIKUM-3/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
diff --git a/H071221001/PRAKTIKUM-3/img/IMG1.JPG b/H071221001/PRAKTIKUM-3/img/IMG1.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG10.JPG b/H071221001/PRAKTIKUM-3/img/IMG10.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG2.JPG b/H071221001/PRAKTIKUM-3/img/IMG2.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG3.JPG b/H071221001/PRAKTIKUM-3/img/IMG3.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG4.JPG b/H071221001/PRAKTIKUM-3/img/IMG4.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG5.JPG b/H071221001/PRAKTIKUM-3/img/IMG5.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG6.JPG b/H071221001/PRAKTIKUM-3/img/IMG6.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG7.JPG b/H071221001/PRAKTIKUM-3/img/IMG7.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG8.JPG b/H071221001/PRAKTIKUM-3/img/IMG8.JPG
diff --git a/H071221001/PRAKTIKUM-3/img/IMG9.JPG b/H071221001/PRAKTIKUM-3/img/IMG9.JPG
diff --git a/H071221001/PRAKTIKUM-3/index.html b/H071221001/PRAKTIKUM-3/index.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Landing Page</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-expand-md">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="#">FOCUSTORE</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item" id="newarrival">
+                            <a class="nav-link active" aria-current="page" href="#bag">New Arrival</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="#gallery">Catalog</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                                aria-expanded="false">
+                                Lainnya
+                            </a>
+                            <ul class="dropdown-menu">
+                                <li><a class="dropdown-item" href="#deskripsi">Deskripsi Produk</a></li>
+                                <li><a class="dropdown-item" href="#video">Video Produk</a></li>
+                                <li>
+                                    <hr class="dropdown-divider">
+                                </li>
+                                <li><a class="dropdown-item" href="https://shp.ee/zdm5rg4">Buy here</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                    <div class="d-flex">
+                        <a class="btn btn-warning btn-lg" href="https://shp.ee/zdm5rg4" role="button">ORDER NOW</a>
+                    </div>
+                </div>
+            </div>
+            </div>
+        </nav>
+    </header>
+    <div class="container">
+        <div id="bag" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img src="img/IMG1.JPG" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                    <img src="img/IMG2.JPG" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                    <img src="img/IMG3.JPG" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                    <img src="img/IMG4.JPG" class="d-block w-100" alt="...">
+                </div>
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#bag" data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#bag" data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+            </button>
+        </div>
+    </div>
+    <div id="main">
+        <p>Elevate your everyday with our latest bag collection. Our new bags are designed to seamlessly combine style
+            and functionality, offering you the perfect accessory for any occasion.</p>
+        <div id="button-order">
+            <a href="https://shp.ee/zdm5rg4">ORDER NOW FOR EXCLUSIVE DEALS!!</a>
+        </div>
+    </div>
+
+    <div id="video" class="container">
+        <video src="videotas.mov" controls></video>
+    </div>
+
+    <div id="deskripsi">
+        <h1>
+            DESKRIPSI PRODUK
+        </h1>
+        <div id="colors" class="card text-bg-warning mb-3" style="max-width: 18rem;">
+            <div class="card-header">AVALAIBLE COLORS</div>
+            <div class="card-body">   
+                <h5 class="card-title">
+                    <ul>
+                        <li>BLACK</li>
+                        <li>WHITE</li>
+                        <li>SILVER</li>
+                    </ul>
+                </h5>
+            </div>
+        </div>
+        <div id="material" class="card text-bg-warning mb-3" style="max-width: 18rem;">
+            <div class="card-header">MATERIAL</div>
+            <div class="card-body">
+                <h5 class="card-title">PU LEATHER</h5>
+            </div>
+        </div>
+        <div id="size" class="card text-bg-warning mb-3" style="max-width: 18rem;">
+            <div class="card-header">SIZE</div>
+            <div class="card-body">
+                <h5 class="card-title">
+                    <ul>
+                        <li>Panjang : 31 cm</li>
+                        <li>Lebar : 10 cm</li>
+                        <li>Tinggi : 27 cm</li>
+                    </ul>
+                </h5>
+            </div>
+        </div>
+    </div>
+    <div class="img-container">
+        <div class="grid" id="gallery">
+            <img src="img/IMG1.JPG" alt="" class="img" />
+            <img src="img/IMG5.JPG" alt="" class="img" />
+            <img src="img/IMG6.JPG" alt="" class="img" />
+            <img src="img/IMG2.JPG" alt="" class="img" />
+            <img src="img/IMG3.JPG" alt="" class="img" />
+            <img src="img/IMG7.JPG" alt="" class="img" />
+            <img src="img/IMG8.JPG" alt="" class="img" />
+            <img src="img/IMG9.JPG" alt="" class="img" />
+            <img src="img/IMG10.JPG" alt="" class="img" />
+        </div>
+    </div>
+    <footer class="p-5 bg-dark text-white text-center position-relative">
+        </a>
+        </div>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
+
+</body>
+</html>
diff --git a/H071221001/PRAKTIKUM-3/logo.png b/H071221001/PRAKTIKUM-3/logo.png