Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@elizioNeto22
elizioNeto22 authored Feb 5, 2020
0 parents commit 2f90975
Show file tree
Hide file tree
Showing 56 changed files with 5,554 additions and 0 deletions.
18 changes: 18 additions & 0 deletions dist/ajuda
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
header {
display: grid;

grid-template-columns: repeat(5, 1fr);

div {
background: $dark-color;
color: set-text-color($dark-color);
padding: 0.5rem;
margin: 0.5rem;
}
}

// :hover{
// @include transform(rotate(20deg)),
// background-color: darken($ligth-color, 10%) darken é uma função predefinida, 1º a cor, 2º qnts % mais escura
// background-color: lighten($ligth-color, 10%) lighten é uma função predefinida, 1º a cor, 2º qnts % mais clara
// }
259 changes: 259 additions & 0 deletions dist/caracteristicas.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="../dist/css/main.css">
<link rel="stylesheet" href="../dist/css/hamburgers.css">
<title>Ecobit • Características</title>
</head>

<body>
<div id="menu-fixo">
<header class="container-nav">


<nav class="nav-bar">
<!-- Menu responsivo -->
<button class="hamburger hamburger--vortex " type="button" dro>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="caracteristicas.html">CARACTERÍSTICAS</a></li>
<li><a href="precos.html">PREÇO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">PÁGINAS</a></li>
<li><a href="contato.html">CONTATO</a></li>
</ul>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>

<!-- Menu responsivo -->
<a href="" class="logo"><img src="./img/logo.png" alt=""></a>
<a href="" class="logoresp"><img src="./img/footer_logo.png" alt=""></a>
<div class="nav-menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="caracteristicas.html">CARACTERÍSTICAS</a></li>
<li><a href="precos.html">PREÇO</a></li>
<li class="dropdown"><a href="#">BLOG</a>
<ul>
<li><a href="#">Blog</a><span>22 Posts</span></li>
<li><a href="#">Single Blog</a><span>10 Posts</span></li>
</ul>
</li>
<li class="dropdown"><a href="#">PÁGINAS</a>
<ul>
<li><a href="#">Elementos</a></li>
</ul>
</li>
<li><a href="contato.html">CONTATO</a></li>
</ul>
</div>
<a href="#" id="btn-inscrever">INSCREVA-SE</a>
</nav>
</header>
</div>

<div class="container-banner-carac"></div>

<div class="titulo">
<h1>Nossas Características</h1>
<p>HOME • Características</p>
</div>

<section class="caracteristicas-container">
<div class="caracteristicas-conteudo">
<div class="box1 box">
<img src="./img/icon/feature_icon_1.png" alt="">

<h4>Completamente Seguro</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed distinctio eius provident ducimus quaerat iure
rerum quidem cumque corrupti est.</p>
</div>
<div class="box2 box">
<img src="./img/icon/feature_icon_2.png" alt="">

<h4>Design Único</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed distinctio eius provident ducimus quaerat iure
rerum quidem cumque corrupti est.</p>
</div>
<div class="box3 box">
<img src="./img/icon/feature_icon_3.png" alt="">

<h4>Um Voluntário</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed distinctio eius provident ducimus quaerat iure
rerum quidem cumque corrupti est.</p>
</div>
</div>
</section>

<section class="blocos-container">
<div class="blocos-conteudo">

<div class="blocos-texto">
<img src="./img/icon/Icon_1.png" alt="" class="icone1">
<h2>
Fácil para
<br>
Acessar Mídias Sociais
</h2>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, sapiente omnis! Id harum eius, nihil,
delectus quis consequuntur enim sit dolorem porro eos deleniti odio quae architecto impedit dolore possimus!
Quis facere atque dolorum accusamus vero, et vel aperiam laborum.</p>

<a href="#" class="btn btn-inscrever">SAIBA MAIS</a>
</div>

<div>
<img src="./img/about_img.png" alt="" class="blocos-img blocos-img1">
</div>
</div>
</section>

