API tools faq
paste
HTML

js-flash project 2.html rev. 1

HTML
May 14th, 2018
1,261
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="author" content="Jacob Howard, Byron Salvador">
  6. <meta name="description" content="A simple site about two high school students, where Jacob is studying JavaScript, and Byron is studying Flash.">
  7. <meta name="keywords" content="javascript, flash, html, css, byron salvador, jacob howard, autobiography">
  8. <link rel="icon" href="favicon.ico">
  9. <link rel="stylesheet" href="style.css">
  10. <title>JavaScript / Flash Lab (Salvador - Howard)</title>
  11. </head>
  12.  
  13. <body>
  14. <div id="wrapper">
  15. <header><h1>About Jacob (2/2)</h1></header>
  16. <nav>
  17. <a href="1.html"><button>Page 1</button></a>
  18. <a href="2.html"><button class="current">Page 2</button></a>
  19. <a href="index.html"><button>Home</button></a>
  20. <a href="#"><button>Page 3</button></a>
  21. <a href="#"><button>Page 4</button></a>
  22. </nav>
  23.  
  24. <main>
  25. <h3>More About Jacob</h3>
  26. <p>First page not enough information for you? Well, fair enough.<br>One of my largest hobbies consists of almost anything to do with cars, as I have an incredible passion for them. Old cars, new cars, expensive cars, fast cars, you name it. I love so many cars so much that I can't even bring myself to pick a favorite most of the time - but if I <em>had</em> to, that title would have to go to the Koenigsegg Agera RS, which is currently the world's fastest production car - able to reach a tire-shredding top speed of <strong>457 kilometers per hour</strong>, which translates to just about <strong>284 miles per hour</strong>. This outrageous stunt is shown in the YouTube video below.</p><iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"width="950.54" height="443" type="text/html" src="https://www.youtube.com/embed/UwsgHBFHufU?autoplay=0&fs=1&iv_load_policy=3&showinfo=1&rel=0&cc_load_policy=0&start=0&end=0&vq=hd720&origin=https://youtubeembedcode.com"><div><small><a href="https://youtubeembedcode.com/en">Find Out More</a></small></div><div><small><a href="http://promocode.com.ph/grabtaxi/">start now</a></small></div><div><small><a href="https://youtubeembedcode.com/en">youtube embed code</a></small></div><div><small><a href="https://promocode.com.ph/althea/">discounts promo</a></small></div></iframe>
  27. <p>Although, contrary to popular belief, there is more to me than just my interest of cars or where I was born. I also really enjoy spending time with my family and my friends, and I enjoy helping people with emotional obstacles in their life if they feel like they could use said help. I like the feeling of doing good and keeping others in check with themselves - because everyone deserves a chance.</p>
  28. <p>In my freetime, I mostly play video games if I'm alone. If I'm with a friend, we'll usually check out a car meet or a mall or something - although, I don't have very many friends with the same passion for cars as me. Although, regardless, I'll still talk about cars for hours - even though they won't be able to understand half of what comes out of my mouth.</p>
  29. <p>In addition, as you may be able to tell that I enjoy writing code. While I don't do it much, I consider it a hobby, and I like to think that I'm quite good at it. I learn something new about code every day - whether it's HTML, CSS, or JavaScript; I'm always willing to try out something new, and I hope that one day I can become better at more advanced code such as Python or C++, preferably the ladder because it seems as if Python is on its way out now. Some examples of my code (although a lot of uploads here are archived for friends) can be found on <a href="https://pastebin.com/u/HTML" target="_blank">my Pastebin profile</a>, which I upload to occasionally, or sometimes in large bursts. I like to keep my work there because later, if I somehow become a code master, It'd be nice to look back on myself and reflect just how far I've come in the future.</p>
  30. <h2>More cars!</h2>
  31. <p>Below is a JavaScript gallery I created to show off my very favorite cars. There are a lot more than those listed, however, it would simply just be an extreme amount of images to put on this page and would ultimately just appear absurd.</p>
  32. <div class="row">
  33.     <div class="column">
  34.         <img src="img/cars/honda-nsxr.png" onclick="openModal();currentSlide(1)" class="hover-shadow">
  35.     </div>
  36.     <div class="column">
  37.         <img src="img/cars/ferrari-f40.png" onclick="openModal();currentSlide(2)" class="hover-shadow">
  38.     </div>
  39.     <div class="column">
  40.         <img src="img/cars/subaru-wrx-sti.png" onclick="openModal();currentSlide(3)" class="hover-shadow">
  41.     </div>
  42.     <div class="column">
  43.         <img src="img/cars/mazda-miata-mx5.png" onclick="openModal();currentSlide(4)" class="hover-shadow">
  44.     </div>
  45. </div><!-- close row -->
  46. <div id="carModal" class="modal">
  47.     <span class="close cursor" onclick="closeModal()">&times;</span><!-- the "x" icon to close the lightbox once opened -->
  48.     <div class="modal-content">
  49.         <div class="mySlides">
  50.             <div class="numbertext">1 / 4</div><!-- numbertext class is for counting the slides, as an indicator for the user -->
  51.             <img src="img/cars/honda-nsxr.png" class="photo">
  52.         </div>
  53.         <div class="mySlides">
  54.             <div class="numbertext">2 / 4</div>
  55.             <img src="img/cars/ferrari-f40.png" class="photo">
  56.         </div>
  57.         <div class="mySlides">
  58.             <div class="numbertext">3 / 4</div>
  59.             <img src="img/cars/subaru-wrx-sti.png" class="photo">
  60.         </div>
  61.         <div class="mySlides">
  62.             <div class="numbertext">4 / 4</div>
  63.             <img src="img/cars/mazda-miata-mx5.png" class="photo"><br>
  64.         </div>
  65.         <!-- thumbnail controls -->
  66.         <div class="column">
  67.         <img src="img/cars/honda-nsxr.png" onclick="currentSlide(1)" alt="Honda NSX-R" class="thumb">
  68.         </div>
  69.         <div class="column">
  70.             <img src="img/cars/ferrari-f40.png" onclick="currentSlide(2)" alt="Ferrari F40" class="thumb">
  71.         </div>
  72.         <div class="column">
  73.             <img src="img/cars/subaru-wrx-sti.png" onclick="currentSlide(3)" alt="Subaru WRX STi" class="thumb">
  74.         </div>
  75.         <div class="column">
  76.             <img src="img/cars/mazda-miata-mx5.png" onclick="currentSlide(4)" alt="Mazda Miata MX-5" class="thumb">
  77.         </div>
  78.     </div>
  79. </div>
  80. <script>
  81. function openModal() {
  82.     document.getElementById('carModal').style.display = "block";
  83. }
  84. function closeModal() {
  85.     document.getElementById('carModal').style.display = "none";
  86. }
  87. var slideIndex = 1;
  88. showSlides(slideIndex);
  89.  
  90. function plusSlides(n) {
  91.   showSlides(slideIndex += n);
  92. }
  93.  
  94. function currentSlide(n) {
  95.   showSlides(slideIndex = n);
  96. }
  97.  
  98. function showSlides(n) {
  99.   var i;
  100.   var slides = document.getElementsByClassName("mySlides");
  101.   var dots = document.getElementsByClassName("demo");
  102.   var captionText = document.getElementById("caption");
  103.   if (n > slides.length) {slideIndex = 1}
  104.   if (n < 1) {slideIndex = slides.length}
  105.  for (i = 0; i < slides.length; i++) {
  106.      slides[i].style.display = "none";
  107.  }
  108.  for (i = 0; i < dots.length; i++) {
  109.      dots[i].className = dots[i].className.replace(" active", "");
  110.  }
  111.  slides[slideIndex-1].style.display = "block";
  112.  dots[slideIndex-1].className += " active";
  113.  captionText.innerHTML = dots[slideIndex-1].alt;
  114. }
  115. </script>
  116. </main>
  117. <footer>
  118. <h4>Text Navigation</h4>
  119. <a href="index.html">Home</a> |
  120. <a href="1.html">Page 1</a> |
  121. <a href="2.html">Page 2</a> |
  122. <a href="#">Page 3</a> |
  123. <a href="#">Page 4</a>
  124. </footer>
  125. </div>
  126. </body>
  127. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!