Un código de toolify001

Abrir en el editor Publica tu código

Recomendado

16 February 2025

Ejemplo de animación de fragmento CSS

30 March 2025

<!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);
  }
}

Un código de toolify001

Recomendado

Un código de NotYoEA

Ejemplo de animación de fragmento CSS

Un código de ytr3d3

HTML

CSS

JS

Recomendado

Un código de NotYoEA

Ejemplo de animación de fragmento CSS

Un código de ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS