Un código de toolify001

1,296 toolify001

Abrir en el editor Publica tu código

Recomendado

16 September 2024

Construyendo un horizonte

20 March 2024

Plantilla de página de destino HTML con animaciones

19 November 2025

Pantalla de carga animada con puntos en CSS

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flexistore - Création de Sites Web</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <div class="container">
      <div class="logo">Flexistore</div>
      <nav>
        <ul>
          <li><a href="#services">Services</a></li>
          <li><a href="#apropos">À propos</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

<section class="hero">
    <div class="container">
      <h1>Création de sites web professionnels</h1>
      <p>Boostez votre présence en ligne avec nos solutions sur mesure</p>
      <a href="#contact" class="btn">Demandez un devis</a>
    </div>
  </section>

<section id="services" class="services">
    <div class="container">
      <h2>Nos Services</h2>
      <div class="service-list">
        <div class="service">
          <h3>Site Vitrine</h3>
          <p>Un site élégant et performant pour présenter votre activité.</p>
        </div>
        <div class="service">
          <h3>Site E-commerce</h3>
          <p>Boostez vos ventes avec une boutique en ligne facile à gérer.</p>
        </div>
        <div class="service">
          <h3>Maintenance & Support</h3>
          <p>Assistance technique et mises à jour régulières pour votre site.</p>
        </div>
      </div>
    </div>
  </section>

<section id="apropos" class="about">
    <div class="container">
      <h2>À propos de Flexistore</h2>
      <p>
        Nous sommes une agence spécialisée dans la création de sites web modernes et adaptés à vos besoins.
        Notre équipe met son savoir-faire à votre disposition pour développer votre présence digitale.
      </p>
    </div>
  </section>

<section id="contact" class="contact">
    <div class="container">
      <h2>Contactez-nous</h2>
      <form id="contactForm">
        <label for="nom">Nom complet</label>
        <input type="text" id="nom" name="nom" required />

<label for="email">Email</label>
        <input type="email" id="email" name="email" required />

<label for="message">Message</label>
        <textarea id="message" name="message" rows="5" required>

CSS

/* Reset & basics */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f4f7fa;
  color: #222;
  line-height: 1.6;
  scroll-behavior: smooth;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
header {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #ff6600;
  cursor: default;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

nav a {
  color: #222;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

nav a:hover {
  color: #ff6600;
}

/* Hero */
.hero {
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('hero-web.jpg') center/cover no-repeat;
  color: white;
  text-align: center;
  padding: 6rem 2rem;
  animation: fadeIn 1s ease forwards;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.3rem;
  margin-bottom: 2rem;
}

.btn {
  background: #ff6600;
  color: white;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #e65c00;
}

/* Sections */
section {
  padding: 4rem 0;
}

h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #333;
}

/* Services */
.service-list {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.service {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 0.05);
  flex: 1 1 280px;
  max-width: 300px;
  text-align: center;
  transition: transform 0.3s ease;
}

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

.service h3 {
  margin-bottom: 1rem;
  color: #ff6600;
}

/* About */
.about p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #555;
  text-align: center;
}

/* Contact */
form {
  max-width: 500px;
  margin: 0 auto;
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.05);
}

label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: #333;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1.2rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  border-color: #ff6600;
}

button[type="submit"] {
  width: 100%;
  padding: 0.85rem;
  background: #ff6600;
  color: white;
  font-weight: 700;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button[type="submit"]:hover {
  background: #e65c00;
}

/* Footer */
footer {
  background: white;
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  color: #777;
  border-top: 1px solid #eee;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}