deleted template from w3school and put much simplier template with chatgpt's help
This commit is contained in:
109
index.html
109
index.html
@@ -1,77 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Peter the Baker</title>
|
||||
|
||||
<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">
|
||||
<!-- Optional: system fonts for speed; swap later if you like -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="/resources/css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
|
||||
<!-- 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 class="site-header">
|
||||
<img class="avatar" src="/resources/img/pb.png" alt="Portrait of Peter Baker" width="200" height="200" class="responsive"/>
|
||||
<h1 class="site-title">Peter Baker</h1>
|
||||
</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>
|
||||
<nav class="site-nav" aria-label="Primary">
|
||||
<ul>
|
||||
<li><a href="#social">Social</a></li>
|
||||
<li><a href="#projects">Projects</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main id="main" class="content">
|
||||
<section id="social"><h2>Social</h2><p>Links coming soon.</p></section>
|
||||
<section id="projects"><h2>Projects</h2><p>Stuff I’m building.</p></section>
|
||||
<section id="contact"><h2>Contact</h2><p>Email or DM.</p></section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<small>© <span id="year"></span> Peter Baker</small>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('year').textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user