Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Neon Tours \| Bali
ID	5770319846785024
Created	5 years ago, 1597070351825
Updated	5 years ago, 1603121113890
Code	<!DOCTYPE html> <html> <head> <!-- Credit to Bluebird(@birdwatcher03) for the awesome save function used to get a better thumbnail. Credit to wikimedia.com for all the images. If OhNoes is giving a javascript is taking too long to run error, just ignore that. The program works fine. --> <!-- FEATURES(If you are evaluating my project please read this): - You can go to any section on the website by clicking on the nav-bar(Destinations, Services etc etc). - Try clicking an image(not the background of the homepage, though). - Gallery and reviews section is a slideshow and can be navigated either by the arrow buttons or the dot thingies at the bottom. - I've tried to make the site as interactive as possible. So, anytime the cursor changes to a hand you can click to see cool stuff happen. :D - Nice card designs? Maybe... --> <!-- Please tell me in the T&T if there are any typos or grammatical errors. --> <!-- Just to see how fast I can code. LOG(An average of 30-40 minutes of coding everyday): - Day 1: Homepage finished. - Day 2: Destinations finished with styling - Day 3: HTML layout for service section done and navbars added with styling. - Day 4: Styling for services done. Blogs completed with styling - Day 5: JS for image popup done. - Day 6: Gallery section. - Day 7: Turned gallery images into slideshow. Reviews section completed(it's a slideshow too). - Day 8: Contacts section completed. Website finished. Wohoo! I finished it faster than I thought I would, took me around 4-5 hours only(still not sure if I limited myself to only 30 minutes of coding, though :P) If you guys have any questions about how I did something in the site please ask away. --> <meta charset="utf-8" /> <title>Neon Tours \| Bali</title> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans\|Google+Sans+Display\|Material+Icons" rel="stylesheet" /> <!-- Scrollbar --> <style> ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f7f7f7; } ::-webkit-scrollbar-thumb { background: #888; } ::-webkit-scrollbar-thumb:hover { background: #555; } </style> <!-- Variables --> <style> :root { --first-font: "Google Sans Display"; --second-font: "Josefin Sans"; } </style> <!-- Bali --> <style> body, html { margin: 0px; width: 100%; height: 100%; overflow-x: hidden; } nav { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; font-size: 0; z-index: 0; background: #18283c; margin-bottom: 0; cursor: default; } nav h1 { -ms-flex: 1; flex: 1; text-align: center; padding-left: 34px; font-size: 24px; font-size: 1.5rem; margin: 12px 0px 12px 0px; font-family: var(--first-font); } .baliNavBar { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; background-color: #3977cb; justify-content: center; height: 40px; } .baliNavBar .navLink { padding-left: 25px; margin-top: 8px; font-size: 16.32px; font-size: 1.02rem; font-family: var(--first-font); color: #fbfbfb; text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .baliNavBar .navLink:hover { color: #bbbbbb; cursor: pointer; } .baliHeader { margin-top: -32px; width: 100%; height: 500px; background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Pura_tanah_lot_sunset_no3.jpg/1200px-Pura_tanah_lot_sunset_no3.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; text-align: center; color: #f6f6f6; font-family: var(--first-font); cursor: default; } .baliHeader h1 { padding-top: 30%; font-size: 3em; margin-bottom: -20px; } .baliHeader h2 { font-size: 19.2px; font-size: 1.2rem; font-weight: bold; } .baliDestinations { display: -webkit-box; display: -ms-flexbox; display: flex; } .baliDestinations .info { -ms-flex: 1; flex: 1; width: 65%; padding-left: 50px; } .baliDestinations .info h4 { font-size: 20.8px; font-size: 1.3rem; line-height: 30px; font-family: var(--second-font); } .baliDestinations .info p { line-height: 20px; margin-top: -10px; color: #555555; font-family: var(--first-font); } .baliDestinations .infoImages { -ms-flex: 1; flex: 1; } .baliDestinations .infoImages img { -webkit-transition: 500ms ease; transition: 500ms ease; cursor: pointer; } .baliDestinations .infoImages img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .baliServices, .baliGallery { background-color: #f6f6f6; } .baliServices h4, .baliBlogs h4, .baliGallery h4, .baliReviews h4 { padding-top: 20px; line-height: 30px; font-family: var(--second-font); font-size: 20.8px; font-size: 1.3rem; text-align: center; } .baliServices .card-container { margin: 0 10% 0 10%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .baliServices .card-container .card { border-radius: 3px; width: 45%; margin-left: 15px; background: #ffffff; margin-bottom: 30px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-transition: all 200ms; transition: all 200ms; cursor: default; } .baliServices .card-container .card:hover { box-shadow: 0px 5px 13px rgba(0, 0, 0, 0.2); } .baliServices .card-container .card .material-icons { padding-top: 20px; padding-bottom: 15px; -webkit-transform: scale(1.3); transform: scale(1.3); color: #3976c8; padding-left: 49%; } .baliServices .card-container .card h5 { margin-top: -5px; font-size: 16.8px; font-size: 1.05rem; font-family: var(--second-font); text-align: center; } .baliServices .card-container .card p { text-align: center; padding: 0 5% 0 3%; margin-top: -20px; line-height: 20px; font-size: 12.8px; font-size: 0.8rem; color: #555555; padding-bottom: 7px; font-family: var(--first-font); } .baliBlogs .blog-container { margin: 0 10% 0 8%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .baliBlogs .blog-container .blog { border-radius: 5px 5px 0px 0px; margin-right: 30px; width: 40%; box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2); -webkit-transition: all 200ms; transition: all 200ms; margin-bottom: 40px; cursor: default; } .baliBlogs .blog-container .blog:hover { box-shadow: 0px 10px 13px rgba(0, 0, 0, 0.3); } .baliBlogs .blog-container .blog img { cursor: pointer; border-radius: 5px 5px 0 0; } .baliBlogs .blog-container .blog h5 { padding-left: 20px; margin-top: 10px; font-family: var(--second-font); font-size: 17.6px; font-size: 1.1rem; } .baliBlogs .blog-container .blog h6 { font-family: var(--second-font); padding-left: 20px; margin-top: -25px; color: #777777; } .baliBlogs .blog-container .blog p { font-family: var(--first-font); color: #555555; margin-top: -10px; padding-left: 20px; padding-right: 20px; font-size: 12.8px; font-size: 0.8rem; line-height: 17px; } .baliGallery { height: 400px; margin-bottom: 0px; } .baliGallery .galleryImages { margin: 0 5% 0 5%; } .baliGallery .galleryImages .section { width: 100%; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .baliGallery .galleryImages .section img { width: 33%; cursor: pointer; -webkit-transition: 100ms ease; transition: 100ms ease; } .baliGallery .galleryImages .section img:hover { -webkit-transition: 500ms ease; transition: 500ms ease; -webkit-transform: scale(1.1); transform: scale(1.1); } .galleryPrev, .galleryNext { position: relative; color: white; bottom: 143px; width: 20px; padding: 16px; font-weight: bold; font-size: 18px; -webkit-transition: 0.6s ease; transition: 0.6s ease; border-radius: 0 3px 3px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 20px; cursor: pointer; } .galleryNext { width: 16px; bottom: 143.5px; border-radius: 3px 0 0 3px; left: 454px; } .galleryPrev:hover, .galleryNext:hover { background-color: rgba(0, 0, 0, 0.9); } .dot, .reviewDot { cursor: pointer; height: 10px; width: 10px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; -webkit-transition: background-color 0.6s ease; transition: background-color 0.6s ease; } .dot:hover, .reviewDot:hover { background-color: #000000; } .dot.active, .reviewDot.active { pointer-events: none; background-color: #000000; } .baliReviews .part { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; width: 100%; margin-left: 5%; margin-right: 5%; } .baliReviews .part .subsection { width: 30%; } .baliReviews .part .subsection img { padding-left: 33%; width: 30%; } .baliReviews .part .subsection h5 { font-family: var(--second-font); margin-top: 5px; padding-left: 28%; font-size: 19.2px; font-size: 1.2rem; } .baliReviews .part .subsection p { margin-top: -25px; text-align: justified; font-size: 13.6px; font-size: 0.85rem; padding: 0 5% 0 5%; color: #555555; font-family: var(--first-font); } .baliReviews .part .reviewsPrev { margin-left: -588px; margin-top: 25%; } .baliReviews .part .reviewsNext { margin-left: 560px; margin-top: 24%; } .baliReviews .part .reviewsNext, .baliReviews .part .reviewsPrev { color: #777777; padding-right: 5px; padding-left: 7px; padding-bottom: 2px; border-radius: 50%; height: 20px; width: 10px; background: #cccccc; cursor: pointer; } .baliContacts { background: #18283c; margin-bottom: -100px; } .baliContacts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .baliContacts .contactSection { margin-left: 25px; padding-right: 10px; } .baliContacts .contactSection h3 { padding-top: 10px; padding-left: 40px; color: #fbfbfb; font-family: var(--first-font); } .baliContacts .contactSection li { font-family: var(--second-font); line-height: 25px; color: #fbfbfb; text-decoration: none; } .baliContacts .contactSection li:hover { text-decoration: underline; cursor: default; } ul { list-style-type: none; } /* Fading animation / .fade { -webkit-animation: fade 1.5s; animation: fade 1.5s; } @-webkit-keyframes fade { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } to { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } } @keyframes fade { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } to { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } } /* Image popup CSS */ .modal { display: none; position: absolute; z-index: 1; top: 0px; width: 600px; height: 600px; overflow: auto; } .modal-content { display: block; margin-left: 50px; margin-top: 100px; width: 530px; height: 400px; } .modal-content { -webkit-animation: zoom 300ms; animation: zoom 300ms; } #overlay { position: fixed; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: 200ms ease-in-out; transition: 200ms ease-in-out; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); pointer-events: none; } #overlay.active { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; pointer-events: all; } @-webkit-keyframes zoom { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes zoom { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } .close { background: none; border: none; outline: none; position: fixed; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; -webkit-transition: 0.3s; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } #thumbnail { display: none; position: relative; z-index: 20; flex-direction: column; justify-content: center; width: 100%; height: 100vw; background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Pura_tanah_lot_sunset_no3.jpg/1200px-Pura_tanah_lot_sunset_no3.jpg); background-position: center center; text-align: center; font-size: 1.2em; } #thumbnail div { font-family: var(--first-font); background-color: rgba(0, 0, 0, 0.5); color: white; padding: 30px 40px; } </style> </head> <body> <div id="thumbnail"> <div> <h1>Welcome to Bali</h1> <h2>Let's explore Indonesia together!</h2> </div> </div> <nav> <h1> <span style="color: #d8c133">Neon</span> <span style="color: #64abfb">Tours</span> </h1> </nav> <div class="baliNavBar"> <a href="#baliDestinations" class="navLink">Destinations</a> <a href="#baliServices" class="navLink">Services</a> <a href="#baliBlogs" class="navLink">Blogs</a> <a href="#baliGallery" class="navLink">Gallery</a> <a href="#baliReviews" class="navLink">Reviews</a> <a href="#baliContacts" class="navLink">Contact Us</a> </div> <div class="baliHeader"> <h1>Welcome to Bali</h1> <h2>Let's explore Indonesia together!</h2> </div> <div class="baliDestinations" id="baliDestinations"> <div class="info"> <h4>Discover the most amazing destinations in Bali</h4> <p> Bali is an Indonesian paradise that feels like a fantasy with its varied landscape of hills and mountains, rigged coastlines, sandy beaches, lush rice terraces and barren volcanic hillsides. With a large number of cultural, historical and archaeological attractions, this is one of the world's most popular island destinations and one which consistently wins travel awards. </p> </div> <div class="infoImages"> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Dreamland_Beach_%28Bali%2C_Indonesia%29.jpg/640px-Dreamland_Beach_%28Bali%2C_Indonesia%29.jpg" width="55%" style="margin-top: 40px; margin-left: 20px" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Pura_Ulun_Danu_Bratan_A.JPG" width="55%" style="margin-top: 10px; margin-left: 70px" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Bali_panorama.jpg/220px-Bali_panorama.jpg" width="55%" style="margin-top: 10px; margin-left: 20px" /> </div> </div> <div class="baliServices" id="baliServices"> <h4>Our Services</h4> <div class="card-container" style="margin-left: 10px"> <div class="card"> <span class="material-icons">location_city_outline</span> <h5>Amazing Hotels</h5> <p> Our team offers only the best selection of affordable and luxury hotels to our clients. </p> </div> <div class="card"> <span class="material-icons" style="color: none; padding-left: 40%">monetization_on</span> <h5>Best Price Guarantee</h5> <p> If you find tours that are cheaper then we will compensate the difference. </p> </div> <div class="card" style="margin-left: 15px"> <span class="material-icons" style="padding-left: 40%">contact_support</span> <h5>24/7 Support</h5> <p> You can always get support from our staff 24/7 and ask any questions you have. </p> </div> <div class="card"> <span class="material-icons" style="padding-left: 41.5%">grade</span> <h5>Highly Qualified Service</h5> <p> Our tour managers are qualified, skilled and friendly to bring you the best service </p> </div> </div> </div> <div class="baliBlogs" id="baliBlogs"> <h4 style="margin-top: 0px; text-align: center">Latest Blogs</h4> <div class="blog-container"> <div class="blog"> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Broken_Beach.jpg/1200px-Broken_Beach.jpg" width="100%" /> <h5>Bali's beautiful beaches</h5> <h6>March 24, 2019</h6> <p> In Bali, Nusa Penida is bound to be one of the most beautiful beach you've ever seen. Diamond Beach is an untouched, white sand and silky beach blue water bay on the eastern tip of Nusa Penida </p> </div> <div class="blog"> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/1/11/Pura_Dalem_Agung_Padantegal_200507.jpg" width="100%" height="42.5%" /> <h5>12 things to do in Bali</h5> <h6>June 5, 2019</h6> <p> Bali is an island that should be on everyone's bucket list. During your Bali visit, it is best to have a combination of hidden gems and enriching experiences. Do this by following our list on 12 things to do in Bali. </p> </div> </div> </div> <div class="baliGallery" id="baliGallery"> <h4 style="text-align: center">Gallery</h4> <div class="galleryImages"> <div class="section fade" style="display: flex"> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Uluwatu%40bali.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Denpasar%2C_Bali.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/0/07/Pantai_Melasti%2C_Bali.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Bali_Rice_Terrace.JPG" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/7/73/Borobudur_Temple.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/3/36/Mount_batur_and_lake.jpg" /> </div> <div class="section fade" style="display: none"> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Pura_Lempuyang_Luhur%2C_Gunung_Lempuyang%2C_Bali_%28492079834%29.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Aerial_view_of_Bajra_Sandhi_Monument_Denpasar_Bali_Indonesia.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/7/77/Stupa_Borobudur.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Taman_Ayun%2C_Bali%2C_Indonesia.jpg/220px-Taman_Ayun%2C_Bali%2C_Indonesia.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/5/56/Dreamland_Beach_Bali.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Klungkung-Palace-1.jpg/1200px-Klungkung-Palace-1.jpg" /> </div> <div class="section fade" style="display: none"> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Pura_Jagatnatha_%286336843951%29.jpg/310px-Pura_Jagatnatha_%286336843951%29.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/TanahLot_2014.JPG/220px-TanahLot_2014.JPG" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Great_mosque_in_Medan_cropped.jpg/220px-Great_mosque_in_Medan_cropped.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Gunung_Merbabu_2.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mambila_Plateau_of_Taraba_State.jpg/250px-Mambila_Plateau_of_Taraba_State.jpg" /> <img class="modalImages" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Brantan_Bali_Pura-Ulun-Danu-Bratan-01.jpg/1200px-Brantan_Bali_Pura-Ulun-Danu-Bratan-01.jpg" /> </div> <a class="galleryPrev" onclick="plusSlides(-1)">❮</a> <a class="galleryNext" onclick="plusSlides(1)">❯</a> <div style="text-align: center"> <span class="dot active" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </div> </div> <div class="baliReviews" id="baliReviews"> <h4 style="margin-top: 0px">Reviews</h4> <div class="part"> <div class="subsection fade"> <img src="https://www.kasandbox.org/programming-images/creatures/Winston.png" /> <h5>Winston</h5> <p> I wanted to thank you for planning the trip to Bali. It was amazing and exceeded my expectations! I had a wonderful time and was very pleased. Each touch point and adventure felt like it was planned with care. Thank you! Only downside was no donuts. </p> </div> <div class="subsection fade"> <img src="https://www.kasandbox.org/programming-images/avatars/mr-pants-with-hat.png" style="margin-top: -26px" /> <h5>Mr. Pants</h5> <p> There are around 1,013,000 words in the English language but I could never string enough words together to properly express my gratitude to Neon Tours for planning my trip to Bali. It was the most fun I ever had in my entire life. Thanks a lot for this trip. </p> </div> <div class="subsection fade"> <img src="https://www.kasandbox.org/programming-images/creatures/Hopper-Cool.png" style="margin-top: 5px" /> <h5>Hopper</h5> <p> I had a marvelous time. Travelling to Kuta, Denpasar and Ubud were the highlights of my trip. The hotel provided by Neon Tours was amazing and really cheap too. They certainly are the best travel agency I've worked with. </p> </div> <a class="reviewsPrev" onclick="plusReviews(-1)">❮</a> <a class="reviewsNext" onclick="plusReviews(1)">❯</a> </div> <div class="part" style="display: none"> <div class="subsection fade"> <img src="https://www.kasandbox.org/programming-images/avatars/duskpin-ultimate.png" /> <h5>Duskpin</h5> <p> Just wanted to say thanks for setting me and my family up on an amazing Bali adventure! My family and I had a great time. All of the accomodations were perfect. Everyone I met throughout the journey was very professional and helpful. I had a blast. </p> </div> <div class="subsection fade"> <img src="https://cdn.kastatic.org/images/ohnoes-happy.png" style="margin-top: 5px" /> <h5 style="margin-top: 7px">Oh Noes</h5> <p> I had an amazing holiday at Bali. It was way better than correcting errors and people hating on me for "freaking out" just because I was trying to help them. It was nice spending two weeks with friendly people instead of people who would get angry at me for no reason. </p> </div> <div class="subsection fade"> <img src="https://www.kasandbox.org/programming-images/avatars/piceratops-ultimate.png" style="margin-left: 5px" /> <h5 style="margin-top: 5px; margin-left: -5px">πceratops</h5> <p> I had a great time at Bali. I was only there for three days but it was the best time of my life. The two places that I stayed in were amazing. I would totally recommend working with Neon Tours to anyone who wants to visit Bali. </p> </div> <a class="reviewsPrev" onclick="plusReviews(-1)">❮</a> <a class="reviewsNext" onclick="plusReviews(1)">❯</a> </div> <div style="text-align: center"> <span class="reviewDot active" style="margin-bottom: 20px" onclick="currentReview(1)"></span> <span class="reviewDot" style="margin-bottom: 20px" onclick="currentReview(2)"></span> </div> </div> <div class="baliContacts" id="baliContacts"> <div class="contactSection"> <h3>Contact Us</h3> <ul> <li>+1234 1234 44</li> <li>neon@tours.com</li> <li>Denpasar, Bali</li> </ul> </div> <div class="contactSection"> <h3>Solutions</h3> <ul> <li>Tours</li> <li>Discover</li> <li>Pricing</li> <li>Testimonials</li> <li>Travel tips</li> </ul> </div> <div class="contactSection"> <h3>Resources</h3> <ul> <li>How it works</li> <li>Terms of Service</li> <li>Privacy policy</li> <li>General terms</li> <li>FAQ</li> </ul> </div> </div> <div id="myModal" class="modal"> <button class="close">×</button> <img class="modal-content" id="imgPlaceholder" /> </div> <div id="overlay" onClick="overlayClick()"></div> <!--Thumbnail Code - Credit to @birdwatcher03!--> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <script type="application/javascript"> var thumbnailDiv = document.getElementById("thumbnail"); var body = document.getElementsByTagName("body")[0]; window.addEventListener("keydown", function(e){ if(e.keyCode === 83){ thumbnailDiv.style.display = "flex"; body.style.overflowY = "hidden"; setTimeout(function() { alert("I think you might have accidentally opened the thumbnail of the program. Press the 'a' key to continue viewing") }, 200); } else if(e.keyCode === 65){ thumbnailDiv.style.display = "none"; body.style.overflowY = "scroll"; } }); var save = function(){ html2canvas(document.body,{ allowTaint : false, useCORS: true, width: document.documentElement.clientWidth, height: document.documentElement.clientWidth }) .then(function(canvas){ b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { console.log("Saving..."); save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave) } </script> <!--Removing the flickering effect that happened on clicking an item in the nav bar--> <script type="application/javascript"> var navLinks = document.getElementsByClassName("navLink"); for (i = 0; i < navLinks.length; i++) { navLinks[i].addEventListener("click", function(e) { e.preventDefault(); }) } </script> <!--Image pop-up--> <script type="application/javascript"> var modal = document.getElementById("myModal"); var images = document.getElementsByClassName("modalImages"); var modalImg = document.getElementById("imgPlaceholder"); for (var i = 0; i < images.length; i++) { var img = images[i]; img.onclick = function() { modal.style.display = "block"; overlay.classList.add("active"); modalImg.src = this.src; }; } var span = document.getElementsByClassName("close")[0]; span.onclick = function() { closeModal(modal); }; var overlay = document.getElementById("overlay"); overlay.onclick = function() { closeModal(modal); }; function closeModal(modal) { modal.style.display = "none"; overlay.classList.remove("active"); } </script> <!--Image slideshow--> <script type="application/javascript"> var slideIndex = 1; function plusSlides(n) { showSlides((slideIndex += n)); } function currentSlide(n) { showSlides((slideIndex = n)); } function showSlides(n) { var i; const slides = document.getElementsByClassName("section"); const dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "flex"; dots[slideIndex - 1].className += " active"; } </script> <!--Reviews slideshow--> <script type="application/javascript"> var reviewIndex = 1; function plusReviews(n) { showReviews((reviewIndex += n)); } function currentReview(n) { showReviews((reviewIndex = n)); } function showReviews(n) { var parts = document.getElementsByClassName("part"); var reviewDots = document.getElementsByClassName("reviewDot"); if (n > parts.length) { reviewIndex = 1; } if (n < 1) { reviewIndex = parts.length; } for (var i = 0; i < parts.length; i++) { parts[i].style.display = "none"; } for (var i = 0; i < reviewDots.length; i++) { reviewDots[i].className = reviewDots[i].className.replace( " active", "" ); } parts[reviewIndex - 1].style.display = "flex"; reviewDots[reviewIndex - 1].className += " active"; } </script> </body> </html> <!-- Around 900 lines of code. I might've overworked a little. :P -->
Folds	882,906,908,935,937,966
Fork	true
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNXFtIKgCgw
Votes	184
Spin-Offs	27
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"project-travel-webpage","title":"Project: Travel webpage","deleted":"false","official":"true"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Neon Byte
Author Name	NeonByteKA
Author ID	kaid_600198987757497388218405
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739448763081
Updated	10 months ago, 1739448767649
Source Deleted	unknown