MODUL III

WEB STATIS DENGAN DJANGO

3.1 Landasan Teori

3.1.1 Website Statis
Website statis merupakan web yang isi kontennya tidak berubah-ubah.
Maksudnya adalah isi dokumen dari web tersebut tidak dapat diubah secara cepat
dan mudah. Ini terjadi karena teknologi yang digunakan untuk membuat dokumen
web tidak memungkinkan untuk dilakukannya perubahan dari isi maupun data.
Teknologi yang digunakan dari web statis adalah jenis client side scripting, seperti
HTML (Hypertext Markup Languange), Cascanding Style Sheet (CSS).
Perubahan isi ataupun data pada halaman web statis hanya dapat dilakukan
dengan cara script atau mengubah langsung isi pada file tersebut. (Sa`ad, 2020)
Website statis biasanya digunakan dalam situs penjualan yang hanya
menjual satu produk karena isi konten dari web ini tidak berubah-ubah, biasanya
hanya berisi sales latter dan nomor telepon yang bisa dihubungi.selain itu,
website yang belum selesai (under construction) juga berbentuk website statis.
Web statis sangat ideal untuk menyajikan informasi yang jarang berubah, seperti
profil perusahaan, portofolio, atau informasi kontak. Karena kontennya tetap,
pengelolaan dan pemeliharaan menjadi lebih mudah dan lebih murah. (Susilowati
& Purnomo, 2019)
3.1.2 HTML (Hyper Text Markup Language)
Hypertext Markup Language atau bisa disebut dengan HTML merupakan
suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah
atau dokumen. Namun HTML bukan merupakan Bahasa pemrograman,
melainkan sebuah standar yang digunakan secara luas guna menampilkan sebuah
halaman web.
Sejarah HTML atau Hypertext Markup Languange telah menjadi teknologi
utama untuk sebuah web sejak tahun 1990-an. Pada tahun 1989 tim Berners-Lee
menciptakan HTML sebagai cara sederhana namun efektif untuk mengkodekan
dokumen elektronik. Apalagi, tujuan awal dari web browser adalah untuk
melayani pembaca guna membuka dokumen berformat HTML.
Sama seperti hal teknis lainnya dalam dunia web, HTML juga memiliki
kelebihan dan kekurangannya masing-masing.
Berikut adalah kelebihan HTML yaitu:
1. Bahasa yang digunakan secara luas dan memiliki banyak sumber dan
komunitan yang besar.
2. Dijalankan secara alami di setiap web browser.
3. Memiliki learning curve yang mudah.
4. Open-sourch dan sepenuhnya gratis.
Berikut adalah kekurangan dari HTML, yaitu:
1. Paling sering digunakan untuk web statis. Untuk fitur dinamis, anda bisa
menggunakan JavaScript atau Bahasa backend, seperti PHP.
2. HTML tidak memungkinkan user untuk menjalankan logic. Alhasil, semua
halaman web harus dibuat terpisah meskipun menggunakan elemen yang
sama, seperti header dan footer.
3. Terkadang perilaku browser susah untuk diprediksi. Misalnya, browser lama
tidak selalu bisa render tag yang lebih baru.
4. Fitur-fitur tidak bisa digunakan secara cepat di sebagian browser.
(Helmi Setyawan & Pratiwi, 2020)
3.1.3 Django
(Mencakup pengertian dan kegunaan)
Django adalah web framework Python yang didesain untuk membuat
aplikasi web yang dinamis, kaya fitur, dan aman. Django membantu membuat
website dengan berbagai fiturnya untuk mencegah para developer menulis kode
python yang sama berulang kali. Django juga fokus untuk membuat
framework-nya cepat, aman dan mudah dikembangkan (scalable). Django
memiliki sistem ORM (Object relational Model) untuk mengolah data, sistem
Views mengatur logika dan sistem templating di bagian tampilannya. (Wijaya, et
al., 2021)
Kegunaan Django adalah sebagai pendorong pengembangan cepat dan
design pragmatis yang bersih, akan membantu membuat web lebih cepat,
dibandingkan menulis kode dari nol Django juga untuk memudahkan pembuatan
situs web yang digerakkan oleh basis data yang kompleks. Beberapa situs terkenal
yang menggunakan Django termasuk PBS, Instagram, Disqus, Washington Times,
Bitbucket dan Mozilla. (Risydaa & Nuryamin, 2023)
3.2 Hasil Praktikum
3.2.1 Halaman Utama
Hasil praktikum ini bertujuan untuk mengembangkan halaman utama (main
page) yang berbentuk web dari perusahaan PT.MAP Boga Adi Perkasa. Dalam
era digital saat ini kehadiran web online yang semakin merajalela ini sangat
berpeluang besar bagi perusahaan untuk mempromosikan atau menjual produk
dengan lebih mujdah. Maka dari itu web Subway Mobile ini dicipatakan untuk
para pelanggan untuk mengakses informasi atau memesan makanan dengan
mudah. Ada beberapa tampilan dalam halaman utama dari web ini, yaitu yang
pertama ucapan “welcome to Subway”, lalu lanjut ke promo section, lalu ketiga
adalah crew section, dan yang terakhir adalah about us. Karena kekreatifan dari
tampilan halaman menu ini, perusahaan dapat dengan mudah unutk menarik minat
pelanggan.
a. Hasil Running Halaman Utama

Gambar 3.1 Hasil Running Halaman Menu dari Subway Mobile

Gambar 3.2 Hasil Running Promo Section Subway Mobile

Gambar 3.3 Hasil Running Crew Section Subway Mobile

 Gambar 3.4 Hasil Running About Us Subway Mobile

Analisis:
Halaman utama berisi tentang pembuka ucapan welcome to subway pada
web tersebut. Tampilan pada halaman ini cukup mencolok dan menarik agar
pengunjung tertarik dan tetap pada halaman web tersebut dan bahkan mencari tau
lebih tentang web tersebut. Hal tersebut berpotensi pelanggan untuk membeli
produk atau hanya sekedar lanjut ke halaman berikutnya.
b. Script urls.py Halaman Utama
from django.contrib import admin
from django.urls import path
from.import views

urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home)
]
c. Analisis Sript urls.py Halaman Utama
Script urls.py Halaman Utama dalam pengembangan aplikasi web, terutama
yang menggunakan kerangka kerja Django, file urls.py memegang peranan
penting dalam mengatur rute atau URL yang menghubungkan berbagai bagian
aplikasi. Analisis Script urls.py Halaman Utama. Analisis script urls.py dari
halaman utama PT MAP Boga Adi Perkasa TBK akan membantu kita memahami
bagaimana rute-rute ini diatur dan bagaimana mereka berkontribusi pada fungsi
keseluruhan situs web.
Tabel 3.1 Analisis Script urls.py Halaman Utama
Script Keterangan
from django.contrib import Pernyataan impor yang digunakan
admin untuk mengimpor modul admin dari
paket django.contrib.
from django.urls import Pernyataan impor yang digunakan
path untuk mengimpor fungsi path dari
modul django.urls.
 from.import views Pimpor yang digunakan dalam modul
Python untuk mengimpor modul
views dari direktori yang sama.
urlpatterns = [ Bagian dari file urls.py dalam aplikasi
path('admin/', Django, yang digunakan untuk
admin.site.urls), mendefinisikan pola URL (URL
path('', views.home) patterns) yang menghubungkan URL
] tertentu dengan tampilan yang sesuai.

d. Script views.py Halaman Utama

from django.shortcuts import render

def home(request):
return render(request, 'home.html')
e. Analisis Script views.py Halaman Utama
Dalam pengembangan aplikasi web menggunakan kerangka kerja Django,
file views.py memegang peranan penting dalam menghubungkan logika bisnis
dengan presentasi kepada pengguna. views.py berfungsi untuk mengambil data,
memprosesnya, dan mengirimkan respons yang sesuai kepada pengguna melalui
template HTML atau format lain. Analisis script views.py dari halaman utama PT
MAP Boga Adi Perkasa TBK akan membantu kita memahami bagaimana data
diolah dan ditampilkan, serta bagaimana interaksi pengguna dikelola.

Tabel 3.2 Analisis Script views.py Halaman Utama

Script Keterangan
from django.shortcuts Pernyataan impor untuk mengimpor
import render fungsi render dari modul
django.shortcuts.
def home(request): Adalah definisi fungsi
return render(request, Adalah bagian dari fungsi tampilan
'home.html') (view function) dalam aplikasi
Django.

f. Script HTML Halaman Utama

{%load static%}
<!DOCTYPE html>
<html lang="id">
<head>
<title>Subway</title>
<link rel="icon" type="image/png" href="{% static "lg.png "%}" />
<link rel="stylesheet" type="text/css" href= "{%static
"style.css"%}">
<script src="https://unpkg.com/feather-icons"></script>
<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@600&display=swap" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css2?
family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet" />
<link rel="shortcut icon" type="img/png" href="{% static
'img/turn.png' %}" />
</head>
<body>
<header>
<nav class="nav">
<div class="logo">
<a href="#"><img src="{% static "Subway-logo.png"%}"
alt="Subway Logo" /></a>
</div>
<div class="nav-menu">
<a href="#">OUR MENU</a>
<a href="#promo">PROMO</a>
<a href="#oma">OUR CREW</a>
<a href="#about">ABOUT US</a>
</div>
<div class="nav-elemen">
<a href="#" id="hammenu"><i data-feather="menu"></i></a>
</div>
</nav>
<script>
feather.replace();
</script>
</header>
<section class="landing" id="sopbabat">
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked />
<input type="radio" name="r" id="r2" />
<input type="radio" name="r" id="r3" />
<input type="radio" name="r" id="r4" />
<input type="radio" name="r" id="r5" />
<div class="slide s1">
<img src="{% static "banner1.jpg"%}" alt="" />
<div class="slide-content">
<div class="slide-text">
<h2>WELCOME TO -</h2>
<h3>SUBWAY</h3>
<p>Enjoy our delicious and fresh sandwiches</p>
<a href="#menu" class="btn">ORDER NOW</a>
</div>
</div>
</div>
<div class="slide">
<img src="{% static "banner2.jpg"%}" alt="" />
</div>
<div class="slide">
<img src="{% static "banner3.jpg"%}" alt="" />
</div>
<div class="slide">
<img src="{% static "banner4.jpg"%}" alt="" />
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
</div>
</div>
</section>
<section class="promo-section" id="promo">
 <div class="promo">
<h1>SUMMER PROMO</h1>
<p>#SUBWAY INDONESIA</p>
</div>
<div class="promo-box">
<h2>Ready to savor the flavor!</h2>
<p>
Discover the ultimate culinary experience with Subway's Fresh
Delights! Our new menu combines fresh ingredients and delicious
flavors in every bite. Don't miss our limited-time offers
featuring
irresistible subs, wraps, and salads at unbeatable prices.
Create your
own masterpiece with a wide selection of veggies, premium
meats, and
mouth-watering sauces. Enjoy our daily specials, offering a
different
treat each day of the week. Savor the health benefits without
compromising on taste with our nutritious options, perfect for
guilt-free indulgence.
</p>
</div>
<div class="slider">
<div class="slides-promo">
<input type="radio" name="d" id="d1" checked />
<input type="radio" name="d" id="d2" />
<input type="radio" name="d" id="d3" />
<input type="radio" name="d" id="d4" />
<input type="radio" name="d" id="d5" />
<div class="konten">
<img src="{% static "1p.png"%}" alt="" />
</div>
<div class="konten">
<img src="{% static "2p.png"%}" alt="" />
</div>
<div class="konten">
<img src="{% static "6p.png"%}" alt="" />
</div>
<div class="konten">
<img src="{% static "4p.png"%}" alt="" />
</div>
<div class="konten">
<img src="{% static "5p.jpg"%}" alt="" />
</div>
</div>

<div class="nav-promo">
<label for="d1" class="bar1"></label>
<label for="d2" class="bar1"></label>
<label for="d3" class="bar1"></label>
<label for="d4" class="bar1"></label>
</div>
</div>
</section>
<section><div class="judul" id="oma">
<h1>SAY HELLO!</h1>
<p>TO OUR CREW</p>
</div></section>
<section class="crew" id="crew">
</div>
<img src="{% static "team1.jpg"%}" class="crew-card" />
<div class="konten-card">
<img src="{% static "putih.png"%}" alt="">
<h1 class="deskripsi">OUR CREW</h1>
<p>
 Our leadership team drives our vision and strategy, ensuring
Subway
continues to grow and innovate. They are experienced industry
leaders
committed to maintaining our high standards and exploring new
opportunities to delight our customers.
</p>
</div>

</section>
<section class="yanto" id="head1">
<img src="{% static "yanto.jpg"%}" class="yanto-jpg" />
<div class="yanto-card">
<img src="{% static "putih.png"%}" alt="">
<h1 class="deskripsi">MAS YANTO</h1>
<h2 class="deskripsi">» KITCHEN MANAGER</h2>
<p>
The responsibility is to ensure that all employees can meet
restaurant quality standards in terms of responsibility for cleanliness
and food presentation.

</p>
</div>

</div>

</section>
<section class="tono">

<img src="{% static "tono.jpg "%}" class="yanto-jpg" />

<div class="tono-card">
<img src="{% static "putih.png"%}" alt="">
<h1 class="deskripsi">MAS TONO</h1>
<h2 class="deskripsi">» STAFF MANAGER</h2>
<p>
The responsibility is to ensure that all employees can meet
restaurant quality standards in terms of responsibility for cleanliness
and food presentation.

</p>
</div>
</section>
<section class="des">
<div class="isi">
<h3>Teamwork at Subway is a key factor that ensures daily
operations run smoothly and efficiently. At Subway, every team member has
an important role from food preparation to customer service. Solid
cooperation allows workers to support each other and coordinate well,
ensuring customer orders are processed quickly and precisely. This
collaborative work culture also creates a positive and productive work
environment, where every member feels valued and motivated to give their
best. By prioritizing teamwork, Subway is able to maintain high quality
standards and consistent customer satisfaction</h3>
</div>

</section>
<section class="about" id="about">
<img src="{% static "bout.jpg "%}" alt="">
<div class="bg">
</div>
</section>
</body>
</html>
g. Analisis Script HTML Halaman Utama
Script HTML dari web ini adalah digunakan untuk sebagai kerangka unutk
menampilkan beberapa pilihan menu di navigation bar kemudian menampilkan
grafis gambar, intinya HTML ini sebagai kerangka dan CSS nya untuk mengedit
halaman dari web tersebut.
Tabel 3.3 Analisis Script HTML Halaman Utama
Script Keterangan
{%load static%} Untuk memuat templat tag static dari
pustaka statis Django.
<!DOCTYPE html> Deklarasi yang ditempatkan di awal
dokumen HTML.
<html lang="id"> Elemen pembuka HTML yang
memberitahu browser bahwa dokumen
HTML ini menggunakan bahasa
Indonesia.
<head> Untuk mengelompokkan informasi
<title>Subway</title> Untuk menentukan judul dokumen
yang akan ditampilkan di tab browser,
di bilah judul jendela, atau ketika
halaman ditandai (bookmarked).
<link rel="icon" Untuk menetapkan favicon (ikon
type="image/png" href="{% favorit) situs web.
static "lg.png "%}" />
<script Untuk menyertakan dan mengeksekusi
src="https://unpkg.com/fe file JavaScript eksternal dalam
ather-icons"></script> dokumen HTML.
<link rel="preconnect" Untuk mempercepat pemuatan dari
href="https://fonts.googl domain.
eapis.com" />
<link rel="preconnect" Untuk permintaan lintas domain
href="https://fonts.gstat dengan atribut.
ic.com" crossorigin />
<header> Untuk menentukan bagian atas dari
sebuah dokumen.
<nav class="nav"> Untuk menentukan bagian dari
dokumen yang berisi menu navigasi
atau tautan ke halaman-halaman lain
dalam situs web.
<div class="logo"> Untuk menentukan bagian dari
dokumen yang berisi logo atau elemen
visual.
<a href="#"><img src="{% Tautan yang membungkus gambar
 Script Keterangan
static "Subway- logo Subway.
logo.png"%}" alt="Subway
Logo" />
</div> Tag penutup.
<div class="nav-menu"> Menentukan bagian halaman web
yang berisi menu navigasi.
<a href="#">OUR MENU</a> Untuk membuat tautan (link) ke
halaman web atau sumber daya
lainnya.
</nav> Tag penutup untuk elemen <nav>
<script>feather.replace() Untuk menambahkan kode JavaScript
; ke dalam dokumen HTML.

h. Script CSS Halaman Utama

@import url("https://fonts.googleapis.com/css2?
family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
--primer: #008c42;
--bg: white;
--sekunder: #ffc20d;
font-family: "Montserrat", sans-serif;
}

* {
scroll-behavior: smooth;
font-weight: 700;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: all 0.5s ease;
}

body {
min-height: 3890px;
background-color: var(--sekunder);
font-family: var(--font-family);
overflow-x: hidden;
}
.logo {
transition: 1s ease;
}
.nav {
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 7%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
 transition: all 0.5s ease;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
}

.nav .nav-menu a {
margin: 0 20px;
color: var(--primer);
font-weight: 700;
position: relative;
display: inline-block;
}

.nav a img {
margin: 0;
height: 30px;
}

.nav .nav-menu a:hover {

color: var(--sekunder);
}

.nav a img:hover {
transform: scale(1.2);
}

.nav .nav-menu a::after {

content: "";
display: inline-block;
width: 100%;
height: 3px;
background-color: var(--primer);
position: absolute;
bottom: -3px;
left: 0;
transform: scaleX(0);
transition: transform 0.5s ease;
}

.nav .nav-menu a:hover::after {

transform: scaleX(1);
}

.nav .nav-elemen a {
color: var(--primer);
transition: color 0.5s ease;
}

.nav .nav-elemen a:hover {

color: var(--sekunder);
}

.container {
padding: 10rem;
}

.slidershow {
margin-top: 340px;
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}

.middle {
position: flex;
 top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.navigation {
z-index: 700;
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
}

.bar {
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}

.bar:hover {
background: #fff;
}

input[name="r"] {
position: absolute;
visibility: hidden;
}

.slides {
width: 500%;
height: 100%;
display: flex;
transition: margin-left 0.6s ease;
}

.slide {
width: 100vw;
height: 100vh;
position: relative;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

#r1:checked ~ .slide img {

margin-left: 0;
}
#r2:checked ~ .slide img {
margin-left: -100%;
}
#r3:checked ~ .slide img {
margin-left: -200%;
}
#r4:checked ~ .slide img {
margin-left: -300%;
}

#r5:checked ~ .s1 {
 margin-left: -400%;
}

.slide-content {
position: absolute;
bottom: 160px;
left: 30%;
transform: translateX(-50%);
text-align: start;
color: #fff;
line-height: 1;
padding: 20px;
border-radius: 10px;
opacity: 0;
transition: opacity 0.3s ease;
}

.slide:first-of-type .slide-content {
opacity: 1;
}

.slide-content h2 {
font-size: 50px;
font-weight: 900;
margin-bottom: 10px;
}

.slide-content h3 {
color: var(--sekunder);
font-size: 50px;
font-weight: 900;
margin-bottom: 10px;
}

.slide-content p {
font-weight: 300;
font-size: 25px;
margin-bottom: 20px;
}

.btn {
width: 200px;
height: 50px;
text-align: center;
display: inline-block;
background-color: var(--sekunder);
color: #fff;
padding: 15px 15px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
}

.btn:hover {
color: var(--sekunder);
background-color: var(--primer);
}

.promo-section {
margin-top: -350px;
padding: 5rem;
box-sizing: border-box;
font-size: 27px;
color: var(--primer);
text-align: center;
 position: relative;
}

.promo h1 {
font-weight: 900;
}

.slider {
margin-top: -350px;
margin-left: 750px;
border-radius: 15px;
width: 380px;
height: 380px;
overflow: hidden;
position: relative;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.slider:hover {
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
transform: scale(1.05);
}

.slides-promo {
position: absolute;
top: 0%;
left: 0%;
display: flex;
width: 500%;
transition: margin-left 0.6s ease;
}

.konten {
width: 50%;
}

.konten img {
width: 100%;
height: 100%;
}

.nav-promo {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
}

.bar1 {
width: 20px;
height: 20px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
border-radius: 20px;
}

.bar1:hover {
background: var(--primer);
}
.d1:checked {
background: var(--primer);
}

input[name="d"] {
position: absolute;
opacity: 0;
z-index: 1000;
}

#d1:checked ~ .konten img {

margin-left: 0;
}
#d2:checked ~ .konten img {
margin-left: -200%;
}
#d3:checked ~ .konten img {
margin-left: -400%;
}
#d4:checked ~ .konten img {
margin-left: -600%;
}

.promo-box h2 {
display: flex;
font-weight: 900;
align-items: center;
text-transform: uppercase;
color: white;
text-align: center;
margin-top: 80px;
padding-bottom: 10px;
font-size: 30px;
border-radius: 15px;
padding-left: 25px;
}
.promo-box p {
padding: 20px;
font-weight: 600;
font-size: 20px;
text-align: justify;
width: 600px;
}
.crew {
display: flex;
justify-content: center;
margin-top: 50px;
left: 250px;
width: 800px;
height: 400px;
border-radius: 20px;
overflow: hidden;
align-items: center;
position: relative;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
}
.crew-card {
width: 100%;
height: 100%;
}
.konten-card {
width: 100%;
height: 100%;
top: -800px;
color: #fff;
font-size: 20px;
position: absolute;
 background: #68686886;
backdrop-filter: blur(10px);
border-radius: 15px;
transition: 1s;
}
.crew:hover .konten-card {
top: 0;
}
.konten-card p {
width: 600px;
font-size: 20px;
margin-left: 90px;
text-align: justify;
font-weight: 400;
}
.konten-card h1 {
color: var(--sekunder);
margin-top: 90px;
padding: 20px;
margin-left: 70px;
font-weight: 900;
}
.judul h1 {
margin-top: -50px;
padding: 5rem 0 0.1rem;
box-sizing: border-box;
font-size: 40px;
color: var(--primer);
text-align: center;
position: relative;
font-weight: 900;
}
.judul p {
box-sizing: border-box;
font-size: 27px;
color: var(--primer);
text-align: center;
position: relative;
font-weight: 700;
}
.konten-card img {
height: 6%;
position: relative;
left: 330px;
bottom: -20px;
}

/yanto/
.yanto {
display: flex;
justify-content: center;
margin-top: 50px;
left: 250px;
width: 380px;
height: 380px;
border-radius: 20px;
overflow: hidden;
align-items: center;
position: relative;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
}
.yanto-jpg {
width: 100%;
height: 100%;
}
.yanto-card {
width: 100%;
height: 100%;
top: 0;
left: -400px;
color: #fff;
font-size: 20px;
position: absolute;
background: #79797959;
backdrop-filter: blur(10px);
border-radius: 15px;
transition: 1s;
}
.yanto:hover .yanto-card {
left: 0;
}
.yanto-card p {
justify-content: center;
width: 300px;
font-size: 20px;
margin-left: 50px;
text-align: justify;
font-weight: 400;
}
.yanto-card h1 {
color: var(--sekunder);
margin-top: 50px;
padding: 10px;
margin-left: 35px;
font-weight: 900;
}
.yanto-card h2 {
margin-top: 30px;
font-weight: 700;
font-size: 20px;
margin-left: 50px;
}
.yanto-card img {
height: 6%;
position: relative;
left: 130px;
bottom: -20px;
}
/tono/
.tono {
bottom: 430px;
display: flex;
justify-content: center;
margin-top: 50px;
left: 670px;
width: 380px;
height: 380px;
border-radius: 20px;
overflow: hidden;
align-items: center;
position: relative;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
}
.tono-jpg {
object-fit: cover;
width: 100%;
height: 100%;
}
.tono-card {
width: 100%;
 height: 100%;
top: 0;
right: -400px;
color: #fff;
font-size: 20px;
position: absolute;
background: #6464645e;
backdrop-filter: blur(10px);
border-radius: 15px;
transition: 1s;
}
.tono:hover .tono-card {
right: 0;
}
.tono-card p {
justify-content: center;
width: 300px;
font-size: 20px;
margin-left: 50px;
text-align: justify;
font-weight: 400;
}
.tono-card h1 {
color: var(--sekunder);
margin-top: 50px;
padding: 10px;
margin-left: 35px;
font-weight: 900;
}
.tono-card h2 {
margin-top: 30px;
font-weight: 700;
font-size: 20px;
margin-left: 50px;
}
.tono-card img {
height: 6%;
position: relative;
left: 130px;
bottom: -20px;
}
.about {
width: 100%;
height: auto;

align-items: center;
}
.des {
text-align: justify;
color: #008c42;
font-weight: 200;
}
.isi h3 {
padding: 20px;
width: 1000px;
font-weight: 600;
justify-content: center;
margin-left: 150px;
margin-top: -400px;
font-size: 20px;
margin-bottom: 30px;
}
.bg {
margin-top: -10px;
width: 4000px;
 height: 1000px;
background-color: whitesmoke;
}
.card {
z-index: 999px;
display: flex;
background: #008c42;
width: 500px;
height: 500px;
}
.foot {
display: flex;
justify-content: flex-end;
width: 4000px;
height: 200px;
background-color: var(--primer);
}
.footer {
height: 400px;
padding: 50px;
background-color: var(--primer);
}
.row {
height: 80%;
padding-left: 50px;
}
.colom {
color: var(--sekunder);
padding-top: 10px;
}
.colom li a {
font-size: 15px;
line-height: 30px;
color: var(--sekunder);
font-weight: 500;
}
.colom li a:hover {
color: var(--bg);
}
.desc h1 {
top: 120px;
position: relative;
display: flex;
justify-content: center;
color: rgba(230, 230, 230, 0.822);
font-size: 15px;
font-weight: 500;
}
.teks {
overflow: hidden;
font-family: "Helvetica";
display: flex;
justify-content: flex-end;
}
.teks input {
color: #474747;

border-radius: 20px;
width: 300px;
height: 30px;
padding: 20px;
}
.teks button {
background-color: var(--sekunder);
font-family: "Moontserrat";
 left: 30px;
border-radius: 20px;
}
.teks button:hover {
background-color: var(--bg);
}
i. Analisis Script CSS Halaman Utama
Untuk menganalisis script CSS dari halaman utama sebuah situs web,
pertama-tama kita harus memahami tujuan dan struktur CSS tersebut. CSS
(Cascading Style Sheets) digunakan untuk mendesain dan mengatur tata letak
halaman web.
Tabel 3.4 Analisis Script CSS Halaman Utama
Script Keterangan
@import Baris ini mengimpor berbagai gaya
url("https://fonts.google dan bobot dari font Montserrat dari
apis.com/css2? Google Fonts, memungkinkan Anda
family=Montserrat:ital,wg untuk menggunakan font ini dalam
ht@0,100..900;1,100..900& dokumen CSS Anda.
display=swap");
:root { Untuk memilih elemen akar dari
dokumen, yang dalam HTML
--primer: #008c42; Representasi dalam format
hexadecimal untuk warna hijau tua.
--bg: white; Elemen yang menggunakan properti
CSS memiliki latar belakang putih.
--sekunder: #ffc20d; Representasi dalam format
hexadecimal untuk warna kuning
keemasan.
font-family: Jika font "Montserrat" tersedia, itu
"Montserrat", sans-serif; akan digunakan; jika tidak, font tanpa
} serif akan digunakan sebagai
cadangan.
scroll-behavior: smooth; Untuk mengatur perilaku gulir halus
pada elemen yang dapat digulir
font-weight: 700; Untuk menentukan ketebalan (weight)
font teks.
margin: 0; Menghilangkan semua margin yang
ada di sekitar elemen.
padding: 0; Mengatur jarak antara konten elemen
dan batas (border) elemen tersebut.
Nilai "0" berarti tidak ada ruang
padding di sekitar konten elemen
tersebut.
box-sizing: border-box; Mengubah cara perhitungan ukuran
 Script Keterangan
elemen di halaman web.
outline: none; Untuk menghapus outline (garis tepi)
border: none; Untuk menghapus semua border (garis
tepi) dari elemen yang ditargetkan.

3.2.2 Halaman Kreatif

Halaman kreatif adalah platform yang dirancang untuk menampilkan dan
merayakan karya kreatif individu atau kelompok. Halaman ini bisa berupa situs
web, blog, portofolio online, atau media sosial yang berfungsi sebagai kanvas
digital bagi para kreator untuk mengekspresikan ide, gagasan, dan karya mereka.
Halaman kreatif biasanya mencakup berbagai elemen seperti teks, gambar, video,
dan grafik. halaman kreatif memainkan peran penting dalam personal branding
dan pemasaran. Bagi seniman, penulis, desainer, fotografer, dan profesional
kreatif lainnya, memiliki halaman kreatif yang menarik dan profesional adalah
cara efektif.
Halaman ‘Our Menu’ dari Subway Indonesia ini dirancang dengan tampilan
yang responsif dan menarik menggunakan latar belakangputih dan warna dominan
hijau. Desain yang responsif memungkinkan pengguna untuk tertarik pada menu-
menu yang ditampilkan, sehingga memungkinkan pelanggan untuk memesan
menu. Dengan keterlibatan elemen design yang menarik pada menu navigasi,
halaman ini memberikan pengalaman pengguna yang interaktif dan informatif
dalam penamilan menu ini.
a. Hasil Running Halaman Kreatif

Gambar 1.5 Hasil Running Halaman Kreatif

Gambar 1.6 Hasil Running Halaman Kreatif

Gambar 1.7 Hasil Running Halaman Kreatif

Gambar 1.8 Hasil Running Halaman Kreatif

 Gambar 1.9 Hasil Running Halaman Kreatif

b. Scripts Urls.py Halaman Kreatif

from django.contrib import admin
from django.urls import path, include
from.import views
from menumakan import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home),
path('maem/', views.menumakan),
]
c. Analisis Scripts Urls.py Halaman Kreatif
Dari hasil script urls.py kita dapat mengetahui bahwa Script urls.py adalah
file dalam aplikasi Django yang bertanggung jawab untuk mengatur URL routing.
Fungsi utamanya adalah memetakan URL yang diminta pengguna ke tampilan
(views) yang sesuai. Ini memungkinkan aplikasi web untuk menangani berbagai
permintaan dari pengguna dan mengarahkan mereka ke fungsi atau halaman yang
benar. Dalam konteks halaman kreatif, output gambar yang ditampilkan pada
program PT Intimas Surya berkaitan dengan berbagai elemen visual yang
disajikan kepada pengguna. Berikut adalah table dari analisis script urls.py
halaman utama:
Tabel 3.5 Analisis Script urls.py Halaman Kreatif
Script Keterangan
urlpatterns = [ Merupakan daftar yang
mendefinisikan URL yang dapat
diakses dalam aplikasi web Django
dan bagaimana URL tersebut
dipetakan ke tampilan (views).
path('admin/', Adalah cara sederhana dan efisien
admin.site.urls), untuk mengintegrasikan antarmuka
administrasi Django ke dalam proyek
anda.
path('', views.home), Cara untuk menghubungkan root URL
 Script Keterangan
situs web
path('maem/', Cara untuk menghubungkan URL
views.menumakan), maem/
]

d. Scripts views.py Halaman Kreatif

from django.shortcuts import render

def home(request):
return render(request, 'home.html')
def menumakan(requset):
return render (requset, "maem.html")
e. Analisis Scripts views.py Halaman Kreatif
Dari hasil analisis script views.py halaman utama dimaksudkan untuk
mengolah data lalu memprosesnya dari script program views.py beserta
keterangannya. Dengan proses yang kompleks sehingga dapat dianalisis dan
dipahami. Analisis script views.py memperlihatkan bagaimana data diolah,
diproses lalu ditampilkan melalui output, juga bagiamana berinteraksi langsung
dengan para pengunjung web. Berikut adalah tabel dari analisis script views.py
halaman utama:
Tabel 3.6 Analisis Script views.py Halaman Kreatif
Script Keterangan
from django.shortcuts Mengimpor fungsi render dari modul
import render django.shortcuts.
def home(request): Mendefinisikan sebuah fungsi view di
dalam file views.py
return render(request, Untuk merender template HTML
'home.html') home.html
def menumakan(requset): Mendefinisikan sebuah fungsi view
return render (requset, Fungsi view Django digunakan untuk
"maem.html") merender template HTML maem.html

f. Scripts HTML Halaman Kreatif

<!DOCTYPE html>

<html lang="id">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>OUR MENU</title>
<link rel="icon" type="image/png" href="{% static "images/lg.png" %}"
/>
<link rel="stylesheet" href="{% static "css/cssm.css" %}" />
<script src="https://unpkg.com/feather-icons"></script>
<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@600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet" />
</head>

<body>
<header>
<nav class="nav">
<div class="logo">
<a href="#"><img src="{% static "images/Subway-logo.png"
%}" alt="Subway Logo" /></a>
</div>
<div class="nav-menu">
<a href="#">OUR MENU</a>
<a href="#promo">PROMO</a>
<a href="#oma">OUR CREW</a>
<a href="#about">ABOUT US</a>
</div>
<div class="nav-elemen">
<a href="#" id="hammenu"><i data-feather="menu"></i></a>
</div>
</nav>
<script>
feather.replace();
</script>
</header>
<div class="landing">
<div class="landing_teks">
<h1>
OUR <span><br>MENU</span>
<p>Are you looking for fast, healthy and delicious food? At
Subway,
we serve sandwiches, salads and wraps made specifically to
suit your
taste. We use fresh, high-quality ingredients to ensure you
get a satisfying meal, and drink</p>
</div>
<a href="#utamas" class="btn">ORDER NOW</a>
<div class="gambar">
<img src="{% static "images/heading.png" %}" alt="" />
</div>
</div>
<div class="best">
<div class="best_utama">
<div class="gambar1">
<img src="{% static "images/salad.png" %}" alt="">
</div>
<div class="best_text">
<h1>healty <span>salad</span></h1>
<p>Enjoy Healthy Salads at Subway! Looking for delicious and
healthy food? Subway has the answer! Try our wide selection of fresh
salads made from high-quality ingredients, full of crunchy vegetables and
choice proteins. Why Choose Subway Salad?
Fresh Ingredients: We use fresh vegetables cut daily to
ensure the best taste and quality. Quality Protein Options, Add grilled
chicken, lean turkey, or fresh tuna for a filling salad. Delicious
Sauces, Enjoy our wide selection of delicious,
low-calorie sauces. Customize to Taste, Create your dream
salad by choosing your favorite ingredients.</p>
</div>
</div>
</div>
<div class="menu" id="utamas">
 <h1>OUR BEST <span>MENU</span></h1>
<div class="menu_utama">
<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/sand1.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>DOUBLE BLT</h3> an ordinary sanwich with
cheese sauce </p>
<h4>Rp 52,000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/sand2.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>ROAST BEEF</h3> combination of smokey beef
and fresh bread</p>
<h4>Rp 59,000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/sand3.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>PIZZA MELT</h3> sandwich with a pizza
papperoni </p>
<h4>Rp 33,000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
 <img src="{% static "images/sand4.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>CHEESE STEAK</h3> melting cheese with smokey
steak</p>
<h4>Rp 68,000</h4>
</div>

</div>

<!-- batesnyaa sandwich-->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/salad1.jpg" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>CHICKEN SLICE</h3> salad with a chicken slice
and mayo</p>
<h4>Rp 52,000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/salad2.jpg" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>ROASTED CHICKEN</h3> salad with a roasted
chicken</p>
<h4>Rp56,500</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/salad3.jpg" %}" alt="">
</div>
<div class="desc">

</div>
 <div class="des_menu">

<p>
<h3>ITALIAN BMT</h3> vegetable and meat
combination</p>
<h4>Rp 70.000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/salad4.jpg" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>CHICKEN TERIYAKI</h3> salad with a chicken
teriyaki</p>
<h4>Rp 65,500</h4>
</div>

</div>

<!-- batesnyaa salad -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/snack1.jpg" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>WAFFLE FRIES</h3> crunchy potato fries with a
seasoning secret</p>
<h4>Rp 28,000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/snack2.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>CREAM SOUP</h3> creamy chichken soup for
breakfast</p>
 <h4>Rp 15,000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/snack3.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>RAISIN COOKIES</h3> crunchy original cookies
dessert</p>
<h4>Rp 19,500</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/snack4.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>CHOCOLATE CHIP</h3> crunchy chocolate cookies
dessert</p>
<h4>Rp 19,500</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/minum1.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>AQUA 300ML</h3> mineral water with iron man
power</p>
<h4>Rp 9.000</h4>
</div>

</div>
 <!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/minum2.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">
<p>
<h3>MTN DEW</h3> carbonated drinks with ordinary
taste.</p>
<h4>Rp19,000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/minum3.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>COFFEE LATTE</h3> a cup of coffe to start a
day</p>
<h4>Rp25,000</h4>
</div>

</div>

<!-- batesnyaa -->

<div class="menu_card">
<div class="menu_gambar">
<img src="{% static "images/minum4.png" %}" alt="">
</div>
<div class="desc">

</div>
<div class="des_menu">

<p>
<h3>ITALIAN BMT</h3> orange juicy pulp sooo
seger</p>
<h4>Rp.70.000</h4>
</div>

</div>
</div>
 </div>
<div class="food">
<img src="{% static "images/foot.png" %}" alt="" />
</div>

<div class="footer">
<div class="row">
<img src="{% static "images/putih.png" %}" alt="" />
<div class="colom">
<li><a href="#">HOME</a></li>
<li>
<a href="mailto:[email protected]"
target="_blank">CONTACT US</a>
</li>
<li>
<a href="https://maps.app.goo.gl/Jv5aCrZvhNDZQ6mz7"
target="_blank">LOCATION</a>
</li>
<div class="teks">
<input type="email" name="subs" id="" />
<button>Message</button>
</div>
<div class="desc">
<h1>© 37 D600230221 - D600230139 | All rights reserved.</h1>
</div>
<div class="sosmed">
<p>FOLLOW US AT</p>
<li>
<a href="https://www.instagram.com/subway.indonesia/?
utm_medium=copy_link" target="_blank">INSTAGRAM</a>
</li>
<li>
<a href="https://x.com/i/flow/login?redirect_after_login=
%2FID_Subway" target="_blank">TWITTER</a>
</li>
<li>
<a href="https://www.facebook.com/subway.indonesia"
target="_blank">FACEBOOK</a>
</li>
</div>
</div>
</div>
</div>
</body>g.
</html>
g. Analisis Scripts HTML Halaman Kreatif
Analisih html pada webside subway html digunakan untuk membuat
kerangka dan juga mengorganisir konten untuk ditampilkan dihalaman web,
dimulai dari section navigation bar dengan beberapa kelas untuk menampilkan
tombol dan text , kemudian pada bagian section body digunakan untuk
menampilkan landing text dan gambar , dan untuk bagian menu digunakan untuk
menampilkan gambar dari menu makanan dan juga deskripsi beserta harga
makananya, kemudian bagian footer sama halnya seperti navigation bar

Tabel 3.7 Analisis Script HTML Halaman Kreatif

Script Keterangan
 <!DOCTYPE html> Tag khusus yang memberitahu web
browser tentang jenis dokumen HTML
yang digunakan dalam halaman web.
<html lang="id"> Tag pembuka dokumen HTML yang
menunjukkan dokumen tersebut
menggunakan Bahasa Indonesia
<head> Tag dalam HTML yang digunakan
untuk menyertakan informasi meta
dan referensi ke file eksternal
<meta charset="UTF-8" /> Tag ini menunjukkan bahwa karakter
yang digunakan adalah UTF-8.
<meta name="viewport" Tag meta dalam dokumen HTML
content="width=device- yang memberikan instruksi kepada
width, initial- browser tentang tampilan halaman
scale=1.0" /> web pada perangkat berbasis web,
terutama pada perangkat seluler.
<title>OUR MENU</title> Tag dalam dokumen HTML yang
menentukan judul atau nama untuk
halaman web.

h. Scripts CSS Halaman Kreatif

@import url("https://fonts.googleapis.com/css2?
family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
--primer: #008c42;
--bg: white;
--sekunder: #ffc20d;
font-family: "Montserrat", sans-serif;
}

* {
scroll-behavior: smooth;
font-weight: 700;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: all 0.5s ease;
}

body {
height: 2000px;
background-color: rgb(255, 255, 255);
font-family: var(--font-family);
overflow-x: hidden;
}
.logo {
transition: 1s ease;
}
.nav {
background-color: #fff;
 display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 7%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
transition: all 0.5s ease;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 5px;
}

.nav .nav-menu a {
margin: 0 20px;
color: var(--primer);
font-weight: 700;
position: relative;
display: inline-block;
}

.nav a img {
margin: 0;
height: 30px;
}

.nav .nav-menu a:hover {

color: var(--sekunder);
}

.nav a img:hover {
transform: scale(1.2);
}

.nav .nav-menu a::after {

content: "";
display: inline-block;
width: 100%;
height: 3px;
background-color: var(--primer);
position: absolute;
bottom: -3px;
left: 0;
transform: scaleX(0);
transition: transform 0.5s ease;
}

.nav .nav-menu a:hover::after {

transform: scaleX(1);
}

.nav .nav-elemen a {
color: var(--primer);
transition: color 0.5s ease;
}

.nav .nav-elemen a:hover {

color: var(--sekunder);
}
.landing {
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
 top: 120px;
padding-left: 70px;
padding-right: 50px;
}
.landing_teks h1 {
font-weight: 900;
position: relative;
top: -70px;
left: 50px;

font-size: 60px;
color: #008c42;
}
.landing_teks span {
font-weight: 900;
color: #ffc20d;
}
.landing_teks p {
width: 500px;
padding-top: 20px;
position: relative;
font-size: 20px;
text-align: justify;
}
.btn {
top: 350px;
left: 118px;
position: absolute;
width: 150px;
height: 50px;
text-align: center;
display: inline-block;
background-color: var(--sekunder);
color: #fff;
padding: 15px 15px;
border-radius: 10px;
text-decoration: none;
transition: background-color 0.3s ease;
}

.btn:hover {
color: var(--sekunder);
background-color: var(--primer);
}

.best {
width: 100%;
height: 100vh;
padding-top: 170px;
padding-left: 100px;
padding-right: 100px;
}
.best_utama {
display: flex;
align-items: center;
justify-content: space-around;
text-align: justify;
}
.best img {
margin-top: 30px;
position: relative;
height: 380px;
}
.best_text {
padding-left: 90px;
}
.best_text h1 {
font-size: 60px;
text-transform: uppercase;
font-weight: 900;
color: #ffc20d;
margin-bottom: 30px;
}
.best_text span {
font-weight: 900;
color: #008c42;
}
.best_text p {
color: #008c42;
padding-top: 10px;
position: relative;
font-size: 20px;
text-align: justify;
}
.menu {
position: relative;
margin-top: 20px;
padding-left: 20px;
width: 100%;
}
.menu h1 {
margin-bottom: 40px;
font-size: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
color: #008c42;
}
.menu span {
color: #ffc20d;
font-weight: 900;
padding-left: 10px;
}
.menu_utama {
margin-top: 50px;
width: 95%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 15px;
}
.menu_card {
border: 5px solid var(--primer);
border-radius: 20px;
padding: 30px;
width: 275px;
height: 350px;
padding-top: 10px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.menu_gambar {
justify-content: center;
width: 250px;
height: 200px;
margin: 0 auto;
}
.menu_gambar img {
padding-top: 20px;
 padding-left: 30px;
width: 70%;
object-fit: cover;
object-position: center;
transition: 0.3s;
}
.menu_gambar img:hover {
transform: scale(1.3);
}
.des_menu p {
text-align: justify;
color: #666666;
padding: 20px;
font-size: 20px;
}
.des_menu h3 {
margin-top: -65px;
font-weight: 900;
color: #008c42;
}
.des_menu h4 {
text-align: center;
background-color: #ffc20d;
border-radius: 15px;
padding: 8px;
font-size: 20px;
font-weight: 900;
color: #008c42;
}
.des_menu h4:hover {
color: #fff;
background-color: #008c42;
}

/*footer*/

.footer {
margin-top: 50px;
height: 320px;
padding: 50px;
background-color: var(--primer);
}
.row {
height: 80%;
padding-left: 50px;
}
.colom {
color: var(--sekunder);
padding-top: 10px;
}
.colom li a {
font-size: 15px;
line-height: 30px;
color: var(--sekunder);
font-weight: 500;
}
.colom li a:hover {
color: var(--bg);
}
.desc h1 {
top: 30px;
position: relative;
display: flex;
justify-content: center;
color: rgb(255, 255, 255);
 font-size: 15px;
font-weight: 500;
}
.teks {
overflow: hidden;
font-family: "Helvetica";
display: flex;
justify-content: flex-end;
}
.teks input {
z-index: 9999;
color: #474747;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;

width: 250px;
height: 30px;
padding: 20px;
}
.teks button {
width: 80px;
z-index: 9999;
background-color: var(--sekunder);
font-family: "Montserrat";
color: var(--primer);
left: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.teks button:hover {
background-color: var(--bg);
}
.sosmed {
margin-top: -180px;
position: absolute;
left: 580px;
font-size: 15px;
line-height: 30px;
color: var(--sekunder);
font-weight: 00;
}
.sosmed p {
font-weight: 900;
}
.sosmed li a {
font-size: 15px;
line-height: 30px;
color: var(--sekunder);
font-weight: 500;
}
.sosmed li a:hover {
color: var(--bg);
}
.food {
margin-top: 50px;
position: absolute;
left: 920px;
}
.food img {
height: 220px;
}
i. Analisis Scripts CSS Halaman Kreatif
Analisis script CSS pada halaman kreatif merupakan langkah penting dalam
memahami bagaimana gaya dan tata letak diterapkan dalam pengembangan web
modern. CSS (Cascading Style Sheets) adalah bahasa gaya yang digunakan untuk
mendesain dan mengatur tampilan halaman web, termasuk warna, font, layout,
dan elemen visual lainnya. Pada halaman kreatif ini css digunakan untuk
mengatur tampilan dan tata letak dari setiap id dan juga class,kemudian juga
digunakan untuk meanmbahkan animasi dan transisi pada bagian button hover
menggunakan pseudo-classes, mengatur box model agar tiap kontenya responsif
kemudian untuk mengatur tampilan bagian judul dan paragraf agar telihat lebih
menarik.
Tabel 3.8 Analisis Script CSS Halaman Kreatif
Script Keterangan
:root { Elemen paling atas dalam dokumen
} HTML
--primer: #008c42; Definisi variabel CSS kustom yang
menetapkan nilai warna primer dalam
desain atau tata letak halaman web.
--bg: white; Properti warna latar belakang (
background-color) dan menyetelnya
menjadi putih
--sekunder: #ffc20d; Di dalam#FFC20D). Warna sekunder
sering digunakan sebagai penanda atau
aksen pada desain web.
font-family: "Montserrat", Jika "Montserrat" tidak tersedia, maka
sans-serif; jenis font cadangan yang disebut
"sans-serif" akan digunakan.

3.3 Penutup
3.3.1 Kesimpulan
Web miliki PT MAP Boga Adi Perkasa yang bernama Subway dirancang
untuk memberikan layanan yang berkualitas kepada pelanggan yang pastinya
berguna untuk memudahkan, mempercepat, dan memberikan kepuasan terhadap
pelanggan. Hal ini dapat menguntungkan pelanggan maupun pelayan, karena
pelanggan akan dengan mudah memesan makanan menggunakan mobile dengan
waktu yang singkat dan lebih canggih, juga dapat menyimpan data pesanan
dengan baik. Web ini juga bisa menghitung grafik penjualan yang didapatkan,
serta terdapat halaman kreatif. Berikut kesimpulan dari dibuatnya web ini:
1. Web Subway ini memudahkan pelanggan untuk mengakses informassi
mengenai outlet milik Subway Indonesia.
2. Web ini memudahkan costumer untuk mengetahui tentan
3. Web ini terdapat fitur yang berisikan tentang halaman menu, promo section,
crew section, dan about us.
4. Pada halaman kreatif ini css digunakan untuk mengatur tampilan dan tata
letak dari setiap id dan juga class.
5. Dalam pengembangan aplikasi web menggunakan kerangka kerja Django,
file views.py memegang peranan penting dalam menghubungkan logika
bisnis dengan presentasi kepada pengguna.
3.3.2 Saran
Dalam melaksanakan praktikum modul 3 ini tidak menutup kemungkinan
dapat terjadi hal-hal yang tidak terduga. Masukkan saran dapat membantu
praktikan mengerjakan praktikum dan laporan praktikun dengan baik. Setelah
dilaksanakannya praktikum, dapat diberikan saran sebagai berikut:
1. Asisten diharapkan untuk lebih sigap saat ada masalah pada program saat
praktikum berlangsung.
2. Pada saat praktikum penjelasan mengenai script terlalu cepat sehingga
praktikan kurang menerima materi dengan baik.
3. Praktikum Prokom diharapkan datang tepat waktu saat praktikum
dilaksanakan.
4. Isi dari laporan praktikum sebaiknya lebih dipersingkat.
5. Selisih laporan permodul seharusnya dijeda lebih lama.