Un código de toolify001

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

13 April 2024

Generador de contraseñas de SENAPI

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

Un código de toolify001

Recomendado

Botón de alternancia HTML CSS

Mensaje de motivación

Generador de contraseñas de SENAPI

HTML

CSS

JS

Recomendado

Botón de alternancia HTML CSS

Mensaje de motivación

Generador de contraseñas de SENAPI

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS