deleted template from w3school and put much simplier template with chatgpt's help
This commit is contained in:
105
index.html
105
index.html
@@ -1,77 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="eng">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<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>
|
||||
|
||||
<!-- 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 class="w3-black">
|
||||
<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>
|
||||
|
||||
@@ -1,83 +1,94 @@
|
||||
@import 'https://fonts.googleapis.com/css?family=Iceland|Cairo&display=swap'
|
||||
/* W3.CSS 5.02 - Cleaned Version */
|
||||
|
||||
/* Base Reset */
|
||||
html, body { font-family: Verdana, sans-serif; font-size: 15px; line-height: 1.5; margin: 0; overflow-x: hidden; box-sizing: border-box }
|
||||
*, *:before, *:after { box-sizing: inherit }
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 10px 0;
|
||||
/* Basic reset & layout */
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
color: #efefef;
|
||||
background: #2c2c2c;
|
||||
line-height: 1.5;
|
||||
}
|
||||
h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px }
|
||||
h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px }
|
||||
|
||||
a { background: transparent; color: inherit; text-decoration: none }
|
||||
img { max-width: 100%; height: auto; vertical-align: middle; border: 0 }
|
||||
|
||||
/* Tables */
|
||||
.w3-table, .w3-table-all { border-collapse: collapse; width: 100% }
|
||||
.w3-table-all { border: 1px solid #ccc }
|
||||
.w3-table td, .w3-table th,
|
||||
.w3-table-all td, .w3-table-all th {
|
||||
padding: 8px; text-align: left; vertical-align: top
|
||||
/* Accessibility: visible focus */
|
||||
:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }
|
||||
.skip-link {
|
||||
position: absolute; left: -9999px; top: -9999px;
|
||||
}
|
||||
.w3-bordered tr, .w3-table-all tr { border-bottom: 1px solid #ddd }
|
||||
.w3-striped tbody tr:nth-child(even),
|
||||
.w3-table-all tr:nth-child(even) { background: #f1f1f1 }
|
||||
.skip-link:focus { left: 1rem; top: 1rem; background:#111; color:#fff; padding:.5rem .75rem; border-radius:.5rem; }
|
||||
|
||||
/* Buttons */
|
||||
.w3-button, .w3-btn {
|
||||
display: inline-block; padding: 8px 16px;
|
||||
border: none; cursor: pointer; background: inherit; color: inherit;
|
||||
text-align: center; white-space: nowrap;
|
||||
user-select: none; -webkit-user-select: none;
|
||||
/* Header with centered image at the very top */
|
||||
.site-header {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 3rem 1rem 2rem;
|
||||
gap: .5rem;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
|
||||
}
|
||||
.w3-button:hover { background: #ccc; color: #000 }
|
||||
|
||||
/* Lists */
|
||||
.w3-ul { list-style: none; margin: 0; padding: 0 }
|
||||
.w3-ul li { padding: 8px 16px; border-bottom: 1px solid #ddd }
|
||||
.w3-ul li:last-child { border-bottom: none }
|
||||
|
||||
/* Containers */
|
||||
.w3-container, .w3-panel { padding: 0.01em 16px }
|
||||
.w3-panel { margin: 16px 0 }
|
||||
|
||||
/* Grid */
|
||||
.w3-row:after, .w3-row-padding:after, .w3-clear:after {
|
||||
content: ""; display: table; clear: both
|
||||
.site-header .avatar {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
border: 4px solid rgba(255,255,255,.15);
|
||||
max-width: 40vw; /* keeps it reasonable on mobile */
|
||||
height: auto;
|
||||
}
|
||||
.site-title {
|
||||
margin: .25rem 0 0;
|
||||
font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
.site-tagline {
|
||||
margin: 0;
|
||||
color: #cfcfcf;
|
||||
font-size: clamp(.95rem, .5vw + .8rem, 1.1rem);
|
||||
}
|
||||
.w3-col { float: left; width: 100% }
|
||||
@media (min-width:601px) { .w3-col.m6 { width: 50% } }
|
||||
@media (min-width:993px) { .w3-col.l4 { width: 33.33% } }
|
||||
|
||||
/* Cards */
|
||||
.w3-card { box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.12) }
|
||||
.w3-card-4 { box-shadow: 0 4px 10px rgba(0,0,0,0.2), 0 4px 20px rgba(0,0,0,0.19) }
|
||||
/* Horizontal nav under header */
|
||||
.site-nav {
|
||||
position: sticky; /* optional: keeps it visible on scroll */
|
||||
top: 0;
|
||||
backdrop-filter: blur(6px);
|
||||
background: rgba(20,20,20,.7);
|
||||
border-top: 1px solid rgba(255,255,255,.07);
|
||||
border-bottom: 1px solid rgba(255,255,255,.07);
|
||||
}
|
||||
.site-nav ul {
|
||||
margin: 0 auto;
|
||||
padding: .5rem 1rem;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
.site-nav a {
|
||||
display: inline-block;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: .5rem;
|
||||
color: #efefef;
|
||||
text-decoration: none;
|
||||
}
|
||||
.site-nav a:hover,
|
||||
.site-nav a:focus-visible {
|
||||
background: rgba(255,255,255,.08);
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.w3-hide { display: none !important }
|
||||
.w3-show { display: block !important }
|
||||
.w3-center { text-align: center !important }
|
||||
.w3-left { float: left !important }
|
||||
.w3-right { float: right !important }
|
||||
.w3-round { border-radius: 4px }
|
||||
.w3-circle { border-radius: 50% }
|
||||
/* Content */
|
||||
.content {
|
||||
max-width: 900px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem 3rem;
|
||||
}
|
||||
.content h2 { margin-top: 2rem; font-size: 1.35rem; }
|
||||
|
||||
/* Colors (sample subset) */
|
||||
.w3-red { background: #f44336 !important; color: #fff !important }
|
||||
.w3-green { background: #4CAF50 !important; color: #fff !important }
|
||||
.w3-blue { background: #2196F3 !important; color: #fff !important }
|
||||
.w3-yellow { background: #ffeb3b !important; color: #000 !important }
|
||||
.w3-black { background: #000 !important; color: #fff !important }
|
||||
.w3-white { background: #fff !important; color: #000 !important }
|
||||
.w3-grey, .w3-gray { background: #9e9e9e !important; color: #000 !important }
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
border-top: 1px solid rgba(255,255,255,.07);
|
||||
color: #bdbdbd;
|
||||
padding: 1.5rem 1rem 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Text Colors */
|
||||
.w3-text-red { color: #f44336 !important }
|
||||
.w3-text-green { color: #4CAF50 !important }
|
||||
.w3-text-blue { color: #2196F3 !important }
|
||||
.w3-text-black { color: #000 !important }
|
||||
.w3-text-white { color: #fff !important }
|
||||
/* Responsive tweaks */
|
||||
@media (min-width: 768px) {
|
||||
.site-header { padding: 4rem 1rem 2.25rem; }
|
||||
.site-nav ul { gap: 1.25rem; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user