Contoh Web Sederhana Tema Kemerdekaan Indonesia
Hai! Kamu pernah kepikiran nggak sih buat bikin website sederhana, tapi bingung mulai dari mana? Tenang aja, aku punya ide seru nih: bikin contoh web sederhana bertema Kemerdekaan Indonesia! Dengan pakai HTML dan CSS, kamu bisa bikin website keren yang simpel banget. Yuk, cobain!
Apa Itu Contoh Web Sederhana?
Jadi gini, contoh web sederhana itu sebenarnya website yang desain dan strukturnya simpel banget. Biasanya, cuma pakai HTML dan CSS dasar. Cocok banget buat kamu yang baru belajar coding. Web sederhana ini gampang dibuat, nggak makan waktu lama, dan pastinya bakal bikin kamu makin paham dasar-dasar coding.
Kenapa bikin web sederhana itu asyik?
- Mudah banget dipraktikkan.
- Bisa dipakai buat belajar dan eksperimen.
- Cocok untuk proyek bertema Kemerdekaan Indonesia.
Mengapa Memilih Tema Kemerdekaan Indonesia?
Tema Kemerdekaan Indonesia penuh makna dan sangat cocok untuk dijadikan inspirasi. Kamu bisa memanfaatkan elemen seperti warna merah putih, gambar Garuda, atau simbol nasional lainnya untuk membuat web kamu terlihat keren dan patriotik. Selain itu:
- Membantu meningkatkan rasa cinta tanah air.
- Menjadi proyek kreatif yang bisa kamu tunjukkan ke teman-teman.
- Menambah semangat belajar HTML dan CSS dengan tujuan yang spesifik.
Demo Tampilan Contoh Web Sederhana
Sebelum kita mulai ngoding, mari lihat dulu tampilan akhirnya agar kamu bisa membayangkan hasilnya:
Langkah-Langkah Membuat Web Sederhana Bertema Kemerdekaan
1. Persiapan Tools dan Materi
Oke, sebelum mulai, siapin dulu nih beberapa alat penting:
- Editor teks: Kayak Visual Studio Code, Sublime Text, atau bahkan Notepad biasa.
- Browser: Chrome, Firefox, atau apa aja buat ngecek hasil coding kamu.
- Gambar dan ikon: Bisa cari gambar Garuda, bendera merah putih, atau desain lainnya.
- Warna tema: Merah (#FF0000) dan putih (#FFFFFF) pasti wajib dong!
2. Struktur Dasar HTML
Mulai dulu dengan kode HTML simpel kayak gini:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>wabsite Indonesia</title>
</head>
<body>
<header>
<img src="image/garuda1.png" alt="" class="garuda1">
<nav class="navbar">
<a href="#">Home</a>
<a href="#">Event</a>
<a href="#">Venue</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<i class="fa-solid fa-moon mode"></i>
</header>
<section class="home">
<div class="content">
<h3>happy<br><span>indonesia</span><br>independence day</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor venenatis sem in mollis. Etiam varius lacinia lectus vitae lobortis. Nam malesuada diam vel augue porttitor, sit amet volutpat nulla hendrerit Morbi quis justo hendrerit, ultricies sapien ut, euismod urna.
</p>
<a href="#" class="btn"><span></span>Read More</a>
<div class="sci">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="image">
<img src="image/garuda2.png" alt="" class="garuda2">
<img src="image/nomor.png" alt="" class="nomor">
</div>
<img src="image/bendera1.png" alt="" class="bendera1">
</section>
<script src="script.js"></script>
</body>
</html>
3. Desain dengan CSS
Sekarang, tambahin gaya biar lebih cantik. Pakai CSS kayak gini:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
font-family: 'poppins', sans-serif;
}
*::selection {
background: #f00;
color: #fff;
}
:root {
--primary-color: #f9f9f9;
--secondary-color: #222;
}
.dark-mode {
--primary-color: #212121;
--secondary-color: #f9f9f9;
}
html {
font-size: 62%;
overflow-x: hidden;
}
body {
background: var(--primary-color);
transition: 1s;
}
section {
min-height: 100vh;
padding: 0 9%;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--primary-color);
padding: 2rem 9%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .garuda1 {
position: relative;
width: 4rem;
}
header .navbar a {
display: inline-block;
font-size: 1.7rem;
margin-left: 3rem;
color: var(--secondary-color);
font-weight: 500;
}
header .navbar a:hover {
color: #f00;
}
header .mode {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
background: linear-gradient(#f00, #000);
color: #f9f9f9;
font-size: 1.5rem;
border-radius: 50%;
cursor: pointer;
}
.home {
display: flex;
justify-content: center;
align-items: center;
}
.home .bendera1 {
position: fixed;
right: 0;
bottom: 0;
width: 110vw;
z-index: -1;
}
.home .content h3 {
font-size: 4.4rem;
color: var(--secondary-color);
text-transform: uppercase;
line-height: 5.3rem;
}
.home .content h3 span {
font-size: 7rem;
color: #f00;
line-height: 6rem;
}
.home .content p {
font-size: 1.6rem;
color: var(--secondary-color);
padding: 1rem 0;
}
.btn {
position: relative;
display: inline-block;
padding: .8rem 5rem;
margin-top: 1rem;
border-radius: 5rem;
font-size: 1.7rem;
color: #f9f9f9;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
overflow: hidden;
}
.btn span {
position: absolute;
top: 0;
left: 0;
background: linear-gradient(#000, #f00, #f00);
width: 100%;
height: 150%;
z-index: -1;
transition: .5s;
}
.btn:hover span {
top: -20px;
background: linear-gradient(#f00, #f00, #000);
}
.home .image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 200rem;
}
.home .image .nomor {
position: absolute;
width: 45%;
}
.home .image .garuda2 {
position: absolute;
width: 65%;
opacity: .1;
z-index: -2;
transition: 1s;
}
.dark-mode .home .image .garuda2 {
filter: brightness(0) invert(1);
}
.dark-mode .home .image .garuda2.garuda1 {
opacity: .8;
}
.sci {
position: absolute;
bottom: 2.5rem;
display: flex;
margin-left: -2rem;
}
.sci a {
display: inline-block;
width: 4rem;
height: 4rem;
background: #f00;
border-radius: 50%;
text-align: center;
margin-left: 2.5rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
transition: .3s;
}
.sci a i {
font-size: 1.7rem;
color: #f9f9f9;
line-height: 4rem;
transition: .3s;
}
.sci a:hover {
background: #f9f9f9;
transform: translateY(-5px);
}
.sci a:hover i {
color: #f00;
}
/* BREAKPOINTS */
@media (max-width: 992px) {
html {
font-size: 60%;
}
section {
padding: 0 5%;
}
header {
padding: 2rem 5%;
}
.home .content h3 {
font-size: 3.3rem;
line-height: 2.5rem;
}
.home .content h3 span {
font-size: 5.5rem;
}
.sci {
bottom: 2rem;
}
}Review Tools yang Digunakan
Selama bikin contoh web sederhana ini, kamu bakal butuh beberapa tools yang bikin hidup kamu lebih gampang:
- Visual Studio Code: Editor teks yang punya banyak fitur keren.
- Chrome DevTools: Bantu kamu lihat hasil coding langsung di browser.
- Canva: Kalau butuh desain tambahan kayak logo atau banner.
Kelebihan:
- Tools ini gampang banget dipakai, bahkan buat pemula.
- Banyak tutorial gratis yang bisa kamu cari online.
Kekurangan:
- Kalau mau fitur lebih canggih, kamu mungkin butuh belajar lebih dalam.
Kesimpulan
Gimana? Seru kan bikin contoh web sederhana bertema Kemerdekaan Indonesia? Selain gampang, kamu juga bisa belajar banyak hal baru dari proyek ini. Yuk, cobain sendiri dan kasih tahu teman-temanmu hasilnya!
Kalau udah selesai, jangan lupa share ya biar makin banyak yang terinspirasi.
Tagged with:
Contoh Web SederhanaDesain Web SederhanaHTML dan CSSTutorial Web KemerdekaanWebsite Kemerdekaan
Membagikan panduan WordPress, plugin, themes, hosting, dan berbagai tips website modern yang mudah dipahami untuk pemula Indonesia.
You might also like
Coding
Digital Insight
Hosting
Plugins
Review Tools
Themes
WordPress