<section class="blocos-container">
<div class="blocos-conteudo">
<div>
<img src="./img/about_img_1.png" alt="" class="blocos-img blocos-img2">
</div>

<div class="blocos-texto">
<img src="./img/icon/Icon_2.png" alt="">

<h2>
Com Eficiência,
<br>
Abrir Novas Oportunidades.
</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Ut enim ad minim veniam.</p>

<a href="#" class="btn btn-inscrever">SAIBA MAIS</a>
</div>
</div>
</section>


<section class="subscribe-container">
<div class="subscribe-conteudo owl-carousel">
<h2>Experimente a maneira mais simples de
<br>
Gerir negócios.
</h2>

<input type="email" class="subscribe-input" placeholder="DIGITE SEU EMAIL">
<button>TESTE GRÁTIS</button>
</div>
</section>

<section class="clientes-container">
<div class="clientes-conteudo">
<img src="./img/client_logo/client_logo_1.png" alt="">
<img src="./img/client_logo/client_logo_2.png" alt="">
<img src="./img/client_logo/client_logo_3.png" alt="">
<img src="./img/client_logo/client_logo_4.png" alt="">
<img src="./img/client_logo/client_logo_5.png" alt="">
<img src="./img/client_logo/client_logo_1.png" alt="">
</div>
</section>

<div class="footer-background">
<footer class="footer-container">
<div class="footer-conteudo">

<div class="footer-intro">
<img src="./img/footer_logo.png" alt="">
<p>Gathered. Under is whose you'll to make years is mat lights thing together fish made forth thirds cattle
behold won't. Fourth creeping first female. <br>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Consectetur, fugiat? Voluptate repudiandae recusandae, porro distinctio eius eos saepe consequuntur et. </p>
</div>

<div class="footer-indice">
<div class="footer-box box-sobre">
<h2>Sobre Nós</h2>
<ul>
<li><a href="#">Site Gerenciado</a></li>
<li><a href="#">Gerenciar Reputação</a></li>
<li><a href="#">Ferramentas</a></li>
<li><a href="#">Serviço de Marketing</a></li>
<li><a href="#">Serviço ao Cliente</a></li>
</ul>
</div>

<div class="footer-box box-">
<h2>Links Rápidos</h2>
<ul>
<li><a href="#">Horário da Loja</a></li>
<li><a href="#">Ativos da Marca</a></li>
<li><a href="#">Relações com Investidores</a></li>
<li><a href="#">Termos de Serviço</a></li>
<li><a href="#">Política de Privacidade</a></li>
</ul>
</div>

<div class="footer-box box-">
<h2>Minha Conta</h2>
<ul>
<li><a href="#">Perguntas da Imprensa</a></li>
<li><a href="#">Diretórios de Mídia</a></li>
<li><a href="#">Relações com Investidores</a></li>
<li><a href="#">Termos de Serviço</a></li>
</ul>
</div>

<div class="footer-box box-">
<h2>Recursos</h2>
<ul>
<li><a href="#">Segurança de Aplicativos</a></li>
<li><a href="#">Política de Software</a></li>
<li><a href="#">Cadeia de Mantimentos</a></li>
<li><a href="#">Relação de Agências</a></li>
<li><a href="#">Gerenciar Reputação</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-final">
<p>Copyright ©2019 All rights reserved | This template is made with by Colorlib</p>
</div>
</footer>
</div>
</div>

<script>
window.onscroll = function () {
myFunction()
};

var header = document.getElementById("menu-fixo");
var sticky = header.offsetTop;

function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}

let hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", (e) => {
hamburger.classList.toggle("is-active");

});

document.querySelector('.hamburger').addEventListener('click', (e) => {
let menu = document.querySelector('.hamburger')
menu.classList.toggle('hamburger-click')
})
</script>
</body>

</html>
Loading

0 comments on commit 2f90975

Please sign in to comment.