Landing page adalah halaman dalam website yang didesain khusus dengan mindset marketing. Halaman inilah yang ditampilkan ketika pengunjung mengakses website dari hasil pencarian berbayar (paid search).
Berdasarkan jenisnya, ada dua fungsi utama landing page. Pertama, landing page bisa dipakai untuk mengumpulkan data pengunjung potensial atau leads. Leads inilah yang dijaga oleh bisnis. Kemudian calon pelanggan ini diharapkan melakukan pembelian di masa mendatang.
Kedua, landing page juga bisa berfungsi untuk mempercepat transaksi. Halaman ini minim distraksi dari menu dan tombol navigasi lainnya. Dengan kata lain, landing page memberikan jalan khusus bagi pengunjung untuk mengakses produk atau layanan yang ingin dibeli.
Pada kesempatan kali ini kita akan menggunakan template yang berasal dari bootstrap Bisa kita memilihnya sendiri pada bootstrap. Pada link berikut ini : https://startbootstrap.com/themes
Pada gambar diatas kita dapat memilih template mana yang akan kita ambil, kemudian saya coba saja mengambil template Agency. Bisa juga ambil template nya di link berikut :
https://startbootstrap.com/theme/agency
Berikut ada bentuk rar yang telah di download
Lalu extract folder yang berbentuk rar tadi. Dan di dalamnya terdapat assets, css, js dan index
Kira – kira tampilan landing page kita menjadi seperti ini
Lalu pindahkan folder folder landing page kita tadi kedalam folder laravel kita. Kalau saya diletakkan pada C>xampp>htdoc>belajarLaravel>public
Kemudian buat file baru pada layout yang bernama landingpage.blade.php
Kemudian buka file main.html kemudian main.html ini disesuaikan saja dengan isi yang kita butuhkan. Lalu kita copas saja kedalam file yang telah kita buat sebelumnya
Berikut adalah codingan landingpage yang sudah saya edit. Pada codingan yang saya edit berikut ini sudah saya ubah kata-kata maupun gambar-gambarnya agar bisa disesuaikan dengan kebutuhan kita masing-masing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Politeknik Negeri Padang</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ml-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="/welcomelogin">Login</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Profil</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="masthead-subheading">Welcome To Our University!</div>
<div class="masthead-heading text-uppercase">Klik here!</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="/home">Lets Join With Us</a>
</div>
</header>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="text-center">
</div>
<div class="row text-center">
<div class="col-md-4">
<h4 class="my-3">Moto</h4>
<p class="text-muted">"Berakhlak Mulia, Berpikir Akademis, Bertindak Profesional"</p>
</div>
<div class="col-md-4">
<h4 class="my-3">Visi</h4>
<p class="text-muted">“ Pada tahun 2025 Menjadi institusi pendidikan vokasional terbaik di Asia Tenggara, bermartabat, dan berwawasan internasional.”</p>
</div>
<div class="col-md-4">
<h4 class="my-3">Misi</h4>
<p class="text-muted">Menyelenggarakan pendidikan vokasional yang sesuai dengan perkembangan ilmu pengetahuan dan teknologi yang berwawasan internasioanal, serta menyelenggarakan penelitian yang inovatif dan adaptif untuk pengembangan ilmu pengetahuan dan teknologi dan menerapkan ilmu pengetahuan dan teknologi dalam rangka memecahkan masalah dan meningkatkan taraf hidup masyarakat</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid-->
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Politeknik Negeri Padang</h3>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/pnp.jpg" alt="" />
</a>
<div class="portfolio-caption">
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/pnp1.jpg" alt="" />
</a>
<div class="portfolio-caption">
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/pnp2.jpg" alt="" />
</a>
<div class="portfolio-caption">
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/pnp6.jpg" alt="" />
</a>
<div class="portfolio-caption">
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/pnp4.jpg" alt="" />
</a>
<div class="portfolio-caption">
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/pnp5.jpg" alt="" />
</a>
<div class="portfolio-caption">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About-->
<section class="page-section" id="about">
<div class="container">
<div class="text-center">
<h4 class="section-heading text-uppercase">Alamat</h4>
<h3 class="section-subheading text-muted">Kampus Politeknik Negeri Padang <br> Limau Manis Kecamatan Pauh <br> Kota Padang 25164 <br>
<br> Telp : 0751 72590
<br> Fax : 0751 72576
<br> Email : info[a]pnp.ac.id
<br> Instagram : Politeknik Negeri Padang
<br> Youtube : Politeknik Negeri Padang
<br> Facebook : Politeknik Negeri Padang</h3>
</div>
</section>
<!-- Team-->
<!-- Clients-->
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
</div>
<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div class="row align-items-stretch mb-5">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
<p class="help-block text-danger"></p>
</div>
<div class="form-group mb-md-0">
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-textarea mb-md-0">
<textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="text-center">
<div id="success"></div>
<button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
</div>
</form>
</div>
</section>
<!-- Footer-->
<!-- Portfolio Modals-->
<!-- Modal 1-->
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Contact form JS-->
<script src="assets/mail/jqBootstrapValidation.js"></script>
<script src="assets/mail/contact_me.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>Kemudian tampilan yang sudah saya buat akan seperti ini, teman-teman bisa menyesuaikan dengan kebutuhan apa yang ingin ditambahkan
Isi dari profil
Isi dari portofolio
Gambar portofolio dibawahnya
Isi about
Isi dari contact
