CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> </head> <body autocomplete="off" class="scrollbar-dark"></body> </html> <meta charset="utf-8"> <title>MUNA | Muthu Nathan B</title> <meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content=""><meta name="keywords" content=""><meta name="author" content="Erilisdesign.com"> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" /> <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="css/ionicons.min.css" rel="stylesheet" type="text/css" /> <link href="css/animate.min.css" rel="stylesheet" type="text/css" /> <link href="css/flexslider.css" rel="stylesheet" type="text/css" /> <link href="css/magnific-popup.css" rel="stylesheet" type="text/css" /> <link href="css/vegas.min.css" rel="stylesheet" type="text/css" /> <link href="css/jquery.mCustomScrollbar.min.css" rel="stylesheet" /> <link href="css/photoswipe/photoswipe.css" rel="stylesheet" /> <link href="css/photoswipe/default-skin/default-skin.css" rel="stylesheet" /> <link href="css/custom.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,300i,400,400i,700,700i" rel="stylesheet" /><script type="text/javascript" src="js/modernizr.js"></script> <link href="images/favicon.ico" rel="shortcut icon" /> <link href="images/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" /> <link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" /> <style type="text/css">#lottie{ background-color:#fff; width:100%; height:100%; display:block; overflow: hidden; transform: translate3d(0,0,0); text-align: center; opacity: 1; } </style> <div id="preloader"> <div id="loading-animation"></div> </div> <div class="main-container"> <header class="main-header header-light header-mobile-light menu-dark menu-mobile-dark"> <div class="header-container"> <div class="header-content"> <div class="header-el"> <div class="topline"></div> <div class="header-block brand-block"> <div class="logo-block"><a class="header-logo load-content" href="#home"><img alt="" class="logo-light" src="images/logo.png" /> <img alt="" class="logo-dark" src="images/logo-dark.png" /> </a></div> <button class="nav-toggle" type="button"></button></div>  <nav class="header-block nav-block header-nav"> <ul class="nav"> <li class="active"><a class="load-content" href="#home">Home</a></li> <li><a class="load-content" href="#about">About me</a></li> <li><a class="load-content" href="#services">Experience</a></li> <li><a class="load-content" href="#recognition">Recognitions</a></li> <li><a class="load-content" href="#portfolio">Portfolio</a></li> <li><a class="load-content" href="#team">Projects</a></li> <li><a class="load-content" href="#contact">Contact</a></li> </ul> </nav> <div class="bottomline"></div> </div> </div> </div> </header> <div class="function-buttons style-light"></div>  <div class="overlay-frame"> <div class="of-top"></div> <div class="of-bottom"></div> <div class="of-right"></div> </div> <div class="ed-homeblock" id="home"> <div class="homeblock-container"> <section class="section fullscreen-element sm-pt-60 sm-pb-100"> <div class="table-container"> <div class="table-content"> <div class="container-fluid"> <div class="row"> <div class="col-lg-11 col-lg-offset-1 col-md-12"> <div class="row vertical-align"> <div class="col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 animated onstart sm-mb-40" data-animation="fadeInUp" data-animation-delay="300"> <div id="anim"></div> <script src="lottie.js"></script><script src="script.js"></script></div> <div class="col-md-6 col-md-offset-1 col-sm-12"> <h4 class="heading-uppercase animated onstart" data-animation="fadeInUp" data-animation-delay="300">Hello! I'm</h4> <h3 class="heading-uppercase animated onstart" data-animation="fadeInUp" data-animation-delay="600"><b>Muthu Nathan</b></h3> <h6 class="lead animated onstart" data-animation="fadeInUp" data-animation-delay="900">Digital product designer, who spent <span class="highlight"> <b>7+ years </b></span>to craft UI/UX for Humans. </h6> <div class="btn-group-alt animated onstart" data-animation="fadeInUp" data-animation-delay="900"><a class="btn btn-shadow icon-right load-content" href="#about">Know More </a></div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div>  <div class="ed-sideblock"> <div class="sideblock-container"> <section class="section" id="about"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3 class="text-center"><b>About Me</b></h3> <div class="divider divider-alt divider-center divider-dark"></div> <p class="lead mb-50 text-center">My life is design, I love it and I surround myself in it every day. </p> <p>For me UI/UX Design should be like Tom & Jerry Cartoon. Its doesn't has regional or language specific content (Minimal), nevertheless it can able to understandable by the different set of age groups (Versatile), and mainly it doesn't become obsolete (Future-Proof)</p> <p>I Believe in Design Knowledge + Tool knowledge which empower the skill</p> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="progress progress-2"><span class="title">UI/UX & IxD </span> <div class="bar background-white"> <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar" role="progressbar" style="width: 0%;"></div> </div> </div> <div class="progress progress-2"><span class="title">Visual Design</span> <div class="bar background-white"> <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar" role="progressbar" style="width: 0%;"></div> </div> </div> <div class="progress progress-2"><span class="title">Interactive Prototypes</span> <div class="bar background-white"> <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar" role="progressbar" style="width: 0%;"></div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="progress progress-2"><span class="title">Design tokens & Design Systems</span> <div class="bar background-white"> <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar" role="progressbar" style="width: 0%;"></div> </div> </div> <div class="progress progress-2"><span class="title">Design Documentation</span> <div class="bar background-white"> <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar" role="progressbar" style="width: 0%;"></div> </div> </div> <div class="progress progress-2 mb-0"><span class="title">Figma, Sketch App, Principle, Adobe XD,PS, AI, AE</span> <div class="bar background-white"> <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar" role="progressbar" style="width: 0%;"></div> </div> </div> </div> </div> </div> </section> <section class="section pb-60" id="services"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h3 class="text-center"><b>Work Experience</b></h3> <div class="divider divider-alt divider-center divider-dark"></div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="icon-box bordered mb-30 text-left"> <div class="icon-box-icon text- text-blue"><a href="https://www.zeta.tech/" target="_blank"><img alt="" class="logo-dark" src="images/logo-zeta2.svg" /></a></div> <h3 class="h4">Sr. UX Designer</h3> <b>Jun 2018 - Present</b><br /> Working for a <span class="highlight"> Unicorn </span> Fintech firm which provides its products to banks and fintechs globally</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="icon-box bordered mb-30 text-left"> <div class="icon-box-icon text- text-blue"> <a href="https://www.nobroker.in/" target="_blank"><img alt="" class="logo-dark" src="images/logo-no.svg" /></a></div> <h3 class="h4">UI Designer</h3> <b>Nov 2017 - Jun 2018</b><br /> Worked for a <span class="highlight"> Unicorn </span>Real estate app which provides platform to search & services for apartments</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="icon-box bordered mb-30 text-left"> <div class="icon-box-icon text-blue"><a href="https://facilio.com/" target="_blank"><img alt="" class="logo-dark" src="images/logo-fac.svg" /></a></div> <h3 class="h4">UX Designer</h3> <b>Jul 2017 - Nov 2017</b><br /> Worked for a IoT Based Startup which provides End to End solution for the Building Management System</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="icon-box bordered mb-30 text-left"> <div class="icon-box-icon text-blue"><a href="https://www.zoho.com/" target="_blank"><img alt="" class="logo-dark" src="images/logo-zoho.svg" /></a></div> <h3 class="h4">UX Designer</h3> <b>Jun 2015 - Jul 2017</b><br /> Worked for Enterprise Finance products which includes Zoho Book, Zoho Invoice, Zoho Subscription & Zoho Inventory</p> </div> </div>  <div class="col-lg-4 col-md-6 col-sm-6"> <div class="icon-box bordered mb-30 text-left"> <div class="icon-box-icon text-blue"><a href="https://www.zoho.com/" target="_blank"><img alt="" class="logo-dark" src="images/logo-sas.svg" /></a></div> <h3 class="h4">B.Tech (Computer Science & Engineering)</h3> <b>Jun 2011 - Jun 2015</b><br /> Notably, I Headed the Design Committee of our University</p> </div> </div> </div> </div> </section> <section class="section pb-60" id="recognition"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h3 class="text-center"><b>Awards & Recognition</b></h3> <div class="divider divider-alt divider-center divider-dark"></div>  </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="icon-box bordered mb-30 text-left"> <div class="icon-box-icon text-blue"><img alt="" class="logo-dark" src="images/out.svg" /></div> <h3 class="h4">Outstanding Performer</h3> <b>Zeta (2020)</b><br /> Felicitated outstanding performer of the year 2020 for the excellent performance.</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="icon-box bordered mb-30 text-left"> <div class="icon-box-icon text-blue"><img alt="" class="logo-dark" src="images/out.svg" /></div> <h3 class="h4">Outstanding Performer</h3> <b>Zeta (2019)</b><br /> Felicitated outstanding performer of the year 2019 for the excellent performance. </p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6"> <div class="icon-box bordered mb-30 text-left"> <div class="icon-box-icon text-blue"><a href="https://www.sastra.edu/" target="_blank"><img alt="" class="logo-dark" src="images/logo-wsc.svg" /></a></div> <h3 class="h4">Top young designer</h3> <b>WSI (2015)</b><br /> Recognized as one among the Top 11 young Designers in India by World Skills India (WSI)</p> </div> </div> </div> </section> <section class="section background-grey"> <div class="container text-center"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h3 class="h2">If you need soft copy of my updated Resume.</h3> <a class="btn mb-0 btn-shadow load-content" download="" href="files/muna_resume_2019.pdf">Download here</a></div> </div> </div> </section> <section class="section pb-0" id="portfolio"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h3 class="text-center"><b>Portfolio</b></h3> <div class="divider divider-alt divider-center divider-dark"></div> <p class="lead mb-20 text-center">"Details matter, it's worth waiting to get it right" -Steve Jobs</p> <nav class="portfolio-filter isotope-filter mb-50 pull-center"> <ul> <li><a class="button-border-color active" data-filter="*" href="#">All</a></li> <li><a class="button-border-color" data-filter=".ui" href="#">UI</a></li> <li><a class="button-border-color" data-filter=".ixd" href="#">IxD</a></li> </ul> </nav> </div> </div> </div> <div class="container-fluid pl-15 pr-15"> <div class="portfolio-container isotope-container portfolio-gallery row" id="portfolio-gallery"> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ixd"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4253531/fingerrrr1.gif"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4253531/fingerrrr1.gif" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4253531/fingerrrr1.gif"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Dashboard</h4> <p>Fingcar - Conceptual all in one app Dashboard Screen</p> </div> </div> </article> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ixd"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4241825/fing.gif"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4241825/fing.gif" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4241825/fing.gif"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Car Locator</h4> <p>Fingcar - Conceptual app, Keyless Entry locator screen</p> </div> </div> </article> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ixd"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4244880/finger4.gif"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4244880/finger4.gif" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4244880/finger4.gif"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Car Unlocker</h4> <p>Fingcar - Conceptual app, Car fingerprint unlocker screen</p> </div> </div> </article> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ui"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4234386/pop-up_overlay_copy.png"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4234386/pop-up_overlay_copy.png" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4234386/pop-up_overlay_copy.png"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Web app graph</h4> <p>Energy conservation comparison graph screen</p> </div> </div> </article> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ui"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4231959/pop-up_overlay.png"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4231959/pop-up_overlay.png" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4231959/pop-up_overlay.png"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Task Scheduler</h4> <p>Task scheduler web app screen</p> </div> </div> </article> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ui"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4087410/untitled-2.png"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4087410/untitled-2.png" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4087410/untitled-2.png"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Facebook Redesign</h4> <p>Facebook messenger web app redesign</p> </div> </div> </article> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ui"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4123262/untitled-1.png"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4123262/untitled-1.png" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4123262/untitled-1.png"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Onboarding Screen</h4> <p>Eastamp - Conceptual app onboarding screen UI</p> </div> </div> </article> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ui"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4117981/untitled-1.png"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4117981/untitled-1.png" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4117981/untitled-1.png"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Sign up Screen</h4> <p>Eastamp - Conceptual app signup screen UI</p> </div> </div> </article> <article class="portfolio-item isotope-item col-md-4 col-sm-6 pl-0 pr-0 ui"> <div class="project-container mb-0"><a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4301816/pop-up_overlay2.png"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4301816/pop-up_overlay2.png" /> </a> <div class="project-overlay"></div> <a data-size="800x600" href="https://cdn.dribbble.com/users/689894/screenshots/4301816/pop-up_overlay2.png"> </a> <div class="project-details"> <h4 class="h5 project-title heading-uppercase">Dr appointment</h4> <p>Dr app scheduling and appointment screen</p> </div> </div> </article> </div> </div> </section> <section class="section background-grey"> <div class="container text-center"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h3 class="h2">It doesn’t end there. View more on my Dribbble profile</h3> <a class="btn btn-shadow open-link" href="https://dribbble.com/munarun" target="_blank">Click here</a></div> </div> </div> </section> <section class="section" id="team"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <h3 class="text-center"><b>Projects</b></h3> <div class="divider divider-alt divider-center divider-dark"></div> <p class="lead text-center mb-50">Design is not just what it looks and feels like.Design is how it works."<br /> -Steve Jobs</p> </div> </div> <div class="row"> <div class="col-md-4"> <div class="profile-card text-center"> <div class="user-image"><img alt="" src="https://cdn.dribbble.com/users/689894/screenshots/4333388/drbl_1x.png" /> <div class="user-detail"> <div class="overlay"> <div class="overlay-wrapper parallax-wrapper"> <div class="overlay-inner background-dark-4 opacity-75"></div> </div> </div> <div class="ud-container"> <div class="ud-content"> <p class="mb-15">Fingcar : UI/UX case study of my conceptual app</p> <nav class="socials-icons light display-table margincenter"> <ul> <li><a class="btn btn-shadow icon-right open-link" href="https://medium.muz.li/fingcar-ui-ux-case-study-of-my-conceptual-app-bf1af686a1c8" target="_blank">Read</a></li> </ul> </nav> </div> </div> </div> </div> <h5 class="heading-uppercase mb-0">UI/UX case study</h5> <p class="role mb-0">Mar 12 2018 - 6 Min Read</p> </div> </div> </div> </div> </section> <section class="section section-flexslider pt-80 pb-80 sm-pt-60 sm-pb-60"> <div class="overlay"> <div class="overlay-wrapper"> <div class="overlay-inner background-blue"></div> </div> </div> <div class="testimonials bt-flexslider flexslider control-light control-outside"> <div class="slides"> <div class="flex-slide"> <div class="container"> <div class="quote-icon text-center text-white mb-50"></div>  <div class="feedback text-center text-white"> <p class="quote notopmargin">Muthu is a very smart and motivated visual designer who always delivers designs which are more than the best. He is always updated with the trends in design and technology which is a great plus. An avid learner and easy adaptor he is.</p> <h5 class="heading-uppercase mb-0">Sheik Mohaideen</h5> <p class="role mb-0">Product Designer, Ex Zoho,Freshworks,Microsoft Inc</p> </div> </div> </div> <div class="flex-slide"> <div class="container"> <div class="quote-icon text-center text-white mb-50"></div>  <div class="feedback text-center text-white"> <p class="quote notopmargin"> Muthu's ownership and dedication towards building the component library has been fascinating to witness. He have been the idea pollinator, mix-matching concepts, ideas and examples to constantly improve the overall quality of the library. He also helped several projects have GDS visibility as we build our library while also leveraging insights from them to shape and inform our designs.</p> <h5 class="heading-uppercase mb-0">Mustafa Quilon</h5> <p class="role mb-0">Design Manager, Zeta</p> </div> </div> </div> <div class="flex-slide"> <div class="container"> <div class="quote-icon text-center text-white mb-50"></div>  <div class="feedback text-center text-white"> <p class="quote notopmargin"> Muthu鈥檚 diligence and detailed approach towards work has set a benchmark for the rest of the banking design team. He has been phenomenal in his contributions and his never ending zeal to master something has given us the Galaxy Design system and gave us confidence to move to a new design tool. He was the first one to explore Figma and started building our design system on it. His efforts have made the transition to Figma easy & gives us a good foundation to do our work with better collaboration.</p> <h5 class="heading-uppercase mb-0">Ramakrishna V</h5> <p class="role mb-0">Director of Design, Zeta</p> </div> </div> </div> <div class="flex-slide"> <div class="container"> <div class="quote-icon text-center text-white mb-50"></div>  <div class="feedback text-center text-white"> <p class="quote notopmargin">Muthu was one of the coolest designers I have ever met at Zoho. He had a way of turning ideas into diagrams and scalable designs while making it better than what we initially had in mind. On top of that, he was always open to suggestions and ideas that will help him better his creations</p> <h5 class="heading-uppercase mb-0">Ajay Aadhithya C</h5> <p class="role mb-0">Marketing Head, Zoho Corp</p> </div> </div> </div> <div class="flex-slide"> <div class="container"> <div class="quote-icon text-center text-white mb-50"></div>  <div class="feedback text-center text-white"> <p class="quote notopmargin"> I am yet to work with somebody who has got my back more than Muthu! He is extremely talented at his craft of designing the best systems that are put to use throughout the organization in several products. His methodical design process and the ability to work through chaotic and non-linear feedback is commendable. He focuses on finer details, loves to explore video making tools for work projects, and supports everyone in the team on their daring ventures. He is reliable, humane, patient, skilled, and an absolute gold of a person to work and partner with. </p> <h5 class="heading-uppercase mb-0">Preethi Shreeya</h5> <p class="role mb-0">UX Designer, Zeta</p> </div> </div> </div> <div class="flex-slide"> <div class="container"> <div class="quote-icon text-center text-white mb-50"></div>  <div class="feedback text-center text-white"> <p class="quote notopmargin"> Muthu has been phenomenal in his contributions to the Zeta product design team, his never ending zeal to master something has given us a robust Galaxy Design system and many more such gems in times to come. Everyone around you is learning a lot from you dude! </p> <h5 class="heading-uppercase mb-0">Hemant Gupta</h5> <p class="role mb-0">UX Designer II, Microsoft</p> </div> </div> </div> <div class="flex-slide"> <div class="container"> <div class="quote-icon text-center text-white mb-50"></div>  <div class="feedback text-center text-white"> <p class="quote notopmargin"> Hey Muthu, because you are the core member of our team. And I can always depend on you for whatever issue I come across, So you are "Hulk" of our Avengers team. Super strong, always helpful, super kind and love the way you smash our problems. </p> <h5 class="heading-uppercase mb-0">Saurabh Nagar</h5> <p class="role mb-0">UX Designer II, Zeta</p> </div> </div> </div> </div> </section> <section class="section" id="contact"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h2 class="text-center">Contact</h2> <div class="divider divider-alt divider-center divider-dark"></div> <p class="lead text-center mb-50">Want to say hello? Want to know more about me?<br /> </p> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="contact-form"> <form action="include/sendemail.php" class="mb-0" id="cf" method="post" name="cf"> <div class="row"> <div class="form-process"></div> <div class="col-md-6 col-sm-6"> <div class="form-group"><input class="form-control fc-bordered required" id="cf-name" name="cf-name" placeholder="Enter your name" type="text" /></div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"><input class="form-control fc-bordered required" id="cf-email" name="cf-email" placeholder="Enter your email address" type="email" /></div> </div> <div class="col-md-12 col-sm-12"> <div class="form-group"><input class="form-control fc-bordered" id="cf-subject" name="cf-subject" placeholder="Subject (Optional)" type="text" /></div> </div> <div class="col-md-12 mb-20"> <div class="form-group"><textarea class="form-control fc-bordered required" id="cf-message" name="cf-message" placeholder="Here goes your message" rows="7"></textarea></div> </div> <div class="col-md-12 hidden"><input class="form-control form-control-noradius" id="cf-botcheck" name="cf-botcheck" type="text" value="" /></div> <div class="col-md-12 text-center"><button class="btn btn-shadow" id="cf-submit" name="cf-submit" type="submit">Send Message</button></div> </div> </form> <div class="contact-form-result text-center pt-10"></div> </div> </div> </div> </div> </section> </div> </div>  <footer class="site-footer footer-mobile-light footer-content-dark footer-mobile-content-dark"> <div class="container-fluid"> <p class="copyright">Chat with me</p> <nav class="socials-icons"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </nav> </div> </footer>  <div aria-hidden="true" class="pswp" role="dialog" tabindex="-1"> <div class="pswp__bg"></div>  <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div>  <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button><button class="pswp__button pswp__button--share" title="Share"></button><button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button><button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/plugins.js"></script><script type="text/javascript" src="js/photoswipe.min.js"></script><script type="text/javascript" src="js/photoswipe-ui-default.min.js"></script><script type="text/javascript" src="js/photoswipe-main.js"></script><script type="text/javascript" src="js/main.js"></script><script type="text/javascript"> (function(w,d,v2){ w.chaport = { app_id : '5abce35d16cd001f1610a363' }; v2=w.chaport;v2._q=[];v2._l={};v2.q=function(){v2._q.push(arguments)};v2.on=function(e,fn){if(!v2._l[e])v2._l[e]=[];v2._l[e].push(fn)};var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://app.chaport.com/javascripts/insert.js';var ss=d.getElementsByTagName('script')[0];ss.parentNode.insertBefore(s,ss)})(window, document); </script>