chopster44/chopster44.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

created a page to test out a new layout

Browse Source
This commit is contained in:
chopster44
2024-07-06 15:46:06 +01:00
parent b504ea6d96
commit f46f6f896e
2 changed files with 56 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.css
View File

@@ -1,16 +1,40 @@
body { body {
margin: 40px auto; margin: 40px auto;
max-width: 650px; max-width: 800px;
line-height: 1.8; line-height: 1.8;
font-size: 18px; font-size: 18px;
color: #454545; color: #454545;
padding: 0 10px; padding: 0 10px;
background: #fbf9f7; background: #fbf9f7;
display: grid;
grid-template-columns: 150px auto;
grid-template-areas: "logo title"
"nav content"
"nav foot";
/*gap: 10px;*/
height: 100%;
} }
header { .logo {
grid-area: logo;
}
.title {
grid-area: title;
}
.nav {
grid-area: nav;
display: flex; display: flex;
align-items: center; flex-direction: column;
}
.main {
grid-area: content;
}
.footer {
grid-area: foot;
} }
a { a {

29
template.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="index.css" rel="stylesheet">
<title>chptr</title>
</head>
<body>
<!-- <header>-->
<img src="https://chopster44.com/img/pfp.png" width="141" class="logo">
<h1 class="title">Chopster44</h1>
<!-- </header>-->
<div class="nav">
<a href="/#about">[About]</a>
<a href="/blog">[Blog]</a>
<a href="/projects">[Projects]</a>
<a href="/rockets">[Rockets]</a>
<a href="/linux">[Linux]</a>
</div>
<div class="main">
<h2>A header!</h2>
<p>Some text</p>
</div>
<div class="footer">
<p>&#169; chopster44</p>
</div>
</body>
</html>