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

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

References

<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<tr>Definisce le righe di una tabella (rows)
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<link>Collega il documento corrente con una risorsa esterna
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina

Users

Log in to search for users

Explore

Find inspiration

esercizio 02 pagina complessa

Class Gradebook

Esercio-selettori-di-relazione

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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