CINXE.COM
ToposText
<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-73073339-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-73073339-1'); </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="SemiColonWeb" /> <link rel="shortcut icon" type="image/png" href="images/icons/favicon.png" /> <link rel="shortcut icon" type="image/png" href="images/icons/favicon.png" /> <!-- Stylesheets ============================================= --> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900|Caveat+Brush" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="css/swiper.css" type="text/css" /> <link rel="stylesheet" href="css/dark.css" type="text/css" /> <link rel="stylesheet" href="css/font-icons.css" type="text/css" /> <link rel="stylesheet" href="css/animate.css" type="text/css" /> <link rel="stylesheet" href="css/magnific-popup.css" type="text/css" /> <!-- NonProfit Demo Specific Stylesheet --> <link rel="stylesheet" href="css/colors.php?color=C6C09C" type="text/css" /> <!-- Theme Color --> <!-- <link rel="stylesheet" href="demos/nonprofit/css/fonts.css" type="text/css" /> --> <link rel="stylesheet" href="demos/nonprofit/nonprofit.css" type="text/css" /> <!-- / --> <link rel="stylesheet" href="css/custom.css" type="text/css" /> <link rel="stylesheet" href="css/responsive.css" type="text/css" /> <meta name='viewport' content='initial-scale=1, viewport-fit=cover'> <!-- Document Title ============================================= --> <title>ToposText</title> </head> <body class="stretched"> <!-- Document Wrapper ============================================= --> <div id="wrapper" class="clearfix"> <!-- Header ============================================= --> <header id="header" class="clearfix static-sticky"> <link rel="shortcut icon" type="image/png" href="https://topostext.org/images/icons/favicon.png" /> <link rel="shortcut icon" type="image/png" href="https://topostext.org/images/icons/favicon.png" /> <div id="header-wrap"> <div class="container clearfix"> <div id="primary-menu-trigger"><i class="icon-reorder"></i></div> <!-- Logo ============================================= --> <div id="logo"> <a href="https://topostext.org" class="logo-big standard-logo" data-dark-logo="https://topostext.org/images/logo1_2.png"> <img src="https://topostext.org/images/logo1_2.png" alt="Topostext"> </a> <a href="https://topostext.org" class="logo-small" data-dark-logo="images/lg1.png"> <img class="logo-small" src="https://topostext.org/images/lg1.png" alt="Topostext"> </a> <!-- <a href="index.php" class="retina-logo" data-dark-logo="images/logo_topos1.png"> <img src="images/logo_1.png" alt="Topostext"> </a> --> </div><!-- #logo end --> <!-- Primary Navigation ============================================= --> <nav id="primary-menu" class="d-lg-flex d-xl-flex justify-content-xl-between justify-content-lg-between fnone with-arrows"> <ul class="align-self-start"> <li><span class="menu-bg col-auto align-self-start d-flex"></span></li> <li class="active" ><a href="https://topostext.org"> <div>Home</div> </a></li> <li ><a href="#"> <div>About TT</div> </a> <ul> <li><a href="https://topostext.org/who-we-are"> <div>Who we are</div> </a></li> <li><a href="https://topostext.org/the-project"> <div>The Project</div> </a></li> </ul> </li> <li ><a href="https://topostext.org/the-places"> <div>Places</div> </a></li> <li ><a href="https://topostext.org/texts"> <div>Ancient Texts</div> </a></li> <li ><a href="https://topostext.org/the-people"> <div>People</div> </a></li> <li><a href="#"> <div>Tools</div> </a> <ul> <li><a href="https://topostext.org/search-tool"> <div>Search Tool</div> </a></li> <li><a href="https://topostext.org/TT-downloads"> <div>Downloads</div> </a></li> </ul> </li> <li><a href="https://topostext.org/contact-us"> <div>Contact us</div> </a></li> </ul> </nav><!-- #primary-menu end --> </div> </div> </header><!-- #header end --> <!-- Slider ============================================= --> <section id="slider" class="slider-element dark swiper_wrapper full-screen force-full-screen slider-parallax clearfix"> <div class="slider-parallax-inner"> <div class="swiper-container swiper-parent"> <div class="swiper-wrapper"> <div class="swiper-slide dark" style="background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.5)), url('images/photo_slider_2.jpg') no-repeat center center; background-size: cover;"> <div class="container clearfix"> <div class="slider-caption"> <h2 class="nott" data-animate="fadeInUp">Explore the world of the ancient Greeks</h2> <p style="font-size: 17px;" data-animate="fadeInUp" data-delay="200">Mapping 1200 years of Greek literature to the cities they founded, the peoples they encountered, and the monuments they left behind, from Spain to India.</p> <a href="the-project" data-animate="fadeInUp" data-delay="400" class="button button-rounded button-large button-light text-dark bgcolor shadow nott ls0 ml-0 mt-4">The Project</a> </div> </div> </div> <div class="swiper-slide dark" style="background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.8)), url('images/photo_slider_1.jpg') no-repeat center center; background-size: cover;"> <div class="container clearfix"> <div class="slider-caption"> <h2 class="nott" data-animate="fadeInUp">Explore the riddles of Europe’s ancient literary culture</h2> <p style="font-size: 17px;" data-animate="fadeInUp" data-delay="200">The texts that shaped western thought and aspiration, together in one platform.</p> <a href="texts" data-animate="fadeInUp" data-delay="400" class="button button-rounded button-large button-light text-dark bgcolor shadow nott ls0 ml-0 mt-4">View Texts</a> </div> </div> </div> </div> <div class="swiper-navs"> <div class="slider-arrow-left"><i class="icon-line-arrow-left"></i></div> <div class="slider-arrow-right"><i class="icon-line-arrow-right"></i></div> </div> <div class="swiper-scrollbar"> <div class="swiper-scrollbar-drag"> <div class="slide-number"> <div class="slide-number-current"></div><span>/</span> <div class="slide-number-total"></div> </div> </div> </div> </div> </div> </section> <!-- Content ============================================= --> <section id="content" style="overflow: visible"> <div class="content-wrap p-0"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1382 58" width="100%" height="60" preserveAspectRatio="none" style="position: absolute; top: -58px; left:0; z-index: 1"> <path style="fill:#FFF;" d="M1.52.62s802.13,127,1380,0v56H.51Z" /></svg> <div id="showcase" class="section mt-3" style="background: #FFF url('images/photo_statue.png') no-repeat 100% 50% / auto 100%;"> <!-- <div class="section mt-3" style="background: #FFF url('images/travel1.jpg') no-repeat 100% 50% / auto 100%;"> --> <div class="container clearfix"> <div class="row justify-content-center"> <div class="col-md-7 center"> <div class="heading-block nobottomborder mb-4"> <h2 class="mb-4 nott">Ancient Civilization at your fingertips!</h2> </div> <div class="svg-line bottommargin-sm clearfix"> <img src="demos/nonprofit/images/divider-1.svg" alt="svg divider" height="20"> </div> <p>The history, mythology, and literature of Greece, taken up by the Roman Empire, shaped the development of European and American culture. ToposText is a free tool, a mobile app and website, for going back to the primary sources and historic roots of western civilization, and in particular a tool for students and travelers eager to experience the ancient world through its surviving texts.</p> </div> </div> <div class="row mt-5"> <div class="col-md-3 mb-5 feat1"> <div class="feature-box pl-0"> <div class="fbox-media position-relative"> <img src="images/icons_svg/our_places.svg" alt="Featured Icon" width="30" class="mb-3"> </div> <div class="fbox-desc"> <h3 class="nott ls0"><a href="#" class="text-dark">Our Places</a></h3> <p>7237 mapped historic places and archaeological sites from Spain to India, attested by 265,900 ancient references, many with descriptions and links to Wikipedia/Wikidata, Pleiades, Archaeology in Greece, and other sources. 250 monuments in Athens, 209 in Rome.</p> <a href="the-places" class="button button-rounded button-border nott ls0 t400 ml-0 mt-4">View Places</a> </div> </div> </div> <div class="col-md-3 mb-5 feat1"> <div class="feature-box pl-0"> <div class="fbox-media position-relative"> <img src="images/icons_svg/our_texts.svg" alt="Featured Icon" width="30" class="mb-3"> </div> <h3 class="nott ls0"><a href="#" class="text-dark">Our Texts</a></h3> <p>819 ancient texts in clean digital form, all the key surviving works of history, mythology, and geography, some of them online in English for the first time, with links to the Greek or Latin. For a bonus, Col. William Leake's travels in Northern Greece and the More.</p> <a href="texts" class="button button-rounded button-border nott ls0 t400 ml-0 mt-4">View Texts</a> </div> </div> <div class="col-md-3 mb-5 feat1"> <div class="feature-box pl-0"> <div class="fbox-media position-relative"> <img src="images/icons_svg/our_people.svg" alt="Featured Icon" width="40" class="mb-3"> </div> <h3 class="nott ls0"><a href="#" class="text-dark">Our People</a></h3> <p>An index of 19,750 proper names – people, gods, festivals, animals, artworks – attested by 429,170 ancient references and linked where possible to Wikipedia and/or Wikidata.</p> <a href="the-people" class="button button-rounded button-border nott ls0 t400 ml-0 mt-4">View People</a></a> </div> </div> </div> </div> </div> <div class="container"> <div class="w-100 position-relative"> <div class="donor-img d-flex align-items-center rounded parallax divcenter shadow-sm" style="max-width: 1100px; width: 100%; height: 500px; background: url('images/photo_mobile.jpg') no-repeat center center / cover"> <div class="dark-layer"></div> </div> <div class="card border-0 center py-sm-4 px-sm-5 p-2 st0re" style=""> <div class="card-body store-btn"> <div class="color store h1 mb-3"> <a href="https://apps.apple.com/us/app/topostext/id1061003115" target="_blank"> <img src="images/appstore.png" alt=""> </a> </div> <div class="color h1 mb-3"> <a href="https://play.google.com/store/apps/details?id=com.pavla.topostext" target="_blank"> <img src="images/googleplay.png" alt=""> </a> </div> </div> </div> </div> </div> <div class="clear"></div> <div class="container-fluid my-5 clearfix"> <div class="d-flex flex-column align-items-center justify-content-center center counter-section position-relative py-5" style="background: url('demos/nonprofit/images/world-map.png') no-repeat center center/ contain"> <div class="showcase divcenter center" style="max-width: 1000px"> <h4>A huge library of ancient texts married to a detailed gazetteer, available on this web site and as a free mobile application for iOS and Android smart phones and tablets.</h4> </div> <div id="stats" class="row align-items-stretch m-0 w-100 clearfix"> <div class="col-lg-3 col-sm-6 center mt-5"> <img src="images/icons_svg/texts.svg" alt="Counter Icon" width="50" class="mb-4"> <div class="counter font-secondary"><span data-from="0" data-to="819" data-refresh-interval="50" data-speed="2100" data-comma="true"></span>+</div> <h5 class="nott ls0 mt-0"><u>TEXTS</u></h5> </div> <div class="col-lg-3 col-sm-6 center mt-5"> <img src="images/icons_svg/places.svg" alt="Counter Icon" width="30" class="mb-4"> <div class="counter font-secondary"><span data-from="100" data-to="7237" data-refresh-interval="50" data-speed="2200" data-comma="true"></span>+</div> <h5 class="nott ls0 mt-0"><u>PLACES</u></h5> </div> <div class="col-lg-3 col-sm-6 center mt-5"> <img src="images/icons_svg/citations.svg" alt="Counter Icon" width="50" height="60" class="mb-4"> <div class="counter font-secondary"><span data-from="10000" data-to="265900" data-refresh-interval="25" data-speed="2300" data-comma="true"></span>+</div> <h5 class="nott ls0 mt-0"><u>CITATIONS</u></h5> </div> <div class="col-lg-3 col-sm-6 center mt-5"> <img src="images/icons_svg/people.svg" alt="Counter Icon" width="50" height="60" class="mb-4"> <div class="counter font-secondary"><span data-from="150" data-to="19750" data-refresh-interval="50" data-speed="2100" data-comma="true"></span>+</div> <h5 class="nott ls0 mt-0"><u>PEOPLE</u></h5> </div> </div> </div> </div> <div class="clear"></div> <div class="section feat-section" style="background: url('demos/nonprofit/images/others/section-bg.jpg') no-repeat center center / cover; padding: 80px 0;"> <div class="container clearfix"> <div class="row"> <div class="edu-ref col-lg-8"> <h3 class="mb-2">Education / Reference tool for Greek civilization</h3> <div class="svg-line mb-2 clearfix"> <img src="demos/nonprofit/images/divider-1.svg" alt="svg divider" height="10"> </div> <p class="mb-5">The largest, most diverse set of ancient texts in English on the web, indexed to offer the primary sources for almost any ancient place or personality a highly detailed archaeological site map for Greece.</p> <div class="row missions-goals"> <div class="col-md-6 mb-4"> <div class="feature-box fbox-plain d-flex bg-white"> <div class="fbox-media position-relative col-auto p-0 mr-4"> <img src="images/icons_svg/check_2.svg" alt="Featured Icon 1" width="50"> </div> <div class="fbox-desc"> <p>Accurate coordinates for thousands of Greek historical sites</p> </div> </div> </div> <div class="col-md-6 mb-4"> <div class="feature-box fbox-plain d-flex bg-white"> <div class="fbox-media position-relative col-auto p-0 mr-4"> <img src="images/icons_svg/check_2.svg" alt="Featured Icon 2" width="50"> </div> <div class="fbox-desc"> <p>Each site indexed to the ancient literary sources that mention it.</p> </div> </div> </div> <div class="col-md-6 mb-4"> <div class="feature-box fbox-plain d-flex bg-white"> <div class="fbox-media position-relative col-auto p-0 mr-4"> <img src="images/icons_svg/check_2.svg" alt="Featured Icon 3" width="50"> </div> <div class="fbox-desc"> <p>A huge, free, portable library of classical texts in English</p> </div> </div> </div> <div class="col-md-6 mb-4"> <div class="feature-box fbox-plain d-flex bg-white"> <div class="fbox-media position-relative col-auto p-0 mr-4"> <img src="images/icons_svg/check_2.svg" alt="Featured Icon 4" width="50"> </div> <div class="fbox-desc"> <p>Texts and places stored on-device – no internet access necessary.</p> </div> </div> </div> <div class="col-md-6"> <div class="feature-box fbox-plain d-flex bg-white"> <div class="fbox-media position-relative col-auto p-0 mr-4"> <img src="images/icons_svg/check_2.svg" alt="Featured Icon 5" width="50"> </div> <div class="fbox-desc"> <p>Location-aware display of site information.</p> </div> </div> </div> <div class="col-md-6"> <div class="feature-box fbox-plain d-flex bg-white"> <div class="fbox-media position-relative col-auto p-0 mr-4"> <img src="images/icons_svg/check_2.svg" alt="Featured Icon 6" width="50"> </div> <div class="fbox-desc"> <p>Recent archaeological information on many sites.</p> </div> </div> </div> </div> </div> <div class="edu-ref col-lg-4 mt-5 mt-lg-0"> <h3 class="mb-2">Promo Video</h3> <div class="svg-line mb-2 clearfix"> <img src="demos/nonprofit/images/divider-1.svg" alt="svg divider" height="10"> </div> <p class="mb-5">Watch a charming 52-second animated ToposText introduction.</p> <div class="clear"></div> <a href="https://www.youtube.com/watch?v=cE8MPNoD2oY" data-lightbox="iframe" class="shadow-sm d-flex align-items-center justify-content-center play-video rounded position-relative mt-3 clearfix" style="background: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.01)), url('images/video_thumb.jpg') no-repeat center center / cover; height: 250px"><i class="icon-play"></i></a> </div> </div> </div> </div> <div class="subscribe-section position-relative" style="margin-top:0;"> <div class="" style="z-index: 2;"> <!-- <img src="images/photo_quote.jpg" alt=""> --> <div class="quote-container"> <div class="container1"> <h2>"ToposText is my dream of how one should be a traveler in Greece"</h2> <h4>Brady Kiesling</h4> </div> </div> </div> </div> <div class="section nobg" style="padding:0"> <div class="container clearfix"> <div class="row justify-content-center"> <div class="col-md-7 center"> <div class="heading-block nobottomborder mb-4"> <h2 class="mb-4 nott">Our Partners</h2> </div> <div class="svg-line bottommargin-sm clearfix"> <img src="demos/nonprofit/images/divider-1.svg" alt="svg divider" height="15"> </div> <p>ToposText is made possible by the creativity and hard work of dozens of people and organizations that have made high-quality information available for public use. In addition to our sponsor, the Aikaterini Laskaridis Foundation in Piraeus, with its Travelogues project and other treasures, we network with the following resources for ancient languages, literature, history, archaeology, and ancient topography:</p> </div> <div class="clear"></div> <div class="col-md-11 my-5"> <ul class="clients-grid nobottommargin clearfix"> <li> <a href="https://www.atticinscriptions.com/" target="_blank"> <img src="images/partners/aio.jpg" alt="partners"> </a> </li> <li> <a href="http://agathe.gr/" target="_blank"> <img src="images/partners/agora.jpg" alt="partners"> </a> </li> <li> <a href="https://dipylon.org/en/home/" target="_blank"> <img src="images/partners/dipylon.jpg" alt="partners"> </a> </li> <li> <a href="http://www.eie.gr/index-en.html" target="_blank"> <img src="images/partners/ethniko-idrima-erevnon.jpg" alt="partners"> </a> </li> <li> <a href="https://www.mcgilchristsgreekislands.com/" target="_blank"> <img src="images/partners/mcGilcbrist-greek-islands.jpg" alt="partners"> </a> </li> <li> <a href="http://odysseus.culture.gr/index_en.html" target="_blank"> <img src="images/partners/odysseys.jpg" alt="partners"> </a> </li> <li> <a href="http://commons.pelagios.org/" target="_blank"> <img src="images/partners/pelgios.jpg" alt="partners"> </a> </li> <li> <a href="http://www.perseus.tufts.edu/hopper/" target="_blank"> <img src="images/partners/perseus-digital-library.jpg" alt="partners"> </a> </li> <li> <a href="https://pleiades.stoa.org/" target="_blank"> <img src="images/partners/pleiades.jpg" alt="partners"> </a> </li> <li> <a href="https://timetravelrome.com/" target="_blank"> <img src="images/partners/time-travel-rome.jpg" alt="partners"> </a> </li> <li> <a href="https://www.manto-myth.org/" target="_blank"> <img src="images/partners/manto.jpg" alt="partners"> </a> </li> <li> <a href="https://www.trismegistos.org/" target="_blank"> <img src="images/partners/tm.jpg" alt="partners"> </a> </li> <li> <a href="https://www.periegesis.org/" target="_blank"> <img src="images/partners/perigesis.jpg" alt="partners"> </a> </li> </ul> </div> </div> </div> </div> <div class="line line-sm my-0 clearfix"></div> <div class="clear"></div> <div class="section section-details mb-0 bg-white" style="padding: 8px 0 60px;"> <div class="container clearfix"> <div class="sup-test row"> <div class="col-md-4 px-4 mb-5 mb-md-0"> <h4 class="t700 mb-4">Support</h4> <p class="mb-3">Pavla S.A.</p> <a href="mailto:info@pavla.gr" target="_blank" class="mb-1 d-block"><i class="icon-envelope21 position-relative" style="top: 1px;"></i> info@pavla.gr</a> <div class="t500 mb-2 d-block">Monday - Friday 09:30 - 17:00</div> <a href="https://pavla.gr" target="_blank" class="social-icon si-dark si-small si-globe" title="Pavla"> <i class="icon-globe"></i> <i class="icon-globe"></i> </a> <a href="https://www.facebook.com/pavlagreece/" class="social-icon si-dark si-small si-facebook" title="Facebook"> <i class="icon-facebook"></i> <i class="icon-facebook"></i> </a> <h4 class="t500 mb-4" style="visibility: hidden">Support</h4> <br> <p class="mb-3">Brady Kiesling</p> <a class="mb-1 d-block"> brady@topostext.org</a> <a href="mailto:topostext@gmail.com" target="_blank" class="social-icon si-dark si-small si-mail" title="mail"> <i class="icon-mail"></i> <i class="icon-mail"></i> </a> </div> <div class="col-md-4 px-4 mb-5 mb-md-0"> <h4 class="t700 mb-4">Testimonials</h4> <div id="oc-testi" class="owl-carousel testimonials-carousel carousel-widget" data-margin="0" data-nav="false" data-pagi="false" data-items="1" data-autoplay="6000" data-loop="true" data-animate-in="fadeIn" data-animate-out="fadeOut"> <div class="oc-item"> <div class="testimonial nobg noshadow noborder p-0"> <div class="testi-content"> <p>I use it, I show it to everyone I know as,a shining example of how technology eases and expands our connection with the past. It's an amazing tool to scratch the surface of the palimpsest we live in! </p> <div class="testi-meta ls1"> Jane Flynn Taniskidou</div> </div> </div> </div> <div class="oc-item"> <div class="testimonial nobg noshadow noborder p-0"> <div class="testi-content"> <p>I have used it a number of times! I love the references to the ancient texts! A wonderful way to explore new sites, too! It is like having multiple reference books in one place. Thank you!.</p> <div class="testi-meta ls1">Georgia Tsouvala</div> </div> </div> </div> <div class="oc-item"> <div class="testimonial nobg noshadow noborder p-0"> <div class="testi-content"> <p>A great app and likely to turn those archeology-curious into archeology buffs..</p> <div class="testi-meta ls1">Spyros Drainas</div> </div> </div> </div> <div class="oc-item"> <div class="testimonial nobg noshadow noborder p-0"> <div class="testi-content"> <p>Thanks for your excellent site!!.</p> <div class="testi-meta ls1">Christopher Francese</div> </div> </div> </div> <div class="oc-item"> <div class="testimonial nobg noshadow noborder p-0"> <div class="testi-content"> <p>Congratulations! This is a very exciting app. It brings ancient travel writers to life! It makes them relevant.</p> <div class="testi-meta ls1">Michael Scordilis</div> </div> </div> </div> <div class="oc-item"> <div class="testimonial nobg noshadow noborder p-0"> <div class="testi-content"> <p>Thank you for ToposText! A very useful information resource with a user-friendly interface. I recommend it to my students, who find it much easier to use than Pleiades..</p> <div class="testi-meta ls1">Tønnes Bekker-Nielsen</div> </div> </div> </div> </div> <br /> <h4 class="t700 mb-4">Publications about TT</h4> <div class="t500 mb-2 d-block">- <a href="https://www.newsit.gr/texnologia/ToposText-H-foriti-vivliothiki-tis-arxaias-grammateias/3389673/" target="_blank">NewsIT</a></div> <div class="t500 mb-2 d-block">- <a href="https://www.prefer.gr/technologia/topostext-1200-chronia-ellinikis-istorias-se-mia-efarmogi/700/" target="_blank">Prefer</a></div> </div> <div class="winner-banner col-md-4 px-4 mb-5 mb-md-0"> <img style="padding-left:20%" src="images/winner.png" alt=""> </div> </div> </div> </div> </div> </section><!-- #content end --> <!-- Footer ============================================= --> <footer id="footer" style="background-color: #002D40;"> <div class="container"> <!-- Footer Widgets ============================================= <div class="footer-widgets-wrap dark clearfix" style="background: radial-gradient(rgba(0,45,64,.5), rgba(0,45,64,.1), rgba(0,45,64,.5)), url('demos/nonprofit/images/others/footer.jpg') repeat center center / cover; padding: 150px 0"> <div class="divcenter center" style="max-width: 700px;"> <h2 class="display-2 t700 text-white mb-0 ls1 font-secondary mb-4"><i class="icon-heart d-block mb-3"></i>Help the Homeless & Hungry People.</h2> <a href="#" class="button button-rounded button-xlarge button-white bg-white button-light text-dark shadow nott ls0 ml-0 mt-5">Donate Now</a> </div> </div>--> </div> <!-- Copyrights ============================================= --> <div id="copyrights" class="bgcolor"> <div class="container clearfix"> <div class="row justify-content-between align-items-center"> <div class="col-md-6"> ToposText Web Version 3.0<br> <div class="copyright-links"> Copyrights © 2019 All Rights Reserved. Developed by <a href="https://pavla.gr" target="_blank">Pavla SA</a> </div> </div> <div class="col-md-6 d-md-flex flex-md-column align-items-md-end mt-4 mt-md-0"> <div class="copyrights-menu copyright-links clearfix"> <a href="texts">Ancient Texts</a>/<a href="https://topostext.org/the-places">Places</a>/<a href="https://topostext.org/the-people">People</a>/<a href="https://topostext.org/contact-us">Contact</a> </div> </div> </div> </div> </div><!-- #copyrights end --> </footer><!-- #footer end --> <!-- Floating Contact ============================================= --> <div class="floating-contact-wrap"> <div class="floating-contact-btn shadow"> <i class="floating-contact-icon btn-unactive icon-envelope21"></i> <i class="floating-contact-icon btn-active icon-line-plus"></i> </div> <div class="floating-contact-box"> <div id="q-contact" class="widget quick-contact-widget clearfix"> <div class="floating-contact-heading bgcolor p-4 rounded-top"> <h3 class="mb-0 font-secondary h2 ls0">Quick Contact 👋</h3> <p class="mb-0">Get in Touch with Us</p> </div> <div class="form-widget" data-alert-type="false"> <div class="form-result"></div> <div class="floating-contact-loader css3-spinner" style="position: absolute;"> <div class="css3-spinner-bounce1"></div> <div class="css3-spinner-bounce2"></div> <div class="css3-spinner-bounce3"></div> </div> <div id="floating-contact-submitted" class="p-5 center"> <i class="icon-line-mail h1 color"></i> <h4 class="t400 mb-0 font-body">Thank You for Contact Us! Our Team will contact you asap on your email Address.</h4> </div> <form class="mb-0" id="floating-contact" action="include/form.php" method="post" enctype="multipart/form-data"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text nobg"><i class="icon-user-alt"></i></span> </div> <input type="text" name="floating-contact-name" id="floating-contact-name" class="form-control required" value="" placeholder="Enter your Full Name"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text nobg"><i class="icon-at"></i></span> </div> <input type="email" name="floating-contact-email" id="floating-contact-email" class="form-control required" value="" placeholder="Enter your Email Address"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text nobg"><i class="icon-comment21"></i></span> </div> <textarea name="floating-contact-message" id="floating-contact-message" class="form-control required" cols="30" rows="4"></textarea> </div> <input type="hidden" id="floating-contact-botcheck" name="floating-contact-botcheck" value="" /> <button type="submit" name="floating-contact-submit" class="btn btn-dark btn-block py-2">Send Message</button> <input type="hidden" name="prefix" value="floating-contact-"> <input type="hidden" name="subject" value="Message From Floating Contact"> <input type="hidden" name="html_title" value="Floating Contact Message"> </form> </div> </div> </div> </div> </div><!-- #wrapper end --> <!-- Go To Top ============================================= --> <div id="gotoTop" class="icon-angle-up"></div> <!-- External JavaScripts ============================================= --> <script src="js/jquery.js"></script> <script src="js/plugins.js"></script> <!-- Footer Scripts ============================================= --> <script src="js/functions.js"></script> <script> jQuery(document).ready(function($) { var elementParent = $('.floating-contact-wrap'); $('.floating-contact-btn').off('click').on('click', function() { elementParent.toggleClass('active', ); }); }); </script> </body> </html>