Site in Bootstrap:Idei de cadouri
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Găsește cele mai bune idei de cadouri pentru orice ocazie pe site-ul nostru!">
<title>Idei de cadouri</title>
<!-- Legătura către CSS-ul Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Stil general pentru corpul paginii */
body {
font-family: 'Poppins', sans-serif;
background-color: #058f99;
color:black;
font-weight: bold;
}
/* Stilizare Contact */
#contact {
margin: 30px;
padding: 80px 20px;
background-color: #42afaa;
}
#contact h2 {
font-size: 2.5rem;
color: #007bff;
font-weight: bold;
margin-bottom: 40px;
text-align: left;
}
.form-label {
font-weight: 560;
color: #105a85;
}
input, textarea {
border-radius: 8px;
border: 2px solid #ccc;
padding: 12px;
}
input:focus, textarea:focus {
border-color: #007bff;
box-shadow: none;
}
#contact button {
background-color: #007bff;
color: #ffffff;
padding: 12px 25px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
border: none;
transition: background-color 0.3s ease;
}
#contact button:hover {
background-color: #0056b3;
}
/* Stil pentru iconițele sociale */
.bi {
font-size: 1.8rem;
transition: color 0.3s ease;
}
.bi:hover {
color: #007bff;
}
/* Stil pentru imaginile din carduri */
.card-img-top {
width: 100%;
height: auto;
}
/* Media query pentru responsive */
@media (max-width: 768px) {
.navbar-nav {
text-align: center;
}
.card-body {
text-align: center;
}
}
</style>
</head>
<body>
<!-- Bara de navigare -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#index">Cadouri</a>
<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">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#acasa">Acasă</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#despre">Despre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Secțiunea Acasă -->
<section id="acasa" class="container mt-5">
<h1 class="text-center mb-4">Bine ai venit pe Idei de cadouri</h1>
<p class="text-center">Descoperă cele mai inspirate cadouri pentru cei dragi, indiferent de ocazie!</p>
<p class="text-center">De la cadouri personalizate la experiențe unice, aici găsești tot ce ai nevoie pentru a surprinde pe cineva special.</p>
</section>
<!-- Secțiunea Despre -->
<section id="despre" class="container mt-5">
<h2 class="text-center mb-4">Despre noi</h2>
<p class="text-center">La <strong>Idei de cadouri</strong>, ne dedicăm să găsim cele mai bune idei de cadouri pentru orice ocazie.</p>
<p class="text-center">Fie că vrei să oferi un cadou personalizat, fie că vrei să surprinzi pe cineva cu o experiență de neuitat, avem soluții pentru toate gusturile și bugetele.</p>
<p class="text-center">Echipa noastră caută constant noi idei și produse care să aducă bucurie celor care le primesc.</p>
</section>
<!-- Idei de cadouri -->
<div class="container mt-5">
<h1 class="text-center mb-4">Idei de cadouri</h1>
<div class="row">
<!-- Cadou 1 -->
<div class="col-md-4">
<div class="card">
<img src="cani.jpeg" class="card-img-top" alt="Set de căni personalizate" loading="lazy"><br><br>
<div class="card-body">
<h5 class="card-title">Set de căni personalizate</h5>
<p class="card-text"> Un cadou ideal pentru un cuplu sau un prieten apropiat</p><br><br>
</div>
</div>
</div>
<!-- Cadou 2 -->
<div class="col-md-4">
<div class="card">
<img src="bomboane.jpeg" class="card-img-top" alt="Cutie de bomboane de lux" loading="lazy"><br>
<div class="card-body">
<h5 class="card-title">Cutie de bomboane de lux</h5>
<p class="card-text">Perfectă pentru iubitorii de dulciuri si de produse de calitate.</p><br><br>
</div>
</div>
</div>
<!-- Cadou 3 -->
<div class="col-md-4">
<div class="card">
<img src="spa.jpeg" class="card-img-top" alt="Experiență spa specială de o zi" loading="lazy"><br>
<div class="card-body">
<h5 class="card-title">Experiență spa specială de o zi</h5>
<p class="card-text">Oferă o zi de relaxare completă într-un spa de lux, cu masaje și tratamente pentru întregul corp.</p><br>
</div>
</div>
</div>
</div>
</div>
<!-- Secțiunea Contact -->
<section id="contact" class="container mt-5">
<h2 class="text-center mb-4">Contactează-ne</h2>
<form id="contactForm" onsubmit="event.preventDefault();">
<div class="mb-3">
<label for="nume" class="form-label">Nume</label>
<input type="text" class="form-control" id="nume" placeholder="Introdu numele tău" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Introdu adresa ta de email" required>
</div>
<div class="mb-3">
<label for="mesaj" class="form-label">Mesaj</label>
<textarea class="form-control" id="mesaj" rows="5" placeholder="Scrie mesajul tău aici" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Trimite</button>
</form>
</section>
<footer class="py-3" style="text-align: center;">
<p>© 2024 Idei de cadouri. Toate drepturile sunt rezervate.</p>
</footer>
<!-- Scripturi Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
Comentarii
Trimiteți un comentariu