Un code par creativefunction305

1,735 creativefunction305

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 November 2025

Code HTML du jeu Snake

12 May 2026

Intégrer un jeu en plein écran : HTML, iFrame, JavaScript

30 November 2024

Un code par fastbug70

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amana Corp</title>
  <link rel="shortcut icon" href="/images/Amana_corp-transformed.png" type="image/x-icon">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="logo-container">
      <img src="/images/Amana_corp-transformed.png" alt="Amana Corp Logo">
      <h3>Amana Corp</h3>
    </div>
    <nav>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Produits</a></li>
        <li><a href="#">Départements</a></li>
        <li><a href="#">Contacts</a></li>
        <li><a href="#">À propos</a></li>
      </ul>
    </nav>
  </header>

<main>
    <section class="hero">
      <h1>Pour faciliter la production de nos partenaires</h1>
      <p>Amana Corp se distingue dans le domaine de la production et de l'exportation de produits agricoles de haute qualité tels que le girofle, la vanille, l'ylang-ylang et le coprah. Ces produits, essentiels pour les économies locales, sont également très prisés sur le marché international pour leurs arômes et leurs propriétés. La vanille, est réputée pour sa saveur incomparable, tandis que l'ylang-ylang est souvent utilisé dans la parfumerie de luxe. Amana Corp contribue ainsi à la valorisation des ressources naturelles et au développement économique durable.</p>
    </section>

<section class="brands">
      <h2>Nous sommes une entreprise mondiale avec une culture locale</h2>
      <div class="brand-logos">
        <img src="/images/1-614df02f03ff4-transformed.png" alt="girofle">
        <img src="/images/Vanille-min-transformed.png" alt="vanille">
        <img src="/images/ylang_ylang-removebg-preview.png" alt="ylang ylang">
        <img src="/images/coco1-removebg-preview.png" alt="coprah">
      </div>
    </section>

<section class="features">
      <div class="feature-card">
        <img src="/images/attirer-les-clients.webp" alt="Clients">
        <h3>For clients</h3>
        <p>Find the right clients and book an appointment.</p>
        <a href="#">Learn more</a>
      </div>
      <div class="feature-card">
        <img src="/images/vanille product.png" alt="Vanille">
        <h3>For producers</h3>
        <p>Save time managing your production and meet clients.</p>
        <a href="#">Learn more</a>
      </div>
      <div class="feature-card">
        <img src="/images/usine-du-futur-cropped.png" height="2250px" alt="Usines">
        <h3>For factories</h3>
        <p>Deliver an exceptional productive experience in your factories.</p>
        <a href="#">Learn more</a>
      </div>
    </section>
  </main>

<footer>
    <p>© 2024 Amana Corp. All rights reserved.</p>
  </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Reset some default styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* Global styles */
  body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
  }
  
  /* Header styles */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 10000;
    background: linear-gradient(90deg, #03ac84, #06d6f1);
    color: #fff;
    transition: background 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
  }
  
  .logo-container img {
    width: 30%;
    height: 50px;
    float: left;
  }
  
  nav ul {
    display: flex;
    list-style-type: none;
    flex: 1;
    text-align: right;
    
  }
  
  nav li {
    margin-left: 20px;
    display: inline-block;
    list-style: none;
    position: relative;
    padding: 8px, 12px;
  }
  
  nav a {
    color: #000;
    text-decoration: none;
    font-size: smaller;
    text-transform: capitalize;
    margin-right: 50px;
    padding: 5px;
  }

nav a:hover{
    background: #ffffff;
    color: #000000;
    transition: background 0.3s ease;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 100;
    background-clip: padding-box;
    background-origin: border-box;
    background-size: 100% 100%;
    transition: background 0.3s ease;

}

.logo-container h3{
    display: flex;
    color: #000;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    margin-top: 12px;
  }

/* Main content styles */
  .hero {
    margin-top: 5%;
    text-align: center;
  }
  
  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }
  
  .hero p {
    font-size: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: justify;
    font-size: medium;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 20px;
  }
  
  .brands {
    text-align: center;
    padding: 50px 20px;
  }
  
  .brands h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  
  .brand-logos img {
    max-width: 150px;
    margin: 0 20px;
    transition: transform 0.3s ease;
    transform: scale(1);
    transition: opacity 0.3s ease;
    opacity: 1;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    transition: filter 0.3s ease;
  }

.brand-logos img:hover {
    filter: grayscale(50%);
    transition: filter 0.3s ease;
    transform: scale(1.05);
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .features {
    color: #fff;
    display: flex;
    background-color: #020202;
    justify-content: space-around;
    padding: 50px 20px;
    margin-top: 50px;
    transition: background 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
  }
  
  .feature-card {
    text-align: center;
    max-width: 300px;
    padding: 20px;
    transition: filter 0.3s ease;
  }
  
  .feature-card img {
    height: 100px;
    margin-bottom: 20px;
    display: inline-flex;
  }

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  /* Apprendre encore plus ou Learn more*/
  .feature-card a {
    color: #00b39b;
    text-decoration: none;
  }

/* Footer styles */
  footer {
    text-align: center;
    padding: 20px;
    background-color: #efefef;
    color: #a09d9d;
    font-size: 0.9rem;
  }