<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jacob Howard, Byron Salvador">
<meta name="description" content="A simple site about two high school students, where Jacob is studying JavaScript, and Byron is studying Flash.">
<meta name="keywords" content="javascript, flash, html, css, byron salvador, jacob howard, autobiography">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<title>JavaScript / Flash Lab (Salvador - Howard)</title>
</head>
<body>
<div id="wrapper">
<header><h1>About Jacob (2/2)</h1></header>
<nav>
<a href="1.html"><button>Page 1</button></a>
<a href="2.html"><button class="current">Page 2</button></a>
<a href="index.html"><button>Home</button></a>
<a href="#"><button>Page 3</button></a>
<a href="#"><button>Page 4</button></a>
</nav>
<main>
<h3>More About Jacob</h3>
<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>
<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>
<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>
<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>
<h2>More cars!</h2>
<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>
<div class="row">
<div class="column">
<img src="img/cars/honda-nsxr.png" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="img/cars/ferrari-f40.png" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="img/cars/subaru-wrx-sti.png" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="img/cars/mazda-miata-mx5.png" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
</div><!-- close row -->
<div id="carModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span><!-- the "x" icon to close the lightbox once opened -->
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div><!-- numbertext class is for counting the slides, as an indicator for the user -->
<img src="img/cars/honda-nsxr.png" class="photo">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img/cars/ferrari-f40.png" class="photo">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img/cars/subaru-wrx-sti.png" class="photo">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img/cars/mazda-miata-mx5.png" class="photo"><br>
</div>
<!-- thumbnail controls -->
<div class="column">
<img src="img/cars/honda-nsxr.png" onclick="currentSlide(1)" alt="Honda NSX-R" class="thumb">
</div>
<div class="column">
<img src="img/cars/ferrari-f40.png" onclick="currentSlide(2)" alt="Ferrari F40" class="thumb">
</div>
<div class="column">
<img src="img/cars/subaru-wrx-sti.png" onclick="currentSlide(3)" alt="Subaru WRX STi" class="thumb">
</div>
<div class="column">
<img src="img/cars/mazda-miata-mx5.png" onclick="currentSlide(4)" alt="Mazda Miata MX-5" class="thumb">
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById('carModal').style.display = "block";
}
function closeModal() {
document.getElementById('carModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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 = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</main>
<footer>
<h4>Text Navigation</h4>
<a href="index.html">Home</a> |
<a href="1.html">Page 1</a> |
<a href="2.html">Page 2</a> |
<a href="#">Page 3</a> |
<a href="#">Page 4</a>
</footer>
</div>
</body>
</html>
Comments