Cara membuat landing page startup
ini adalah contoh landing page sederhana yang dibuat dengan HTML dan CSS
Diatas adalah tampilan landing page yang sudah berhasil saya buat dengan HTML dan css
Sebelum coding saya akan mejelaskan terlebih dahulu apa itu landing page dan apa kegunaan nya untuk website
Apa itu Landing Page?
Landing page adalah setiap halaman yang dibuka oleh user dengan mengklik sesuatu terlebih dahulu. Tidak hanya pada website, tetapi sebutan “landing page” juga berlaku pada platform lain seperti media sosial, email, iklan berbayar dan sebagainya.
Jika biasanya halaman website berisi banyak link dan menu, landing page dirancang untuk mengarahkan pengunjung agar melakukan sesuatu secara spesifik.
Walaupun berada pada satu website yang sama, landing page sebenarnya dibuat secara terpisah. Hal ini bertujuan untuk “menjauh” dari link atau menu lain yang bisa mengalihkan perhatian user dari tujuan utama landing page tersebut.
Dari sini dapat disimpulkan bahwa landing page yang baik adalah landing page yang berorientasi pada “action” yang akan dilakukan user.
Untuk Apa Saja Penggunaan Landing Page?
Halaman ini dapat digunakan untuk mendorong banyak jenis kampanye, memasang iklan, email marketing, kampanye media sosial dan sebagainya. Setidaknya landing page dapat membantu user mengikuti CTA untuk:
- Downlaod eBook
- Registrasi
- RSVP untuk event tertentu
- Mempelajari produk/jasa batu
- Registrasi untuk mendapat trial atau demo
- Klaim penawaran promosi dan masih banyak lagi
Pastikan setiap kampanye promosi yang Anda buat berada di landing page yang berbeda agar lebih efektif. Karenanya, Anda juga harus membuat konten berbeda untuk masing-masing kampanye promosi.
Sudah jelas bukan tentang apa itu landing page dan apa kegunaan nya,mari kita langsung saja ke coding
Pertama kita buat navbar:
Script HTML (buat file index.html)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Newisata.id|Hits&Kekinian</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link href="https://fonts.googleapis.com/css?family=Hanalei+Fill" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Hanalei+Fill|Noto+Serif+JP|Raleway" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="nav">
<div class="logo">
<a href="#">
<p>Newisata.id</p>
</a>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Tours</li>
<li>Hotel</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
Script CSS(buat file style.css)
html{
margin: 0;
padding: 0;
width: 100%;
}body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url(green.png);
background-repeat: no-repeat;
background-size: cover;
display: block;
}
.logo{
float: left;
color: #08596A;
margin-left: 46px;
padding: 0px 38px;
font-family: 'Raleway', sans-serif;
font-size: 25px;
font-weight: bold;
}
.logo a{
text-decoration: none;
color: #08596A;
}
.nav{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 80px;
width: 100%;}
.nav ul{
list-style: none;
cursor: pointer;
float: right;
margin-right: 140px;
}
.nav ul li {
list-style: none;
display: inline-block;
color:#08596A;
font-family: 'Raleway', sans-serif;
padding: 15px 15px;
font-weight: 400;
}
.nav ul li:hover{
border-bottom: 3px solid #08596A;
transition: all .3s ease;
}.logo h1{
color: #fff;
font-family: 'Fredericka the Great', cursive;
}
Penjelasan:
saya menggunakan font dari google yang mana bisa di search aja font nya di https://fonts.google.com dan juga untuk background pada body nya saya mencari dari google image
Membuat flat design sendiri dengan Adobe ilustrator dan photoshop atau bisa juga cari flat design di freepik ataupun shutterstock
Lanjut ke membuat header dan penempatan image,masih di index.html kita lanjut membuat header nya
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Newisata.id|Hits&Kekinian</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link href="https://fonts.googleapis.com/css?family=Hanalei+Fill" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Hanalei+Fill|Noto+Serif+JP|Raleway" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="nav">
<div class="logo">
<a href="#">
<p>Newisata.id</p>
</a>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Tours</li>
<li>Hotel</li>
<li>Contact Us</li>
</ul>
</div>
<div class="header">
<h1>Newisata<span>.id</span></h1>
</div>
<div class="tagline">
<p>Sebuah platform yang memberikan ulasan dan referensi tentang tempat wisata hits dan kekinian dari seluruh indonesia.</p><br>
</div>
<div class="down">
<img src="Bags.png" alt="Travel">
</div>
</div>
</body>
</html>
Masih lanjut di style.css
html{
margin: 0;
padding: 0;
width: 100%;
}body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url(green.png);
background-repeat: no-repeat;
background-size: cover;
display: block;
}
.logo{
float: left;
color: #08596A;
margin-left: 46px;
padding: 0px 38px;
font-family: 'Raleway', sans-serif;
font-size: 25px;
font-weight: bold;
}
.logo a{
text-decoration: none;
color: #08596A;
}
.nav{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 80px;
width: 100%;}
.nav ul{
list-style: none;
cursor: pointer;
float: right;
margin-right: 140px;
}
.nav ul li {
list-style: none;
display: inline-block;
color:#08596A;
font-family: 'Raleway', sans-serif;
padding: 15px 15px;
font-weight: 400;
}
.nav ul li:hover{
border-bottom: 3px solid #08596A;
transition: all .3s ease;
}.logo h1{
color: #fff;
font-family: 'Fredericka the Great', cursive;
}
.header{
text-align: center;
position: absolute;
top: 40%;
left: 70%;
transform: translate(-50% ,-50%);
}
.header h1{
color: #08596A;
text-align: left;
font-family: 'Noto Serif JP', sans-serif;
font-size: 50px;
}
.header span{
color: #08596A;
}
.tagline{
position: absolute;
transform: translate(-50%,-50%);
text-align: center;
top: 55%;
left: 73%;
}
.tagline p{
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 16px;
text-align: left;
color: #08596A;
}
.down{
position: absolute;
top: 50%;
left:36%;
transform: translate(-50%,-50%);
}
.down img{
width: 53%;
}
.text{
width: 205px;
height: 40px;
border: none;
border-radius: 20px;
padding-left: 10px;
}
Membuat searh button :
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Newisata.id|Hits&Kekinian</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link href="https://fonts.googleapis.com/css?family=Hanalei+Fill" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Hanalei+Fill|Noto+Serif+JP|Raleway" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="nav">
<div class="logo">
<a href="#">
<p>Newisata.id</p>
</a>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Tours</li>
<li>Hotel</li>
<li>Contact Us</li>
</ul>
</div>
<div class="header">
<h1>Newisata<span>.id</span></h1>
</div>
<div class="tagline">
<p>Sebuah platform yang memberikan ulasan dan referensi tentang tempat wisata hits dan kekinian dari seluruh indonesia.</p><br>
<input class="search-area" type="text" name="text" placeholder="Cari tempat wisata..." autocomplete="off">
<input class="search-btn" type="submit" name="submit" value="Search">
</div>
<div class="down">
<img src="Bags.png" alt="Travel">
</div>
</div>
</body>
</html>
style.css
html{
margin: 0;
padding: 0;
width: 100%;
}body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url(green.png);
background-repeat: no-repeat;
background-size: cover;
display: block;
}
.logo{
float: left;
color: #08596A;
margin-left: 46px;
padding: 0px 38px;
font-family: 'Raleway', sans-serif;
font-size: 25px;
font-weight: bold;
}
.logo a{
text-decoration: none;
color: #08596A;
}
.nav{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 80px;
width: 100%;}
.nav ul{
list-style: none;
cursor: pointer;
float: right;
margin-right: 140px;
}
.nav ul li {
list-style: none;
display: inline-block;
color:#08596A;
font-family: 'Raleway', sans-serif;
padding: 15px 15px;
font-weight: 400;
}
.nav ul li:hover{
border-bottom: 3px solid #08596A;
transition: all .3s ease;
}.logo h1{
color: #fff;
font-family: 'Fredericka the Great', cursive;
}
.header{
text-align: center;
position: absolute;
top: 40%;
left: 70%;
transform: translate(-50% ,-50%);
}
.header h1{
color: #08596A;
text-align: left;
font-family: 'Noto Serif JP', sans-serif;
font-size: 50px;
}
.header span{
color: #08596A;
}
.tagline{
position: absolute;
transform: translate(-50%,-50%);
text-align: center;
top: 55%;
left: 73%;
}
.tagline p{
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 16px;
text-align: left;
color: #08596A;
}
.down{
position: absolute;
top: 50%;
left:36%;
transform: translate(-50%,-50%);
}
.down img{
width: 53%;
}
.text{
width: 205px;
height: 40px;
border: none;
border-radius: 20px;
padding-left: 10px;
}
.search-area{
width: 205px;
height: 40px;
background: #fff;
border: none;
border-radius: 10px;
float: left;
padding-left: 15px;
box-shadow: 19px 21px 53px rgba(46,46,46,0.66);
}
.search-btn{
width: 100px;
height: 42px;
border-radius: 0px 10px 10px 0px;
border: none;
color: #fff;
cursor: pointer;
background-color: #08596A;
margin-left: -70px;
margin-top: 0.2px;
box-shadow: 0px 21px 53px rgba(46,46,46,0.66);
}
.search-btn:hover{
transition: all .5s ease;
background-color: #ea0227;
box-shadow: 0px 21px 53px rgba(46,46,46,0.66);
}
“mungkin masih berkanjut tutorial ini ke sesi berikutnya,jadi tunggu saja tutorial nya dari saya “
Itu saja dari saya tutorial untuk membuat tampillan landing page sederhana dengan menggunakan CSS dan HTML.