Envio do botão do banner, junto com a responsividade
This commit is contained in:
parent
7419a12597
commit
47c58b6883
|
|
@ -15,7 +15,6 @@
|
|||
.navbar-nav > li > a:hover {
|
||||
color: white;
|
||||
background-color: transparent !important;
|
||||
text-decoration: underline;
|
||||
border-bottom: 5px solid #00205f;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
body{
|
||||
background-color: rgb(225,225,225);
|
||||
width: auto;
|
||||
}
|
||||
/**/
|
||||
.row{
|
||||
padding: 0 0;
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
/*NAVBAR INICIO*/
|
||||
|
|
@ -49,10 +55,235 @@ h4{
|
|||
/*Cabeçalho FIM*/
|
||||
|
||||
/*Banner Site INICIO*/
|
||||
|
||||
.img-thumbnail{
|
||||
border: 0 solid #000000;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/*Banner Site FIM*/
|
||||
|
||||
|
||||
/*Botão Banner*/
|
||||
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 15px 25px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 400px;
|
||||
left: 330px;
|
||||
}
|
||||
|
||||
.buttonBanner:hover{
|
||||
background-color: #0D6EFD;
|
||||
border-color: #0D6EFD;
|
||||
transform: scale(1.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/*Banner Site FIM*/
|
||||
|
||||
@media screen and (max-width:1280px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 15px 25px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 300px;
|
||||
left: 240px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:1040px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 12px 22px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 250px;
|
||||
left: 200px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:912px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 11px 21px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 220px;
|
||||
left: 160px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:820px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 11px 21px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 190px;
|
||||
left: 140px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 11px 21px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 190px;
|
||||
left: 140px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:540px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 5px 15px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 130px;
|
||||
left: 80px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:412px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 3px 8px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 100px;
|
||||
left: 55px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:360px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 3px 7px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 95px;
|
||||
left: 50px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:430px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 3px 7px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 105px;
|
||||
left: 70px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:390px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 3px 7px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 105px;
|
||||
left: 60px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:320px){
|
||||
.buttonBanner{
|
||||
background-color: white;
|
||||
color: #0d4cfd;
|
||||
border: 2px solid #483bd7;
|
||||
padding: 1px 5px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
position: relative;
|
||||
bottom: 85px;
|
||||
left: 40px;
|
||||
}
|
||||
.coluna {
|
||||
flex: 1 0 33.33%; /* Cada coluna ocupa 1/3 da largura da tela */
|
||||
}
|
||||
}
|
||||
20
site.php
20
site.php
|
|
@ -11,6 +11,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-static-top navegacaoMenu bg-primary d-flex flex-column align-items: center">
|
||||
<!--INICIO FIM navbar navbar-static-top-->
|
||||
<div class="container">
|
||||
|
|
@ -31,7 +32,8 @@
|
|||
<li class="barraNavegacao"><a href="#novidades"><i class="fa fa-star" aria-hidden="true"></i> Novidades</a>
|
||||
</li>
|
||||
<li class="dropdown barraNavegacao">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-product-hunt" aria-hidden="true"></i> Categorias
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-product-hunt"
|
||||
aria-hidden="true"></i> Categorias
|
||||
<span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header">Setup</li>
|
||||
|
|
@ -45,10 +47,10 @@
|
|||
<li><a href="#tvs"><i class="fa fa-television" aria-hidden="true"></i> TVs</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="barraNavegacao"><a href="#usuarios"><i class="fa fa-user-o" aria-hidden="true"></i> Entrar em
|
||||
<li class="barraNavegacao"><a href="#usuarios"><i class="fa faNaNuser-o" aria-hidden="true"></i> Entrar em
|
||||
contato</a></li>
|
||||
</ul>
|
||||
<!-- <form class="form-inline my-2 my-lg-0">
|
||||
<!-- <form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>-->
|
||||
|
|
@ -63,9 +65,19 @@
|
|||
<header>
|
||||
<h4>Seja Bem vindo</h4>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<img src="img/banner.png" class="img-fluid img-thumbnail img-lg bannerSite" alt="Responsive image">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<img src="img/banner.png" class="img-fluid img-thumbnail img-lg bannerSite" alt="Responsive image">
|
||||
<div class="col-6">
|
||||
<button class="btn btn-primary buttonBanner me-md-2" type="button">Comece já</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue