Inicial

/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Estilos Gerais */
body {
font-family: ‘Roboto’, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}

.container {
width: 90%;
max-width: 1200px;
margin: auto;
overflow: hidden;
padding: 0 15px;
}

/* Cabeçalho */
header.site-header {
background: #4B0082;
color: #fff;
padding: 15px 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header.site-header h1 {
float: left;
font-size: 28px;
margin-left: 10px;
}

header.site-header nav {
float: right;
margin-right: 10px;
}

header.site-header nav ul {
list-style: none;
}

header.site-header nav ul li {
display: inline;
margin-left: 20px;
}

header.site-header nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: background 0.3s, color 0.3s;
}

header.site-header nav ul li a:hover {
background: #ff4500;
color: #fff;
}

@media(max-width: 768px) {
header.site-header h1, header.site-header nav {
float: none;
text-align: center;
}

header.site-header nav ul {
margin-top: 10px;
}

header.site-header nav ul li {
display: block;
margin: 10px 0;
}

header.site-header nav ul li a {
display: block;
padding: 10px;
margin: 5px 0;
}
}

/* Seção Principal (Hero Section) */
.hero {
background: linear-gradient(90deg, #4B0082, #800080);
color: #fff;
padding: 120px 0 100px;
text-align: center;
background-size: cover;
background-position: center;
}

.hero h2 {
font-size: 40px;
margin-bottom: 10px;
font-weight: bold;
}

.hero p {
font-size: 20px;
margin-bottom: 20px;
}

.cta-button {
display: inline-block;
padding: 15px 30px;
background: #ff4500;
color: #fff;
text-decoration: none;
border-radius: 50px;
font-size: 18px;
transition: background 0.3s, transform 0.3s;
}

.cta-button:hover {
background: #ff6500;
transform: scale(1.05);
}

/* Funcionalidades */
.features {
padding: 70px 0;
text-align: center;
background-color: #f4f4f4;
}

.features h3 {
margin-bottom: 30px;
font-size: 32px;
}

.feature-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.feature-item {
background: #fff;
padding: 30px;
margin: 15px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
width: 30%;
transition: transform 0.3s;
}

.feature-item h4 {
margin-bottom: 15px;
font-size: 24px;
color: #4B0082;
}

.feature-item p {
font-size: 18px;
color: #666;
}

.feature-item:hover {
transform: translateY(-10px);
}

@media(max-width: 768px) {
.feature-item {
width: 100%;
margin: 10px 0;
}
}

/* Contato */
.contact {
background: #4B0082;
color: #fff;
padding: 50px 0;
text-align: center;
}

.contact h3 {
margin-bottom: 30px;
font-size: 32px;
}

.contact form {
max-width: 600px;
margin: auto;
text-align: left;
}

.contact input,
.contact textarea {
width: 100%;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
border: none;
font-size: 16px;
}

.contact button {
padding: 15px 30px;
background: #ff4500;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background 0.3s, transform 0.3s;
width: 100%;
}

.contact button:hover {
background: #ff6500;
transform: scale(1.05);
}

/* Rodapé */
footer.site-footer {
background: #222;
color: #fff;
text-align: center;
padding: 20px 0;
}

footer.site-footer p {
margin: 10px 0;
}

footer.site-footer ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}

footer.site-footer ul li {
margin: 0 15px;
}

footer.site-footer ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
transition: color 0.3s;
}

footer.site-footer ul li a:hover {
color: #ff4500;
}

/* Animações */
.fade-in {
animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

Divida sua Conta com Facilidade

Calcule e divida a conta de forma rápida e justa com o ContaCerta.

Veja as Funcionalidades

Funcionalidades Principais

Cálculo de Gorjeta

Calcule a gorjeta de acordo com o valor total da conta e o percentual desejado.

Divisão da Conta

Divida o total da conta igualmente entre várias pessoas, sem complicação.

Arredondamento Automático

Arredonde os valores para facilitar o pagamento exato por cada pessoa.

Entre em Contato

<form action="” method=”post”>

Enviar

document.addEventListener(‘DOMContentLoaded’, function() {
const form = document.querySelector(‘form’);
form.addEventListener(‘submit’, function(event) {
const name = document.querySelector(‘input[name=”name”]’).value;
const email = document.querySelector(‘input[name=”email”]’).value;
const message = document.querySelector(‘textarea[name=”message”]’).value;

if (name === “” || email === “” || message === “”) {
alert(“Por favor, preencha todos os campos.”);
event.preventDefault();
} else {
alert(“Mensagem enviada com sucesso!”);
}
});

// Animações de entrada
const fadeElements = document.querySelectorAll(‘.fade-in’);
const options = {
threshold: 0.5,
};

const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘visible’);
observer.unobserve(entry.target);
}
});
}, options);

fadeElements.forEach(element => {
observer.observe(element);
});
});