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

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

Referenze

requiredRende obbligatorio un campo di input
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
methodDetermina il metodo di invio dei dati di un form al server
<th>Definisce una cella di intestazione di una tabella HTML.
multipart/form-dataCodifica dei caratteri di un form
acceptDefinisce e filtra il formato dei file per il tag <input type=file>

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

5/10/24 es. 7 -parole ripetute

Esercizio fatto benissimo

sito_donne_afghane

Sports Dashboard 2024

WOO (CHRONO)(Black, Yellow)

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>