ARKO - Artificial Intelligence Kno by @alessandrostano - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

listCollega un elemento input con una lista di opzioni datalist
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<title>Definisce il titolo della pagina web.
<i>Formatta il testo in corsivo/italico non enfatizzato
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
requiredRende obbligatorio un campo di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Alice nel Paese delle Meraviglie

Donazioni per il compleanno di Emm

5/10/24 es. 10 - cifratura

project-freecodecamp.org

Loading Animation

Liste e tabelle

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ARKO - Artificial Intelligence Knowledge Opportunity</title>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-light: #f9f9f9;
      --bg-dark: #111;
      --text-light: #111;
      --text-dark: #f9f9f9;
      --primary: #007aff;
      --accent: #FFD700;
      --daie-d: #007aff;
      --daie-a: #FFD700;
      --daie-i: #32CD32;
      --daie-e: #32CD32;
      --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Bebas Neue', cursive;
      background: linear-gradient(to right, #f9f9f9, #e6f7ff);
      color: var(--text-light);
      transition: background var(--transition), color var(--transition);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-attachment: fixed;
      font-size: 1.2rem;
      line-height: 1.6;
    }

    body.dark {
      background: linear-gradient(to right, #0d0d0d, #1a1a1a);
      color: var(--text-dark);
    }

    .container {
      max-width: 1200px;
      width: 90%;
      margin: 0 auto;
      padding: 0 20px;
    }

    .mode-toggle {
      position: fixed;
      top: 1.5rem;
      right: 1.5rem;
      background: none;
      border: none;
      cursor: pointer;
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.5s ease;
      z-index: 1000;
    }

    .mode-toggle:active { transform: rotate(360deg); }
    .mode-toggle svg { width: 24px; height: 24px; transition: opacity 0.4s ease; }
    #iconSun { opacity: 0; }
    body.dark #iconSun { opacity: 1; }
    body.dark #iconMoon { opacity: 0; }
    #iconMoon { opacity: 1; }

    .hero {
      background: linear-gradient(135deg, #007aff, #00c3ff);
      color: white;
      width: 100%;
      padding: 6rem 2rem 4rem;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      margin-bottom: 3rem;
    }

    h1 {
      font-size: 5rem;
      letter-spacing: 1rem;
      animation: rotateIn 1.2s ease forwards;
      text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
      margin-bottom: 1.5rem;
    }

    .payoff {
      font-size: 1.8rem;
      opacity: 0;
      animation: fadeInUp 1s ease-out forwards 1s;
      line-height: 1.3;
    }

    .school-image {
      margin: 3rem 0;
      width: 100%;
      max-width: 1024px;
      perspective: 1000px;
    }

    .school-image img {
      width: 100%;
      border-radius: 1.5rem;
      box-shadow: 0 15px 40px rgba(0,0,0,0.2);
      transform: rotateY(-10deg);
      transition: transform 0.6s;
    }

    .school-image img:hover {
      transform: rotateY(0deg) translateY(-10px);
    }

    section {
      margin: 5rem 0;
      opacity: 0;
      transform: translateY(30px);
      transition: var(--transition);
      width: 100%;
    }

    section.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section-title {
      font-size: 3.5rem;
      margin-bottom: 2rem;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.3rem;
    }

    .grid-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2.5rem;
      margin: 3rem 0;
    }

    .card {
      background: var(--bg-light);
      padding: 2rem;
      border-radius: 1.5rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      transition: all 0.4s ease;
      transform-style: preserve-3d;
      border: 2px solid rgba(0,122,255,0.1);
    }

    body.dark .card {
      background: var(--bg-dark);
      border-color: rgba(255,255,255,0.1);
    }

    .card:hover {
      transform: rotateY(10deg) translateY(-10px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }

    .card-title {
      font-size: 1.8rem;
      margin-bottom: 1rem;
      color: var(--primary);
    }

    .card-text {
      font-size: 1.2rem;
      color: var(--text-light);
    }

    body.dark .card-text {
      color: var(--text-dark);
    }

    .daie-title {
      font-size: 4rem;
      background: linear-gradient(90deg, var(--daie-d), var(--daie-a), var(--daie-i), var(--daie-e));
      background-size: 400%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shine 6s linear infinite;
      letter-spacing: 0.5rem;
      margin: 3rem 0;
    }

    .daie-title span {
      display: inline-block;
      animation: glow 2s ease-in-out infinite alternate;
    }

    .phase-list {
      list-style: none;
      margin: 3rem 0;
      text-align: left;
    }

    .phase-item {
      padding: 1.5rem;
      margin: 1.5rem 0;
      border-left: 5px solid var(--primary);
      background: rgba(0,122,255,0.05);
      border-radius: 0.5rem;
      font-size: 1.3rem;
    }

    .btn {
      display: inline-block;
      padding: 1rem 2.5rem;
      border-radius: 2rem;
      background: var(--primary);
      color: white;
      text-decoration: none;
      font-size: 1.3rem;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      margin-top: 1.5rem;
    }

    .btn:hover {
      transform: scale(1.08);
      box-shadow: 0 0 25px var(--primary);
      background: #005bb5;
    }

    footer {
      width: 100%;
      padding: 2rem;
      background: var(--bg-light);
      color: var(--text-light);
      margin-top: 5rem;
    }

    body.dark footer {
      background: var(--bg-dark);
      color: var(--text-dark);
    }

    .ticker {
      white-space: nowrap;
      animation: scrollFooter 25s linear infinite;
      font-size: 1.2rem;
      padding: 1rem 0;
    }

    @keyframes shine {
      0% { background-position: -200%; }
      100% { background-position: 200%; }
    }

    @keyframes glow {
      from { text-shadow: 0 0 10px rgba(255,255,255,0.5); }
      to { text-shadow: 0 0 30px currentColor; }
    }

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

    @keyframes scrollFooter {
      from { transform: translateX(100%); }
      to { transform: translateX(-100%); }
    }

    @keyframes rotateIn {
      from { opacity: 0; transform: rotateY(90deg); }
      to { opacity: 1; transform: rotateY(0); }
    }
  </style>
</head>
<body>
  <button class="mode-toggle" id="toggleMode">
    <svg id="iconMoon" viewBox="0 0 24 24">
      <path fill="currentColor" d="M12 2a9.93 9.93 0 0 0-7.07 2.93 10 10 0 1 0 14.14 14.14A10 10 0 0 0 12 2z"/>
    </svg>
    <svg id="iconSun" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="5" fill="currentColor"/>
      <path stroke="currentColor" stroke-width="2" d="M12 1v3m0 16v3M1 12h3m16 0h3m-4.22-7.78l2.12 2.12M4.22 19.78l2.12-2.12M19.78 4.22l-2.12 2.12M7.34 16.66l-2.12 2.12"/>
    </svg>
  </button>

  <header class="hero">
    <div class="container">
      <h1>A R K O</h1>
      <div class="payoff">Artificial Intelligence Opportunity<br>Knowledge</div>
    </div>
  </header>

  <div class="school-image container">
    <img src="https://via.placeholder.com/1024x400" alt="Scuola ARKO">
  </div>

  <main class="container">
    <section id="missione">
      <h2 class="section-title">La Nostra Missione</h2>
      <p class="section-content">
        Guidare gli studenti verso l'eccellenza nel campo dell'Intelligenza Artificiale, 
        promuovendo creatività, etica e pensiero critico.
      </p>
    </section>

    <section id="programmi">
      <h2 class="section-title">Programmi Futuristici</h2>
      <div class="grid-cards">
        <div class="card">
          <h3 class="card-title">Intelligenza Artificiale</h3>
          <p class="card-text">Laboratori hands-on, progetti reali e mentorship avanzata.</p>
        </div>
        <div class="card">
          <h3 class="card-title">Realtà Aumentata</h3>
          <p class="card-text">Creazione di esperienze immersive per il mondo reale e virtuale.</p>
        </div>
        <div class="card">
          <h3 class="card-title">Etica & Tecnologia</h3>
          <p class="card-text">Analisi dell'impatto sociale e normativo delle nuove tecnologie.</p>
        </div>
      </div>
    </section>

    <section id="laboratori">
      <h2 class="section-title">Laboratori con Professionisti</h2>
      <p class="section-content">
        Collaboriamo con esperti del settore: data scientists, ingegneri, artisti digitali 
        e ricercatori per workshop pratici e seminari esclusivi.
      </p>
    </section>

    <section id="metodo-daie">
      <h2 class="daie-title">METODO <span>D</span><span>A</span><span>I</span><span>E</span></h2>
      <div class="section-content">
        <p>Il <strong>Metodo DAIE</strong> descrive il percorso evolutivo dello studente attraverso 4 fasi:</p>
        <ul class="phase-list">
          <li class="phase-item">
            <strong>D – Demotivato:</strong> Lo studente è poco coinvolto e ha bisogno di stimoli iniziali
          </li>
          <li class="phase-item">
            <strong>A – Attento:</strong> Segue con attenzione e comincia ad appassionarsi
          </li>
          <li class="phase-item">
            <strong>I – Interessato:</strong> È attivo, pone domande, collabora
          </li>
          <li class="phase-item">
            <strong>E – Esperto:</strong> Padroneggia l’argomento, produce e riflette criticamente
          </li>
        </ul>
        <p>I docenti personalizzano il percorso in base alla fase dello studente, stimolandolo fino all’autonomia.</p>
      </div>
      <div class="school-image">
        <img src="https://via.placeholder.com/1024x400" alt="Metodo DAIE">
      </div>
    </section>

    <section id="iscrizioni">
      <h2 class="section-title">Iscrizioni Aperte</h2>
      <p class="section-content">
        Unisciti alla community di ARKO e trasforma il tuo futuro con un metodo di apprendimento innovativo.
      </p>
      <a href="#contatti" class="btn">Richiedi Info</a>
    </section>

    <section id="contatti">
      <h2 class="section-title">Contatti</h2>
      <div class="section-content">
        <p>Email: <a href="mailto:info@arko.edu">info@arko.edu</a></p>
        <p>Tel: +39 0123 456789</p>
      </div>
    </section>
  </main>

  <footer>
    <div class="ticker">
      Progetto realizzato per FIN 4 TEEN in collaborazione con Sellalab e WeDo Academy da Alessandro, Ettore, Luigi, Francesco
    </div>
  </footer>

  <script>
    const toggleBtn = document.getElementById('toggleMode');
    toggleBtn.addEventListener('click', () => document.body.classList.toggle('dark'));

    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, { threshold: 0.15 });

    document.querySelectorAll('section').forEach(section => observer.observe(section));
  </script>
</body>
</html>