Webleb - HTML UI Elements - Lokale Produktvertriebsgesellschaft

<!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>

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

Validating your code, please wait...

HTML

CSS

}

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

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