<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- - primary meta tags --> <title>603 The Coworking Space</title> <meta name="title" content="603 The Coworking Space" /> <!-- - favicon --> <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png" /> <link rel="manifest" href="./assets/favicon/site.webmanifest" /> <!-- - google font link --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <!-- - custom css link --> <link rel="stylesheet" href="./assets/css/styles.css" /> <!-- - preload images --> <link rel="preload" as="image" href="./assets/images/sunmill-loc_batcheditor_fotor (1).avif" /> <!-- <link rel="preload" as="image" href="./assets/images/sunshine-loc.png"> <link rel="preload" as="image" href="./assets/images/heroLocation.png"> --> </head> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Forum&display=swap" rel="stylesheet" /> <body id="top"> <!-- - #PRELOADER --> <div class="preload" data-preaload> <div class="circle"></div> <p class="text">603</p> </div> <!-- - #TOP BAR --> <div class="topbar"> <div class="container"> <address class="topbar-item"> <div class="icon"> <ion-icon name="location-outline" aria-hidden="true"></ion-icon> </div> <span class="span"> Makhija Arcade, 35th Rd, Khar, Khar West, Mumbai, Maharashtra 400052 </span> </address> <div class="separator"></div> <div class="topbar-item item-2"> <div class="icon"> <ion-icon name="time-outline" aria-hidden="true"></ion-icon> </div> <span class="span">Daily : 8.00 am to 10.00 pm</span> </div> <a href="tel:+11234567890" class="topbar-item link"> <div class="icon"> <ion-icon name="call-outline" aria-hidden="true"></ion-icon> </div> <span class="span"> +91 9136036603</span> </a> <div class="separator"></div> <a href="mailto: sales@603thecoworkingspace.com" class="topbar-item link" > <div class="icon"> <ion-icon name="mail-outline" aria-hidden="true"></ion-icon> </div> <span class="span"> sales@603thecoworkingspace.com</span> </a> </div> </div> <!-- - #HEADER --> <header class="header" data-header> <div class="container"> <a href="index.html#" class="logo"> <img src="./assets/images/603logo (1).avif" width="160" height="50" alt="Grilli - Home" /> </a> <nav class="navbar" data-navbar> <button class="close-btn scale-up" aria-label="close menu" data-nav-toggler > <ion-icon name="close-outline" aria-hidden="true"></ion-icon> </button> <a href="index.html#" class="logo"> <img src="./assets/images/603logo (1).avif" width="160" height="50" alt="Grilli - Home" /> </a> <ul class="navbar-list"> <li class="navbar-item"> <a href="index.html#home" class="navbar-link hover-underline active" > <div class="separator"></div> <span class="span">Home</span> </a> </li> <li class="navbar-item"> <a href="blogpost4.html" class="navbar-link hover-underline"> <div class="separator"></div> <span class="span">Spaces</span> </a> </li> <li class="navbar-item"> <a href="about.html" class="navbar-link hover-underline"> <div class="separator"></div> <span class="span">About Us</span> </a> </li> <li class="navbar-item"> <a href="index.html#images" class="navbar-link hover-underline"> <div class="separator"></div> <span class="span">Images</span> </a> </li> <li class="navbar-item"> <a href="blogs.html" class="navbar-link hover-underline"> <div class="separator"></div> <span class="span">Blogs</span> </a> </li> <li class="navbar-item"> <a href="#" class="navbar-link hover-underline"> <div class="separator"></div> <span class="span">Contact</span> </a> </li> </ul> <div class="text-center"> <p class="headline-1 navbar-title">Visit Us</p> <address class="body-4"> Restaurant St, Delicious City, <br /> London 9578, UK </address> <p class="body-4 navbar-text">Open: 9.30 am - 2.30pm</p> <a href="mailto:booking@grilli.com" class="body-4 sidebar-link" >booking@grilli.com</a > <div class="separator"></div> <p class="contact-label">Booking Request</p> <a href="tel:+88123123456" class="body-1 contact-number hover-underline" > +88-123-123456 </a> </div> </nav> <a href="indexLayout.html" class="btn btn-secondary scale-up"> <span class="text text-1">Make Your Space</span> <span class="text text-2" aria-hidden="true">Make Your Space</span> </a> <button class="nav-open-btn scale-up" aria-label="open menu" data-nav-toggler > <span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span> </button> </div> </header> <main> <!-- GET IN TOUCH SECTION --> <section class="hero text-center space-section"> <div class="contact-container"> <form action="https://api.web3forms.com/submit" method="POST" class="contact-left"> <div class="contact-left-title"> <h2>Get in Touch</h2> <hr> </div> <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"> <input type="text" name="name" placeholder="Your Name" class="contact-inputs" required> <input type="email" name="email" placeholder="Your Email" class="contact-inputs" required> <textarea name="message" placeholder="Your Message" class="contact-inputs" required></textarea> <button type="submit" class="btn btn-secondary scale-up"> <span class="text text-1">submit</span> <span class="text text-2" aria-hidden="true">submit</span> </button> </form> <div class="contact-right"> <img src="assets/main3.png" alt=""> </div> </div> </section> <style> /*Contact Page*/ .contact-container{ height: 100vh; display: flex; align-items: center; justify-content: space-evenly; } .contact-left{ display: flex; flex-direction: column; align-items: start; gap: 20px; } .contact-left-title h2{ font-family: 'Forum', cursive; font-size: 5rem; margin-bottom: 5px; } .contact-left-title hr{ border: none; width: 120px; height: 5px; background-color: rgb(247, 177, 14); border-radius: 5px; margin-bottom: 20px; } .contact-inputs { width: 400px; height: 50px; border: 2px solid rgb(228, 197, 144); padding-left: 20px; font-weight: 500; color: #666666; position: relative; z-index: 10; } .contact-left textarea{ height: 140px; padding-top: 15px; } .contact-inputs:focus{ border: 2px solid rgb(247, 177, 14); } .contact-inputs::placeholder{ color: #a9a9a9a9; } .contact-left button img{ height: 15px; } .contact-right img{ width: 500px; } @media (max-width:800px) { .contact-inputs{ width: 80vw; } .contact-right{ display: none; } } /*-----------------------------------*\ #FOOTER \*-----------------------------------*/ .footer-top { margin-block-end: 70px; } .footer-brand { position: relative; padding: 50px 40px; background: var(--black) url("../images/footer-form-bg.png"); background-position: center top; background-repeat: repeat; } .footer-brand::before, .footer-brand::after { top: 0; height: 100%; background-image: url("../images/footer-form-pattern.svg"); } .footer-brand::before { left: 0; } .footer-brand::after { right: 0; } .footer-brand .logo { max-width: max-content; margin-inline: auto; margin-block-end: 40px; } .footer-brand :is(.body-4, .label-1) { color: var(--quick-silver); line-height: var(--lineHeight-3); } .footer-brand .contact-link { margin-block: 6px; transition: var(--transition-1); } .footer-brand .contact-link:is(:hover, :focus-visible) { color: var(--gold-crayola); } .footer-brand .wrapper { display: flex; justify-content: center; gap: 2px; margin-block: 40px 25px; } .footer-brand .separator { animation: rotate360 15s linear infinite; } .footer-brand .label-1 { margin-block-end: 30px; } .footer-brand .label-1 .span { display: inline; color: var(--white); } .footer-brand .icon-wrapper .input-field { cursor: text; } .footer-brand .btn { min-width: 100%; } .footer-list { display: grid; gap: 20px; background-color: var(--black-alpha-80); } .footer-list-left{ padding: 15px; margin-left: 2rem; } .footer-list-right{ margin-right: 2rem; padding: 20px 10px; } .footer-link { color: #fff; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--letterSpacing-4); margin-inline: auto; transition: var(--transition-1); display: flex; align-items: center; } .footer-link ion-icon { margin-right: 8px; font-size: 16px } .footer-link i { margin-right: 8px; font-size: 14px } .footer-link:is(:hover, :focus-visible) { color: var(--gold-crayola); } .footer-bottom{ margin-bottom: -10rem; } .copyright { color: var(--quick-silver); background-color: var(--black-alpha-80); text-align: center; justify-content: center; height: 50px; padding-top: 10px; line-height: var(--lineHeight-3); margin: 0; } .copyright .link { display: inline; color: var(--gold-crayola); text-decoration: underline; } .space-section { background-image: linear-gradient( to right, rgba(247, 177, 14, 0.1) 1px, transparent 1px ), linear-gradient( to bottom, rgba(247, 177, 14, 0.1) 1px, transparent 1px ); background-size: 120px 120px; } .space-container { display: grid; padding-bottom: 15rem; } .space-container { grid-template-columns: 1fr; } @media (min-width: 600px) { .space-container { grid-template-columns: repeat(1, 1fr); width: 95vw; } } @media (min-width: 900px) { .space-container { grid-template-columns: repeat(1, 1fr); width: 95vw; } } @media (min-width: 1200px) { .space-container { grid-template-columns: repeat(2, 1fr); padding-bottom: 0; width: 88vw; } } .space-canvas-div { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 4em; } .space-canvas { width: 100%; height: auto; } .space-canvas-border-div { position: absolute; height: 100%; aspect-ratio: 1; border: 0.5em solid hsl(42, 94%, 51%); background-image: url("assets/images/footer-form-bg.png"); border-radius: 20% 10% 20% 10%; animation: rotate360 linear 10s infinite; z-index: -1; } .space-canvas-shadow { position: absolute; width: 100%; height: auto; top: 2em; left: 1em; z-index: -1; filter: grayscale(100%) brightness(50%) contrast(200%); } .space-description-div { display: flex; flex-direction: column; justify-content: space-around; align-items: center; min-height: 100%; box-sizing: content-box; border: 3px double #f7b10e; } .space-description-heading { font-size: 3.5rem; line-height: 1.25em; display: flex; justify-content: center; align-items: center; padding: 2em; font-weight: 900; color: hsl(38, 61%, 55%); text-shadow: 1px 0px 0px hsl(38, 61%, 50%), 4px 0px 0px hsl(38, 61%, 45%), 3px 0px 0px hsl(38, 61%, 40%), 5px 0px 0px hsl(38, 61%, 35%), 5px 0px 0px hsl(38, 61%, 30%), 6px 0px 0px hsl(38, 61%, 25%); background-image: linear-gradient( to bottom, rgb(54, 54, 54), rgba(54, 54, 54, 0.8), transparent ); background-size: cover; } .space-description-overlay { display: flex; justify-content: center; align-items: center; height: 100%; background-image: linear-gradient( to top, rgb(54, 54, 54), rgba(54, 54, 54, 0.8), rgba(54, 54, 54, 0.6), rgba(54, 54, 54, 0.4), rgba(54, 54, 54, 0.2), transparent ), url("assets/images/footer-form-bg.png"); } .space-description-div { background-position: center; background-repeat: no-repeat; background-size: cover; } .space-description { line-height: normal; padding-bottom: 2em; } .card-container { display: grid; } .card-container { grid-template-columns: 1fr; } @media (min-width: 600px) { .card-container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .card-container { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .card-container { grid-template-columns: repeat(4, 1fr); } } .philosophy-section { background-color: #2e3033; position: relative; display: flex; justify-content: center; align-items: center; } .philosophy-container { width: 95vw; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; } .philosophy-heading { font-size: 3em; font-weight: bold; color: hsl(38, 61%, 55%); text-shadow: 1px 0px 0px hsl(38, 61%, 50%), 4px 0px 0px hsl(38, 61%, 45%), 3px 0px 0px hsl(38, 61%, 40%), 5px 0px 0px hsl(38, 61%, 35%), 5px 0px 0px hsl(38, 61%, 30%), 6px 0px 0px hsl(38, 61%, 25%); line-height: 1.25em; display: flex; justify-content: center; align-items: center; } .curve-top { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .curve-top svg { position: relative; display: block; width: calc(100% + 1.3px); height: 200px; transform: rotateY(180deg); } .curve-top .shape-fill { fill: #161718; } .card { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: transparent; height: 50vh; } .card-heading { color: hsl(38, 61%, 55%); font-size: 2.5rem; font-weight: bold; } .curve-bottom { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); z-index: -1; } .curve-bottom svg { position: relative; display: block; width: calc(100% + 1.3px); height: 200px; transform: rotateY(180deg); } .curve-bottom .shape-fill { fill: #212121; } #top{ height: auto; } </style> <footer class="footer section has-bg-image text-center fade-in" style="background-image: url('./assets/images/fae955e3-de29-4d6b-a41a-85563f86a931.avif')"> <div class="container"> <div class="footer-top grid-list"> <div class="footer-brand has-before has-after"> <a href="#" class="logo"> <!-- <img src="./assets/images/603logo (1).avif" width="160" height="50" loading="lazy" alt="grilli home"> --> <img src="https://abhiram.sirv.com/609%20Workved/assets/603logo%20(1).avif?format=webp" width="160" height="50" loading="lazy" alt="grilli home"> </a> <address class="body-4"> Makhija Arcade, 35th Rd, Khar, Khar West, Mumbai, Maharashtra 400052 </address> <a href="mailto:booking@grilli.com" class="body-4 contact-link">booking@grilli.com</a> <a href="tel:+88123123456" class="body-4 contact-link">Booking Request : +88-123-123456</a> <p class="body-4"> Open : 09:00 am - 01:00 pm </p> <div class="wrapper"> <div class="separator"></div> <div class="separator"></div> <div class="separator"></div> </div> <p class="title-1">Get News & Offers</p> <p class="label-1"> Subscribe us & Get <span class="span">25% Off.</span> </p> <form action="" class="input-wrapper"> <div class="icon-wrapper"> <ion-icon name="mail-outline" aria-hidden="true"></ion-icon> <input type="email" name="email_address" placeholder="Your email" autocomplete="off" class="input-field"> </div> <button type="submit" class="btn btn-secondary scale-up"> <span class="text text-1">Subscribe</span> <span class="text text-2" aria-hidden="true">Subscribe</span> </button> </form> </div> <head> <!-- Include Ionic Icons CDN --> <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@6.0.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@6.0.0/dist/ionicons/ionicons.js"></script> </head> <ul class="footer-list"> <!-- Home Link with Icon --> <li> <a href="#" class="label-2 footer-link hover-underline"> <ion-icon name="home-outline"></ion-icon> Home </a> </li> <!-- Contact Link with Icon --> <li> <a href="#" class="label-2 footer-link hover-underline"> <ion-icon name="call-outline"></ion-icon> Contact </a> </li> </ul> <ul class="footer-list"> <!-- Facebook Link with Icon --> <li> <a href="#" class="label-2 footer-link hover-underline"> <ion-icon name="logo-facebook"></ion-icon> Facebook </a> </li> <!-- Instagram Link with Icon --> <li> <a href="#" class="label-2 footer-link hover-underline"> <ion-icon name="logo-instagram"></ion-icon> Instagram </a> </li> <!-- Twitter Link with Icon --> <li> <a href="#" class="label-2 footer-link hover-underline"> <i class="fa-brands fa-twitter"></i> Twitter </a> </li> <!-- Youtube Link with Icon --> <li> <a href="#" class="label-2 footer-link hover-underline"> <ion-icon name="logo-youtube"></ion-icon>Youtube </a> </li> <!-- Google Map Link with Icon --> <li> <a href="#" class="label-2 footer-link hover-underline"> <ion-icon name="location-outline"></ion-icon> Google Map </a> </li> </ul> </div> <div class="footer-bottom"> <p class="copyright"> © 2024 . All Rights Reserved | Crafted by <a href="603thecoworkingspace.com" target="_blank" class="link">603 The Coworking Space</a> </p> </div> </div> </footer> </main> <!-- - #BACK TO TOP --> <a href="#top" class="back-top-btn active" aria-label="back to top" data-back-top-btn > <ion-icon name="chevron-up" aria-hidden="true"></ion-icon> </a> <!-- - custom js link --> <script src="./assets/js/script.js"></script> <!-- - ionicon link --> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" ></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js" ></script> </body> </html>