API tools faq
paste
HTML

js-flash project 1.html rev. 1

HTML
May 14th, 2018
354
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.94 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 (1/2)</h1></header>
  16. <nav>
  17. <a href="1.html"><button class="current">Page 1</button></a>
  18. <a href="2.html"><button>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>Hello there.</h3>
  26. <img src="img/jacob-head.png" id="jhead">
  27. <p>I'm Jacob Howard, but I usually go by Jake or sometimes even J. I was born in Sanford, Florida, and I'm a proud native. I've lived here all 15 years of my life, and I've never seen snow; although I <em>have</em> experienced more sunburns than I can count. I have a huge passion for automobiles, whether it's cars or motorcycles, and I hope to one day go into mechanical or even eletrical engineering; seeing as the world of electric cars is starting to become the mainstream, while gasoline and diesel vehicles are on their way out. In my freetime, I enjoy playing with my cats, playing video games, driving or even working on cars. I often take time to spend with family or help them out in ordinary chores. If you don't think you've had enough of me already and you want to learn some more in-depth stuff about my life, click on "Page 2" above!</p>
  28. <h2>Kitties!</h2>
  29. <p>I'm personally a huge fan of cats, so below is a JavaScript gallery of some adorable pictures of kittens that I found online that make me happy to look at.</p>
  30. <div class="row">
  31.     <div class="column">
  32.         <img src="img/cats/cat1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
  33.     </div>
  34.     <div class="column">
  35.         <img src="img/cats/cat2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
  36.     </div>
  37.     <div class="column">
  38.         <img src="img/cats/cat3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
  39.     </div>
  40.     <div class="column">
  41.         <img src="img/cats/cat4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
  42.     </div>
  43. </div><!-- close row -->
  44. <div id="catModal" class="modal">
  45.     <span class="close cursor" onclick="closeModal()">&times;</span><!-- the "x" icon to close the lightbox once opened -->
  46.     <div class="modal-content">
  47.         <div class="mySlides">
  48.             <div class="numbertext">1 / 4</div><!-- numbertext class is for counting the slides, as an indicator for the user -->
  49.             <img src="img/cats/cat1.jpg" class="photo">
  50.         </div>
  51.         <div class="mySlides">
  52.             <div class="numbertext">2 / 4</div>
  53.             <img src="img/cats/cat2.jpg" class="photo">
  54.         </div>
  55.         <div class="mySlides">
  56.             <div class="numbertext">3 / 4</div>
  57.             <img src="img/cats/cat3.jpg" class="photo">
  58.         </div>
  59.         <div class="mySlides">
  60.             <div class="numbertext">4 / 4</div>
  61.             <img src="img/cats/cat4.jpg" class="photo"><br>
  62.         </div>
  63.         <!-- thumbnail controls -->
  64.         <div class="column">
  65.         <img src="img/cats/cat1.jpg" onclick="currentSlide(1)" alt="One cat" class="thumb">
  66.         </div>
  67.         <div class="column">
  68.             <img src="img/cats/cat2.jpg" onclick="currentSlide(2)" alt="Two cats" class="thumb">
  69.         </div>
  70.         <div class="column">
  71.             <img src="img/cats/cat3.jpg" onclick="currentSlide(3)" alt="One cat" class="thumb">
  72.         </div>
  73.         <div class="column">
  74.             <img src="img/cats/cat4.jpg" onclick="currentSlide(4)" alt="One cat" class="thumb">
  75.         </div>
  76.     </div>
  77. </div>
  78. <script>
  79. function openModal() {
  80.     document.getElementById('catModal').style.display = "block";
  81. }
  82. function closeModal() {
  83.     document.getElementById('catModal').style.display = "none";
  84. }
  85. var slideIndex = 1;
  86. showSlides(slideIndex);
  87.  
  88. function plusSlides(n) {
  89.   showSlides(slideIndex += n);
  90. }
  91.  
  92. function currentSlide(n) {
  93.   showSlides(slideIndex = n);
  94. }
  95.  
  96. function showSlides(n) {
  97.   var i;
  98.   var slides = document.getElementsByClassName("mySlides");
  99.   var dots = document.getElementsByClassName("demo");
  100.   var captionText = document.getElementById("caption");
  101.   if (n > slides.length) {slideIndex = 1}
  102.   if (n < 1) {slideIndex = slides.length}
  103.  for (i = 0; i < slides.length; i++) {
  104.      slides[i].style.display = "none";
  105.  }
  106.  for (i = 0; i < dots.length; i++) {
  107.      dots[i].className = dots[i].className.replace(" active", "");
  108.  }
  109.  slides[slideIndex-1].style.display = "block";
  110.  dots[slideIndex-1].className += " active";
  111.  captionText.innerHTML = dots[slideIndex-1].alt;
  112. }
  113. </script>
  114. </main>
  115. <footer>
  116. <h4>Text Navigation</h4>
  117. <a href="index.html">Home</a> |
  118. <a href="1.html">Page 1</a> |
  119. <a href="2.html">Page 2</a> |
  120. <a href="#">Page 3</a> |
  121. <a href="#">Page 4</a>
  122. </footer>
  123. </div>
  124. </body>
  125. </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!