Alex_Pedro/E-Commerce-1
0
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity

Desenvolvimento da tela de entrar em contato e ajustes icones de filtragem na tela de produtos #4

Merged
Alex_Pedro merged 1 commit from telaContatos into main 2024-06-22 07:37:08 +02:00
Conversation 0 Commits 1 Files changed 6 +77 -45
6 changed files with 77 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
contato.php Normal file
View file

@ -0,0 +1,29 @@
<?php include "includes/header.php"; ?>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Entrar em contato</h1>
</div>
</div>
<form class="formContato">
<div class="row">
<div class="col-md-6">
<input class="form-control" type="text" placeholder="Nome">
</div>
<div class="col-md-6">
<input class="form-control" type="email" placeholder="Email">
</div>
</div>
<div class="row comentarioContato">
<div class="col-md-12 form-floating">
<textarea class="form-control" name="text" placeholder="Cometário"></textarea>
</div>
</div>
<div class="row btnContato">
<div class="col-md-12">
<button class="btn btn-primary">Enviar</button>
</div>
</div>
</form>
</div>
<?php include "includes/footer.php"; ?>

39
css/estiloSite.css
View file

@ -201,6 +201,7 @@ a.rodapeLink {
/*Seção Footer FIM*/
/*TELA PRODUTOS */
/*PRODUTOS FILTROS INICIO*/
@ -242,7 +243,6 @@ a.rodapeLink {
}
.estoqueProdutos {
padding-top: 5px;
font-size: 16px;
}
@ -274,8 +274,32 @@ a.rodapeLink {
padding: 0px 8px 0px 2px;
}
/*PRODUTOS FILTROS FIM*/
.check {
width: 15px;
height: 15px;
background-color: #ccc;
}
.check:checked {
background-color: #007bff;
}
/*PRODUTOS FILTROS - TELA DE PRODUTOS FIM*/
/*TELA DE CONTATOS INICIO*/
.formContato{
margin-top: 50px;
}
.comentarioContato{
margin: 30px 0px 30px 0px;
}
.btnContato{
margin-bottom: 20px;
}
/*TELA DE CONTATOS FIM*/
/*Area de responsividade*/
@media screen and (max-width:1280px) {
@ -294,7 +318,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -314,7 +337,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -334,7 +356,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -355,7 +376,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -375,7 +395,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -395,7 +414,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -415,7 +433,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -435,7 +452,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -455,7 +471,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -475,7 +490,6 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}
@ -495,6 +509,5 @@ a.rodapeLink {
.coluna {
flex: 1 0 33.33%;
/* Cada coluna ocupa 1/3 da largura da tela */
}
}

24
includes/footer.php
View file

@ -9,7 +9,6 @@
</div>
</div>
</section>
<div class="row">
<div class="col-md-12">
<p class="listaRodape">
@ -20,38 +19,30 @@
</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">
<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">
<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">
<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">
<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">
<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">
<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
@ -62,8 +53,7 @@
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/02aa49a0c5.js" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</html>

12
includes/header.php
View file

@ -6,13 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/estiloSite.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<title>InovaByte Site</title>
</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">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
@ -35,8 +37,7 @@
Produtos</a>
</li>
<li class="dropdown barraNavegacao">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-product-hunt"
aria-hidden="true"></i>
<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>
@ -69,7 +70,7 @@
</ul>
</li>
<li class="barraNavegacao">
<a href="#contato"><i class="fa faNaNuser-o" aria-hidden="true"></i>
<a href="contato.php"><i class="fa-solid fa-address-book"></i></i>
Entrar em contato</a>
</li>
</ul>
@ -95,7 +96,6 @@
</div>
</div>
</nav>
<!--CABEÇALHO FIM navbar navbar-static-top-->
<header>
<h4 class="tituloHeader">Seja Bem vindo</h4>
</header>

0
login.php Normal file
View file

18
produtos.php
View file

@ -2,7 +2,7 @@
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="">Produtos</h2>
<h2>Produtos</h2>
</div>
</div>
<div class="row">
@ -20,10 +20,10 @@
<div class="row">
<div class="col-md-12">
<li>
<div class="estoqueProdutos form-check"><input class="form-check-input" type="checkbox" value="emEstoque"> Em estoque <span id="qtdStock"> 12</span> </div>
<div class="estoqueProdutos form-check"><input class="form-check-input check" type="checkbox" value="emEstoque"> Em estoque <span id="qtdStock"> 12</span> </div>
</li>
<li>
<p class="estoqueProdutos"> <input class="form-check-input" type="checkbox" value=""> Fora de estoque <span> 12</span></p>
<p class="estoqueProdutos form-check"> <input class="form-check-input check" type="checkbox" value=""> Fora de estoque <span> 12</span></p>
</li>
</div>
</div>
@ -63,14 +63,14 @@
<div class="row">
<div class="col-md-6">
<p class="d-inline-flex">
<input class="form-check-input d-flex" type="checkbox" value="">
<input class="form-check-input d-flex check" type="checkbox" value="">
<i class="fa fa-desktop" aria-hidden="true"></i>
<label> Desktop </label>
</p>
</div>
<div class="col-md-6">
<p class="d-inline-flex">
<input class="form-check-input d-flex" type="checkbox" value="">
<input class="form-check-input d-flex check" type="checkbox" value="">
<i class="fa fa-laptop" aria-hidden="true"></i>
<label> Notbooks </label>
</p>
@ -79,14 +79,14 @@
<div class="row">
<div class="col-md-6">
<p class="d-inline-flex">
<input class="form-check-input d-flex" type="checkbox" value="">
<input class="form-check-input d-flex check" type="checkbox" value="">
<i class="fa fa-tablet" aria-hidden="true"></i>
<label> Celulares </label>
</p>
</div>
<div class="col-md-6">
<p class="d-inline-flex">
<input class="form-check-input d-flex" type="checkbox" value="">
<input class="form-check-input d-flex check" type="checkbox" value="">
<i class="fa fa-keyboard-o" aria-hidden="true"></i>
<label> Informática </label>
</p>
@ -95,14 +95,14 @@
<div class="row">
<div class="col-md-6">
<p class="d-inline-flex">
<input class="form-check-input d-flex" type="checkbox" value="">
<input class="form-check-input d-flex check" type="checkbox" value="">
<i class="fa fa-gamepad" aria-hidden="true"></i>
<label> Video Games </label>
</p>
</div>
<div class="col-md-6">
<p class="d-inline-flex">
<input class="form-check-input d-flex" type="checkbox" value="">
<input class="form-check-input d-flex check" type="checkbox" value="">
<i class="fa fa-television" aria-hidden="true"></i>
<label> Tv's </label>
</p>