Open in app

Sign in

Write

Sign in

Cara membuat landing page startup

Muhamad Kamal
6 min readSep 16, 2018

--

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.

Startup
CSS
HTML
UI
Design

--

--

Muhamad Kamal

Written by Muhamad Kamal

18 Followers

UI Designer

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams