Cara Membuat Landing Page dengan HTML dan CSS

Cara Membuat Landing Page dengan HTML dan CSS – Pada era digital saat ini, keberadaan sebuah landing page menjadi sangat penting dalam memperkenalkan produk, layanan, atau informasi penting kepada pengunjung website. Tidak hanya sebagai media promosi, sebuah landing page yang baik juga dapat meningkatkan konversi dan memperkuat citra merek Anda. Bagi pemula yang ingin memulai langkah pertama dalam membangun landing page, menggunakan HTML dan CSS adalah pilihan yang sangat tepat.

Dalam panduan ini, riztekno akan membahas langkah-langkah detail untuk membuat landing page Anda sendiri, dari mulai menciptakan folder proyek hingga mengatur tampilan yang menarik dan informatif. Mari kita jelajahi bersama langkah-langkahnya!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat landing page dengan html dan css:

  • Perangkat laptop,
  • Chrome (Web browser),
  • Sublime text (Text editor code),
  • Niat yang kuat.

Cara Membuat Landing Page dengan HTML dan CSS

1. Buat Folder Project Landing Page

Langkah pertama adalah membuat folder khusus untuk proyek landing page Anda. Ini membantu menjaga kerapihan dan kelancaran kerja. Anda dapat memberi nama folder tersebut sesuai keinginan Anda, misalnya “LandingPageProject“.

2. Buat Folder Img

Di dalam folder proyek Anda, buat subfolder bernama “img” untuk menyimpan semua gambar yang akan Anda gunakan di landing page. Ini mempermudah pengelolaan gambar dan memastikan tata letak proyek yang teratur.

3. Buat Sebuah File landing_page.html

Buka teks editor favorit Anda dan buat file baru dengan nama “landing_page.html” di dalam folder proyek Anda. Ini akan menjadi file utama untuk landing page Anda. Download gambar disini untuk diterapkan dalam project landing page.

Berikut ini file html yang harus Anda tambahkan untuk dapat membuat landing page dengan html dan css:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>Company Name</h1>
            <nav>
                <ul>
                    <li><a href="https://riztekno.com/">Home</a></li>
                    <li><a href="https://riztekno.com/">About</a></li>
                    <li><a href="https://riztekno.com/">Services</a></li>
                    <li><a href="https://riztekno.com/">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="hero">
        <div class="container">
            <img src="img/gambar_landing_page.jpg" alt="Hero Image">
            <div class="hero-content">
                <h2>Welcome to Our Website</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies velit eget lorem luctus.
                </p>
                <a href="https://riztekno.com/" class="cta-btn">Learn More</a>
            </div>
        </div>
    </div>
    <div class="features">
        <div class="container">
            <h2>Our Features</h2>
            <div class="feature-item">
                <img src="img/services1.jpg" alt="Feature 1">
                <h3>Feature 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="feature-item">
                <img src="img/services2.jpg" alt="Feature 2">
                <h3>Feature 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="feature-item">
                <img src="img/services3.jpg" alt="Feature 3">
                <h3>Feature 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</body>

</html>
 

4. Buat File style.css

Selanjutnya, buat file CSS baru dengan nama “style.css” di dalam folder proyek Anda. File ini akan mengatur tampilan dan gaya visual dari landing page Anda.

Artikel Terkait:   Cara Membuat Website Gratis dengan HTML

Berikut ini file css yang harus Anda tambahkan untuk dapat membuat landing page dengan html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

header h1 {
    float: left;
}

nav {
    float: right;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-left: 20px;
}

nav ul li a {
    color: rgb(18, 1, 1)000;
    text-decoration: none;
}

.hero {
    text-align: center;
    color: rgb(7, 0, 0)101;
    padding: 100px 0;
}

.hero img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero h2 {
    font-size: 48px;
}

.hero p {
    font-size: 24px;
    margin-top: 20px;
}

.cta-btn {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 20px;
    margin-top: 30px;
}

.cta-btn:hover {
    background-color: #0056b3;
}

.features {
    background-color: #fff;
    padding: 100px 0;
    text-align: center;
}

.features h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.feature-item {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    margin-right: 3%;
    margin-bottom: 30px;
}

.feature-item img {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: 24px;
}

.feature-item p {
    font-size: 18px;
}
 

5. Mengubah Tampilan Landing Page

Anda dapat mengubah tampilan landing page Anda dengan mengedit file HTML dan CSS sesuai keinginan Anda. Tambahkan gambar, teks, tombol, dan elemen desain lainnya untuk membuatnya menarik dan informatif.

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Kemudian buka file “landing_page.html” di browser web Anda untuk melihat tampilan landing page Anda secara langsung.

Artikel Terkait:   Cara Membuat Search Box dengan HTML dan CSS

Preview hasil

Berikut ini preview hasil tampilan landing page dengan html dan css:

Penutup

Pada era digital saat ini, keberadaan sebuah landing page menjadi sangat penting dalam memperkenalkan produk, layanan, atau informasi penting kepada pengunjung website. Tidak hanya sebagai media promosi, sebuah landing page yang baik juga dapat meningkatkan konversi dan memperkuat citra merek Anda. Bagi pemula yang ingin memulai langkah pertama dalam membangun landing page, menggunakan HTML dan CSS adalah pilihan yang sangat tepat. Dalam panduan ini, kami akan membahas langkah-langkah detail untuk membuat landing page Anda sendiri, dari mulai menciptakan folder proyek hingga mengatur tampilan yang menarik dan informatif. Mari kita jelajahi bersama langkah-langkahnya!

Dengan mengetahui cara membuat landing page menggunakan HTML dan CSS, Anda telah membuka pintu untuk mengembangkan keterampilan desain web Anda dan meningkatkan kehadiran online Anda. Tetaplah eksplorasi dan kembangkan ide-ide kreatif Anda untuk menciptakan landing page yang unik dan efektif. Jangan ragu untuk terus belajar dan mencoba hal-hal baru dalam perjalanan Anda menuju kesuksesan digital. Selamat mencoba, dan semoga landing page Anda membawa kesuksesan yang gemilang!