-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from PeaceAntoHim/staging
Staging
- Loading branch information
Showing
10 changed files
with
334 additions
and
1 deletion.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,3 +15,4 @@ | |
|
|
||
| # Menampilkan hasil | ||
| print(result) | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="id"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Form Pendaftaran Mahasiswa Baru</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f2f2f2; | ||
| padding: 20px; | ||
| } | ||
| .container { | ||
| background-color: #fff; | ||
| padding: 20px 40px 40px 40px; | ||
| border-radius: 8px; | ||
| max-width: 500px; | ||
| margin: auto; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | ||
| } | ||
| h2 { | ||
| text-align: center; | ||
| color: #333; | ||
| } | ||
| label { | ||
| display: block; | ||
| margin-top: 15px; | ||
| color: #555; | ||
| } | ||
| input[type="text"], | ||
| input[type="email"], | ||
| input[type="date"], | ||
| select { | ||
| width: 100%; | ||
| padding: 10px; | ||
| margin-top: 5px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| } | ||
| input[type="submit"] { | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| padding: 12px 20px; | ||
| margin-top: 20px; | ||
| border: none; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| width: 100%; | ||
| } | ||
| input[type="submit"]:hover { | ||
| background-color: #45a049; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h2>Form Pendaftaran Mahasiswa Baru</h2> | ||
| <form> | ||
| <!-- Nama Lengkap --> | ||
| <label for="nama">Nama Lengkap:</label> | ||
| <input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap" required> | ||
| <!-- NIM --> | ||
| <label for="nim">NIM:</label> | ||
| <input type="text" id="nim" name="nim" placeholder="Masukkan NIM" required> | ||
| <!-- Email --> | ||
| <label for="email">Email:</label> | ||
| <input type="email" id="email" name="email" placeholder="Masukkan email" required> | ||
| <!-- Tanggal Lahir --> | ||
| <label for="tanggal_lahir">Tanggal Lahir:</label> | ||
| <input type="date" id="tanggal_lahir" name="tanggal_lahir" required> | ||
| <!-- Jenis Kelamin --> | ||
| <label for="jenis_kelamin">Jenis Kelamin:</label> | ||
| <select id="jenis_kelamin" name="jenis_kelamin" required> | ||
| <option value="">--Pilih Jenis Kelamin--</option> | ||
| <option value="laki-laki">Laki-laki</option> | ||
| <option value="perempuan">Perempuan</option> | ||
| </select> | ||
| <!-- Program Studi --> | ||
| <label for="program_studi">Program Studi:</label> | ||
| <select id="program_studi" name="program_studi" required> | ||
| <option value="">--Pilih Program Studi--</option> | ||
| <option value="informatika">Informatika</option> | ||
| <option value="sistem_informasi">Sistem Informasi</option> | ||
| <option value="teknik_komputer">Teknik Komputer</option> | ||
| <option value="teknik_informatika">Teknik Informatika</option> | ||
| </select> | ||
| <!-- Alamat --> | ||
| <label for="alamat">Alamat:</label> | ||
| <input type="text" id="alamat" name="alamat" placeholder="Masukkan alamat lengkap" required> | ||
| <!-- Submit Button --> | ||
| <input type="submit" value="Daftar"> | ||
| </form> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Frans Sebastian - Professional Profile</title> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <header> | ||
| <div class="header-content"> | ||
| <h1>Frans Sebastian</h1> | ||
| <p>Software Engineer | Quantum Computing Enthusiast</p> | ||
| </div> | ||
| <button id="theme-toggle">Switch to Night Theme</button> | ||
| </header> | ||
|
|
||
| <section class="profile"> | ||
| <div class="profile-left"> | ||
| <img src="profile.jpg" alt="Profile Picture" class="profile-pic" /> | ||
| </div> | ||
| <div class="profile-right"> | ||
| <h2>About Me</h2> | ||
| <p> | ||
| Hello! I'm Frans, a passionate software engineer with over 5 years of | ||
| experience in full-stack development. I love creating efficient and | ||
| scalable applications using modern technologies. | ||
| </p> | ||
|
|
||
| <h3>Contact Information</h3> | ||
| <ul> | ||
| <li><strong>Email:</strong> <a href="mailto:[email protected]">[email protected]</a></li> | ||
| <li><strong>Address:</strong> North Jakarta</li> | ||
| <li><strong>Phone:</strong> +123 456 7890</li> | ||
| <li><strong>Occupation:</strong> Machine Learning Engineer</li> | ||
| <li><strong>LinkedIn:</strong> <a href="https://www.linkedin.com/in/frans-sebastian/" target="_blank">LinkedIn Profile</a></li> | ||
| <li><strong>GitHub:</strong> <a href="https://github.com/PeaceAntoHim" target="_blank">GitHub Profile</a></li> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
| </div> | ||
|
|
||
| <footer> | ||
| <p>© 2024 Frans Sebastian. All rights reserved.</p> | ||
| </footer> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| // Select the theme toggle button | ||
| const themeToggle = document.getElementById("theme-toggle"); | ||
|
|
||
| // Add click event to toggle between light and dark themes | ||
| themeToggle.addEventListener("click", () => { | ||
| const currentTheme = document.body.getAttribute("data-theme"); | ||
|
|
||
| if (currentTheme === "dark") { | ||
| document.body.removeAttribute("data-theme"); | ||
| themeToggle.textContent = "Switch to Night Theme"; | ||
| } else { | ||
| document.body.setAttribute("data-theme", "dark"); | ||
| themeToggle.textContent = "Switch to Light Theme"; | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| /* Base styles */ | ||
| :root { | ||
| --bg-color-light: #f9fafc; | ||
| --bg-color-dark: #121212; | ||
| --text-color-light: #333; | ||
| --text-color-dark: #f0f0f0; | ||
| --primary-color: #0077b6; | ||
| --secondary-color: #00b4d8; | ||
| --accent-color: #48cae4; | ||
| } | ||
|
|
||
| [data-theme="dark"] { | ||
| --bg-color-light: #1e1e1e; | ||
| --text-color-light: #e0e0e0; | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| transition: all 0.3s ease-in-out; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "Roboto", sans-serif; | ||
| background-color: var(--bg-color-light); | ||
| color: var(--text-color-light); | ||
| line-height: 1.6; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .container { | ||
| max-width: 960px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding-bottom: 30px; | ||
| border-bottom: 2px solid var(--accent-color); | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2.5rem; | ||
| font-weight: 700; | ||
| color: var(--primary-color); | ||
| } | ||
|
|
||
| p { | ||
| font-size: 1.1rem; | ||
| color: var(--secondary-color); | ||
| } | ||
|
|
||
| button { | ||
| padding: 10px 20px; | ||
| background-color: var(--primary-color); | ||
| color: white; | ||
| border: none; | ||
| border-radius: 25px; | ||
| cursor: pointer; | ||
| font-weight: 500; | ||
| font-size: 1rem; | ||
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: var(--secondary-color); | ||
| } | ||
|
|
||
| .profile { | ||
| display: flex; | ||
| gap: 30px; | ||
| background-color: white; | ||
| margin-top: 15px; | ||
| padding: 40px; | ||
| border-radius: 15px; | ||
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| .profile-pic { | ||
| width: 200px; | ||
| height: 200px; | ||
| border-radius: 50%; | ||
| object-fit: cover; | ||
| border: 4px solid var(--primary-color); | ||
| } | ||
|
|
||
| .profile-right { | ||
| flex: 1; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 2rem; | ||
| color: var(--primary-color); | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 1.4rem; | ||
| margin-top: 20px; | ||
| color: var(--secondary-color); | ||
| } | ||
|
|
||
| ul { | ||
| list-style: none; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| li { | ||
| font-size: 1rem; | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| strong { | ||
| font-weight: 500; | ||
| color: var(--primary-color); | ||
| } | ||
|
|
||
| /* Footer */ | ||
| footer { | ||
| text-align: center; | ||
| margin-top: 40px; | ||
| padding-top: 20px; | ||
| border-top: 1px solid var(--accent-color); | ||
| } | ||
|
|
||
| footer p { | ||
| color: var(--secondary-color); | ||
| } | ||
|
|
||
| /* Responsive Design */ | ||
| @media (max-width: 768px) { | ||
| .profile { | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .profile-pic { | ||
| margin-bottom: 20px; | ||
| } | ||
| } |
21 changes: 21 additions & 0 deletions
21
public/assets/SEM_5/DESIGN_PATTERN/Study-Case-DDD-Ecommerce.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters