Detail Page Basic
Detail page basic may consist of any relevant information related to a certain product or service.
Example
Page heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div style="background-color: white" class="overflow-auto">
<!--Main Nav Component-->
<nav aria-label="navbar" 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 aria-label="social-media" 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 aria-label="social-media" 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>
<!--Breadcrumb component-->
<section class="m-8">
<nav class="cgds" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="bi bi-house"></i>Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</section>
<!--Content section-->
<section class="m-8">
<div class="row">
<div class="col">
<h2>Page heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="row">
<div class="col">
<h4>Overview</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</p>
</div>
</div>
</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: 200px" 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>
