Layout Inicial Template Serviços
Layout básico para uma página inicial
Código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Dark Website</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
body {
background-color: #121212;
color: #fff;
}
.navbar {
background-color: #1c1c1c;
}
.hero {
background: url('https://via.placeholder.com/1920x1080') no-repeat center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1.5rem;
max-width: 600px;
margin: auto;
}
.section {
padding: 100px 0;
}
.section-dark {
background-color: #1c1c1c;
}
.section-light {
background-color: #2d2d2d;
}
.services .card {
background-color: #282828;
}
.projects img {
width: 100%;
height: auto;
border-radius: 10px;
}
.testimonials .card {
background-color: #333;
}
footer {
background-color: #181818;
padding: 40px 0;
text-align: center;
}
footer p {
margin-bottom: 0;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container-fluid">
<!-- Logotipo -->
<a class="navbar-brand mx-auto" href="#">
<img src="https://via.placeholder.com/150x50?text=Logo" alt="Logo" width="150">
</a>
<!-- Botão toggle para mobile -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Menu de navegação -->
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#hero">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Serviços
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Design</a></li>
<li><a class="dropdown-item" href="#">Desenvolvimento</a></li>
<li><a class="dropdown-item" href="#">Marketing</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contato</a>
</li>
</ul>
<!-- Botão de login -->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="btn btn-outline-light" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="hero" class="hero">
<div>
<h1>Bem-vindo ao Nosso Site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fringilla mauris.</p>
<a href="#about" class="btn btn-primary mt-4">Saiba Mais</a>
</div>
</section>
<!-- About Section -->
<section id="about" class="section section-dark text-center">
<div class="container">
<h2 class="mb-5">Sobre Nós</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel felis in odio vehicula egestas nec et nunc. Suspendisse potenti. Curabitur feugiat tortor vitae leo finibus, vel hendrerit velit volutpat.</p>
</div>
</section>
<!-- Services Section -->
<section id="services" class="section section-light text-center">
<div class="container">
<h2 class="mb-5">Nossos Serviços</h2>
<div class="row">
<div class="col-lg-4">
<div class="card p-3">
<svg class="bi bi-laptop" width="3em" height="3em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#laptop"></use>
</svg>
<h4 class="mt-3">Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fringilla mauris.</p>
</div>
</div>
<div class="col-lg-4">
<div class="card p-3">
<svg class="bi bi-code-slash" width="3em" height="3em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#code-slash"></use>
</svg>
<h4 class="mt-3">Desenvolvimento</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fringilla mauris.</p>
</div>
</div>
<div class="col-lg-4">
<div class="card p-3">
<svg class="bi bi-megaphone" width="3em" height="3em" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#megaphone"></use>
</svg>
<h4 class="mt-3">Marketing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fringilla mauris.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="section section-dark text-center">
<div class="container">
<h2 class="mb-5">Projetos Recentes</h2>
<div class="row">
<div class="col-lg-4">
<img src="https://via.placeholder.com/400" alt="Project 1">
</div>
<div class="col-lg-4">
<img src="https://via.placeholder.com/400" alt="Project 2">
</div>
<div class="col-lg-4">
<img src="https://via.placeholder.com/400" alt="Project 3">
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="section section-light text-center">
<div class="container">
<h2 class="mb-5">O que nossos clientes dizem</h2>
<div class="row">
<div class="col-lg-4">
<div class="card p-3">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fringilla mauris."</p>
<h5>- Cliente 1</h5>
</div>
</div>
<div class="col-lg-4">
<div class="card p-3">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fringilla mauris."</p>
<h5>- Cliente 2</h5>
</div>
</div>
<div class="col-lg-4">
<div class="card p-3">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et fringilla mauris."</p>
<h5>- Cliente 3</h5>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section section-dark text-center">
<div class="container">
<h2 class="mb-5">Entre em Contato</h2>
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Nome" required>
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="E-mail" required>
</div>
<div class="mb-3">
<textarea class="form-control" placeholder="Mensagem" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2024 Modern Dark Website. Todos os direitos reservados.</p>
</div>
</footer>
<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>