652 lines
19 KiB
HTML
652 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portal WebGIS Terpadu</title>
|
|
<style>
|
|
:root {
|
|
--bg: #080b10;
|
|
--metal-1: #111820;
|
|
--metal-2: #1c252e;
|
|
--metal-3: #2d3740;
|
|
--text: #eef6f8;
|
|
--muted: #a5b3ba;
|
|
--line: rgba(183, 205, 215, 0.18);
|
|
--primary: #55d7e8;
|
|
--primary-dark: #82f1ff;
|
|
--accent: #d7ad62;
|
|
--blue: #66a8ff;
|
|
--red: #ff716d;
|
|
--purple: #b48cff;
|
|
--shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at 16% 14%, rgba(85, 215, 232, 0.22), transparent 24%),
|
|
radial-gradient(circle at 86% 18%, rgba(215, 173, 98, 0.14), transparent 25%),
|
|
radial-gradient(circle at 50% 100%, rgba(102, 168, 255, 0.13), transparent 34%),
|
|
linear-gradient(145deg, #080b10 0%, #111922 48%, #06080c 100%);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background-image:
|
|
linear-gradient(rgba(183, 205, 215, 0.055) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(183, 205, 215, 0.055) 1px, transparent 1px);
|
|
background-size: 46px 46px;
|
|
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), transparent 86%);
|
|
animation: gridDrift 18s linear infinite;
|
|
}
|
|
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background:
|
|
linear-gradient(110deg, transparent 0 35%, rgba(255, 255, 255, 0.055) 45%, transparent 56%),
|
|
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px);
|
|
opacity: 0.62;
|
|
pointer-events: none;
|
|
animation: scanSweep 7s ease-in-out infinite;
|
|
}
|
|
|
|
.future-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.future-bg::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -20%;
|
|
background:
|
|
radial-gradient(circle, rgba(85, 215, 232, 0.9) 0 2px, transparent 3px),
|
|
radial-gradient(circle, rgba(215, 173, 98, 0.72) 0 1px, transparent 2px),
|
|
radial-gradient(circle, rgba(180, 140, 255, 0.8) 0 1px, transparent 2px);
|
|
background-size: 180px 180px, 260px 260px, 340px 340px;
|
|
background-position: 0 0, 80px 120px, 180px 40px;
|
|
filter: drop-shadow(0 0 8px rgba(85, 215, 232, 0.4));
|
|
opacity: 0.42;
|
|
animation: starField 28s linear infinite;
|
|
}
|
|
|
|
.future-bg::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(90deg, transparent 0 8%, rgba(85, 215, 232, 0.24) 9%, transparent 10% 42%, rgba(215, 173, 98, 0.18) 43%, transparent 44%),
|
|
linear-gradient(135deg, transparent 0 46%, rgba(102, 168, 255, 0.16) 47%, transparent 49%),
|
|
linear-gradient(45deg, transparent 0 54%, rgba(180, 140, 255, 0.13) 55%, transparent 57%);
|
|
background-size: 520px 100%, 420px 420px, 620px 620px;
|
|
opacity: 0.55;
|
|
transform: perspective(900px) rotateX(58deg) translateY(22%);
|
|
transform-origin: bottom;
|
|
animation: dataHighway 9s linear infinite;
|
|
}
|
|
|
|
.energy-ring {
|
|
position: absolute;
|
|
width: 44vmax;
|
|
height: 44vmax;
|
|
left: 50%;
|
|
top: 48%;
|
|
border: 1px solid rgba(85, 215, 232, 0.16);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 70px rgba(85, 215, 232, 0.12),
|
|
inset 0 0 70px rgba(102, 168, 255, 0.08);
|
|
transform: translate(-50%, -50%);
|
|
animation: haloRotate 24s linear infinite;
|
|
}
|
|
|
|
.energy-ring::before,
|
|
.energy-ring::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 12%;
|
|
border-radius: 50%;
|
|
border: 1px dashed rgba(215, 173, 98, 0.2);
|
|
}
|
|
|
|
.energy-ring::after {
|
|
inset: 25%;
|
|
border-color: rgba(180, 140, 255, 0.18);
|
|
animation: innerHaloRotate 14s linear infinite reverse;
|
|
}
|
|
|
|
.beam {
|
|
position: absolute;
|
|
left: var(--x);
|
|
top: -22%;
|
|
width: 2px;
|
|
height: 44%;
|
|
background: linear-gradient(to bottom, transparent, var(--beam-color), transparent);
|
|
box-shadow: 0 0 18px var(--beam-color);
|
|
opacity: 0;
|
|
transform: rotate(24deg);
|
|
animation: lightBeam var(--duration) linear infinite;
|
|
animation-delay: var(--delay);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page {
|
|
width: min(1120px, calc(100% - 32px));
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
padding: 50px 0 36px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 34px;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 320px;
|
|
gap: 28px;
|
|
align-items: center;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: fit-content;
|
|
margin-bottom: 16px;
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(85, 215, 232, 0.28);
|
|
border-radius: 999px;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
|
|
color: var(--primary-dark);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(85, 215, 232, 0.12);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(34px, 5vw, 62px);
|
|
line-height: 1.02;
|
|
letter-spacing: 0;
|
|
text-shadow: 0 0 34px rgba(85, 215, 232, 0.22);
|
|
}
|
|
|
|
.lead {
|
|
max-width: 650px;
|
|
margin: 18px 0 0;
|
|
color: var(--muted);
|
|
font-size: 18px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.map-panel {
|
|
position: relative;
|
|
min-height: 235px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
|
|
linear-gradient(35deg, transparent 44%, rgba(85, 215, 232, 0.28) 45%, rgba(85, 215, 232, 0.28) 47%, transparent 48%),
|
|
linear-gradient(130deg, transparent 48%, rgba(215, 173, 98, 0.24) 49%, rgba(215, 173, 98, 0.24) 51%, transparent 52%),
|
|
linear-gradient(160deg, #18212a, #0c1117);
|
|
box-shadow: var(--shadow);
|
|
isolation: isolate;
|
|
}
|
|
|
|
.map-panel::before,
|
|
.map-panel::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
background: var(--primary);
|
|
box-shadow:
|
|
72px 48px 0 var(--accent),
|
|
146px 112px 0 var(--blue),
|
|
216px 70px 0 var(--red),
|
|
96px 154px 0 var(--purple);
|
|
width: 13px;
|
|
height: 13px;
|
|
left: 38px;
|
|
top: 42px;
|
|
filter: drop-shadow(0 0 10px currentColor);
|
|
animation: nodePulse 2.6s ease-in-out infinite;
|
|
}
|
|
|
|
.map-panel::after {
|
|
width: 130px;
|
|
height: 130px;
|
|
left: auto;
|
|
right: -42px;
|
|
top: -34px;
|
|
border: 26px solid rgba(85, 215, 232, 0.12);
|
|
background: transparent;
|
|
box-shadow: none;
|
|
animation: orbitRing 9s linear infinite;
|
|
}
|
|
|
|
.map-lines {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(30deg, transparent 0 47%, rgba(215, 173, 98, 0.42) 48% 50%, transparent 51%),
|
|
linear-gradient(155deg, transparent 0 49%, rgba(85, 215, 232, 0.22) 50% 52%, transparent 53%);
|
|
background-size: 180px 120px, 220px 160px;
|
|
animation: routeFlow 12s linear infinite;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 18px;
|
|
}
|
|
|
|
.card {
|
|
grid-column: span 2;
|
|
position: relative;
|
|
min-height: 218px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
padding: 22px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 48%, rgba(255, 255, 255, 0.07)),
|
|
linear-gradient(145deg, #151d25, #0c1118);
|
|
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.13);
|
|
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
|
|
}
|
|
|
|
.card:nth-child(4),
|
|
.card:nth-child(5) {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-top: 4px solid var(--card-color);
|
|
background:
|
|
linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.16) 42%, transparent 56%),
|
|
radial-gradient(circle at 86% 18%, var(--card-soft), transparent 34%);
|
|
opacity: 0.8;
|
|
pointer-events: none;
|
|
transform: translateX(-38%);
|
|
transition: transform 520ms ease;
|
|
}
|
|
|
|
.card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 6px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card:hover,
|
|
.card:focus-visible {
|
|
transform: translateY(-7px);
|
|
border-color: color-mix(in srgb, var(--card-color), white 34%);
|
|
box-shadow: 0 26px 58px rgba(0, 0, 0, 0.45), 0 0 34px color-mix(in srgb, var(--card-color), transparent 64%);
|
|
outline: none;
|
|
}
|
|
|
|
.card:hover::before,
|
|
.card:focus-visible::before {
|
|
transform: translateX(38%);
|
|
}
|
|
|
|
.card-top,
|
|
.card-bottom {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 8px;
|
|
color: var(--card-color);
|
|
background:
|
|
linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035)),
|
|
var(--card-soft);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 20px color-mix(in srgb, var(--card-color), transparent 72%);
|
|
}
|
|
|
|
.icon svg {
|
|
width: 25px;
|
|
height: 25px;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
}
|
|
|
|
h2 {
|
|
margin: 18px 0 10px;
|
|
font-size: 22px;
|
|
line-height: 1.25;
|
|
letter-spacing: 0;
|
|
color: #f6fbfc;
|
|
}
|
|
|
|
.meta {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.card-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-top: 24px;
|
|
color: var(--primary-dark);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.arrow {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(145deg, var(--card-color), color-mix(in srgb, var(--card-color), black 32%));
|
|
color: #071014;
|
|
transition: transform 180ms ease, box-shadow 180ms ease;
|
|
flex: 0 0 auto;
|
|
box-shadow: 0 0 18px color-mix(in srgb, var(--card-color), transparent 55%);
|
|
}
|
|
|
|
.card:hover .arrow,
|
|
.card:focus-visible .arrow {
|
|
transform: translateX(3px) rotate(-12deg);
|
|
}
|
|
|
|
footer {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes gridDrift {
|
|
from { background-position: 0 0, 0 0; }
|
|
to { background-position: 46px 46px, 46px 46px; }
|
|
}
|
|
|
|
@keyframes scanSweep {
|
|
0%, 100% { transform: translateX(-18%); opacity: 0.4; }
|
|
50% { transform: translateX(18%); opacity: 0.72; }
|
|
}
|
|
|
|
@keyframes routeFlow {
|
|
from { background-position: 0 0, 0 0; }
|
|
to { background-position: 180px 120px, -220px 160px; }
|
|
}
|
|
|
|
@keyframes nodePulse {
|
|
0%, 100% { opacity: 0.68; transform: scale(0.92); }
|
|
50% { opacity: 1; transform: scale(1.16); }
|
|
}
|
|
|
|
@keyframes orbitRing {
|
|
from { transform: rotate(0deg) scale(1); }
|
|
50% { transform: rotate(180deg) scale(1.08); }
|
|
to { transform: rotate(360deg) scale(1); }
|
|
}
|
|
|
|
@keyframes starField {
|
|
from { transform: translate3d(0, 0, 0) rotate(0deg); }
|
|
to { transform: translate3d(-180px, 180px, 0) rotate(4deg); }
|
|
}
|
|
|
|
@keyframes dataHighway {
|
|
from {
|
|
background-position: 0 0, 0 0, 0 0;
|
|
}
|
|
to {
|
|
background-position: 520px 0, 420px 420px, -620px 620px;
|
|
}
|
|
}
|
|
|
|
@keyframes haloRotate {
|
|
from { transform: translate(-50%, -50%) rotate(0deg); }
|
|
to { transform: translate(-50%, -50%) rotate(360deg); }
|
|
}
|
|
|
|
@keyframes innerHaloRotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes lightBeam {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(-12vw, -20vh, 0) rotate(24deg);
|
|
}
|
|
12% {
|
|
opacity: 0.7;
|
|
}
|
|
48% {
|
|
opacity: 0.18;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(24vw, 140vh, 0) rotate(24deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.page {
|
|
padding-top: 34px;
|
|
}
|
|
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.map-panel {
|
|
min-height: 185px;
|
|
}
|
|
|
|
.card,
|
|
.card:nth-child(4),
|
|
.card:nth-child(5) {
|
|
grid-column: span 3;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.page {
|
|
width: min(100% - 24px, 1120px);
|
|
gap: 24px;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.card,
|
|
.card:nth-child(4),
|
|
.card:nth-child(5) {
|
|
grid-column: auto;
|
|
min-height: 190px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="future-bg" aria-hidden="true">
|
|
<div class="energy-ring"></div>
|
|
<span class="beam" style="--x: 8%; --duration: 8s; --delay: -1s; --beam-color: rgba(85, 215, 232, 0.72);"></span>
|
|
<span class="beam" style="--x: 34%; --duration: 11s; --delay: -5s; --beam-color: rgba(215, 173, 98, 0.52);"></span>
|
|
<span class="beam" style="--x: 61%; --duration: 9s; --delay: -3s; --beam-color: rgba(102, 168, 255, 0.58);"></span>
|
|
<span class="beam" style="--x: 86%; --duration: 12s; --delay: -7s; --beam-color: rgba(180, 140, 255, 0.5);"></span>
|
|
</div>
|
|
<main class="page">
|
|
<section class="hero" aria-labelledby="page-title">
|
|
<div>
|
|
<div class="eyebrow">
|
|
<span aria-hidden="true">GIS</span>
|
|
<span>5 aplikasi peta interaktif</span>
|
|
</div>
|
|
<h1 id="page-title">Portal WebGIS Terpadu</h1>
|
|
<p class="lead">Pilih salah satu aplikasi WebGIS untuk membuka peta interaktif.</p>
|
|
</div>
|
|
<div class="map-panel" aria-hidden="true">
|
|
<div class="map-lines"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid" aria-label="Daftar aplikasi WebGIS">
|
|
<a class="card" href="01/index.html" style="--card-color: #55d7e8; --card-soft: rgba(85, 215, 232, 0.16);">
|
|
<div class="card-top">
|
|
<span class="icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M4 21V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16"></path>
|
|
<path d="M4 11h11"></path>
|
|
<path d="M17 8h1.5l1.5 2v7a2 2 0 0 0 4 0v-6"></path>
|
|
<path d="M8 21h3"></path>
|
|
</svg>
|
|
</span>
|
|
<h2>Webgis SPBU Point</h2>
|
|
<p class="meta">Peta sebaran titik SPBU untuk melihat lokasi fasilitas secara cepat.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="02/index.html" style="--card-color: #66a8ff; --card-soft: rgba(102, 168, 255, 0.16);">
|
|
<div class="card-top">
|
|
<span class="icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M5 20c3-4 3-12 6-16"></path>
|
|
<path d="M19 20c-3-4-3-12-6-16"></path>
|
|
<path d="M12 4v4"></path>
|
|
<path d="M12 12v4"></path>
|
|
<path d="M3 20h18"></path>
|
|
</svg>
|
|
</span>
|
|
<h2>Webgis Jalan Parsil</h2>
|
|
<p class="meta">Visualisasi data jalan dan persil dalam satu tampilan spasial.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="03/index.html" style="--card-color: #d7ad62; --card-soft: rgba(215, 173, 98, 0.16);">
|
|
<div class="card-top">
|
|
<span class="icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M9 18 3 21V6l6-3 6 3 6-3v15l-6 3-6-3Z"></path>
|
|
<path d="M9 3v15"></path>
|
|
<path d="M15 6v15"></path>
|
|
</svg>
|
|
</span>
|
|
<h2>Webgis Chropleth</h2>
|
|
<p class="meta">Peta tematik choropleth untuk membaca pola wilayah berbasis warna.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="04/index.html" style="--card-color: #ff716d; --card-soft: rgba(255, 113, 109, 0.15);">
|
|
<div class="card-top">
|
|
<span class="icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 21s7-4.4 7-11a7 7 0 1 0-14 0c0 6.6 7 11 7 11Z"></path>
|
|
<circle cx="12" cy="10" r="2.5"></circle>
|
|
<path d="M16 5.5h2.5V3"></path>
|
|
<path d="M18.5 5.5 15.5 2.5"></path>
|
|
</svg>
|
|
</span>
|
|
<h2>Webgis SPBU Upgrade</h2>
|
|
<p class="meta">Versi pengembangan peta SPBU dengan tampilan dan data yang diperbarui.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card" href="05/index.php" style="--card-color: #b48cff; --card-soft: rgba(180, 140, 255, 0.15);">
|
|
<div class="card-top">
|
|
<span class="icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M4 19V5"></path>
|
|
<path d="M4 19h17"></path>
|
|
<rect x="7" y="11" width="3" height="5"></rect>
|
|
<rect x="12" y="8" width="3" height="8"></rect>
|
|
<rect x="17" y="4" width="3" height="12"></rect>
|
|
</svg>
|
|
</span>
|
|
<h2>Webgis Kemiskinan</h2>
|
|
<p class="meta">Peta dan data wilayah untuk mendukung pembacaan indikator kemiskinan.</p>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span>Buka project</span>
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
</div>
|
|
</a>
|
|
</section>
|
|
|
|
<footer>
|
|
WebGis by: Muhammad Taufiq Fauzan--D1041231023--Informatika UNTAN
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|