ArteFORMA — Architectural Digita by @Darkness977 - Codewith.it

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

References

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<h3>Titolo di intestazione di terzo livello
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
selectedPre-seleziona un elemento di input
<li>Inserisce voci all'interno di una lista
animationDefinisce i parametri dell'animazione di un elemento o selettore

Users

Log in to search for users

Explore

Find inspiration

esercitazione n1

esercitazione 2

Form di Registrazione

Tabella con ricerca

Italiano-Cinema [Bacheca]

ximena sanchez JavaScript animati

Refresh page script

inserimento immagini in un testo

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="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>