Un codice di creativefunction305

713 creativefunction305

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

14 September 2024

Modulo di Accesso con Glassmorphism

24 January 2025

Casella di accesso/registrazione rotazione 3D

30 March 2025

Un codice di ytr3d3

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

Consigliato

Modulo di Accesso con Glassmorphism

Casella di accesso/registrazione rotazione 3D

Un codice di ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS