Membangun sebuah company profile web yang mewah dan profesional adalah langkah penting dalam memperkuat citra perusahaan di era digital. Dengan kemajuan teknologi, website telah menjadi salah satu alat utama dalam berkomunikasi dengan klien potensial dan mitra bisnis. Salah satu cara terbaik untuk membuat company profile web yang menarik dan mudah diakses adalah dengan menggunakan Bootstrap. Framework ini tidak hanya memudahkan dalam merancang antarmuka yang responsif, tetapi juga menawarkan beragam komponen dan template yang dapat disesuaikan dengan kebutuhan perusahaan. Dalam artikel ini, kita akan membahas bagaimana membangun company profile web yang mewah dan profesional menggunakan Bootstrap, mulai dari pemilihan template hingga optimalisasi tampilan untuk berbagai perangkat.
Source Code
Buat sebuah folder dengan nama landing_page, kemudian buat sebuah file baru
dengan nama index.html. Copy script di bawah ini dan paste.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Profile</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- navbar section -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Company Profile</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item me-4">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item me-4">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item me-4">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item me-4">
<a class="nav-link" href="#post">News & Blog</a>
</li>
<li class="nav-item me-4">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item me-4">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- hero section -->
<section id="home" style="
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('https://cdn.pixabay.com/photo/2024/08/06/19/07/new-york-city-8950081_1280.jpg')
center;
background-size: cover;
color: #fff;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;">
<div class="container">
<h1>Welcome to Our Company</h1>
<p>Your success is our priority</p>
<a href="" class="btn btn-primary">Get in Touch</a>
</div>
</section>
<!-- service section -->
<section id="Services" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">Our Services</h2>
<p class="text-center mx-5 px-5 mb-5">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim temporibus numquam praesentium, dolor
veritatis asperiores repudiandae? Voluptatem quas alias quos quae aspernatur tempora, dignissimos sint
perspiciatis maxime excepturi similique ipsa.
</p>
<div class="row">
<div class="col-lg-3">
<div style="border-radius: 20px;" class="card text-center shadow mb-4">
<div class="card-body">
<p style="font-size: 80px;">✨</p>
<h5 class="card-title">Service 1</h5>
<p class="card-text">Description of service 1</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div style="border-radius: 20px;" class="card text-center shadow mb-4">
<div class="card-body">
<p style="font-size: 80px;">💰</p>
<h5 class="card-title">Service 2</h5>
<p class="card-text">Description of service 2</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div style="border-radius: 20px;" class="card text-center shadow mb-4">
<div class="card-body">
<p style="font-size: 80px;">🔐</p>
<h5 class="card-title">Service 3</h5>
<p class="card-text">Description of service 3</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div style="border-radius: 20px;" class="card text-center shadow mb-4">
<div class="card-body">
<p style="font-size: 80px;">⌚</p>
<h5 class="card-title">Service 4</h5>
<p class="card-text">Description of service 4</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- gallery section -->
<section id="gallery" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Our Gallery</h2>
<p class="text-center mx-5 px-5 mb-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, minima ipsa. Blanditiis quae
possimus ab recusandae a nisi sed consequuntur minus nulla natus nesciunt reprehenderit maxime quibusdam
ullam, accusantium nostrum.
</p>
<div class="row">
<div class="col-lg-4 mb-4">
<img style="width: 100%; aspect-ratio: 1.5/1; object-fit: cover;"
src="https://cdn.pixabay.com/photo/2019/08/27/01/20/bridge-4433114_1280.jpg" alt="">
</div>
<div class="col-lg-4 mb-4">
<img style="width: 100%; aspect-ratio: 1.5/1; object-fit: cover;"
src="https://cdn.pixabay.com/photo/2022/03/14/20/54/city-7069010_1280.jpg" alt="">
</div>
<div class="col-lg-4 mb-4">
<img style="width: 100%; aspect-ratio: 1.5/1; object-fit: cover;"
src="https://cdn.pixabay.com/photo/2019/09/13/15/12/road-4474168_1280.jpg" alt="">
</div>
<div class="col-lg-4 mb-4">
<img style="width: 100%; aspect-ratio: 1.5/1; object-fit: cover;"
src="https://cdn.pixabay.com/photo/2016/03/03/09/58/al-aqsa-1233827_1280.jpg" alt="">
</div>
<div class="col-lg-4 mb-4">
<img style="width: 100%; aspect-ratio: 1.5/1; object-fit: cover;"
src="https://cdn.pixabay.com/photo/2016/11/02/10/04/brooklyn-bridge-1791001_1280.jpg" alt="">
</div>
<div class="col-lg-4 mb-4">
<img style="width: 100%; aspect-ratio: 1.5/1; object-fit: cover;"
src="https://cdn.pixabay.com/photo/2017/04/26/18/28/new-york-city-2263343_1280.jpg" alt="">
</div>
</div>
</div>
</section>
<!-- post section -->
<section id="post" class="py-5">
<div class="container">
<h2 class="text-center mb-4">News & Blogs</h2>
<p class="text-center mx-5 px-5 mb-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eos ipsam maxime unde doloribus placeat
pariatur eum, fugiat a, sequi ad quis nesciunt explicabo recusandae, officia ab. Repudiandae,
accusantium voluptatibus.
</p>
<div class="row">
<div class="col-lg-3">
<div class="card shadow">
<img src="https://cdn.pixabay.com/photo/2020/03/19/16/49/genoa-4948029_1280.jpg"
style="width: 100%; aspect-ratio: 1/1; object-fit: cover;" alt="">
<div class="card-body p-3">
<h3>Title 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptatum recusandae
architecto.
</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card shadow">
<img src="https://cdn.pixabay.com/photo/2023/04/14/08/35/nyc-7924482_1280.jpg"
style="width: 100%; aspect-ratio: 1/1; object-fit: cover;" alt="">
<div class="card-body p-3">
<h3>Title 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptatum recusandae
architecto.
</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card shadow">
<img src="https://cdn.pixabay.com/photo/2019/10/15/21/35/salt-lake-city-4552986_1280.jpg"
style="width: 100%; aspect-ratio: 1/1; object-fit: cover;" alt="">
<div class="card-body p-3">
<h3>Title 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptatum recusandae
architecto.
</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card shadow">
<img src="https://cdn.pixabay.com/photo/2020/04/30/07/42/kansas-city-5111832_1280.jpg"
style="width: 100%; aspect-ratio: 1/1; object-fit: cover;" alt="">
<div class="card-body p-3">
<h3>Title 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptatum recusandae
architecto.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- team section -->
<section id="team" class="bg-info text-white py-5">
<div class="container">
<h2 class="text-center mb-4">Our Team</h2>
<p class="text-center mx-5 px-5 mb-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo, officiis facilis non, sit nihil
corporis sequi ab modi aliquam praesentium dicta temporibus adipisci, fuga necessitatibus exercitationem
beatae consequatur laudantium.
</p>
<div class="row">
<div class="col-md-3 text-center team-member">
<img src="https://cdn.pixabay.com/photo/2020/02/04/13/03/grey-4818112_1280.jpg"
style="border-radius: 50%; width: 50%; height: 50%; object-fit: cover;"
class="shadow img-fluid mb-3">
<h5>Cat</h5>
<p>Chef Executive Officer</p>
</div>
<div class="col-md-3 text-center">
<img src="https://cdn.pixabay.com/photo/2023/10/01/12/27/border-collie-8287329_1280.jpg"
style="border-radius: 50%; width: 50%; height: 50%; object-fit: cover;"
class="shadow img-fluid mb-3">
<h5>Dog</h5>
<p>Chef Technology Officer</p>
</div>
<div class="col-md-3 text-center">
<img src="https://cdn.pixabay.com/photo/2023/08/10/20/10/shark-8182315_1280.jpg"
style="border-radius: 50%; width: 50%; height: 50%; object-fit: cover;"
class="shadow img-fluid mb-3">
<h5>Shark</h5>
<p>Chef Operation Officer</p>
</div>
<div class="col-md-3 text-center">
<img src="https://cdn.pixabay.com/photo/2016/06/12/10/37/lion-1451770_1280.jpg"
style="border-radius: 50%; width: 50%; height: 50%; object-fit: cover;"
class="shadow img-fluid mb-3">
<h5>Lion</h5>
<p>Chef Financial Officer</p>
</div>
</div>
</div>
</section>
<!-- contact section -->
<section id="contact" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">Contact Us</h2>
<p class="text-center mx-5 px-5 mb-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim nisi omnis veniam repudiandae laborum
inventore accusantium error vitae modi quidem natus eaque pariatur necessitatibus, dolorum qui id hic?
Maxime, tempore?
</p>
<div class="row">
<div class="col-lg-6">
<form action="">
<div class="form-group mb-4">
<label for="">Name</label>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group mb-4">
<label for="">Email</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group mb-4">
<label for="">Message</label>
<textarea class="form-control" name="message" id="message" rows="5"
placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
<div class="col-lg-6">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d32203.977212604812!2d104.72977851734552!3d-2.957213546870148!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e3b75e8fc27a3e3%3A0x3039d80b220d0c0!2sPalembang%2C%20Kota%20Palembang%2C%20Sumatera%20Selatan!5e0!3m2!1sid!2sid!4v1723906321133!5m2!1sid!2sid"
width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="bg-dark text-light text-center py-3">
<p>© 2024 Company Nam. All right reserved.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>Final Result
|
| Hero Section |
|
| Gallery Section |
|
| Post Section |
Penutup
Membangun company profile web yang mewah dan profesional menggunakan Bootstrap bukan hanya tentang menciptakan tampilan yang estetis, tetapi juga memastikan fungsionalitas dan kenyamanan pengguna. Dengan desain yang responsif dan fitur yang kaya, Bootstrap memungkinkan perusahaan untuk menampilkan informasi secara efektif, memperkuat branding, dan meningkatkan kepercayaan dari audiens. Setelah menerapkan langkah-langkah yang telah dijelaskan, perusahaan Anda akan memiliki sebuah website yang tidak hanya menarik secara visual tetapi juga berfungsi sebagai alat pemasaran yang efektif. Dengan demikian, perusahaan Anda dapat meninggalkan kesan yang mendalam pada setiap pengunjung, memperluas jangkauan bisnis, dan membuka peluang baru di dunia digital.
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi