ArteFORMA — Architectural Digita by @Darkness977 - Codewith.it

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

References

<label>Mostrare un testo di etichetta per un elemento di input.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<h1>Titolo di intestazione di primo livello
<caption>Definisce didascalie all'interno di una tabella
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
<map>Inserisce immagini mappa cliccabili in un documento

Users

Log in to search for users

Explore

Find inspiration

La sicurezza in informati

Supermercato no

Questa è una pagina dimostrativa

informatica 13/10

Heads Or Tails Random Tally 2

Web Design Final

conta vocali con array

Titolo della pagina

informatica 21/10 ii

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>