PRACTICE CODE SNIPPETS

PRACTICE CODE SNIPPETS

Search This Blog

Thursday, August 25, 2022

Bootstrap Slider With Text Animation [ Source Code ]

8:24 PM Bootstrap Slider With Text Animation [ Source Code ] , 0 Comments

 <!DOCTYPE html>

<!--divinectorweb.com-->

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Bootstrap 5 Slider With Text Animation</title>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">

<link href="style.css" rel="stylesheet">

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

<div class="container">

<a class="navbar-brand" href="#">Creativo</a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">

<li class="nav-item">

<a class="nav-link" 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="#">Portfolio</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Services</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

</div>

</div>

</nav>

<div class="carousel slide" data-bs-ride="carousel" id="carouselExampleIndicators">

<div class="carousel-indicators">

<button aria-label="Slide 1" class="active" data-bs-slide-to="0" data-bs-target="#carouselExampleIndicators" type="button"></button> <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#carouselExampleIndicators" type="button"></button> <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#carouselExampleIndicators" type="button"></button>

</div>

<div class="carousel-inner">

<div class="carousel-item active">

<img alt="..." class="d-block w-100" src="https://i.postimg.cc/LsTXqTNZ/1.jpg">

<div class="carousel-caption">

<h5 class="animated bounceInRight" style="animation-delay: 1s">Web Design</h5>

<p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>

<p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>

</div>

</div>

<div class="carousel-item">

<img alt="..." class="d-block w-100" src="https://i.postimg.cc/C1rx7Kyh/2.jpg">

<div class="carousel-caption">

<h5 class="animated bounceInRight" style="animation-delay: 1s">Graphics Design</h5>

<p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>

<p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>

</div>

</div>

<div class="carousel-item">

<img alt="..." class="d-block w-100" src="https://i.postimg.cc/c4nL7ZFW/3.jpg">

<div class="carousel-caption">

<h5 class="animated bounceInRight" style="animation-delay: 1s">Photography</h5>

<p class="animated bounceInLeft d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>

<p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Learn More</a></p>

</div>

</div>

</div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselExampleIndicators" type="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselExampleIndicators" type="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">

</script> 

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js">

</script> 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js">

</script>

</body>

</html>

CSS STYLE


* {
font-family: 'Montserrat', sans-serif;
}
.bg-light {
background-color: transparent !important;
}
.carousel-item {
height: 100vh;
min-height: 300px;
}
.carousel-caption {
bottom: 220px;
}
.carousel-caption h5 {
font-size: 45px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 25px;
}
.carousel-caption p {
width: 60%;
margin: auto;
font-size: 18px;
line-height: 1.9;
}
.carousel-caption a {
text-transform: uppercase;
text-decoration: none;
background: darkorange;
padding: 10px 30px;
display: inline-block;
color: #000;
margin-top: 15px;
}
.navbar-nav a {
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
}
.navbar-light .navbar-brand {
color: #fff;
font-size: 25px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
color: #fff;
}
.navbar-light .navbar-nav .nav-link {
color: #fff;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #fff;
}
.w-100 {
height: 100vh;
}
.navbar-toggler {
padding: 1px 5px;
font-size: 18px;
line-height: 0.3;
background: #fff;
}
@media only screen and (max-width: 767px) {
.navbar-nav {
text-align: center;
background: rgba(0, 0, 0, 0.5);
}
.carousel-caption {
bottom: 165px;
}
.carousel-caption h5 {
font-size: 17px;
}
.carousel-caption a {
padding: 10px 15px;
font-size: 15px;
}
}

By at
Tags

No comments:

Post a Comment

Practice and let me know for nw code snippets

Subscribe to: Post Comments (Atom)