Societe de vente de produit locaux

2,577 idrisse2319

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 January 2026

Chargeur de jeu HTML5 pour le portage Web de Pizza Tower

15 August 2024

Un magnifique Slider

16 April 2025

Un code de Metehan

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