User:Spolick GamesCEo/sandbox

<!DOCTYPE html> W3.CSS Template      body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;} body, html { height: 100%; color: #777; line-height: 1.8; }

/* Create a Parallax Effect */ .bgimg-1, .bgimg-2, .bgimg-3 { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

/* First image (Logo. Full height) */ .bgimg-1 { background-image: url('/w3images/parallax1.jpg'); min-height: 100%; }

/* Second image (Portfolio) */ .bgimg-2 { background-image: url("/w3images/parallax2.jpg"); min-height: 400px; }

/* Third image (Contact) */ .bgimg-3 { background-image: url("/w3images/parallax3.jpg"); min-height: 400px; }

.w3-wide {letter-spacing: 10px;} .w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */ @media only screen and (max-device-width: 1600px) { .bgimg-1, .bgimg-2, .bgimg-3 { background-attachment: scroll; min-height: 400px; } }

   HOME  ABOUT <i class="fa fa-th"></i> PORTFOLIO</a> <a href="#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a> <a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red"> <i class="fa fa-search"></i> </a>

<a href="#about" class="w3-bar-item w3-button" onclick="toggleFunction">ABOUT</a> <a href="#portfolio" class="w3-bar-item w3-button" onclick="toggleFunction">PORTFOLIO</a> <a href="#contact" class="w3-bar-item w3-button" onclick="toggleFunction">CONTACT</a> <a href="#" class="w3-bar-item w3-button">SEARCH</a>

MY WEBSITE LOGO

<h3 class="w3-center">ABOUT ME  <p class="w3-center"> I love photography We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i class="fa fa-user w3-margin-right"></i>My Name <img src="/w3images/avatar_hat.jpg" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="Photo of Me" width="500" height="333">

Welcome to my website. I am lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p class="w3-large w3-center w3-padding-16">Im really good at: <p class="w3-wide"><i class="fa fa-camera"></i>Photography 90%  <p class="w3-wide"><i class="fa fa-laptop"></i>Web Design 85%  <p class="w3-wide"><i class="fa fa-photo"></i>Photoshop 75%

14+     Partners 55+     Projects Done 89+     Happy Clients 150+     Meetings

PORTFOLIO

<h3 class="w3-center">MY WORK <p class="w3-center"> Here are some of my latest lorem work ipsum tipsum. Click on the images to make them bigger

<img src="/w3images/p1.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist over the mountains">

<img src="/w3images/p2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Coffee beans">

<img src="/w3images/p3.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Bear closeup">

<img src="/w3images/p4.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Quiet ocean">

<img src="/w3images/p5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist">

<img src="/w3images/p6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="My beloved typewriter">

<img src="/w3images/p7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Empty ghost train">

<img src="/w3images/p8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Sailing"> <button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE

<i class="fa fa-remove"></i> <img id="img01" class="w3-image"> <p id="caption" class="w3-opacity w3-large">

CONTACT

<h3 class="w3-center">WHERE I WORK <p class="w3-center"> I'd love your feedback!

<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Chicago, US        <i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Phone: +00 151515 <i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Email: mail@mail.com Swing by for a cup of <i class="fa fa-coffee"></i>, or leave me a note: <form action="/action_page.php" target="_blank"> <input class="w3-input w3-border" type="text" placeholder="Name" required name="Name"> <input class="w3-input w3-border" type="text" placeholder="Email" required name="Email"> <input class="w3-input w3-border" type="text" placeholder="Message" required name="Message"> <button class="w3-button w3-black w3-right w3-section" type="submit"> <i class="fa fa-paper-plane"></i> SEND MESSAGE

<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off"> <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a> <i class="fa fa-facebook-official w3-hover-opacity"></i> <i class="fa fa-instagram w3-hover-opacity"></i> <i class="fa fa-snapchat w3-hover-opacity"></i> <i class="fa fa-pinterest-p w3-hover-opacity"></i> <i class="fa fa-twitter w3-hover-opacity"></i> <i class="fa fa-linkedin w3-hover-opacity"></i> Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a>

function myMap { myCenter=new google.maps.LatLng(41.878114, -87.629798); var mapOptions= { center:myCenter, zoom:12, scrollwheel: false, draggable: false, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);

var marker = new google.maps.Marker({   position: myCenter,  }); marker.setMap(map); }

// Modal Image Gallery function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; var captionText = document.getElementById("caption"); captionText.innerHTML = element.alt; }

// Change style of navbar on scroll window.onscroll = function {myFunction}; function myFunction { var navbar = document.getElementById("myNavbar"); if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white"; } else { navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", ""); } }

// Used to toggle the menu on small screens when clicking on the menu button function toggleFunction { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap">