Un código de nasmacadic

Abrir en el editor Publica tu código

Recomendado

26 March 2024

Especificaciones del coche (Acordeón) HTML

20 April 2025

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Faites un Don</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(to right, #f0f4f8, #dbefff);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

.don-container {
      background-color: #fff;
      padding: 40px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      text-align: center;
      animation: slideFade 1s ease;
      max-width: 400px;
      width: 100%;
    }

@keyframes slideFade {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

.don-container h1 {
      color: #2c3e50;
      margin-bottom: 15px;
    }

.don-container p {
      color: #555;
      margin-bottom: 25px;
    }

.amount-options {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 20px;
    }

.amount-btn {
      background-color: #ecf0f1;
      color: #2c3e50;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
      font-weight: bold;
    }

.amount-btn:hover,
    .amount-btn.active {
      background-color: #3498db;
      color: white;
    }

.custom-amount {
      margin-top: 10px;
    }

.custom-amount input {
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      width: 100px;
      text-align: center;
    }

.don-btn {
      margin-top: 25px;
      background: #2ecc71;
      color: white;
      padding: 14px 28px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      transition: 0.3s ease;
    }

.don-btn:hover {
      background: #27ae60;
    }

@media (max-width: 500px) {
      .amount-options {
        flex-direction: column;
        align-items: center;
      }

.custom-amount input {
        width: 80%;
      }
    }
  </style>
</head>
<body>
  <div class="don-container">
    <h1>Faites un Don ❤️</h1>
    <p>Merci de soutenir notre projet. Choisissez un montant :</p>

<button class="don-btn" onclick="processDonation()">Faire un don</button>
  </div>

amountButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        amountButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        customAmountInput.value = '';
      });
    });

customAmountInput.addEventListener('input', () => {
      amountButtons.forEach(b => b.classList.remove('active'));
    });

function processDonation() {
      let selectedAmount = document.querySelector('.amount-btn.active');
      let customAmount = customAmountInput.value;

let amount = selectedAmount ? selectedAmount.dataset.amount : customAmount;

if (!amount || amount <= 0) {
        alert("Veuillez sélectionner ou entrer un montant valide.");
        return;
      }

// Redirige vers PayPal avec le montant
      let paypalLink = `https://www.paypal.com/donate?business=VOTRE_EMAIL_PAYPAL&amount=${amount}¤cy_code=EUR`;
      window.open(paypalLink, "_blank");
    }
  </script>
</body>
</html>

Un código de nasmacadic

Recomendado

Sitio web de información

Especificaciones del coche (Acordeón) HTML

Un código de Metehan

HTML

CSS

JS

Recomendado

Sitio web de información

Especificaciones del coche (Acordeón) HTML

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS