My first paragraph.
<title>W3.CSS Template</title> <style> 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; } } </style>
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.
My Name
<!-- Hide this text on small devices -->
<div class="w3-col m6 w3-hide-small w3-padding-large">
<p>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>
</div>
Im really good at:
Photography
Web Design
Photoshop
Partners
Projects Done
Happy Clients
Meetings
Here are some of my latest lorem work ipsum tipsum.
Click on the images to make them bigger
<div class="w3-col m3">
<img src="/w3images/p2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Coffee beans">
</div>
<div class="w3-col m3">
<img src="/w3images/p3.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Bear closeup">
</div>
<div class="w3-col m3">
<img src="/w3images/p4.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Quiet ocean">
</div>
<div class="w3-col m3">
<img src="/w3images/p6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="My beloved typewriter">
</div>
<div class="w3-col m3">
<img src="/w3images/p7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Empty ghost train">
</div>
<div class="w3-col m3">
<img src="/w3images/p8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Sailing">
</div>
<button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</button>
I'd love your feedback!
Phone: +00 151515
Email: mail@mail.com
Swing by for a cup of , or leave me a note:
Powered by w3.css
<script> // 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>