Desenvolvimento dos cards de produtos e do rodape da pagina principal

This commit is contained in:
Alex Pedro 2024-05-30 19:43:07 -03:00
parent dcb88be3d7
commit a21d215726
2 changed files with 105 additions and 4 deletions

View file

@ -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{

View file

@ -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>