78 lines
3.5 KiB
HTML
Executable File
78 lines
3.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
|
|
<html lang="eng">
|
|
<head>
|
|
<title>Peter the Baker</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" media="screen" href="/resources/css/index.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Iceland">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
body, h1,h2,h3,h4,h5,h6 {font-family: "Iceland", sans-serif}
|
|
.w3-row-padding img {margin-bottom: 12px}
|
|
/* Set the width of the sidebar to 120px */
|
|
.w3-sidebar {width: 120px;background: #222;}
|
|
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
|
|
#main {margin-left: 120px}
|
|
/* Remove margins from "page content" on small screens */
|
|
@media only screen and (max-width: 600px) {#main {margin-left: 0}}
|
|
</style>
|
|
</head>
|
|
<body class="w3-black">
|
|
|
|
<!-- Icon Bar (Sidebar - hidden on small screens) -->
|
|
<!-- Sidebar -->
|
|
<nav class="w3-sidebar w3-bar-block w3-small w3-hide-small w3-center">
|
|
<!-- Avatar / Logo at very top of sidebar -->
|
|
<img src="/resources/img/pb_16_9_under512kb.webp" style="width:100%" alt="Avatar">
|
|
|
|
<a href="#" class="w3-bar-item w3-button w3-padding-large">
|
|
<i class="fa fa-home w3-xxlarge"></i>
|
|
<p>HOME</p>
|
|
</a>
|
|
|
|
<a href="#about" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
|
|
<i class="fa fa-user w3-xxlarge"></i>
|
|
<p>SOCIAL</p>
|
|
</a>
|
|
|
|
<a href="#photos" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
|
|
<i class="fa fa-eye w3-xxlarge"></i>
|
|
<p>PISTORIUM</p>
|
|
</a>
|
|
|
|
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
|
|
<i class="fa fa-envelope w3-xxlarge"></i>
|
|
<p>CONTACT</p>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<div class="w3-padding-large" id="main">
|
|
|
|
<!-- Header/Home -->
|
|
<header class="w3-containerbody, h1,h2,h3,h4,h5,h6 {font-family: "Iceland", sans-serif}
|
|
.w3-row-padding img {margin-bottom: 12px}
|
|
/* Set the width of the sidebar to 120px */
|
|
.w3-sidebar {width: 120px;background: #181303;}
|
|
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
|
|
#main {margin-left: 120px}
|
|
/* Remove margins from "page content" on small screens */
|
|
@media only screen and (max-width: 600px) {#main {margin-left: 0}}
|
|
w3-center w3-black" id="home">
|
|
<h1 class="w3-jumbo"><span class="w3-hide-small">I'm</span> Peter Baker</h1>
|
|
<p>Photographer and Web Designer.</p>
|
|
<img src="/resources/img/pb_16_9_under512kb.webp" alt="Petrus Pistor" class="w3-image" style="max-width:100%; height:auto;">
|
|
</header>
|
|
|
|
</div>
|
|
<!-- About Section -->
|
|
<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about">
|
|
<h2 class="w3-text-light-grey">My Name</h2>
|
|
<hr style="width:200px" class="w3-opacity">
|
|
<p>Some text about me. Some text about me. 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>
|