ArteFORMA — Architectural Digita by @Darkness977 - Codewith.it

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

References

disabledImpedisce la modifica di un input
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<pre>Indica una parte di testo preformattato
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
Inserisce un commento nel codice
<title>Definisce il titolo della pagina web.

Users

Log in to search for users

Explore

Find inspiration

Anita Angiolini

Questionario Serie A

Congettura di Collatz

Portfolio | DFD Design

Business Website

VERDERAME | Serra e Orto Botanico

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>