Desenvolvimento dos cards de produtos e do rodape da pagina principal
This commit is contained in:
parent
dcb88be3d7
commit
a21d215726
2 changed files with 105 additions and 4 deletions
|
@ -1,5 +1,4 @@
|
|||
body{
|
||||
background-color: rgb(225,225,225);
|
||||
width: auto;
|
||||
}
|
||||
/**/
|
||||
|
@ -131,7 +130,6 @@ header{
|
|||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.botaoCarrinho{
|
||||
background-color: #007bff;
|
||||
background-image: linear-gradient(to right, #007bff 0%, #0056b3 100%);
|
||||
|
@ -150,6 +148,46 @@ header{
|
|||
|
||||
/*Seção de produtos FIM*/
|
||||
|
||||
/*Seção Footer INICIO*/
|
||||
|
||||
.rodapeSite{
|
||||
background-color: #121212;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.tituloRodape{
|
||||
font-size: 50px;
|
||||
padding-top: 20px;
|
||||
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
|
||||
}
|
||||
|
||||
.listaRodape{
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
a.rodapeLink{
|
||||
text-decoration: none;
|
||||
padding: 0px 15px 0px 15px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
.contatosListaRodape{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.contatoLink{
|
||||
padding: auto;
|
||||
}
|
||||
|
||||
.copyrightRodape{
|
||||
color:#5a5a5a;
|
||||
}
|
||||
/*Seção Footer FIM*/
|
||||
|
||||
|
||||
/*Area de responsividade*/
|
||||
@media screen and (max-width:1280px){
|
||||
.buttonBanner{
|
||||
|
|
67
site.php
67
site.php
|
@ -116,8 +116,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="d-flex flex-row">
|
||||
|
||||
<section class="cardProd">
|
||||
<div class="d-flex row">
|
||||
<div class="card-group">
|
||||
<div class="col-md-3">
|
||||
<div class="card cardProduto">
|
||||
|
@ -186,6 +187,68 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-center rodapeSite">
|
||||
<div class="container p-4">
|
||||
<section>
|
||||
<div class="row d-flex">
|
||||
<div class="col-md-12">
|
||||
<p class="tituloRodape">
|
||||
InovaByte.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p class="listaRodape">
|
||||
<a class="rodapeLink" href="#">Home</a>
|
||||
<a class="rodapeLink" href="#">Blog</a>
|
||||
<a class="rodapeLink" href="#">Sobre</a>
|
||||
<a class="rodapeLink" href="#">Contato</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p class="contatosListaRodape">
|
||||
<a data-mdb-ripple-init style="background-color: #3b5998; color: white;"
|
||||
class="btn btn-outline btn-floating m-1 contatoLink" href="#!" role="button">
|
||||
<i class="fa fa-facebook-f"></i>
|
||||
</a>
|
||||
<a data-mdb-ripple-init style="background-color: #55acee; color: white;"
|
||||
class="btn btn-outline btn-floating m-1 contatoLink" href="#!" role="button">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
<a data-mdb-ripple-init style="background-color: #dd4b39; color: white;"
|
||||
class="btn btn-outline btn-floating m-1 contatoLink" href="#!" role="button">
|
||||
<i class="fa fa-google"></i>
|
||||
</a>
|
||||
<a data-mdb-ripple-init style="background-color: #ac2bac; color: white;"
|
||||
class="btn btn-outline btn-floating m-1 contatoLink" href="#!" role="button">
|
||||
<i class="fa fa-instagram"></i>
|
||||
</a>
|
||||
<a data-mdb-ripple-init style="background-color: #0082ca; color: white;"
|
||||
class="btn btn-outline btn-floating m-1 contatoLink" href="#!" role="button">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
</a>
|
||||
<a data-mdb-ripple-init style="background-color: #15ce18; color: white;"
|
||||
class="btn btn-outline btn-floating m-1 contatoLink" href="#!" role="button">
|
||||
<i class="fa fa-github"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p class="copyrightRodape">Copyright ©2024 Todos os direitos reservados | Template criado por Alex Pedro.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</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 a new issue