Home Pendidikan Contoh Web Sederhana Tema Kemerdekaan Indonesia

Contoh Web Sederhana Tema Kemerdekaan Indonesia

Farhan Hidayat 28 Desember 2024 6 min read

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:

Also Read: Perbedaan SNBT dan SNBP yang Wajib Kamu Tahu Sebelum Daftar Kuliah

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:

contoh web sederhana

Also Read: Inilah Perbedaan Kampus Negeri dan Swasta, Mana yang Cocok Buat Kamu?

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:

Also Read: Cara Memilih Jurusan Kuliah yang Cocok Buat Kamu (Berdasarkan Kepribadian)

*{
	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.

Also Read: Tingkat Pendidikan di Indonesia: Kondisi, Tantangan, dan Harapan ke Depan

Tagged with: