Landing Page
A landing page is a standalone page distinct from any other pages including homepage, which serves a specific purpose or action.
Example
Place your content here
<div style="background-color: white">
<!-- Main Nav component -->
<nav class="cgds navbar flex-column navbar-expand-lg">
<header class="container d-flex flex-nowrap p-0">
<div
class="w-100 d-flex align-items-center justify-content-between px-4 px-md-5 py-4 py-sm-6 py-md-3 py-lg-4">
<a class="navbar-brand d-flex justify-content-start" href="#">
<img src="/assets/uncompressed_images/rachana.svg" alt="Home" height="80">
</a>
</div>
<div class="d-flex align-items-center me-5">
<nav class="social d-flex me-3">
<ul id="menu-social-menu" class="d-flex">
<li class="nav-icon-social">
<a class="nav-link" aria-current="page" href="">
<i class="bi bi-github" target="_blank" style="line-height: 1;"></i>
</a>
</li>
</ul>
</nav>
<div class="d-flex flag-icon text-center me-2">
<a role="button" class="cgds btn" href="">
<img src="/assets/uncompressed_images/cambodia-flag-icon.svg" width="32px" height="24px" alt="Home">
</a>
</div>
<nav class="social d-lg-block me-1">
<ul id="menu-social-menu" class="d-flex">
<li class="nav-icon-social">
<span class="cgds-line"></span>
</li>
</ul>
</nav>
<ul class="navbar-nav">
<li class="nav-item align-self-center">
<a class="cgds btn-gt" aria-current="page" href="">Sign In</a>
</li>
</ul>
<div class="mobile-toggle d-flex align-items-center d-lg-none">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavExample1" aria-controls="navbarNavExample1" aria-expanded="false"
aria-label="Toggle navigation">
<i class="bi bi-list"></i>
</button>
</div>
</div>
</header>
<div class="px-4 px-md-5">
<div class="collapse navbar-collapse px-4 px-md-5" id="navbarNavExample1">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="">Link</a>
</li>
<li class="nav-item cgds dropdown">
<a class="nav-link cgds dropdown-toggle" href="" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown <i class="bi bi-chevron-down"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="">Action</a></li>
<li><a class="dropdown-item" href="">Another Action</a></li>
<li><a class="dropdown-item" href="">Something</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="">Seperated Link</a></li>
</ul>
</li>
<li class="nav-item cgds dropdown has-megamenu">
<a class="nav-link cgds dropdown-toggle" href="#" id="megamenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Megamenu<i class="bi bi-chevron-down"></i>
</a>
<div class="dropdown-menu megamenu p-3" aria-labelledby="megamenu">
<div class="d-flex justify-content-start">
<div>
<b>Co-create innovative digital solutions with the Government</b>
<p>Discover events, blogs, open-source technologies and other collaboration opportunities</p>
</div>
<div>
<a class="dropdown-item" href="">Features</a>
<a class="dropdown-item" href="">Features</a>
<a class="dropdown-item" href="">Features</a>
</div>
<div>
<a class="dropdown-item" href="#">Features</a>
<a class="dropdown-item" href="#">Features</a>
<a class="dropdown-item" href="#">Features</a>
</div>
<div>
<a class="dropdown-item" href="#">Features</a>
<a class="dropdown-item" href="#">Features</a>
<a class="dropdown-item" href="#">Features</a>
</div>
</div>
</div>
</li>
</ul>
<div class="search-bar d-flex align-items-center ms-auto">
<form class="w-100" action="">
<div class="search-wrapper d-flex ps-2">
<input type="text">
<button>
<i class="bi bi-search" target="_blank"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</nav>
<!-- Content section -->
<section class="m-8">
<h4>Place your content here</h4>
</section>
<!-- Footer component -->
<footer class="cgds footer">
<section class="footer-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="widget flex-column">
<div class="logo">
<img src="/assets/uncompressed_images/rachana.svg" style="width: 170px"
alt="dgc logo">
</div>
<div class="social-icon">
<ul>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Facebook.svg" alt="facebook-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/YouTube.svg" alt="youtube-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Telegram.svg" alt="telegram-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Tiktok.svg" alt="tiktok-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Linkin.svg" alt="linkin-icon">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
Column 1
</div>
<ul class="links">
<li><a href="">About Us</a></li>
<li><a href="">This is a super long link</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
Column 2
</div>
<ul class="links">
<li><a href="">About Us</a></li>
<li><a href="">This is a super long link</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
Column 3
</div>
<ul class="links">
<li><a href="">About Us</a></li>
<li><a href="">This is a super long link</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="footer-bottom">
<div class="container-fluid">
<div class="row footer-copyrights">
<div class="col">
<div class="d-flex justify-content-lg-start text-start">
DGC © 2023 ~ All rights reserved. Digital Government Committee.<br>
</div>
</div>
<div class="col">
<dev class="d-flex justify-content-lg-end text-end">
<ul>
<li><a href="" target="_blank"
rel="noopener noreferrer">Report Vulnerability</a></li>
<li><a href="">Privacy Statement</a></li>
<li><a href="">Terms of use</a></li>
</ul>
</dev>
</div>
</div>
</div>
</section>
</footer>
</div>
