Skip to content

Instantly share code, notes, and snippets.

@jashimcse

jashimcse/css

Last active June 1, 2022 14:30
Show Gist options
  • Save jashimcse/2b7ac78da139b5f77cccb22ba88076df to your computer and use it in GitHub Desktop.
Save jashimcse/2b7ac78da139b5f77cccb22ba88076df to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 5 index.html
Raw
css
*{
padding: 0;
margin: 0;
}
/* ==========================================================================
#Desktop
========================================================================== */
/* ==========================================================================
#header_top
========================================================================== */
.header_top{
background-color:#9E5BBA;
border-bottom: solid 1px red;
color:white;
line-height: 10px;
}
.header_left{
float: left;
font-size: 10;
text-decoration: none;
text-transform: capitalize;
padding-top:5px;
line-height: 30px;
}
.header-right{
padding-top:5px;
float: right;
font-size: 10;
text-decoration: none;
text-transform: capitalize;
line-height: 30px;
display: inline-block;
}
.header-right p{
display: inline-block;
border-right: solid 1px #fff;
padding-right: 10px;
margin-right: 5px;
}
.header-right a{
text-decoration: none;
color: #fff;
text-transform: capitalize;
}
/* ==========================================================================
#logo
========================================================================== */
.logo_right{
justify-content: end;
}
.web_logo{
padding: 11px 1px;
}
.logo-1{
padding: 19px 10px;
margin: 14px;
border-right: solid 1px #d7d7c5;
}
.custom_form_control{
margin: 0px 7px;
}
.custom_btn{
border: 1px solid #ced4da;
}
.custom_import{
padding: 21px 1px;
}
.custom_nav a{
border-right: solid 1px #c8c8c8;
}
/* banner start*/
.home_banner img{
max-width: 100%;
height: auto;
}
.home_sidber_banner a img{
width: 100%;
height: auto;
}
.home_sidber_banner p{
color: #9E5BBA;
padding: 10px;
}
.marquee_d marquee{
padding: 10px;
background-color: rgb(150, 144, 136);
}
.Custom_tab{
padding-top: 10px;
margin-top: 20px;
}
.information_section{
padding: 10px;
}
.information_section h1{
color: #9E5BBA;
}
.info_u li{
border-bottom: solid 1px #9E5BBA;
}
/* footer start*/
.footer_section{
background-color: #c8c8c8;
}
.footer{
background-image: url(assets/images/footer/download.png);
}
.information_section p{
text-align: center !important;
margin: 0 auto;
}
.custom_footer{
background-color:#c8c8c8;
}
.footer_img{
width: 1018px;
height: auto;
}
/* ==========================================================================
#Phones
========================================================================== */
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--start header_top-->
<div class="">
<div class="container header_top">
<div class="row">
<div class="col-md-6">
<div class="header_left">
<p>বাংলাদেশ জাতীয় তথ্য বাতায়ন
</p>
</div>
</div>
<div class="col-md-6 text-end">
<div class="header-right">
<P>৩১ চৈত্র, ১৪২৯</P>
<a href="https://risda.org.bd/">English</a>
</div>
</div>
</div>
</div>
</div>
<!--end header_top-->
<!--start logo_main_header-->
<div class="logo_main_header">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="web_logo">
<img src="assets/images/logo.png" alt="logo">
</div>
</div>
<div class="col-md-5 ">
<div class="input-group mb-3 custom_import">
<input type="text" class="form-control custom_form_control" placeholder="খুঁজুন" aria-label="খুঁজুন" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary custom_btn" type="button" id="button-addon2">অনুসন্ধান </button>
</div>
</div>
<div class="col-md-2 logo_right d-flex">
<div class="logo-1">
<a href=""> <img src="assets/images/a2i-logo-footer.png"></a>
</div>
<div class="logo-2">
<p>সাথে থাকুন</p>
<a><img src="assets/images/twitter-blue-icon.png"></a>
<a><img src="assets/images/facebook-icon.png"></a>
<a><img src="assets/images/youtube-icon.png"></a>
<a><img src="assets/images/gplus-icon.png"></a>
</div>
</div>
</div>
</div>
</div>
<!--start nav-->
<section">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav custom_nav">
<a class="nav-link active" aria-current="page" href="#">হোম</a>
<a class="nav-link" href="#">বাংলাদেশ</a>
<a class="nav-link" href="#"> বাংলাদেশ সম্পর্কিত</a>
<a class="nav-link" href="#">ই-সেবাসমূহ </a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#"> বাংলাদেশ সম্পর্কিত</a>
<a class="nav-link" href="#">ই-সেবাসমূহ </a>
<a class="nav-link" href="#"> বৈদেশিক বিনিয়োগ</a>
<a class="nav-link" href="#">সেবাকুঞ্জ</a>
<a class="nav-link" href="#">বৈদেশিক বিনিয়োগ</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</section>
<!-- Body part start-->
<section>
<div class="container">
<div class="row">
<!-- banner start-->
<div class="col-md-8">
<div class="home_banner">
<a><img src="assets/images/National-Portal-Card-PM.jpg"></a>
</div>
<div clss="marquee_d">
<marquee direction="left" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()">
নো মাস্ক নো সার্ভিস। করোনাভাইরাসের বিস্তার রোধে এখনই ডাউনলোড করুন Corona Tracer BD অ্যাপ। ডাউনলোড করতে ক্লিক করুন <a href="https://bit.ly/coronatracerbd" target="_blank" style="color: blue;">https://bit.ly/coronatracerbd</a>। নিজে সুরক্ষিত থাকুন অন্যকেও নিরাপদ রাখুন। দেশের প্রথম ক্রাউডফান্ডিং প্ল্যাটফর্ম 'একদেশ'- এর মাধ্যমে আর্থিক অনুদান পৌঁছে দিন নির্বাচিত সরকারি-বেসরকারি প্রতিষ্ঠানসমূহে। ভিজিট করুন <a href="//ekdesh.ekpay.gov.bd" target="_blank" style="color: blue;">ekdesh.ekpay.gov.bd</a> অথবা <a href="//play.google.com/store/apps/details?id=com.synesis.donationapp" target="_blank" style="color: blue;">“Ek Desh”</a> অ্যাপ ডাউনলোড করুন। করোনার লক্ষণ দেখা দিলে গোপন না করে ডাক্তারের পরামর্শের জন্য ফ্রি কল করুন ৩৩৩ ও ১৬২৬৩ নম্বরে। করোনাভাইরাস প্রতিরোধে নিয়ম মেনে মাস্ক ব্যবহার করুন। আতঙ্কিত না হয়ে বরং সচেতন থাকুন। ভিজিট করুন <a href="//corona.gov.bd" target="_blank" style="color: blue;">corona.gov.bd</a>
</marquee>
<marquee direction="left" scrollamount="3" onmouseover="this.stop()" onmouseout="this.start()">
সরকারি সেবা এখন হাতের মুঠোয়। সেবা পেতে ভিজিট করুন <a href="https://www.mygov.bd/"> https://www.mygov.bd/</a>
অথবা গুগল প্লে স্টোর থেকে <a href="https://play.google.com/store/apps/details?id=com.orangebd.amarshorkar" target="_blank" style="color: blue;">‘myGov-আমার সরকার অ্যাপ।</a>ডাউনলোড করুন।</marquee>
</div>
<div class="slider">
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="1000">
<img src="assets/images/slider/Banner-1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="assets/images/slider/Banner-2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="1000">
<img src="assets/images/slider/Banner-2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/slider/banner3.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="assets/images/slider/Banner-2.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<!-- tab start-->
<div class="Custom_tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">জনপ্রিয় সেবা</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">নতুন সেবা</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">নতুন সেবা</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div class="row">
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/agriculture.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/apply_education.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/birth_certificate.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/business.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/govt_admision.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/online_application.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/agriculture.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/apply_education.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/birth_certificate.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/business.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/govt_admision.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
<div class="col-md-2">
<div class="tab_content">
<img src="assets/images/tabs/online_application.png">
<a href="https://bangladesh.gov.bd/site/view/eservices"><p>অর্থ ও বাণিজ্য</p></a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<div class="tab_content d-block">
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0"><div class="tab_content">
</div></div>
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0"><div class="tab_content">
</div></div>
</div>
</div>
<!-- information_section start -->
<div class="information_section">
<h1>উদ্যোগ</h1>
<ul class="info_u">
<li>বাংলাদেশ সরকারের সপ্তম পঞ্চবার্ষিক পরিকল্পনা (২০১৬-২০২০) (১৩-০৬-২০১৬)</li>
<li>বাংলাদেশ সরকারের সপ্তম পঞ্চবার্ষিক পরিকল্পনা (২০১৬-২০২০) (১৩-০৬-২০১৬)</li>
<li>বাংলাদেশ সরকারের সপ্তম পঞ্চবার্ষিক পরিকল্পনা (২০১৬-২০২০) (১৩-০৬-২০১৬)</li>
<li>বাংলাদেশ সরকারের সপ্তম পঞ্চবার্ষিক পরিকল্পনা (২০১৬-২০২০) (১৩-০৬-২০১৬)</li>
<li>বাংলাদেশ সরকারের সপ্তম পঞ্চবার্ষিক পরিকল্পনা (২০১৬-২০২০) (১৩-০৬-২০১৬)</li>
</ul>
<botton> <p style="text-align: center;">More</p></botton>
</div>
<!-- information_section end -->
<!-- other Banner start-->
</div>
<!-- other Banner end-->
<!-- sidebar start-->
<div class="col-md-4">
<div class="home_sidber_banner">
<a><img src="assets/images/sidebar/bangladesh-portal--batton-bangla.png"</a>
<a><img src="assets/images/sidebar/bangladesh-portal--batton-bangla.png"</a>
<a><img src="assets/images/sidebar/mygov_bn.jpg"</a>
</div>
<div class="home_sidber_banner">
<p>সকল বাতায়ন</p>
<select class="form-select" aria-label="Default select example">
<option selected>ওয়েবসাইট বাছাই করুন</option>
<option value="1">মন্ত্রণালয়</option>
<option value="2">মন্ত্রণালয়</option>
<option value="3">মন্ত্রণালয়</option>
</select>
<p><iframe frameborder="0" height="200" src="https://www.youtube.com/embed/4Om3kZJL-qU" width="100%"></iframe></p>
<a><img src="assets/images/sidebar/mask-bd-portal (1).jpg"</a>
</div>
</div>
<!-- sidebar end-->
</div>
<!-- footer start-->
<div class="row">
<div class="custom_footer">
<div class="footer_img">
<img src="assets/images/footer/download.png">
</div>
</div>
<!-- nav start-->
<div class="col-md-8">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav custom_nav">
<a class="nav-link active" aria-current="page" href="#">হোম</a>
<a class="nav-link" href="#">বাংলাদেশ</a>
<a class="nav-link" href="#"> বৈদেশিক বিনিয়োগ</a>
<a class="nav-link" href="#">সেবাকুঞ্জ</a>
<a class="nav-link" href="#">বৈদেশিক বিনিয়োগ</a>
</div>
</div>
</div>
</nav>
</div>
<div class="col-md-4">
<img src="assets/images/footer/np-logo-set.png"
</div>
<!-- nav end-->
</div>
</div>
</section>
</section> -->
<!-- Body part end-->
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment