Membuat Desain Header Dengan Curve SVG

Pada artikel ini saya akan membagikan tutorial Cara Membuat Desain Header Dengan Curve SVG. Curve SVG adalah tampilan curva atau bergelombang, curve svg disini akan saya sisipkan pada bagian bawah desain Header Web. Oke langsung saja yuk ikutin langkah pembuatannya.

Langkah pertama

Sebelum dimulai sahabat bisa menyiapkan 2 buah gambar dan file surve.svg seperti yang saya siapkan

Buat struktur HTML awal ya disini saya memakai Bootstrap agar lebih nyaman dalam membuat desainnya, silahkan ketikkan code berikut:

<header>
	<div class="container">
		<div class="header-content">
			<div class="row">
				<div class="col-lg-5">
					<div style="margin-top:150px;"></div>
					<h3>Start Your Business With One Touch</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquam ea, molestias explicabo magni in, ad, qui dolore molestiae ut atque. Ducimus totam nemo autem.</p>
					<a href="" class="theme-btn">Read More</a>
					<a href="" class="theme-btn">Start Now</a>
					<div class="go-about"></div>
				</div>				
					

				<div class="col-lg-7">
					<div style="margin-top: 100px"></div>
					<img src="images/header.png" class="img-fluid">
				</div>
			</div>
		</div>
	</div>
	</header>

Langkah kedua, tambahkan sedikit style CSS agar semakin menarik tampilannya seperti berikut code CSS nya:

header{
			background: url(images/bg-header.jpg);
			background-size: cover;
			height: 110vh;
			position: relative;
			overflow: hidden;
		}
		header:after{
			content: '';
			position: absolute;
			bottom: 0;
			width: 100%;
			background-image: url(images/wave-curve.svg);
			height: 215px;
		}
		.header-content{
			z-index: 1;
			position: relative;
		}
		.header-content h3{
			font-size: 45px;
			font-weight: bold;
			text-transform: capitalize;
			color: #ffffff;
		}
		.header-content p{
			font-size: 16px;
			margin:20px 0 45px;
			color:white;
			letter-spacing: 1px;
			font-weight: 300;
			text-transform: capitalize;
		}
		.theme-btn{
			border-radius: 50px;
			color:#ffffff;
			background:#e5e044;
			padding: 15px 30px;
			min-width: 170px;
			border:2px solid #ffffff;
			font-weight: bold;
		}
		.theme-btn:hover{
			text-decoration: none;
			background-color: #b7fe36;
			color: #ffffff;
			font-weight: bold;
		}

Bisa diperhatikan pada struktur html dan css sudah disisipkan gambar dan svg ya.

Selanjutnya simpan kedua file diatas kemudian buka pada browser masing-masing dan lihat hasilnya akan seperti tampilan dibawah ini:

Nah seperti ini tampilan desain Header Web yang dibuat curve.svg posisi dibawah, kemudian untuk gambar ilustrasi header bisa sahabat cari pada website undraw.

Saya kira cukup dalam pembahasan artikel ini semoga bermanfaat dan selamat mencoba.

terima kasih

Membuat Desain Header Dengan Curve SVG

Kategori