Un codice di toolify001

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

2 September 2025

Esempio di animazione di frammenti CSS

21 December 2024

<!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 codice di toolify001

Consigliato

Esempio di animazione di frammenti CSS

Un codice di cleancloud166

Un codice di Skyrreum

HTML

CSS

JS

Consigliato

Esempio di animazione di frammenti CSS

Un codice di cleancloud166

Un codice di Skyrreum

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS