ArteFORMA — Architectural Digita by @Darkness977 - Codewith.it

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

References

_selfApre collegamenti ipertestuali nella stessa pagina del browser
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
formSpecifica a quale form appartiene un elemento.
_parentApre collegamenti ipertestuali nell'elemento genitore
multipleConverte in lista a selezione multipla
<html>Tag primario di un documento HTML

Users

Log in to search for users

Explore

Find inspiration

Esercitazione tabelle

5/10/24 es. 8 - conta alfabeto

Prova di programmazione html

esercizio pag. 335

template 2 colonne

TravelEscape - Esplora il Mondo co

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>ArcoFORMA 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 ArcoFORMA</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-1626345722310-7e8b9f74760f?5');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1640121555020-ca363651f306?6');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1722413890116-9b3f20c0dbce?7');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1616418534243-ab757ff8ce3a?9');"></div>     
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1590088810624-f344877dda34?10');"></div>
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1658335274828-11e2d40d4fb5?11');"></div>      
      <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1554793000-245d3a3c2a51?12');"></div> 
       <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1520068071754-06b76876dc84?13');"></div>
       <div class="gallery-item" style="background-image:url('https://images.unsplash.com/photo-1617761141732-d481912af1a9?14');"></div>
      
       
        
      
    </div>
  </section>

  <section id="projects">
    <h2>Signature Projects</h2>
    <p>From executive boardrooms to hospitality hubs, ArcoFORMA’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 ArcoFORMA</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>