Página com Slider e Footer responsivo com Bootstrap 4
Bom dia, segue um simples exemplo de Slider com Bootstrap 4, espero que ajude.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Bootstrap Página de exemplo com Slider e Responsiva - By Galaxyz Softwares!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name=description content="Galaxyz do Brasil Softwares e Técnologia, porque sua experiência tem que ser única.">
<meta name=keywords content="Industria 4.0,Software,Galaxyz do Brasil,Digital Inovation, Marketing Inteligente, Group, Softwares, Aplicativos, Android, Ios, Flutter, Angular, Java, PHP, C#, Laravel, Hibernate, Swift, Javascript, Nodejs, VueJs, Spring Boot, softwares em mandaguari, aplicativos em mandaguari, aplicativos em mandaguari e região,aplicativos em maringá, fábrica de aplicativos em maringá, apps em maringá, lojas virtuais em maringá, e-commerce em maringá, empresa de tecnologia em maringá, criação de app maringá, desenvolvimento de aplicativos em maringá, criação de sites em maringá, desenvolvedor de loja virtual, empresa de tecnologia em maringá, desenvolvimento de e-ecommerce em maringá, criação de e-commerce, consultoria de e-commerce, criar sistema online, design e tecnologia em maringá, criar site em maringá, criação de software em maringa, integração de software, API de integração entre sistemas, APÌ de integração entre sistemas maringá e região, APÌ para Ecommerce, API integração Ideris e seu ERP, API Integração Bling e seu ERP, API Integração Tiny e seu ERP, API Integração Olist e seu ERP, API Integração Mercado Livre e seu ERP, API Integração Shopee e seu ERP, APÌ para Ecommerce e seu sistema, API integração Ideris e seu Sistema, API Integração Bling e seu Sistema, API Integração Tiny e seu Sistema, API Integração Olist e seu Sistema, API Integração Mercado Livre e seu Sistema, API Integração Shopee e seu Sistema">
<meta name=author content="Kleber Gracia Soares - Galaxyz do Brasil">
<meta name=viewport content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv=Content-Type content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Slider */
.carousel-item {
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
h1, h2, h3, h4, h5, h6 {
}
section {
padding: 60px 0;
min-height: 100vh;
}
a, a:hover, a:focus, a:active {
text-decoration: none;
outline: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.main-footer{
position: relative;
background: #1e2129;
}
.footer-content{
position: relative;
padding: 85px 0px 80px 0px;
}
.footer-content:before{
position: absolute;
content: '';
background: url(https://i.ibb.co/jyRLrBZ/world-map.png);
width: 744px;
height: 365px;
top: 50px;
right: 0px;
background-size: cover;
background-repeat: no-repeat;
animation-name: float-bob;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: float-bob;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: float-bob;
-moz-animation-duration: 30s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob;
-ms-animation-duration: 30s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob;
-o-animation-duration: 30s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.footer-content .logo-widget{
position: relative;
margin-top: -5px;
}
.footer-content .logo-widget .footer-social li{
position: relative;
display: inline-block;
margin-right: 9px;
}
.footer-content .logo-widget .footer-social li:last-child{
margin-right: 0px;
}
.footer-content .logo-widget .footer-social li a{
position: relative;
display: inline-block;
width: 42px;
height: 42px;
line-height: 42px;
background: #2e3138;
color: #9ea0a9;
text-align: center;
border-radius: 50%;
}
.footer-content .logo-widget .footer-social li a:hover{
color: #ffffff;
background: #ff5e14;
}
.footer-content .logo-widget .logo-box{
margin-bottom: 25px;
}
.footer-content .logo-widget .text p{
color: #9ea0a9;
margin-bottom: 32px;
}
.footer-content .footer-title{
position: relative;
font-size: 24px;
line-height: 35px;
font-family: 'Playfair Display', serif;
color: #ffffff;
font-weight: 700;
margin-bottom: 27px;
}
.footer-content .service-widget .list li{
display: block;
margin-bottom: 12px;
}
.footer-content .service-widget .list li a{
position: relative;
display: inline-block;
color: #9ea0a9;
}
.footer-content .service-widget .list li a:hover{
color: #ff5e14;
}
.footer-content .contact-widget p{
color: #9ea0a9;
margin-bottom: 15px;
}
.footer-content .contact-widget{
margin-left: 90px;
}
.footer-content .contact-widget .footer-title{
margin-bottom: 29px;
}
/** footer-bottom **/
.footer-bottom{
position: relative;
background: #13151a;
padding: 25px 0px 22px 0px;
}
.footer-bottom .copyright,
.footer-bottom .copyright a,
.footer-bottom .footer-nav li a{
position: relative;
color: #9ea0a9;
}
.footer-bottom .copyright a:hover,
.footer-bottom .footer-nav li a:hover{
color: #ff5e14;
}
.footer-bottom .footer-nav{
position: relative;
text-align: right;
}
.footer-bottom .footer-nav li{
position: relative;
display: inline-block;
margin-left: 29px;
}
.footer-bottom .footer-nav li:first-child{
margin-left: 0px;
}
.footer-bottom .footer-nav li:before{
position: absolute;
content: '';
background: #9ea0a9;
width: 1px;
height: 14px;
top: 7px;
left: -18px;
}
.footer-bottom .footer-nav li:first-child:before{
display: none;
}
.logo-box img {
max-width: 220px;
}
</style>
</head>
<body>
<!-- Slider -->
<section class="slider-section" style="padding: 0px 0;">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol> <!-- End of Indicators -->
<!-- Carousel Content -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('https://cdn.pixabay.com/photo/2020/04/03/15/27/flower-meadow-4999277_960_720.jpg');">
<div class="carousel-caption d-none d-md-block">
<h3>Amazon Forest</h3>
<p>Cool description for Amazon Forest.</p>
</div>
</div> <!-- End of Carousel Item -->
<div class="carousel-item" style="background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg');">
<div class="carousel-caption d-none d-md-block">
<h3>Bridge Picture</h3>
<p>Awesome description for bridge.</p>
</div>
</div> <!-- End of Carousel Item -->
<div class="carousel-item" style="background-image: url('https://cdn.pixabay.com/photo/2015/04/23/21/59/tree-736875_960_720.jpg');">
<div class="carousel-caption d-none d-md-block">
<h3>Flowers & Grass</h3>
<p>Beauty of Flowers & Grass.</p>
</div>
</div> <!-- End of Carousel Item -->
</div> <!-- End of Carousel Content -->
<!-- Previous & Next -->
<a href="#carousel" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a href="#carousel" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div> <!-- End of Carousel -->
</section> <!-- End of Slider -->
<div class="jumbotron text-center">
<h1>Estrutura simples página utilizando Bootstrap 4</h1>
<p>Página totalmente responsiva, top não!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
<footer class="main-footer">
<div class="container">
<div class="footer-content">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 footer-column">
<div class="logo-widget footer-widget">
<figure class="logo-box"><a href="#"><img src="https://galaxyz.com.br/PROMETHEUS/img/cropped-galaxyzdobrasillogo-blog.png" alt=""></a></figure>
<div class="text">
<p>Lorem ipsum dolor amet consectetur adi pisicing elit sed eiusm tempor incididunt ut labore dolore magna aliqua enim ad minim veniam quis.nostrud exercita.laboris nisi ut aliquip ea commodo conse quatuis aute irure.</p>
</div>
<ul class="footer-social">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 offset-lg-2 footer-column">
<div class="service-widget footer-widget">
<div class="footer-title">Services</div>
<ul class="list">
<li><a href="#">Water Surve</a></li>
<li><a href="#">Education for all</a></li>
<li><a href="#">Food Serving</a></li>
<li><a href="#">Animal Saves</a></li>
<li><a href="#">Help Orphan</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 footer-widget">
<div class="contact-widget footer-widget">
<div class="footer-title">Contacts</div>
<div class="text">
<p>Lorem Ipsum, simply dummy text, printing, Chandigarh</p>
<p>+55(44) 9 9960-0298</p>
<p>kleber@galaxyz.com.br</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- main-footer end -->
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 column">
<div class="copyright"><a href="#">Anup</a> © 2019 All Right Reserved</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 column">
<ul class="footer-nav">
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
O exemplo é simples, fim uma página completa, funcionando ela esta no link “https://galaxyz.com.br/sistemasweb/bootatrap4slider/“, para utilizar o Slider, é necessário copiar somente o conteúdo que esta dentro do comentário “<“– Slider –>” e o css inicial, espero ter ajudar, grande agraço.
Please follow and like us:
