<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto&display=swap" rel="stylesheet"> <header> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <!--navigation bar starts--> <nav class="navbar navbar-expand-md bg-light navbar-light"> <!-- Brand --> <a class="navbar-brand" href="#"><img src="https://scontent.fdel3-1.fna.fbcdn.net/v/t1.0-9/59299122_2151996038201124_7867962104349720576_n.png?_nc_cat=106&_nc_sid=85a577&_nc_ohc=5Ufwd4l32C4AX9ZzX8u&_nc_ht=scontent.fdel3-1.fna&oh=2605e6535551b944a6b42fe41a2cd8ba&oe=5EB2FE51" alt="demo-logo" class="w-25"></a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Company Details</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Company Item Details</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> <!--navigation bar ends--> </div> </div> </div> </header> <section> <div class="container-fluid"> <div class="row row-class"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 co-xl-12"> <!--carousel starts--> <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://192841-578335-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/03/digital-marketing-course-raipur.jpg" alt="slider1" width="100%"> <div class="carousel-caption"> <h3>Heading 1 For First Slider</h3> <p class="lead">We had such a great time using this slider</p> </div> </div> <div class="carousel-item"> <img src="https://192841-578335-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/03/digital-marketing-course-raipur.jpg" alt="slider2" width="100%"> <div class="carousel-caption"> <h3>Heading 2 For Second Slider</h3> <p class="lead">We had such a great time using this slider</p> </div> </div> <div class="carousel-item"> <img src="https://192841-578335-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/03/digital-marketing-course-raipur.jpg" alt="slider3" width="100%"> <div class="carousel-caption"> <h3>Heading 3 For Third Slider</h3> <p class="lead">We had such a great time using this slider</p> </div> </div> </div> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <!--carousel ends--> </div> </div> </div> </section>

section { background-color: #232324!important;} .bg-light { background-color: #ffffff00!important;} header { position: absolute; z-index: 9; background-color: #ffffff00;} .carousel-caption h3 { font-size: 50px; color: #ffffff; font-family: 'Poppins', sans-serif;} .carousel-control-next, .carousel-control-prev { top: 15pc; width: 5%; background-color: #ffffff82; height: 15%;} .row-class { margin-right: -29px !important; margin-left: -29px !important;} .carousel-caption { top: 35%;} .lead { font-size: 2.4rem; text-shadow: 0px 1px 1px black; color: #ffffff;} .navbar-brand img { border-radius: 63px;} .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:hover { color: #ffffff; margin-top: -46px; margin-left: 20px; text-shadow: 0px 0px 2px black; font-size: 15px; font-family: 'Roboto', sans-serif; font-family: 'Poppins', sans-serif;} .carousel-indicators li { width: 7px; margin-top: -132px;} .carousel-indicators .active { opacity: 1; height: 20px;} @media (max-width: 480px) { header { position: relative;} .row-class { margin-right: -15px !important; margin-left: -15px !important;} .carousel-caption h3 { font-size: 17px;} .lead { font-size: 0.9rem;} .carousel-control-next, .carousel-control-prev { top: 4pc; width: 7%; background-color: #ffffff82; height: 19%;} .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:hover { margin-top: 3px; margin-left: 0px;} .navbar-brand img { float: right;} .navbar-light .navbar-toggler { margin-top: -74px;} .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:hover { color: #6c757d; text-shadow: 0px 0px 0px black;} }