ArteFORMA — Architectural Digita by @Darkness977 - Codewith.it

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

Referenze

novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
text/plainDefinisce un metodo di non codifica dei valori di un form
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
langSpecifica la lingua del contenuto di un elemento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Html con 3 img e descrize

esercitazione 7

Esercizi 05/03/2024 es9

Personal Portfolio

GoUp Fitness Il tuo percorso verso

formula1_avanzata.html.

test-wrap-with-grid

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="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ArteFORMA — Architectural Digitalism</title>
  <style>
    /* Reset and Base */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', sans-serif;
      background: #0d0d0f;
      color: #e6e6e8;
      overflow-x: hidden;
    }

    /* Sticky Navigation */
    header {
      position: fixed;
      top: 0;
      width: 100%;
      backdrop-filter: blur(12px);
      background: rgba(10,10,12,0.55);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.2rem 3rem;
      z-index: 1000;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    header .logo {
      font-size: 1.5rem;
      letter-spacing: 0.25rem;
      font-weight: 600;
    }
    header nav a {
      margin-left: 2rem;
      text-decoration: none;
      color: #e6e6e8;
      font-size: 0.95rem;
      transition: opacity 0.3s;
    }
    header nav a:hover { opacity: 0.6; }

    /* Hero */
    .hero {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8rem 3rem 3rem;
      background: linear-gradient(145deg, #0d0d0f, #1d1d22);
      position: relative;
    }
    .hero h1 {
      font-size: 4rem;
      line-height: 1.1;
      max-width: 900px;
    }
    .hero p {
      margin-top: 1.5rem;
      max-width: 600px;
      opacity: 0.75;
      font-size: 1.2rem;
    }
    .btn {
      display: inline-block;
      margin-top: 2rem;
      padding: 0.9rem 2rem;
      border-radius: 999px;
      font-size: 0.95rem;
      cursor: pointer;
      border: 1px solid #fff;
      transition: all 0.3s;
    }
    .btn.dual:hover {
      background: #fff;
      color: #000;
    }
    .parallax {
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      height: 60vh;
      width: 100%;
    }

    /* Mosaic Gallery */
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-auto-rows: 250px;
      gap: 10px;
      padding: 4rem 3rem;
    }
    .gallery-item {
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      border-radius: 16px;
      transition: transform 0.4s, box-shadow 0.4s;
    }
    .gallery-item:hover {
      transform: scale(1.03);
      box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    /* Sections */
    section {
      padding: 6rem 3rem;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    section h2 {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
    }
    section p {
      max-width: 700px;
      opacity: 0.75;
      font-size: 1.1rem;
      line-height: 1.7;
    }

    /* Footer */
    footer {
      padding: 4rem 3rem;
      background: #0b0b0d;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 2rem;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    footer h3 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
    }
    footer a {
      display: block;
      color: #e6e6e8;
      text-decoration: none;
      margin: 0.3rem 0;
      opacity: 0.75;
      transition: opacity 0.3s;
    }
    footer a:hover { opacity: 1; }
    .newsletter input {
      width: 100%;
      padding: 0.8rem;
      border-radius: 8px;
      margin-top: 0.5rem;
      border: none;
    }
    .social-icons {
      margin-top: 1rem;
      display: flex;
      gap: 1rem;
    }
    .social-icons span {
      width: 35px;
      height: 35px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      border: 1px solid #444;
      transition: background 0.3s;
      cursor: pointer;
    }
    .social-icons span:hover {
      background: #fff;
      color: #000;
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">ArteFORMA</div>
    <nav>
      <a href="#concept">Concept</a>
      <a href="#gallery">Galleria</a>
      <a href="#projects">Progetti</a>
      <a href="#contact">Contatti</a>
    </nav>
  </header>

  <section class="hero">
    <h1>Architectural Digitalism<br>for Luxury Intelligent Spaces</h1>
    <p>ArteFORMA creates bespoke smart surfaces that merge material elegance with digital fluidity. Touch‑enabled conference tables, guiding reception desks, and culinary worktops that assist your creativity.</p>
    <button class="btn dual">Explore ArteFORMA</button>
  </section>

  <div class="parallax" style="background-image:url('https://via.placeholder.com/1400x900');"></div>

  <section id="concept">
    <h2>Design Philosophy: Architectural Digitalism</h2>
    <p>We craft ultra‑premium digital surfaces integrated seamlessly into architectural materials. Our vision combines structural purity with interactive intelligence, creating environments where technology feels native, intentional, and emotional.</p>
  </section>

  <section id="gallery">
    <h2>Interactive Mosaic Gallery</h2>
    <div class="gallery">
      <!-- 10 Mosaic Items -->
      <div class="gallery-item" style="background-image:url('https://via.placeholder.com/600x600?1');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1573094860672-718fe04781e6?2');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1516344301847-92e6c9ff876f?3');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1635248249998-8bd8075a93d1?4');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1590088810624-f344877dda34?5');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1743962789636-77bb3f889b7d?6');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1753802025065-e9d71f6c0d95?7');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1616418534243-ab757ff8ce3a?8');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1722413890116-9b3f20c0dbce?9');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1626345722310-7e8b9f74760f?q=80&w=874&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D10');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1617761141732-d481912af1a9?11');"></div>
    </div>
  </section>

  <section id="projects">
    <h2>Signature Projects</h2>
    <p>From executive boardrooms to hospitality hubs, ArteFORMA’s creations redefine interaction by integrating high‑fidelity touch surfaces into refined architectural contexts. Our collaborations with luxury brands deliver bespoke digital environments that inspire, guide, and elevate.</p>
  </section>

  <footer id="contact">
    <div>
      <h3>About ArteFORMA</h3>
      <p>Creators of bespoke smart surfaces blending architecture and digital experience.</p>
      <div class="social-icons">
        <span>F</span>
        <span>I</span>
        <span>L</span>
      </div>
    </div>

    <div>
      <h3>Navigation</h3>
      <a href="#concept">Concept</a>
      <a href="#gallery">Galleria</a>
      <a href="#projects">Progetti</a>
      <a href="#contact">Contatti</a>
    </div>

    <div class="newsletter">
      <h3>Newsletter</h3>
      <input type="email" placeholder="Your email" />
    </div>
  </footer>
</body>
</html>