wedding-website

<!doctype html>     <html class="no-js" lang="en">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>Ram & Antara getting hitched!</title> <meta name="description" content="We would like to invite you to our big day."> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#ffffff"> <meta property="og:title" content="Ram & Antara getting hitched"> <meta property="og:description" content="We would like to invite you to our big day."> <meta property="og:image" content="https://wedding.ramswaroop.me/img/hero-min.jpg"> <meta property="og:type" content="website"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="manifest" href="manifest.json"> <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5"> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/jquery.fancybox.css"> <link rel="stylesheet" href="css/flexslider.css"> <link rel="stylesheet" href="css/styles.min.css"> <link rel="stylesheet" href="css/queries.css"> <link rel="stylesheet" href="node_modules/animate.css/animate.min.css"> <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css"> <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> </head> <body id="top">  <section class="hero"> <section class="navigation"> <header> <div class="header-content"> <div class="logo"><a href="#"><img src="img/logo.png" alt="Logo"></a></div> <div class="header-nav"> <nav> <ul class="primary-nav"> <li><a href="#intro">How we met</a></li> <li><a href="#events">Events</a></li> <li><a href="#instagram">Instagram</a></li> <li><a href="#eng-pics">Engagement</a></li> <li class="hidden-sm hidden-xs"><a href="#video-bg">Glimpse of the city</a></li> </ul> <ul class="member-actions"> <li><a href="#map" class="login">Venue</a></li> <li><a href="#rsvp" class="btn-white btn-small">RSVP</a></li> </ul> </nav> </div> <div class="navicon"> <a class="nav-toggle" href="#"><span></span></a> </div> </div> </header> </section> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="hero-content text-center">  <img src="img/logo-lg.png">   </div> </div> </div> <div class="row"> <div class="col-sm-4 hidden-xs"></div> <div class="col-sm-4 hidden-xs text-center"><a href="#rsvp" class="btn btn-accent btn-large rsvp-btn">RSVP</a></div> <div class="col-sm-4 hidden-xs"></div> </div> </div> <div class="down-arrow floating-arrow"><a href="#invitation"><i class="fa fa-angle-down"></i></a></div> </section> <section id="invitation" class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h3>We are getting hitched</h3> <p>The dates are 27<sup>th</sup> & 28<sup>th</sup> of November '17 and we would like you to be a part of it.</p> <div class="share-bar"></div> </div> </div> </div> </section> <section id="intro"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h3 class="header">How we met</h3> </div> </div> <div class="row"> <div class="col-md-3 hidden-sm hidden-xs"><img src="img/IMG_2317.jpg" class="wp1"></div> <div class="col-md-6"> <p> I first saw Antara in the Fall of 2008 when we started our undergrad. I was instantly attracted to her but was far too nervous to speak to her. I had told my friend I liked her and news had traveled fast and she soon found out. Her first reaction was "Who is Ram?" and she began searching for me in the class. She started to take notice of me and no matter how boring the lecture was, we never missed a class after that. After a good few months I finally plucked up the courage to ask her out and the rest is history :) </p> </div> <div class="col-md-3 hidden-sm hidden-xs"><img src="img/DSD_0214.jpg" class="wp2"></div> </div> <div class="row"> <div class="col-sm-4 col-sm-push-2 col-xs-6 hidden-md hidden-lg"><img src="img/IMG_2317.jpg" class="wp8"></div> <div class="col-sm-4 col-sm-push-2 col-xs-6 hidden-md hidden-lg"><img src="img/DSD_0214.jpg" class="wp9"></div> </div> </div> </section> <section class="events section-padding" id="events"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3 class="header">Events</h3> </div> </div> <div class="row"> <div class="col-md-6 col-sm-12 col-xs-12 leftcol"> <div class="wp3"> <p><strong>27th November</strong></p> <h5>Mehndi <span class="time">1PM - 5PM</span></h5> <p>It's one of the oldest traditional Indian pre wedding ceremony where the bride and groom attend the event together and a professional mehndi artist applies mehndi to the bride's hands and feet. This will be having a celebratory festival feel to it with people wearing vibrant clothes and dancing, singing, playing games and a lot more.</p> </div> <div class="wp5"> <h5>Cocktail Night <span class="time">7PM - 12AM</span></h5> <p>This event is no way close to ethnic. The bride & groom would like to have some "shots before the knot". With booze flowing down the floor and the western attire on, everyone would be busy showing off their new moves on the stage which they have finely honed. Lastly, expect some beer pong matches & karaoke for sure.</p> </div> </div> <div class="col-md-6 col-sm-12 col-xs-12 rightcol"> <div class="wp4"> <p><strong>28th November</strong></p> <h5>Haldi <span class="time">10AM-11AM</span></h5> <p>The haldi ceremony is usually held separately for the bride and the groom. This one is for the bride. It is a low-key event that involves the application of turmeric paste on the hands, legs and face of the bride. The groom is not allowed to see the bride after this ritual until the final wedding ceremony starts.</p> </div> <div class="wp6"> <h5>Wedding <span class="time">6PM-12AM</span></h5> <p>This is the main event in the entire wedding when the bride and the groom tie the knot. The groom comes with the barat and is greeted by the bride side with some dhol of course as maximum number of guests would be attending this event. This is when the couple circle the sacred fire and are finally declared husband and wife.</p> </div> </div> </div> <div class="row section-padding"> <div class="col-md-4 col-md-offset-4 text-center"> <a class="btn btn-accent btn-small" data-toggle="modal" data-target="#dc-modal"> <i class="fa fa-barcode"></i>  Dress code </a> </div> </div>  </div> <div id="dc-modal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span> </button> <h3 class="text-center section-padding">Ugh... dress codes?</h3> <h5>Mehndi <span class="time">1PM - 5PM</span></h5> <p> <strong>Ethnic indian wear</strong> <br> Ladies can wear something <a href="https://www.pinterest.com/ramswarooppatra/mehndi-dress-for-women/">bright & vivid</a> and gentlemen can be on their <a href="https://www.pinterest.com/ramswarooppatra/mehndi-dress-for-men/">vibrant kurtas</a> with pants or pyjamas along with an optional shawl. </p> <h5>Cocktail Night <span class="time">7PM - 12AM</span></h5> <p> <strong>Western attire</strong> <br> A semi-formal look that is contemporary & fashionable which is not too prim & proper is the best to pull off this night. You can see some pins for <a href="https://www.pinterest.com/ramswarooppatra/cocktail-night-outfit-for-women/">ladies</a> & <a href="https://www.pinterest.com/ramswarooppatra/cocktail-night-outfit-for-men/">gents</a>. </p> <h5>Wedding <span class="time">6PM-12AM</span></h5> <p> <strong>Indo-western</strong> <br> Ladies can flaunt their unconventional sarees, <a href="https://www.pinterest.com/ramswarooppatra/indo-western-lehengas/">lehengas</a>, <a href="https://www.pinterest.com/ramswarooppatra/indo-western-anarkalis/">anarkalis</a>, dresses and the list goes on whereas gentlemen can wear any kind of suit or just blazer. If you don't like to wear a suit/blazer, you can do a <a href="https://www.pinterest.com/ramswarooppatra/high-neck-jackets-for-men/">high-neck (band gala) waistcoat & shirt</a> combo. </p> </div> </div> </div> </div> </section> <section id="instagram" class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h3>A picture is worth a thousand words!</h3> <p>Help us capture the moment, tag your photos with the hashtag <a href="https://instagram.com/explore/tags/ramandantara/" target="_blank">#RamAndAntara</a> </p> </div> </div> <div class="row section-border wp7"> <div class="col-md-4 col-md-offset-4"> <img src="img/iphone_instagram.jpg"> </div> </div> </div> </section> <section id="eng-pics" class="section-padding"> <div class="container-fluid"> <div class="row"> <div class="col-md-12 text-center"> <h3 class="header">Engagement Pics</h3> </div> </div> <div class="row"> <div class="col-md-2"> <a class="fancybox" rel="group" href="img/eng_pics/_RFX2942-lg.jpg"> <div class="img-wrap"> <div class="overlay"> <i class="fa fa-search"></i> </div> <img src="img/eng_pics/_RFX2942-sm.jpg" alt=""/> </div> </a> </div> <div class="col-md-2"> <a class="fancybox" rel="group" href="img/eng_pics/IMG_3483-lg.jpg"> <div class="img-wrap"> <div class="overlay"> <i class="fa fa-search"></i> </div> <img src="img/eng_pics/IMG_3483-sm.jpg" alt=""/> </div> </a> </div> <div class="col-md-2"> <a class="fancybox" rel="group" href="img/eng_pics/_RFX2992-lg.jpg"> <div class="img-wrap"> <div class="overlay"> <i class="fa fa-search"></i> </div> <img src="img/eng_pics/_RFX2992-sm.jpg" alt=""/> </div> </a> </div> <div class="col-md-2"> <a class="fancybox" rel="group" href="img/eng_pics/_RFX3064-lg.jpg"> <div class="img-wrap"> <div class="overlay"> <i class="fa fa-search"></i> </div> <img src="img/eng_pics/_RFX3064-sm.jpg" alt=""/> </div> </a> </div> <div class="col-md-2"> <a class="fancybox" rel="group" href="img/eng_pics/NGP_4089-lg.jpg"> <div class="img-wrap"> <div class="overlay"> <i class="fa fa-search"></i> </div> <img src="img/eng_pics/NGP_4089-sm.jpg" alt=""/> </div> </a> </div> <div class="col-md-2"> <a class="fancybox" rel="group" href="img/eng_pics/NGP_4119-lg.jpg"> <div class="img-wrap"> <div class="overlay"> <i class="fa fa-search"></i> </div> <img src="img/eng_pics/NGP_4119-sm.jpg" alt=""/> </div> </a> </div> </div> </div> <div class="container"> <div class="row hidden-lg hidden-md hidden-xs"> <div class="col-xs-12 section-border section-padding"></div> </div> </div>  </section> <section id="video-bg" class="hidden-sm hidden-xs"> <div id="bgndVideo" class="player" data-property="{videoURL:'https://youtu.be/9giqL1H6yRs',containment:'#video-bg',autoPlay:true, mute:true, showControls:false, startAt:80, stopAt:259, opacity:1}"> </div> <div id="video-content"> <h5>Kolkata</h5> <p>City of joy</p> </div> </section> <section id="map" class="section-padding"> <div class="text-center"> <h3>How do I get there?</h3> <p>It's way easier than you think!</p> </div> <div id="map-canvas"></div> <div id="map-content-wrapper" class="container pointer-events-none"> <div class="row"> <div class="col-xs-offset-1 col-xs-10 col-md-offset-3 col-md-6"> <div class="text-center"> <div id="btn-show-content" class="toggle-map-content pointer-events-auto"> <i class="fa fa-info-circle"></i>   Show info </div> </div> <div id="map-content" class="pointer-events-auto"> <div class="row"> <div class="col-md-6"> <h5>ITC Fortune Park</h5> <p>Kona Expressway, Howrah, West Bengal 711403, India</p> </div> <div class="col-md-6"> <h5>Mr. Amit Roy</h5> <p><i class="fa fa-mobile"></i> <a href="tel://+919412345678">+91 9412345678</a><br> <i class="fa fa-mobile"></i> <a href="tel://+917123456789">+91 7123456789</a></p> </div> </div> <div class="row text-center"> <div class="col-md-6" style="padding: 5px;"> <a class="btn btn-fill btn-small" href="https://m.uber.com/ul/?action=setPickup&client_id=Yh7Dl6SjB56RY2JuuZF8ttVa6ryFV78W&pickup=my_location&dropoff[formatted_address]=Fortune%20Park%20Panchwati%20-%20Hotels%20in%20Kolkata%2C%20Howrah%2C%20West%20Bengal%2C%20India&dropoff[latitude]=22.593276&dropoff[longitude]=88.270277"><i class="fa fa-taxi"></i>  Book Uber</a> </div> <div class="col-md-6" style="padding: 5px;"> <a class="btn btn-accent btn-small" id="btn-show-map"><i class="fa fa-map-marker"></i>  Show map</a> </div> </div> </div> </div> </div> </div> </section> <section class="rsvp text-center" id="rsvp"> <div id="rsvp-modal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span> </button> <div class="section-padding"> <h3>Thank you!</h3> <p>We are glad to see you join us on our big day.</p> <div id="add-to-cal"></div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h3>What are you waiting for?</h3> <p>We would greatly appreciate if you could RSVP before 1st of November '17</p> <form id="rsvp-form" class="rsvp-form" action="" method="POST"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-input-group"> <i class="fa fa-envelope"></i><input type="email" name="email" class="" placeholder="Your email" required> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-input-group"> <i class="fa fa-user"></i><input name="name" class="" placeholder="Your name" required> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-input-group"> <i class="fa fa-users"></i><input type="number" name="extras" class="" min="0" max="4" placeholder="Husband/Wife or kids" required> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-input-group"> <i class="fa fa-key"></i><input type="number" name="invite_code" id="invite_code" class="" min="0" placeholder="Invite code" required> </div> </div> </div> <div class="row"> <div class="col-md-12" id="alert-wrapper"></div> </div> <button class="btn-fill rsvp-btn"> Yes, that's me! </button> </form> </div> </div> </div> </section> <footer> <div class="container"> <div class="row"> <div class="col-sm-12 text-center content"> <span class="to-top-wrapper"><a href="#top" class="to-top"><i class="fa fa-angle-up"></i></a></span> <p>Crafted by Ram with lots of <span class="fa fa-heart pulse2"></span> for Antara</p> </div> </div> </div> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="js/jquery.fancybox.pack.js"></script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script src="js/jquery.mb.YTPlayer.min.js"></script> <script src="node_modules/waypoints/lib/jquery.waypoints.min.js"></script> <script src="js/vendor/ouical.js"></script> <script src="js/scripts.min.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlPw3GQYI3faa_9mRE6plWuM7xNEmrwH0&callback=initMap"></script>  <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-46465113-4', 'auto'); ga('send', 'pageview'); </script> </body> </html>