Un codice di toolify001

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 February 2025

Frammento di animazione di caricamento CSS

13 January 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 codice di toolify001

Consigliato

Un codice di bachir123

Frammento di animazione di caricamento CSS

Un codice di mo832860

HTML

CSS

JS

Consigliato

Un codice di bachir123

Frammento di animazione di caricamento CSS

Un codice di mo832860

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS