क्रिएटिवफंक्शन305 द्वारा एक कोड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

10 February 2025

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

क्रिएटिवफंक्शन305 द्वारा एक कोड

अनुशंसित

bachir123 द्वारा एक कोड

HTML CSS नेवबार कोड

मैक्सी-डिजिटल द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

bachir123 द्वारा एक कोड

HTML CSS नेवबार कोड

मैक्सी-डिजिटल द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS