Edit file File name : index.html Content :<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Home page</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> </head> <body> <header class="header header--animation"> <div class="header__fader js-menu-close"></div> <div class="header__container container"> <div class="header__logo"> <a href="#"> <div class="header__logo-img"> <img src="./images/logo.svg" alt="logo"> </div> <div class="header__logo-animation"> <div class="cube-box"> <div class="cube"> <div class="header__logo-front"> <h6>slick</h6> </div> <div class="header__logo-top"> <h6>scroll up</h6> </div> </div> </div> </div> </a> </div> <nav class="header__nav"> <div class="header__nav-close js-menu-close"> <button></button> </div> <ul class="header__menu"> <li> <a href="#services">Services</a> </li> <li> <a href="#works">Works</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#approuch">Approach</a> </li> <li> <a href="#team">Team</a> </li> </ul> <div class="header__btn"> <a href="#fixed-form" class="btn btn--purple open-touch">Get in touch</a> </div> </nav> <div class="header__btns"> <div class="header__btn-for-mob"> <button class="btn btn--purple open-touch">Get in touch</button> </div> <div class="header__burger burger js-menu-open"> <div class="burger__line"></div> <div class="burger__line"></div> <div class="burger__line"></div> </div> </div> </div> </header> <main> <section class="hero hero--animation"> <div class="hero__imgs"> <div class="hero__back-img"> <img src="./images/hero-icon.svg" alt="img"> </div> <div class="hero__front-img"> <img src="./assets/img/hero/home.png" alt="img"> </div> </div> <div class="hero__container container"> <div class="hero__text"> <h1>We make digital<br> slick products all around the world <img src="./images/racket.png" alt="img"> <img src="./images/stars.png" alt="img"> </h1> <p>We will choose a designer who will guide the whole design process in your company </p> <div class="hero__btns"> <a href="#" class=" btn btn--purple">Read Details</a> <div class="hero__video"> <img src="./images/video.svg" alt="img"> Watch Showreel <div class="hero__video-title"> coming soon </div> </div> </div> </div> </div> </section> <section class="logos"> <div class="logos__container container"> <div class="logos__flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="logos__img"> <a href="#" target="_blank"> <img class="lazy" data-src="./images/cocacola.svg" alt="img"></a> </div> <div class="logos__img"> <a href="#" target="_blank"> <img class="lazy" data-src="./images/yoreevo.svg" alt="img"></a> </div> <div class="logos__img"> <a href="#" target="_blank"> <img class="lazy" data-src="./images/bank.png" alt="img"></a> </div> <div class="logos__img"> <a href="#" target="_blank"> <img class="lazy" data-src="./images/every.svg" alt="img"></a> </div> <div class="logos__img"> <a href="#" target="_blank"> <img class="lazy" data-src="./images/coast.svg" alt="img"></a> </div> <div class="logos__img"> <a href="#" target="_blank"> <img class="lazy" data-src="./images/motocho.svg" alt="img"></a> </div> <div class="logos__img"> <a href="#" target="_blank"> <img class="lazy" data-src="./images/economies.png" alt="img"></a> </div> </div> </div> </section> <section class="address-section"> <div class="address-section__container container"> <div class="address-section__back"> <img class="lazy" data-src="./images/back-address.png" alt="img"> </div> <div class="address-section__title" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h2>We are Everywhere</h2> <p>Look behind you</p> </div> <div class="address-section__address" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="#"> <div class="address-section__img"> <img class="lazy" data-src="./images//mark.png" alt="img"> </div> <div class="address-section__content"> <h3>San Jose</h3> <p>CA, USA</p> </div> </a> <a href="#"> <div class="address-section__img"> <img class="lazy" data-src="./images//mark.png" alt="img"> </div> <div class="address-section__content"> <h3>Bonn</h3> <p>Germany</p> </div> </a> <a href="#"> <div class="address-section__img"> <img class="lazy" data-src="./images//mark.png" alt="img"> </div> <div class="address-section__content"> <h3>Bonn</h3> <p>Germany</p> </div> </a> </div> </div> </section> <section class="text-and-img"> <div class="text-and-img__container container"> <div class="text-and-img__wrapper" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="#" class="text-and-img__img"> <img class="lazy" data-src="./assets/img/blog/blog1.jpg" alt="img"> </a> <div class="text-and-img__text"> <p> Case study</p> <h3>Mobile & Web app for pipeline monitoring service </h3> <a href="#" class="btn btn--black-little btn--black">Read Details</a> </div> </div> </div> </section> <section class="text-and-img text-and-img--reversed"> <div class="text-and-img__container container"> <div class="text-and-img__wrapper" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="#" class="text-and-img__img"> <img class="lazy" data-src="./assets/img/blog/blog2.jpg" alt="img"> </a> <div class="text-and-img__text"> <p>Case study</p> <h3>Yoreevo - Real Estate Mobile & Web </h3> <a href="#" class="btn btn--black-little btn--black">Read Details</a> </div> </div> </div> </section> <section class="paralax-news" id="works"> <div class="paralax-trigger"></div> <div class="paralax-news__container container"> <div class="paralax-news__header" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="paralax-news__title"> <h2>Latest stories, insights and Dribbble shots from us <div class="paralax-news__finger"> <img class="lazy" data-src="./images/finger.png" alt="img"> </div> </h2> </div> <ul class="paralax-news__social"> <li><a href="#"><img class="lazy" data-src="./images/ball.svg" alt="img"></a></li> <li><a href="#"><img class="lazy" data-src="./images/be.svg" alt="img"></a></li> <li><a href="#"><img class="lazy" data-src="./images/instagram.svg" alt="img"></a></li> <li><a href="#"><img class="lazy" data-src="./images/in.svg" alt="img"></a></li> </ul> </div> <div class="paralax-news__wrapper" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="paralax-news__paralax" id="news"> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img.png" alt="img"> </div> <p>Real Estate Platform Landing on <span>Dribbble</span></p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img1.png" alt="img"> </div> <p>Paysub Onboarding on <span>Behance</span></p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img2.png" alt="img"> </div> <p>Stock Trading Concept App on <span>Dribbble</span></p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img3.png" alt="img"> </div> <p>Stock Trading Concept App on <span>Dribbble</span></p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img4.png" alt="img"> </div> <p>Real Estate Platform Landing on <span>Dribbble</span> </p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img.png" alt="img"> </div> <p>Real Estate Platform Landing on <span>Dribbble</span></p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img1.png" alt="img"> </div> <p>Paysub Onboarding on <span>Behance</span></p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img2.png" alt="img"> </div> <p>Stock Trading Concept App on <span>Dribbble</span></p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img3.png" alt="img"> </div> <p>Stock Trading Concept App on <span>Dribbble</span></p> </a> <a href="#" class="paralax-news__item"> <div class="paralax-news__img"> <img class="lazy" data-src="./images/img4.png" alt="img"> </div> <p>Real Estate Platform Landing on <span>Dribbble</span> </p> </a> </div> </div> <ul class="paralax-news__social paralax-news__social--mob" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <li><a href="#"><img class="lazy" data-src="./images/ball.svg" alt="img"></a></li> <li><a href="#"><img class="lazy" data-src="./images/be.svg" alt="img"></a></li> <li><a href="#"><img class="lazy" data-src="./images/instagram.svg" alt="img"></a></li> <li><a href="#"><img class="lazy" data-src="./images/in.svg" alt="img"></a></li> </ul> </div> </section> <section class="title-with-animation-items" id="services"> <div class="title-with-animation-items__container container"> <div class="title-with-animation-items__back"> <img class="lazy" data-src="./images/slick.svg" alt="img" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"> </div> <div class="title-with-animation-items__title"> <h2 data-aos="fade-up-zoom" data-aos-duration="1000" data-aos-delay="400">how we make it Slick?</h2> </div> <div class="title-with-animation-items__items" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"> <div class="title-with-animation-items__pin-box title-with-animation-items__pin-box--left"> <div class="title-with-animation-items__parent-anim-box"> <div class="title-with-animation-items__rotate"> <div class="title-with-animation-items__counter-rotate"> <div class="title-with-animation-items__inside"> <div class="title-with-animation-items__pin" style="background-color: rgb(255, 158, 51); " data-depth-x="-1.2" data-depth-y="-0.5">Motion Designer</div> </div> </div> </div> </div> </div> <div class="title-with-animation-items__pin-box title-with-animation-items__pin-box--right "> <div class="title-with-animation-items__parent-anim-box"> <div class="title-with-animation-items__rotate"> <div class="title-with-animation-items__counter-rotate"> <div class="title-with-animation-items__inside"> <div class="title-with-animation-items__pin" style="background-color: rgba(232, 70, 70, 0.8);" data-depth-x="-1.2" data-depth-y="-0.5">UI Designer</div> </div> </div> </div> </div> </div> <div class="title-with-animation-items__pin-box title-with-animation-items__pin-box--right"> <div class="title-with-animation-items__parent-anim-box"> <div class="title-with-animation-items__rotate"> <div class="title-with-animation-items__counter-rotate"> <div class="title-with-animation-items__inside"> <div class="title-with-animation-items__pin" style="background-color: rgba(108, 86, 249, 0.8); " data-depth-x="-1.2" data-depth-y="-0.5">UX Designer</div> </div> </div> </div> </div> </div> <div class="title-with-animation-items__pin-box title-with-animation-items__pin-box--left"> <div class="title-with-animation-items__parent-anim-box"> <div class="title-with-animation-items__rotate"> <div class="title-with-animation-items__counter-rotate"> <div class="title-with-animation-items__inside"> <div class="title-with-animation-items__pin" style="background-color: rgba(87, 182, 54, 0.8); " data-depth-x="-1.2" data-depth-y="-0.5">Researcher</div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="accordion"> <div class="accordion1"> </div> <div class="accordion__container container"> <div class="accordion__sticky-wrapper"> <div class="accordion__sticky" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h2>Here are all the competencies we have got inside our team </h2> <div class="accordion__animate-arrow"> <svg width="103" height="107" viewBox="0 0 103 107" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="services-arrow-path-1" id="arrow" d="M14.826 3.3137C30.2637 1.45035 65.3846 12.7281 73.5767 31.598C83.8169 55.1853 63.0755 74.886 51.8815 65.0789C40.6876 55.2719 73.6844 29.8769 83.3363 102.453" stroke="#18161E" stroke-width="3" style="stroke-dasharray: 198.337px; stroke-dashoffset: 198.337px;"></path> <path id="arrow1" class="services-arrow-path-2" d="M90.162 97.0736L82.9856 104.61L75.8704 97.8348" stroke="#18161E" stroke-width="3" style="stroke-dasharray: 20.2316px; stroke-dashoffset: 20.2316px;"></path> </svg> </div> </div> </div> <div class="accordion__accordion"> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="accordion__header"> <div class="accordion__title"> <img class="lazy" data-src="./images/paint.png" alt="img"> <h4>Visual Branding</h4> </div> <div class="accordion__arrow"> <img class="lazy" data-src="./images/accordion-svg.svg" alt="img"> </div> </div> <div class="accordion__content"> In a modern world, a strong visual identity defines your product success. Branding enables companies to maintain consistency across all the customer touchpoints and remain unique. </div> </div> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="accordion__header"> <div class="accordion__title"> <img class="lazy" data-src="./images/loop.png" alt="img"> <h4>UX Research</h4> </div> <div class="accordion__arrow"> <img class="lazy" data-src="./images/accordion-svg.svg" alt="img"> </div> </div> <div class="accordion__content"> We use various research methodologies to maintain close collaboration with users. Process Agility allows us to adopt the product accordingly and make sure we create products that customers love. </div> </div> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="accordion__header"> <div class="accordion__title"> <img class="lazy" data-src="./images/build.png" alt="img"> <h4>UX Design</h4> </div> <div class="accordion__arrow"> <img class="lazy" data-src="./images/accordion-svg.svg" alt="img"> </div> </div> <div class="accordion__content"> Slick will make sure user's interaction with a company's products is smooth and enjoyable. We don’t hesitate to analyze products in depth creating relevant experiences for your audience. </div> </div> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="accordion__header"> <div class="accordion__title"> <img class="lazy" data-src="./images/ui.png" alt="img"> <h4>UI Design</h4> </div> <div class="accordion__arrow"> <img class="lazy" data-src="./images/accordion-svg.svg" alt="img"> </div> </div> <div class="accordion__content"> It’s hard to be simple. Slick ensures design to be minimalistically gorgeous and fully reflect the brand personality. </div> </div> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="accordion__header"> <div class="accordion__title"> <img class="lazy" data-src="./images/web.png" alt="img"> <h4>Web Design</h4> </div> <div class="accordion__arrow"> <img class="lazy" data-src="./images/accordion-svg.svg" alt="img"> </div> </div> <div class="accordion__content"> Frontend team understands your business objectives and creates top-notch solutions that meet your needs. Our developers rarely say no to design teams’ ambitious demands. </div> </div> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="accordion__header"> <div class="accordion__title"> <img class="lazy" data-src="./images/audit.png" alt="img"> <h4>Design Audit</h4> </div> <div class="accordion__arrow"> <img class="lazy" data-src="./images/accordion-svg.svg" alt="img"> </div> </div> <div class="accordion__content"> Expert review helps to pinpoint less-than-perfect areas of a digital product. We’ll come up not only with the problems that cause complexities to the customer, but come up with concrete solutions and plan to solve them. </div> </div> </div> </div> </section> <section class="text-section"> <div class="text-section__container container" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="text-section__title"> <h2>Our Approach making the product <img class="lazy" data-src="./images/fire.png" alt="img"> </h2> </div> <div class="text-section__text"> <p> Our partnership means close collaboration with you and your teams, experiencing multiple iterations and taking you on that journey. </p> <p> Nothing comes from nothing. Research phases and design thinking processes are what stand behind our trendy and functional works. That’s how we reach a balance between a beautiful, smart design and functional development. </p> </div> </div> </section> <section class="group-pictures" id="approuch"> <div class="text-trigger"></div> <div class="group-pictures__text"> <img class="lazy" data-src="./images/process.svg" alt="img" id="text"> </div> <div class="group-pictures__container container"> <div class="group-pictures__flex" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="group-pictures__img" id="img" style="transform: translate(0px, 50px);"> <img class="lazy" data-src="./images/process1.png" alt="img"> </div> <div class="group-pictures__img" id="img31" style="transform: translate(0px, 150px);"> <img class="lazy" data-src="./images/process2.png" alt="img"> </div> </div> <div class="group-pictures__absolute"> <div class="group-pictures__item" id="img1"> <img class="lazy" data-src="./assets/img/icons/racket.png" alt="img"> </div> <div class="group-pictures__item" id="img2"> <img class="lazy" data-src="./images/ui.png" alt="img"> </div> <div class="group-pictures__item" id="img3"> <img class="lazy" data-src="./images/web.png" alt="img"> </div> <div class="group-pictures__item" id="img4"> <img class="lazy" data-src="./images/finger.png" alt="img"> </div> </div> </div> <div class="group-pictures__arrow" id="img5" style="transform: translate(0px, 100px);"> <svg width="103" height="107" viewBox="0 0 103 107" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="services-arrow-path-1" id="arrow12" d="M14.826 3.3137C30.2637 1.45035 65.3846 12.7281 73.5767 31.598C83.8169 55.1853 63.0755 74.886 51.8815 65.0789C40.6876 55.2719 73.6844 29.8769 83.3363 102.453" stroke="#18161E" stroke-width="3" style="stroke-dasharray: 198.337px; stroke-dashoffset: 198.337px;"></path> <path id="arrow11" class="services-arrow-path-2" d="M90.162 97.0736L82.9856 104.61L75.8704 97.8348" stroke="#18161E" stroke-width="3" style="stroke-dasharray: 20.2316px; stroke-dashoffset: 20.2316px;"></path> </svg> </div> </section> <section class="column-text"> <div class="column-text__container container"> <div class="column-text__text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <p> Our team uses best practices of the UX field: <br> user-centric solutions, data-driven decisions with small deliverables, and increments to ensure effective feedback loops from you and your customers. </p> <p> Our mission isn’t just to design, we feel the responsibility to transform the organizations’ whole design process and raise competency. We love what we do: commit to your products and teams. </p> </div> </div> </section> <section class="animation-mouse" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="animation-mouse__container container" style="--x:0.249038; --y:-0.0225367;"> <div class="animation-mouse__img"> <img class="lazy" data-src="./images/animation-mouse.jpg" alt="img"> </div> <div class="animation-mouse__absolute-items"> <div class="animation-mouse__item" style="--x:0.249038; --y:-0.0225367;"> <img src="./images/purple-back.png" alt="img"> <span>UX Designer</span> </div> <div class="animation-mouse__item" style="--x:0.249038; --y:-0.0225367;"> <img src="./images/orange-back.png" alt="img"> <span>Motion Designer</span> </div> <div class="animation-mouse__item" style="--x:0.249038; --y:-0.0225367;"> <img src="./images/red-back.png" alt="img"> <span>UI Designer</span> </div> </div> </div> </section> <section class="accordion" id="testimonials"> <div class="accordion__container container"> <div class="accordion__sticky-wrapper"> <div class="accordion__sticky" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h2>Here are few <br> testimonials we <br> have got </h2> </div> </div> <div class="accordion__reviews"> <div class="review" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="review__author"> <div class="review__icon"> <img class="lazy" data-src="./images/rajeev.png" alt="img"> </div> <div class="review__about"> <div class="review__name"> Rajeev Behera </div> <div class="review__position"> CEO every.io </div> </div> </div> <div class="review__content"> <q> Slick understands the needs of our business and is able to create a process that fits our needs, while adjusting on the fly. Also, their designers are top notch </q> </div> </div> <div class="review" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"> <div class="review__author"> <div class="review__icon"> <img class="lazy" data-src="./images/nana.png" alt="img"> </div> <div class="review__about"> <div class="review__name"> Nana Keburia </div> <div class="review__position"> CEO Unicard </div> </div> </div> <div class="review__content"> <q> I have worked with Slick Studio for 2 years. It was a pleasure to work with them developing an MFA for Payunicard . They've got a vision of UE trends, and are responsive to the requirements of the Customer. All the team is very open to communication and reliable in business relations. My best recommendations and wishes of success to Slick </q> </div> </div> <div class="review" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400"> <div class="review__author"> <div class="review__icon"> <img class="lazy" data-src="./images/leon.png" alt="img"> </div> <div class="review__about"> <div class="review__name"> Leon Goldfeld </div> <div class="review__position"> CEO & Founder @Yoreevo </div> </div> </div> <div class="review__content"> <q> Slicks’ creativity and design skills are impressive. They have got a great ability of ideating solutions to UX problems. The users of my product are very happy with the improvement in syling, colors, and design. I wouldn’t hesitate to use Slick to help design any additional products.” </q> </div> </div> </div> </div> </section> <section class="team-members" id="team"> <div class="team-members__container container"> <div class="team-members__text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="team-members__title"> <h2>Team members</h2> <ul> <li> <a href="#" target="_blank"> <img src="./assets/img/logo/member1.png" alt="img"> </a> </li> <li> <a href="#" target="_blank"> <img src="./assets/img/logo/member2.png" alt="img"> </a> </li> </ul> </div> <div class="team-members__paragraph"> <p> We’re a multi-disciplined team of enthusiast designers, innovators, and strategic digital thinkers. </p> <p> Slick team is like an open-source of talented and competent professionals. Slik crew is an experienced founding team, and open -minded NN/g certified enthusiasts who always think out-of-box. </p> </div> </div> <div class="team-members__team"> <a href="#" class="team-members__member" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="team-members__icon"> <img class="lazy" data-src="./images/Zura.png" alt="img"> </div> <div class="team-members__content"> <h5>Zura <br> Chavchanidze</h5> <p>Co-Founder Design Lead</p> </div> </a> <a href="#" class="team-members__member" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"> <div class="team-members__icon"> <img class="lazy" data-src="./images/temur.png" alt="img"> </div> <div class="team-members__content"> <h5>Temur <br> Mindiashvili</h5> <p>Co-Founder UX Lead</p> </div> </a> <a href="#" class="team-members__member" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"> <div class="team-members__icon"> <img class="lazy" data-src="./images/temo.png" alt="img"> </div> <div class="team-members__content"> <h5>Temo<br> Gabechava</h5> <p>PMO</p> </div> </a> <a href="#" class="team-members__member" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400"> <div class="team-members__icon"> <img class="lazy" data-src="./images/mansoor.png" alt="img"> </div> <div class="team-members__content"> <h5>Mansoor<br> Safi</h5> <p>Co-Founder</p> </div> </a> </div> </div> </section> </main> <footer class="footer"> <div class="footer__container container"> <div class="footer__main"> <div class="footer__contact"> <div class="footer__address" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="#"> <img class="lazy" data-src="./images/address.png" alt="img">San Jose, California </a> </div> <h2 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> Let's start something completely new together </h2> <p data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> Drop us a line, and we'll get in touch.<br> We'll see if we're a match and how we can help each other. </p> <div class="footer__references" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <a href="mailto:hi@slick.studio"> <span>Email</span> hi@slick.studio </a> <a href="mailto:hi@slick.studio"> <span>Calendly</span> book a meeting </a> </div> <a href="#" class="btn btn--purple open-touch" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">Get in touch</a> </div> <div class="fixed-form" id="fixed-form"> <div class="fixed-form__wrapper"> <div class="fixed-form__close" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h3>Let's start something <br> completely new together</h3> <button class="close-touch"></button> </div> <div class="fixed-form__form" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <form action="#"> <div class="field fixed-form__form-filed"> <input type="text" placeholder="Name"> </div> <div class="field fixed-form__form-filed"> <input type="email" placeholder="Email"> </div> <div class="field fixed-form__form-filed fixed-form__form-filed--full-width"> <textarea placeholder="Lil about you or your company"></textarea> </div> <div class="fixed-form__form-filed fixed-form__form-filed--full-width"> <p>Est. Budget</p> <div class="fixed-form__radio"> <input type="radio" id="choice1" name="contact" checked> <label for="choice1">$5k - $20k</label> <input type="radio" id="choice2" name="contact"> <label for="choice2">$20k - $50k</label> <input type="radio" id="choice3" name="contact"> <label for="choice3">$50k - $100k</label> <input type="radio" id="choice4" name="contact"> <label for="choice4">$100k+</label> </div> </div> <div class="fixed-form__form-filed fixed-form__form-filed--full-width"> <button class="btn btn--purple">Submit</button> </div> </form> </div> </div> </div> </div> <div class="footer__bottom"> <ul class="footer__social" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <li> <a href="#">Dribbble</a> </li> <li> <a href="#">Behance</a> </li> <li> <a href="#">Insragram</a> </li> <li> <a href="#">Linkedin</a> </li> </ul> <div class="footer__copyright" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <p>All Rights Reserved</p> <p>© Slick studio 2021</p> </div> </div> </div> </footer> <div class="feedback-from"> <div class="feedback-from__container"> <div class="feedback-from__icon"> <img src="./images/tick.svg" alt="img"> </div> <span>Thanks for reaching out</span> <div class="feedback-from__close"><button></button></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script> <script src="js/main.js"></script> </body> </html>Save