Embed Size (px)
Citation preview
HTML: Home
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="assets/styles.css">
<title>J. Loya</title> </head> <!--body--><body class="home"> <!--overlay--><!-- The overlay --><div id="myNav" class="overlay"> <!-- Button to close the overlay navigation --> <a href="javascript:void(0)" class="overlay-content" onclick="closeNav()"><p class="olist">Back</p></a>
<div class="overlay-content"><a href="about.html" class="olist">About/Contact</a>
<a href="exp.html">Experience</a> <a class="null">...</a>
<a href="ill.html" class="olist">Film</a><a href="des.html" class="olist">Design</a><a href="photo.html"class="olist">Photography</a>
</div></div>
<span class="logo" style="font-size:30px;cursor:pointer" onclick="openNav()"><img src="assets/images/logo/plc.png" alt="Logo"></span>
<!--logo <div class="logo" id="moon"> <img src="assets/images/logo/plc.png" alt="Logo"> </div> --> <!--stars--> <!--<div class="star" id="sirius"> <img src="assets/images/bg/sirius-2.png" alt="Sirius"> <img src="assets/images/bg/mul.png" alt="Muliphen"> <img src="assets/images/bg/murz.png" alt="Murzim"> <img src="assets/images/bg/wezen.png" alt="Wezen"> <img src="assets/images/bg/aludra.png" alt="Aludra"> <img src="assets/images/bg/adhara.png" alt="Adhara"> <img src="assets/images/bg/mulalpha.png" alt="Star"> <img src="assets/images/bg/mulbeta.png" alt="Star"> </div>-->
<div class="star" id="sirius"><img src="assets/images/bg/sky-alt.png" alt="background">
</div> <div class="central"> <h1 class="title" id="titlealpha">Jackson Loya</h1> <div class="artstat"> <p>I am a multi-media artist using illustration, design, and photography to communicate on a broad visual spectrum. My style emphasizes interaction between content, medium, and context. Every project I initiate is supplemented by research to ensure that the final product is relevant to its target audience.</p> <p>Visual narrative is a key factor in my work. Every detail, from the largest object to the most minute portion of negative space, serves to support either story or aesthetics.</p> <p>Character-based work attracts me moreso than any other narrative style. Animism is thus present in all of my work, as even an abstract blob is capable of having a distinct, relatable personality, given the right amount of intentionality and effort. To stay in this mindset, I look for inspiration from creators of expressive and dynamic characters and environments such as idealistic superheroes, struggling protagonists in character study films, and impressionist artists who bend their medium to blur the line between recognition and pure art.</p> </div> </div>
<!--<div class="bg" id="sky"> <img src="assets/images/bg/sky.gif" alt="nightsky"> </div>-->
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script>function openNav() {
document.getElementById("myNav").style.height = "100%";}
function closeNav() {document.getElementById("myNav").style.height = "0%";
}</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body></html>
HTML: About
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="assets/styles.css"> <title>J. Loya - About/Contact</title> </head> <!--body--> <body class="about">
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation --> <a href="javascript:void(0)" class="overlay-content" onclick="closeNav()"><p
class="olist">Back</p></a><div class="overlay-content">
<a href="home.html" class="olist">Home</a> <a href="exp.html">Experience</a> <a class="null">...</a>
<a href="ill.html" class="olist">Film</a><a href="des.html" class="olist">Design</a><a href="photo.html" class="olist">Photography</a>
</div></div>
<span class="logoa" style="font-size:30px;cursor:pointer" onclick="openNav()"><img src="assets/images/logo/plc-s.png" alt="Logo"></span>
<div class="bio" id="contact"> <h1>Contact</h1> <p id="number">Phone: (781) 835-7904</p> <p id="email">Email: [email protected]</p>
</div> <div class="bio"> <h1>Bio</h1> <p class="textp" id="biointro"> Jackson Loya is a multi-media artist based in Oceanside, California. </p> <p id="bio1"> Born on Camp Pendleton, Jackson has been drawing since childhood, an inherited interest from his father, an encouraged interest by his mother, and a shared interest with his older sister. As a child, he often engaged in fantasy creations and “machines,” a blanket term referring to abstract, meaningless shapes that he desperately tried to add meaning to. He continued drawing into his high school career, experimenting with various styles the mediums of collage and paint but always returning to the realm of graphite and ink. During this time, he developed a taste for character design, and his style drifted to the “anime craze” of the new millennium with added influence by the rising popularity of superhero films. He began to break away from these influences as he desired to form a style all his own. </p> <p id="bio2"> It would not be until college that he began to focus on art as a career path. Recognizing the value of the digital world in the modern age, he chose to pursue a degree in the arts with a focus on technology. Being raised just prior to the technological boom and thus not having much experience with computers and the like, this began as an uphill battle. Thankfully, MiraCosta College fostered this pursuit, allowing Jackson to mix in theory and analogue classes with more computer-heavy classes, increasing his experience with Adobe software and web design. His transfer to California State University San Marcos allowed him to further improve his newfound skills, as well as providing him the opportunity to gain experience with new media hardware. It was here that he discovered the wonders of photography, and added the field to his list of competencies along with his illustration and design skills. </p>
<p id="bio3"> During his time in college, Jackson became a media operator at Las Flores Church of the Nazarene, organizing slideshows and editing graphics for church services and special events </p> <p id="bio4"> Aside from media, Jackson has experience in event coordination, group presentation, and seaside cuisine. </p> </div>
<!-- <div class="bio" id="competencies">
<h1>Competencies</h1><p class="soft">Software</p>
<ul><li>
Adobe Products:<ul>
<li>Illustrator, Photoshop, Lightroom, Premiere, After Effects, Audition</li>
</ul></li><li>
Microsoft Office:<ul>
<li>Word, Powerpoint</li></ul>
</li><li>Brackets</li><li>ProPresenter</li>
</ul><p class="hard">Hardware</p>
<ul><li>Canon DSLR (Digital Single Lens Reflex) cameras</li><li>Canon Vixia camcorders</li><li>Zoom H4N Pro Handy Recorder</li><li>Behringer X32 Digital Mixer</li><li>Lighting & Sound Equipment</li>
</ul><p class="analogue">Analogue</p>
<ul><li>Sketching</li><li>Writing</li>
</ul></div>-->
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script>function openNav() {
document.getElementById("myNav").style.height = "100%";}
function closeNav() {document.getElementById("myNav").style.height = "0%";
} </script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body></html>
HTML: Experience
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="assets/styles.css">
<title>J. Loya</title> </head>
<body class="exp"> <div id="myNav" class="overlay"> <!-- Button to close the overlay navigation --> <a href="javascript:void(0)" class="overlay-content" onclick="closeNav()"><p class="olist">Back</p></a> <div class="overlay-content"> <a href="home.html" class="olist">Home</a> <a href="about.html" class="olist">About/Contact</a> <a class="null">...</a> <a href="ill.html">Film</a> <a href="des.html" class="olist">Design</a> <a href="photo.html"class="olist">Photography</a> </div> </div> <span class="logoa" style="font-size:30px;cursor:pointer" onclick="openNav()"><img src="assets/images/logo/plc-s.png" alt="Logo"></span> <div class="bio" id="experience"> <h1>Experience</h1> <ul> <li>Media Operator, <a href="https://www.lasfloreschurch.com/" target="_blank">Las Flores Church of the Nazarene</a> (June 2017 - Present)</li>
<li>Photobooth, <a href="https://jacklloya.wordpress.com/2017/10/30/photobooth-at-the-las-flores-church-of-the-nazarene-harvest-festival/" target="_blank">Harvest Festival at Las Flores Church of the Nazarene</a> (October 2017)</li> <li>Lighting & Sound Set-up, <a href="https://juxnaddiction.wordpress.com/" target="_blank">Jux-N-Addiction Exhibition</a> (May 2017)</li> <li>Fry Cook, <a href="http://harborfishandchips.net/" target="_blank">Harbor Fish & Chips</a> (June 2016-August 2016)</li> </ul> </div> <div class="bio" id="competencies">
<h1>Competencies</h1><p class="soft">Software</p>
<ul><li>
Adobe Products:<ul>
<li>Illustrator, Photoshop, Lightroom, Premiere, After Effects, Audition</li>
</ul></li><li>
Microsoft Office:<ul>
<li>Word, Powerpoint</li></ul>
</li><li>Brackets</li><li>ProPresenter</li>
</ul><p class="hard">Hardware</p>
<ul><li>Canon DSLR cameras</li><li>Canon Vixia camcorders</li><li>Zoom H4N Pro Handy Recorder</li><li>Behringer X32 Digital Mixer</li><li>Lighting & Sound Equipment</li>
</ul><p class="analogue">Analogue</p>
<ul><li>Sketching</li><li>Writing</li>
</ul>
</div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script>function openNav() {
document.getElementById("myNav").style.height = "100%";}
function closeNav() {document.getElementById("myNav").style.height = "0%";
}</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body></html>
HTML: Film
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="assets/styles.css"> <title>J. Loya - Illustration</title> </head> <!--body--> <body class="ill"> <h1>Film</h1> <div id="myNav" class="overlay"> <!-- Button to close the overlay navigation -->
<a href="javascript:void(0)" class="overlay-content" onclick="closeNav()"><p class="olist">Back</p></a>
<div class="overlay-content"><a href="home.html" class="olist">Home</a><a href="about.html"class="olist">About/Contact</a>
<a href="exp.html">Experience</a> <a class="null">...</a>
<a href="des.html"class="olist">Design</a><a href="photo.html"class="olist">Photography</a>
</div></div>
<span class="logoa" style="font-size:30px;cursor:pointer" onclick="openNav()"><img src="assets/images/logo/plc-s.png" alt="Logo"></span>
<div class="gallery"> <div class="portraits"> <h2>Animation</h2> <div class="row">
<div class="column"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="assets/images/ill/LvO.mp4" allowfullscreen autoplay="false"></iframe> </div> </div> <div class="column"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="assets/images/ill/Video%20Self-Portrait.mp4" allowfullscreen></iframe> </div> </div> <div class="column"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="assets/images/ill/Loya_A4.mp4" allowfullscreen></iframe> </div> </div> <div class="column"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="assets/images/ill/cave-arrt.gif" allowfullscreen></iframe> </div> </div> <div class="column"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="assets/images/ill/Self-Portrait%20FINAL.mp4" allowfullscreen></iframe> </div> </div> </div> <!-- <h2>Live-Action</h2> <div class="row"> <div class="column"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="assets/images/ill/Loya_Project%201.mp4" allowfullscreen></iframe> </div> </div> <div class="column">
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="assets/images/ill/Loya_Silence.mp4" allowfullscreen></iframe> </div> </div> <div class="column"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="assets/images/ill/Loya_Subjectivity.mp4" allowfullscreen></iframe> </div> </div> </div>--> </div> </div>
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script>
function openNav() {document.getElementById("myNav").style.height = "100%";
}
function closeNav() {document.getElementById("myNav").style.height = "0%";
} </script> <script> // Open the Modal function openModal() { document.getElementById('myModal').style.display = "block"; }
// Close the Modal function closeModal() { document.getElementById('myModal').style.display = "none"; }
var slideIndex = 1; showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) { showSlides(slideIndex += n); }
// Thumbnail image controls 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> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body></html>
HTML: Design
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="assets/styles.css"> <title>J.Loya - Design</title> </head> <!--body--> <body class="design"> <h1>Design</h1> <div id="myNav" class="overlay"> <!-- Button to close the overlay navigation -->
<a href="javascript:void(0)" class="overlay-content" onclick="closeNav()"><p class="olist">Back</p></a>
<div class="overlay-content"><a href="home.html" class="olist">Home</a><a href="about.html" class="olist">About/Contact</a>
<a href="exp.html">Experience</a> <a class="null">...</a>
<a href="ill.html" class="olist">Film</a><a href="photo.html" class="olist">Photography</a>
</div></div>
<span class="logoa" style="font-size:30px;cursor:pointer" onclick="openNav()"><img src="assets/images/logo/plc-s.png" alt="Logo"></span> <div class="gallery"> <div class="portraits"> <h2>Logos</h2> <!-- Images used to open the lightbox -->
<div class="row"> <div class="column"> <img src="assets/images/des/[email protected]" onclick="openModal();currentSlide(1)" class="hover-shadow" style="width:50%"> </div> <div class="column"> <img src="assets/images/des/LFBQ%20Logo%20ALTArtboard%2012-100.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" style="width:50%"> </div> <!-- <div class="column"> <img src="assets/images/photo/PORTRAITS/Meta_16x20.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow" style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/PORTRAITS/Talking_to_Leaves_16x20.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/PORTRAITS/Light_the_Night_Worship_16x20.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow"style="width:50%"> </div>--> </div> <h2>Website Screenshots</h2> <div class="row"> <div class="column"> <img src="assets/images/des/wmc1.png" onclick="openModal();currentSlide(6)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/des/wmc2.png" onclick="openModal();currentSlide(7)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/des/wmc3.png" onclick="openModal();currentSlide(8)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/des/wmc4.png" onclick="openModal();currentSlide(9)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/des/wmc5.png" onclick="openModal();currentSlide(10)" class="hover-shadow"style="width:50%"> </div>
</div> <h2>Posters</h2> <div class="row"> <div class="column"> <img src="assets/images/des/FS%[email protected]" onclick="openModal();currentSlide(11)" class="hover-shadow"style="width:50%"> </div> <!-- <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_004.jpg" onclick="openModal();currentSlide(12)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_005.jpg" onclick="openModal();currentSlide(13)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_006.jpg" onclick="openModal();currentSlide(14)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_008.jpg" onclick="openModal();currentSlide(15)" class="hover-shadow"style="width:50%"> </div>--> </div> </div>
<!-- The Modal/Lightbox --> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content">
<div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/des/[email protected]" style="width:100%"> </div>
<div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/des/LFBQ%20Logo%20ALTArtboard%2012-100.jpg" style="width:100%"> </div>
<!--<div class="mySlides"> <div class="numbertext"></div>
<img src="assets/images/photo/PORTRAITS/Meta_16x20.jpg" style="width:100%"> </div>
<div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/PORTRAITS/Talking_to_Leaves_16x20.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/PORTRAITS/Light_the_Night_Worship_16x20.jpg" style="width:100%"> </div>--> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/des/wmc1.png" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/des/wmc2.png" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/des/wmc3.png" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/des/wmc4.png" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/des/wmc5.png" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/des/FS%[email protected]" style="width:100%"> </div>
<!--<div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_004.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_005.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_006.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_008.jpg" style="width:100%"> </div>-->
<!-- Next/previous controls --> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text --> <div class="caption-container"> <p id="caption"></p> </div>
</div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script>function openNav() {
document.getElementById("myNav").style.height = "100%";}
function closeNav() {document.getElementById("myNav").style.height = "0%";
}
</script> <script> // Open the Modal function openModal() { document.getElementById('myModal').style.display = "block"; }
// Close the Modal function closeModal() { document.getElementById('myModal').style.display = "none"; }
var slideIndex = 1; showSlides(slideIndex);
// Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); }
// Thumbnail image controls 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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body></html>
HTML: Photography
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="assets/styles.css"> <title>J. Loya - Photography</title> </head> <!--body--> <body class="photo"> <h1>Photography</h1> <div id="myNav" class="overlay"> <!-- Button to close the overlay navigation --> <a href="javascript:void(0)" class="overlay-content" onclick="closeNav()"><p class="olist">Back</p></a> <div class="overlay-content"> <a href="home.html" class="olist">Home</a> <a href="about.html" class="olist">About/Contact</a> <a href="exp.html">Experience</a> <a class="null">...</a> <a href="ill.html"class="olist">Film</a> <a href="des.html" class="olist">Design</a>
</div> </div>
<span class="logoa" style="font-size:30px;cursor:pointer" onclick="openNav()"><img src="assets/images/logo/plc-s.png" alt="Logo"></span> <div class="gallery"> <div class="portraits"> <h2>Portraits</h2>
<!-- Images used to open the lightbox --> <div class="row"> <div class="column"> <img src="assets/images/photo/PORTRAITS/Amigos_Nuevos_16x20.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow" style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/PORTRAITS/I_Love_You_16x20.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/PORTRAITS/Meta_16x20.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow" style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/PORTRAITS/Talking_to_Leaves_16x20.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/PORTRAITS/Light_the_Night_Worship_16x20.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow"style="width:50%"> </div> </div> <h2>Panoramas</h2> <div class="row"> <div class="column"> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_02.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_04.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_05.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_06.jpg" onclick="openModal();currentSlide(9)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_07.jpg" onclick="openModal();currentSlide(10)" class="hover-shadow"style="width:50%">
</div> </div> <h2>Abstract</h2> <div class="row"> <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_009.jpg" onclick="openModal();currentSlide(11)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_004.jpg" onclick="openModal();currentSlide(12)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_005.jpg" onclick="openModal();currentSlide(13)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_006.jpg" onclick="openModal();currentSlide(14)" class="hover-shadow"style="width:50%"> </div> <div class="column"> <img src="assets/images/photo/ABSTRACT/SELECTS_008.jpg" onclick="openModal();currentSlide(15)" class="hover-shadow"style="width:50%"> </div> </div> </div>
<!-- The Modal/Lightbox --> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content">
<div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/PORTRAITS/Amigos_Nuevos_16x20.jpg" style="width:100%"> </div>
<div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/PORTRAITS/I_Love_You_16x20.jpg" style="width:100%"> </div>
<div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/PORTRAITS/Meta_16x20.jpg" style="width:100%"> </div>
<div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/PORTRAITS/Talking_to_Leaves_16x20.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/PORTRAITS/Light_the_Night_Worship_16x20.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_02.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_04.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_05.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_06.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div>
<img src="assets/images/photo/LANDSCAPES/PANO_SELECTS_07.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_009.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_004.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_005.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_006.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext"></div> <img src="assets/images/photo/ABSTRACT/SELECTS_008.jpg" style="width:100%"> </div>
<!-- Next/previous controls --> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text --> <div class="caption-container"> <p id="caption"></p> </div>
</div> </div> </div> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <script>
function openNav() {document.getElementById("myNav").style.height = "100%";
}
function closeNav() {document.getElementById("myNav").style.height = "0%";
} </script>
<script> // Open the Modal function openModal() { document.getElementById('myModal').style.display = "block"; }
// Close the Modal function closeModal() { document.getElementById('myModal').style.display = "none"; }
var slideIndex = 1; showSlides(slideIndex);
// Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); }
// Thumbnail image controls 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> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body></html>
CSS
/*-----gen-----*/
h1{font: "nixie-one";
}
/*--home--*/body.home{ background-color: #18171F; /*background-image: url(images/bg/sky.png); background-repeat: no-repeat; background-attachment: fixed;*/ /*background-image: url(images/bg/sirius.gif), url(images/bg/sky.gif);*/ background-size: cover; color: #f1f1f1; text-shadow: -1px -1px 5px #313038, 1px -1px 5px #313038, -1px 1px 5px #313038, 1px 1px 5px #313038;}/*--home--*/
/*--about/contact--*/body.about{ background-color: #18171F; background-image: url(images/about/bio-2.png); background-repeat: no-repeat; background-attachment: fixed; /*background-image: url(images/bg/sirius.gif), url(images/bg/sky.gif);*/ background-size: cover; color: aliceblue; text-shadow: -1px -1px 5px #313038, 1px -1px 5px #313038, -1px 1px 5px #313038, 1px 1px 5px #313038;}
/*--about/contact--*/
/*--sub--*/
body.design, body.ill, body.photo, body.exp{ background-color: #18171F;
/*/*--background-image: url(images/about/bio-2.png);-- background-repeat: no-repeat; background-attachment: fixed; /*background-image: url(images/bg/sirius.gif), url(images/bg/sky.gif); background-size: cover;*/ color: aliceblue; text-shadow: -1px -1px 5px #313038, 1px -1px 5px #313038, -1px 1px 5px #313038, 1px 1px 5px #313038;}
.gallery{ margin-bottom: 1%; margin-left: 1%; margin-right: 1%; margin-top: 1%; }
body.exp{ background-image: url(images/about/expbg.png); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; text-align: center; margin-top: 5%;}
/*photo-----------------------------*/
body.photo{ background-image: url(images/photo/%20photobg.png); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; text-align: center; margin-top: 5%;}
body.design{
background-image: url(images/des/bgbg.png); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; text-align: center; margin-top: 5%;}
body.ill{ background-image: url(images/ill/lk.png); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; text-align: center; margin-top: 5%;}
/*photo-----------------------------*/
.trans{ position: relative; z-index: -5; width: fill; height: auto; overflow: hidden;}
/*--sub--*/
/*-----class-----*/
/*--home--*/.central{ text-align: center; position: absolute; top: 75%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);}
.artstat{
text-align: center; margin-left: 25%; margin-right: 25%;}
.logo{ position: absolute; top: 40%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); opacity: 0.8; -webkit-opacity: 0.8; -moz-opacity: 0.8; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.logo:hover{ transform: translate(-50%, -50%) scale(1.1); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;}
/*--home--*/
/*--about/contact--*/.bio{ text-align: left; margin-left: 40%; margin-right: 5%; margin-top: 2%;}
.info{ text-align: left; margin-left: 50%; margin-right: 15%;
margin-top: 2%;}
.logoa{ position: absolute; top: 5%; left: 95%; margin-right: -75%; transform: translate(-75%, -25%); opacity: 0.5; -webkit-opacity: 0.5; -moz-opacity: 0.5; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.logoa:hover{ transform: translate(-75%, -25%) scale(1.3); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;}
/*--about/contact--*/
/*-----id-----*/
#titlealpha{ text-align: center;}
#sirius{ /*width: 1900px; height: 1080px;*/ /*display: block;*/ overflow: hidden;}
#sirius img{
position: fixed; top: 0; left: 0; width: 100%; z-index: -1;}
#competencies li, #experience li{ list-style: none;}
/* The Overlay (background) */.overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: #0C0A19; background-color: rgba(0,0,0, 0.9); overflow-y: hidden; transition: 0.5s; opacity: 0.95;}
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}
.overlay-content p{font-style: italic;font-size: 25px;
padding: 0px; text-decoration: none; color: #818181;
display: block; opacity: 0.5; -webkit-opacity: 0.5; -moz-opacity: 0.5; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.overlay a{ padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; opacity: 0.7; -webkit-opacity: 0.7; -moz-opacity: 0.7; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.overlay a.olist:hover, .overlay a.olist:focus, .overlay a p.olist:hover, .overlay a p.olist:focus { color: #f1f1f1;
/*background-color: #585666;*/ /*font-style: italic;*/ text-shadow: -1px -1px 5px #313038, 1px -1px 5px #313038, -1px 1px 5px #313038, 1px 1px 5px #313038; transform: scale(1.1); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;}
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px;}
@media screen and (max-height: 450px) { .overlay {overflow-y: auto;} .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; }}
/*-----gallery-----*/.row{ margin-left: 10%; margin-right: 10%; margin-bottom: 5%; width: 100%; padding: 0px;}
.row > .column { padding: 0 0px;}
.row:after { content: ""; display: table; clear: both;}
/* Create four equal columns that floats next to eachother */.column { float: left; width: 15%;}
/* The Modal (background) */
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black;}
/* Modal Content */.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px;}
/* The Close Button */.close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold;}
.close:hover,
.close:focus { color: #999; text-decoration: none; cursor: pointer;}
/* Hide the slides by default */.mySlides { display: none;}
/* Next & previous buttons */.prev,.next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none;}
/* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */.prev:hover,.next:hover { background-color: rgba(0, 0, 0, 0.8);}
/* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}
/* Caption text */.caption-container { text-align: center; background-color: black;
padding: 2px 16px; color: white;}
img.demo { opacity: 0.6;}
.active,
.demo:hover { opacity: 1;}
img.hover-shadow { transition: 0.3s}
.hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}
![EQ: Explain how Animism [Shinto] fits our model for a ...aofe.pbworks.com/f/Animism+and+Shinto.pdf · 1. New Entry: Animism and Shinto 2. Where are these most commonly practiced?](https://img.pdfslide.us/doc/110x75/5b3be6eb7f8b9a560a8d03f9/eq-explain-how-animism-shinto-fits-our-model-for-a-aofe-andshintopdf.jpg)
