first commit
This commit is contained in:
Power BI Dev
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.DS_Store
|
||||
49
README.md
Normal file
49
README.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# Student-Safe Package (NPM Ready)
|
||||
|
||||
Paket ini dibuat agar mahasiswa **tidak menerima source code penuh web utama**.
|
||||
|
||||
## Jalankan project
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Buka URL dari Vite (default: `http://localhost:5173`) lalu akses launcher di `/`.
|
||||
|
||||
## Script NPM
|
||||
|
||||
- `npm run dev` → jalankan local dev server
|
||||
- `npm run build` → build static output ke folder `dist`
|
||||
- `npm run preview` → preview hasil build
|
||||
|
||||
## Struktur
|
||||
|
||||
- `index.html` → launcher link group
|
||||
- `assets/global/`
|
||||
- `hero.webp`
|
||||
- `footer.png`
|
||||
- `logo.png`
|
||||
- `groups/group-01/{index.html, style.css}`
|
||||
- `groups/group-02/{index.html, style.css}`
|
||||
- `groups/group-03/{index.html, style.css}`
|
||||
- `groups/group-04/{index.html, style.css}`
|
||||
- `groups/group-05/{index.html, style.css}`
|
||||
|
||||
## Aturan
|
||||
|
||||
1. Tiap kelompok hanya mengedit foldernya sendiri.
|
||||
2. Area konten yang boleh diubah hanya:
|
||||
|
||||
```html
|
||||
<div id="assignment-body"> ... </div>
|
||||
```
|
||||
|
||||
3. Jangan ubah path global asset (`../../assets/global/...`).
|
||||
4. Tidak ada JS global project.
|
||||
|
||||
## Output Pengumpulan
|
||||
|
||||
Setiap kelompok submit perubahan di:
|
||||
- `groups/group-xx/index.html`
|
||||
- `groups/group-xx/style.css` (jika perlu styling tambahan)
|
||||
BIN
assets/global/footer.png
Normal file
BIN
assets/global/footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
assets/global/hero.webp
Normal file
BIN
assets/global/hero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
assets/global/logo.png
Normal file
BIN
assets/global/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
60
groups/group-01/index.html
Normal file
60
groups/group-01/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Group 01 - Tugas Halaman Statis</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="brand">Informatika UNTAN — Static Assignment</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
|
||||
<div class="container hero-inner">
|
||||
<span class="badge">Halaman Statis</span>
|
||||
<h1>Judul Halaman Group 01</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="container layout">
|
||||
<article>
|
||||
<div class="meta">
|
||||
<span>Kelompok 01</span>
|
||||
<span>2026</span>
|
||||
</div>
|
||||
|
||||
<figure class="cover">
|
||||
<img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
|
||||
</figure>
|
||||
|
||||
<div id="assignment-body" class="article-body">
|
||||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
<p>Tulis konten halaman kelompok di sini.</p>
|
||||
<h3>Subjudul</h3>
|
||||
<p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
|
||||
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<div class="note">
|
||||
<h3>Catatan Tugas</h3>
|
||||
<p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
|
||||
<p>© Informatika UNTAN — Group 01</p>
|
||||
</div>
|
||||
<img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
47
groups/group-01/style.css
Normal file
47
groups/group-01/style.css
Normal file
@@ -0,0 +1,47 @@
|
||||
:root {
|
||||
--brand-navy: #003150;
|
||||
--brand-yellow: #feb401;
|
||||
--text-main: #1e293b;
|
||||
--text-soft: #64748b;
|
||||
--bg-soft: #f8fafc;
|
||||
--line: #e2e8f0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
|
||||
.container { width: min(1100px, 92%); margin-inline: auto; }
|
||||
|
||||
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
|
||||
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
|
||||
|
||||
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
|
||||
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
|
||||
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
|
||||
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
|
||||
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
|
||||
|
||||
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
|
||||
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
|
||||
.cover img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.article-body > * + * { margin-top: 1.1em; }
|
||||
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
|
||||
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
|
||||
.article-body p { margin: 0 0 1em; }
|
||||
.article-body ul, .article-body ol { padding-left: 1.4rem; }
|
||||
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
|
||||
.article-body a { color: #005eb8; }
|
||||
.article-body img { max-width: 100%; border-radius: 8px; }
|
||||
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
|
||||
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
|
||||
|
||||
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
|
||||
.footer-logo { height: 28px; width: auto; }
|
||||
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
||||
60
groups/group-02/index.html
Normal file
60
groups/group-02/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Group 02 - Tugas Halaman Statis</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="brand">Informatika UNTAN — Static Assignment</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
|
||||
<div class="container hero-inner">
|
||||
<span class="badge">Halaman Statis</span>
|
||||
<h1>Judul Halaman Group 02</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="container layout">
|
||||
<article>
|
||||
<div class="meta">
|
||||
<span>Kelompok 02</span>
|
||||
<span>2026</span>
|
||||
</div>
|
||||
|
||||
<figure class="cover">
|
||||
<img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
|
||||
</figure>
|
||||
|
||||
<div id="assignment-body" class="article-body">
|
||||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
<p>Tulis konten halaman kelompok di sini.</p>
|
||||
<h3>Subjudul</h3>
|
||||
<p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
|
||||
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<div class="note">
|
||||
<h3>Catatan Tugas</h3>
|
||||
<p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
|
||||
<p>© Informatika UNTAN — Group 02</p>
|
||||
</div>
|
||||
<img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
47
groups/group-02/style.css
Normal file
47
groups/group-02/style.css
Normal file
@@ -0,0 +1,47 @@
|
||||
:root {
|
||||
--brand-navy: #003150;
|
||||
--brand-yellow: #feb401;
|
||||
--text-main: #1e293b;
|
||||
--text-soft: #64748b;
|
||||
--bg-soft: #f8fafc;
|
||||
--line: #e2e8f0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
|
||||
.container { width: min(1100px, 92%); margin-inline: auto; }
|
||||
|
||||
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
|
||||
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
|
||||
|
||||
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
|
||||
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
|
||||
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
|
||||
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
|
||||
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
|
||||
|
||||
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
|
||||
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
|
||||
.cover img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.article-body > * + * { margin-top: 1.1em; }
|
||||
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
|
||||
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
|
||||
.article-body p { margin: 0 0 1em; }
|
||||
.article-body ul, .article-body ol { padding-left: 1.4rem; }
|
||||
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
|
||||
.article-body a { color: #005eb8; }
|
||||
.article-body img { max-width: 100%; border-radius: 8px; }
|
||||
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
|
||||
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
|
||||
|
||||
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
|
||||
.footer-logo { height: 28px; width: auto; }
|
||||
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
||||
60
groups/group-03/index.html
Normal file
60
groups/group-03/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Group 03 - Tugas Halaman Statis</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="brand">Informatika UNTAN — Static Assignment</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
|
||||
<div class="container hero-inner">
|
||||
<span class="badge">Halaman Statis</span>
|
||||
<h1>Judul Halaman Group 03</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="container layout">
|
||||
<article>
|
||||
<div class="meta">
|
||||
<span>Kelompok 03</span>
|
||||
<span>2026</span>
|
||||
</div>
|
||||
|
||||
<figure class="cover">
|
||||
<img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
|
||||
</figure>
|
||||
|
||||
<div id="assignment-body" class="article-body">
|
||||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
<p>Tulis konten halaman kelompok di sini.</p>
|
||||
<h3>Subjudul</h3>
|
||||
<p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
|
||||
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<div class="note">
|
||||
<h3>Catatan Tugas</h3>
|
||||
<p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
|
||||
<p>© Informatika UNTAN — Group 03</p>
|
||||
</div>
|
||||
<img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
47
groups/group-03/style.css
Normal file
47
groups/group-03/style.css
Normal file
@@ -0,0 +1,47 @@
|
||||
:root {
|
||||
--brand-navy: #003150;
|
||||
--brand-yellow: #feb401;
|
||||
--text-main: #1e293b;
|
||||
--text-soft: #64748b;
|
||||
--bg-soft: #f8fafc;
|
||||
--line: #e2e8f0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
|
||||
.container { width: min(1100px, 92%); margin-inline: auto; }
|
||||
|
||||
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
|
||||
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
|
||||
|
||||
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
|
||||
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
|
||||
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
|
||||
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
|
||||
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
|
||||
|
||||
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
|
||||
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
|
||||
.cover img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.article-body > * + * { margin-top: 1.1em; }
|
||||
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
|
||||
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
|
||||
.article-body p { margin: 0 0 1em; }
|
||||
.article-body ul, .article-body ol { padding-left: 1.4rem; }
|
||||
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
|
||||
.article-body a { color: #005eb8; }
|
||||
.article-body img { max-width: 100%; border-radius: 8px; }
|
||||
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
|
||||
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
|
||||
|
||||
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
|
||||
.footer-logo { height: 28px; width: auto; }
|
||||
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
||||
60
groups/group-04/index.html
Normal file
60
groups/group-04/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Group 04 - Tugas Halaman Statis</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="brand">Informatika UNTAN — Static Assignment</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
|
||||
<div class="container hero-inner">
|
||||
<span class="badge">Halaman Statis</span>
|
||||
<h1>Judul Halaman Group 04</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="container layout">
|
||||
<article>
|
||||
<div class="meta">
|
||||
<span>Kelompok 04</span>
|
||||
<span>2026</span>
|
||||
</div>
|
||||
|
||||
<figure class="cover">
|
||||
<img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
|
||||
</figure>
|
||||
|
||||
<div id="assignment-body" class="article-body">
|
||||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
<p>Tulis konten halaman kelompok di sini.</p>
|
||||
<h3>Subjudul</h3>
|
||||
<p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
|
||||
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<div class="note">
|
||||
<h3>Catatan Tugas</h3>
|
||||
<p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
|
||||
<p>© Informatika UNTAN — Group 04</p>
|
||||
</div>
|
||||
<img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
47
groups/group-04/style.css
Normal file
47
groups/group-04/style.css
Normal file
@@ -0,0 +1,47 @@
|
||||
:root {
|
||||
--brand-navy: #003150;
|
||||
--brand-yellow: #feb401;
|
||||
--text-main: #1e293b;
|
||||
--text-soft: #64748b;
|
||||
--bg-soft: #f8fafc;
|
||||
--line: #e2e8f0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
|
||||
.container { width: min(1100px, 92%); margin-inline: auto; }
|
||||
|
||||
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
|
||||
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
|
||||
|
||||
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
|
||||
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
|
||||
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
|
||||
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
|
||||
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
|
||||
|
||||
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
|
||||
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
|
||||
.cover img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.article-body > * + * { margin-top: 1.1em; }
|
||||
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
|
||||
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
|
||||
.article-body p { margin: 0 0 1em; }
|
||||
.article-body ul, .article-body ol { padding-left: 1.4rem; }
|
||||
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
|
||||
.article-body a { color: #005eb8; }
|
||||
.article-body img { max-width: 100%; border-radius: 8px; }
|
||||
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
|
||||
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
|
||||
|
||||
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
|
||||
.footer-logo { height: 28px; width: auto; }
|
||||
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
||||
60
groups/group-05/index.html
Normal file
60
groups/group-05/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Group 05 - Tugas Halaman Statis</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="brand">Informatika UNTAN — Static Assignment</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
|
||||
<div class="container hero-inner">
|
||||
<span class="badge">Halaman Statis</span>
|
||||
<h1>Judul Halaman Group 05</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="container layout">
|
||||
<article>
|
||||
<div class="meta">
|
||||
<span>Kelompok 05</span>
|
||||
<span>2026</span>
|
||||
</div>
|
||||
|
||||
<figure class="cover">
|
||||
<img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
|
||||
</figure>
|
||||
|
||||
<div id="assignment-body" class="article-body">
|
||||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
<p>Tulis konten halaman kelompok di sini.</p>
|
||||
<h3>Subjudul</h3>
|
||||
<p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
|
||||
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<div class="note">
|
||||
<h3>Catatan Tugas</h3>
|
||||
<p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
|
||||
<p>© Informatika UNTAN — Group 05</p>
|
||||
</div>
|
||||
<img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
47
groups/group-05/style.css
Normal file
47
groups/group-05/style.css
Normal file
@@ -0,0 +1,47 @@
|
||||
:root {
|
||||
--brand-navy: #003150;
|
||||
--brand-yellow: #feb401;
|
||||
--text-main: #1e293b;
|
||||
--text-soft: #64748b;
|
||||
--bg-soft: #f8fafc;
|
||||
--line: #e2e8f0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
|
||||
.container { width: min(1100px, 92%); margin-inline: auto; }
|
||||
|
||||
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
|
||||
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
|
||||
|
||||
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
|
||||
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
|
||||
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
|
||||
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
|
||||
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
|
||||
|
||||
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
|
||||
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
|
||||
.cover img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.article-body > * + * { margin-top: 1.1em; }
|
||||
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
|
||||
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
|
||||
.article-body p { margin: 0 0 1em; }
|
||||
.article-body ul, .article-body ol { padding-left: 1.4rem; }
|
||||
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
|
||||
.article-body a { color: #005eb8; }
|
||||
.article-body img { max-width: 100%; border-radius: 8px; }
|
||||
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
|
||||
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
|
||||
|
||||
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
|
||||
.footer-logo { height: 28px; width: auto; }
|
||||
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
||||
34
index.html
Normal file
34
index.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Web Student Safe - Launcher</title>
|
||||
<style>
|
||||
body { font-family: Inter, Arial, sans-serif; margin: 0; background: #f8fafc; color: #0f172a; }
|
||||
.wrap { width: min(900px, 92%); margin: 40px auto; }
|
||||
.card { background: #fff; border: 1px solid #e2e8f0; padding: 20px; border-radius: 10px; }
|
||||
h1 { margin: 0 0 10px; font-size: 1.8rem; }
|
||||
p { color: #475569; }
|
||||
ul { padding-left: 1rem; }
|
||||
li { margin: .6rem 0; }
|
||||
a { color: #0ea5e9; text-decoration: none; font-weight: 600; }
|
||||
a:hover { text-decoration: underline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="wrap">
|
||||
<section class="card">
|
||||
<h1>Web Student Safe</h1>
|
||||
<p>Launcher untuk akses halaman tiap kelompok.</p>
|
||||
<ul>
|
||||
<li><a href="./groups/group-01/index.html">Group 01</a></li>
|
||||
<li><a href="./groups/group-02/index.html">Group 02</a></li>
|
||||
<li><a href="./groups/group-03/index.html">Group 03</a></li>
|
||||
<li><a href="./groups/group-04/index.html">Group 04</a></li>
|
||||
<li><a href="./groups/group-05/index.html">Group 05</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
1105
package-lock.json
generated
Normal file
1105
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
14
package.json
Normal file
14
package.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "web-student-safe",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "Student-safe static page assignment kit for Informatika UNTAN",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^7.1.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user