Bootstrap Snippet Anirudha Bhowmik banner slider using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
 <section class="banner">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="left carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
         <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        </ol>
          
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="slider_image">
                <img src="images/graphics.jpg" alt="graphics_Design" style="width:100%;">
                    <div class="text_slider">
                        <h1>Best It Hubs</h1>
                        <p>Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry.</p>
                        <a href="index.html"><button type="submit" class="login"><span>Read More</span></button></a>
                    </div><!--bc-->
                    </div><!--ab-->
            </div><!--item-->
            <div class="item">
                 <div class="slider_image">
                <img src="images/webdesign.jpg" alt="graphics_Design" style="width:100%;">
                    <div class="text_slider">
                       <h1>What is Lorem Ipsum?</h1>
                         <p>Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry.</p>
                        <a href="index.html"><button type="submit" class="login"><span>Read More</span></button></a>
                     </div><!--bc-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*start banner*/
.slider_image img{
    width: 100%;
}
.slider_image{
    position: relative;
}
.text_slider{
    position: absolute;
    z-index: 1;
    top: 200px;
    left: 100px;
}
.text_slider h1{
    font-size: 40PX;
    font-weight: bolder;
    color: #fff;
}
.text_slider p{
    font-size: 18px;
    color: #fff;
    font-family: 'Lobster', cursive;
    margin-bottom: 20px;
}
.login{
     background-color: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 40px;
    border: none;
    position: relative;
    font-weight: bold;
}
.login:hover{
     background-color: rgba(255,143,0,0.3);
    color: rgba(0,0,0,0.8);
     -webkit-transition: background 1.5s; /* Safari */
    transition: background 1.5s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Anirudha Bhowmik banner slider"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik banner slider" Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik banner slider"
Bootstrap 4.1.1 Snippet by anirudhabhowmik