Contoh Web Sederhana Tema Kemerdekaan Indonesia

Farhan Hidayat — Sat, 28 Dec 2024 11:33:27 +0000

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:




	
	
	wabsite Indonesia



  
  	

  	
  		Home
  		Event
  		Venue
  		About
  		Contact
  	

  	
  

  

  	
  		happy
indonesia
independence day
  		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.
  		
  		Read More

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.

Artikel Contoh Web Sederhana Tema Kemerdekaan Indonesia pertama kali tampil pada Farhanhidayat.com.

Desain Web Sederhana Arsip - Farhanhidayat.com