I can't find a way to reduce the width of the input window in the code in the Jumbotron section. I can not see/find any code that controls the width of the input window. The code below is the code from Bootstrap v5. How do I shorten the width of the input window, keeping it centered and its responsiveness?
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- Code for jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Code for FontAwesome -->
<link href="Desktop/FontAwesome/fontawesome-free-icons/css/all.css" rel="stylesheet">
<title>Project App Landing Page</title>
<style type="text/css">
.jumbotron{
background-image: url(blueSky.jpg);
min-height: 450px;
text-align: center;
}
#appSummary {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MyApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download The App</a>
</li>
</ul>
<form class="d-flex">
<div class="col-xs-4">
<input class="form-control" type="email" placeholder="Email" aria-label="Email">
<input class="form-control" type="password" placeholder="Password" aria-label="password">
<button class="btn btn-success" type="submit">Log in</button>
</div>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3" >My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form>
<div class="input-group mb-3">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
</div>
<div class="container">
<div class="row" id="appSummary">
<h1>Why This App Is Awesome</h1>
<p class="lead">Summary, once again, of your app's awesomeness</p>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-radiation-alt"></i>Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="far fa-heart"></i>Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-pump-medical"></i>Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
</div>
</body>
</html>
In Bootstrap the form-control class has 100% width. Remove the "form-control" class from this line:
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
Then you should be able to apply your own width to the input, either in the <style> block or with a different Bootstrap class.
I am using Bootstrap 4 in my project and I seem to be having a problem keeping a div with the class "sticky-top" just under a fixed navbar. I've tried using javascript to replace the css on scroll, but that doesnt seem to work. I know there is a way to set an id to the navbar and tell it not to scroll past that point, but I cant seem to Google well enough to find the solution. Any help is greatly appreciated.
Below is the code I am using.
<header class="header_area">
<nav class="navbar navbar-expand-lg menu_one menu_four">
<div class="container">
<a class="navbar-brand sticky_logo" href="#"><img src="images/upayify-logo-white.png" srcset="images/logo2x-2.png 2x" alt="logo"><img src="images/upayify-logo.png" srcset="images/logo2x.png 2x" alt=""></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="menu_toggle">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
<span class="hamburger-cross">
<span></span>
<span></span>
</span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav menu w_menu ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
How It Works
</a>
</li>
</ul>
</div>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-lock"></i> Login</a>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-user-plus"></i> Sign Up</a>
</div>
</nav>
<div class="row row-eq-height featured_item">
<div class="col-md-5 send-card order-md-last">
<div id="get-started" class="card sticky-top">
<div class="card-body">
<form>
<div class="row">
<div class="col-12 form-group">
<label for="exampleInputEmail1">I'm sending money from...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-us"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12 form-group mt-2 mb-0">
<label>I'm sending to...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-in"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12">
<hr>
</div>
<div class="col-12 mb-3 text-center conversion">
<span class="flag-icon flag-icon-us mr-2"></span>1 <span class="mr-2 ml-2">=</span> <span class="flag-icon flag-icon-in mr-2"></span>69.64
</div>
<div class="col-12 mt-2 index-form-btn">
<i class="fa fa-rocket"></i> Get Started Now!
</div>
<div class="col-12 text-center">
<p class="small">View Terms & Conditions for more details and fees</p>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7 d-flex order-md-first">
<div class="row">
</div>
</div>
</div>
.send-card{
top: -225px;
z-index: 4;
margin-bottom: -200px;}
The div you want under the navbar can get styled with top: ##px; (where ## is the pixel height of the navbar you want it to go under). And then also add either position: sticky; or position: fixed; depending whether you want the sticky behavior or the fixed behavior.
Here's a jsfiddle with the described sticky behaviour.
Hello i want to select the first item in a list by default.So when i open the view i want the item Plafond sécurité sociale under Général to be selected by default.
$("#général").val($("#général a:first").selectedIndex());
<div class="col-12">
<div class="container">
<div class="row">
<div class="col-12">
<a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px;">
<div class="col-sm">
<div class="row" data-toggle="collapse" data-target="#général" style="cursor:pointer">
<span class="user" style="font-weight:bold">Général</span>
</div>
</div>
<div class="col-sm">
<div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#général" style="float:right;margin-right:0px">
<i class="général_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
expand_more
</i>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="général" class="collapse">
<div class="container">
<div class="row">
<div class="col-12">
<a class="mdc-list-item" tauxPlafonds="PSS" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
Plafond sécurité sociale
</a>
<a class="mdc-list-item" tauxPlafonds="SMIC" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
Smic
</a>
<a class="mdc-list-item" tauxPlafonds="CSG" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
CSG CRDS
</a>
<a class="mdc-list-item" tauxPlafonds="AGM" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
Abattement gérant majoritaire
</a>
</div>
</div>
</div>
</div>
</div>
How can i add modify my function to have a good result.
Not really sure what you are asking for, but the select the item you want and add styling of your choice.
$('.mdc-list-item')[0]
$('.mdc-list-item:first-child()')[0]
$('.mdc-list-item:first')[0]
Not sure if this is what you are looking for.
$(document).ready(function() {
$("#item1").addClass("selected");
$(".list-item").click(function() {
$(".list-item").removeClass("selected");
$(this).addClass("selected");
});
});
a {
max-width: 100px;
display: block;
margin: 5px;
padding: 5px 10px;
text-align: center;
}
a,
a:hover {
color: inherit;
text-decoration: none;
}
a:hover {
background-color: #eee;
}
a.selected {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="item1" href="#" class="list-item">Item 1</a>
<a id="item2" href="#" class="list-item">Item 2</a>
<a id="item3" href="#" class="list-item">Item 3</a>
I have this template of code here and I want to make the panel in the center column full height of the visible page. Keyword 'visible' page. And then I want to place the button at the bottom of that panel, while the rest of the panels elements are at the top.
I tried setting the div to 'height: 100vh' but it makes the div higher then the visible page. I'm not sure why, maybe it has something to do with the navbar at the top?
The desired effect is that I will always see the button at the bottom of the page, regardless of the page size.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Messages
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p>My Profile
</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p>Interests
</p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
×
<p><strong>Ey!</strong>
</p>
People are looking at your profile. Find out who.
</div>
<p>Link
</p>
<p>Link
</p>
<p>Link
</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left" style="height:100vh">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong>
</p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
Yeah as you already said, the navbar is the "problem" here.
If you try to subtract the navbar height from the desired height of the panel it should work:
element.style {
height: calc(100vh - 100px);
}
I have been looking at ways on google to use multiple carousel on a single page and yet did not find any of the solutions working for me. Can anyone of you please help.
Here is the code:
HTML
<!-- Carousel 1 -->
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
<!-- Carousel 2 -->
<div id="demo1">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo-1" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
I have named the carousel as as owl-demo and owl-demo-1
Javascript
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){owl.trigger('owl.next');})
$(".prev").click(function(){owl.trigger('owl.prev');})
});
On JsFiddle
Updated code should look like this: https://jsfiddle.net/wtg76spd/1/
JavaScript:
$(document).ready(function() {
$("#owl-demo, #owl-demo-1").each(function() {
$(this).owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
// Custom Navigation Events
$(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
$(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
});
CSS (just first line changed):
//before
#owl-demo .item{
//after
#owl-demo .item, #owl-demo-1 .item{
//class "owl-demo" would do better in this case
1) Use .each() instead of copying code.
2) It'd be better to use class instead of #owl-demo and #owl-demo-1 - let's say you had not 2 but 100 sliders. Would you still give them IDs? However I didn't change it in example.
3) I used closest() and find() methods for next/prev buttons. This way I have 2 callback functions instead of 4.
$(document).ready(function(){
$('.course-carousel').owlCarousel({
items:3,
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
// responsive:{
// 0:{
// items:1
// },
// 600:{
// items:3
// },
// 1000:{
// items:5
// }
// }
})
$('.video-carousel').owlCarousel({
items:1,
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
// responsive:{
// 0:{
// items:1
// },
// 600:{
// items:3
// },
// 1000:{
// items:5
// }
// }
})
});
body {
color: #828bb2;
font-family: "Roboto",sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.625em;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family: "Playfair Display",serif;
color: #222;
line-height: 1.2em;
margin-bottom: 0;
margin-top: 0;
font-weight: 900;
}
.home-banner-area {
background: url('../images/home-banner.png') no-repeat;
background-size: cover;
background-position: center center;
max-height: 1200px;
}
.container{
max-width:1140px;
}
.default-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 9;
}
.col-link{
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
color: #fff;
padding: 20px;
}
.banner-lt-content {
font-family: 'Playfair Display', serif;
font-size: 48px;
line-height: 1em;
font-weight: 900;
}
.feature-area .container-fluid {
padding-left: 50px;
}
.feature-area{
margin-top:-110px;
}
.mt-20{
margin-top:20px;
}
.mb-40{
margin-bottom:40px;
}
.mb-20{
margin-bottom:20px;
}
.mt-30{
margin-top:30px;
}
.ml-20{
margin-left:20px;
}
.feature-item {
margin: 30px 0;
border-right: 1px solid rgba(130,139,178,.2);
padding-right: 20px;
}
.fa-book,.fa-trophy,.fa-desktop{
font-size:30px;
}
.feature-item h4 {
font-size: 18px;
margin-bottom: 20px;
}
.section-gap {
padding: 120px 0;
}
.section-title p {
margin-bottom: 0;
max-width: 620px;
}
.section-title h2 {
font-size: 42px;
color: #222;
margin-bottom: 20px;
}
.popular-course-area .container-fluid {
max-width: 1140px;
padding-left: 15px;
}
.owl-carousel .owl-item{
padding:10px !important;
}
.course-heading{
font-family: 'Playfair Display', serif;
width:100%;
color:#000;
text-align:justify;
margin:15px 0px;
font-size:21px;
}
.owl-carousel .owl-item:hover .course-heading{
color:#7c32ff;
}
.video-area{
background: url('../images/video-area-bg.webp') no-repeat;
background-position-x: center;
}
.section-gap-bottom{
padding-bottom:120px;
}
.section-title p{
margin-bottom:0;
max-width:620px;
}
.video-area .video-left {
padding-bottom: 151px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>College theme</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Eclipse</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link col-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">FACULTY</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">CONTACT US</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li> -->
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<section class="home-banner-area">
<div class="container">
<div class="row justify-content-center fullscreen align-items-center" style="height:820px;">
<div class="col-lg-5 col-md-8 home-banner-left">
<h1 class="text-white banner-lt-content">Take the first step to learn with us</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one
greater leap forward than the building and launch of the space
telescope known as the Hubble.</p>
</div>
<div class="offset-lg-2 col-lg-5 col-md-12 home-banner-right">
<img src="images/banner-image.webp" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<section class="feature-area">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-book"></i>
<div class="ml-20">
<h4>New Classes</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-trophy"></i>
<div class="ml-20">
<h4>Top Courses</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-desktop"></i>
<div class="ml-20">
<h4>Full E-Books</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="popular-course-area section-gap">
<div class="container-fluid">
<div class="row justify-content-center section-title">
<div class="col-lg-12">
<h2>Popular Courses<br/> Available Right Now</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="owl-carousel course-carousel owl-theme">
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="video-area section-gap-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="section-title text-white">
<h2 class="text-white">
Watch Our Teacher<br/>in Live Action
</h2>
<p>
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
</div>
<div class="offset-lg-1 col-md-6 video-left">
<div class="owl-carousel video-carousel owl-theme">
<div class="single-video">
<div class="video-part">
<img src="images/video-overlay-image.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
<div class="single-video">
<div class="video-part">
<img src="https://preview.colorlib.com/theme/eclipse/img/xvideo-img.jpg.pagespeed.ic.WgYvcPV4nx.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
<div class="single-video">
<div class="video-part">
<img src="https://preview.colorlib.com/theme/eclipse/img/xvideo-img.jpg.pagespeed.ic.WgYvcPV4nx.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script> -->
<script src="js/all.min.js"></script>
<script src="js/fontawesome.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/main.js"></script>
</body>
</html>