kindly ignore this ty
html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- The next line is a skip-to-content link for keyboard users. Do not remove it! -->
<a href="#content" id="skip-to-content-link">Skip to content</a>
<div class="header-image">
<img src="https://file.garden/ZlTATDBYblwbIgU2/IMG_95744.png" alt="" />
</div>
<div class="header-content">
<div class="header-title">Website Title</div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | </div>
</header>
<!-- =============================================== -->
<!-- LEFT SIDEBAR -->
<!-- =============================================== -->
<aside class="left-sidebar">
<!-- NAVIGATION -->
<nav>
<div class="sidebar-title">Navigation</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/page1">Page 1</a></li>
<li><a href="/page2">Page 2</a></li>
<li><a href="/page3">Page 3</a></li>
<li>
<strong>Submenu</strong>
<ul>
<li><a href="/page-a">Page A</a></li>
<li><a href="/page-b">Page B</a></li>
<li><a href="/page-c">Page C</a></li>
<li><a href="/page-d">Page D</a></li>
<li><a href="/page-e">Page E</a></li>
</ul>
</li>
</ul>
</nav>
<div class="sidebar-section">
<div class="sidebar-title">Section Title</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Necessit atibus perferendis inventore tempore vel optio similique blanditiis quasi quam?</p>
</div>
<div class="sidebar-section">
<div class="sidebar-title">Section Title</div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Necessit atibus perferendis inventore tempore vel optio similique blanditiis quasi quam?</p>
</blockquote>
</div>
<div class="sidebar-section">
<div class="sidebar-title">Section Title</div>
<ul>
<li>List</li>
<li>List</li>
<li><a href="/">List</a></li>
<li>List</li>
</ul>
</div>
<div class="sidebar-section">
<div class="sidebar-title">Section Title</div>
<marquee>
<a href="https://petrapixel.neocities.org/" target="_blank"><img src="https://cdn.jsdelivr.net/gh/petracoding/petrapixel.neocities.org@latest/public/img/linkback.gif" alt="petrapixel"></a>
<a href="https://petrapixel.neocities.org/" target="_blank"><img src="https://cdn.jsdelivr.net/gh/petracoding/petrapixel.neocities.org@latest/public/img/linkback.gif" alt="petrapixel"></a>
<a href="https://petrapixel.neocities.org/" target="_blank"><img src="https://cdn.jsdelivr.net/gh/petracoding/petrapixel.neocities.org@latest/public/img/linkback.gif" alt="petrapixel"></a>
<a href="https://petrapixel.neocities.org/" target="_blank"><img src="https://cdn.jsdelivr.net/gh/petracoding/petrapixel.neocities.org@latest/public/img/linkback.gif" alt="petrapixel"></a>
</marquee>
</div>
<div class="sidebar-section">
<div class="sidebar-title">Section Title</div>
<img class="full-width-image" src="https://picsum.photos/id/112/1000/400">
</div>
<div class="sidebar-section">
<div class="sidebar-title">Section Title</div>
<div class="site-button">
<a href="https://petrapixel.neocities.org/" target="_blank"><img src="https://cdn.jsdelivr.net/gh/petracoding/petrapixel.neocities.org@latest/public/img/linkback.gif" alt="petrapixel"></a>
<textarea><a href="https://petrapixel.neocities.org/" target="_blank"><img src="https://cdn.jsdelivr.net/gh/petracoding/petrapixel.neocities.org@latest/public/img/linkback.gif" alt="petrapixel"></a></textarea>
</div>
</div>
</aside>
<main id="content"> <!-- Do NOT remove the ID here -->
<!-- =============================================== -->
<!-- MAIN CONTENT -->
<!-- =============================================== -->
<section>
<h1>Page Title (Heading 1)</h1>
<p>This layout was generated with <a href="https://petrapixel.neocities.org/" target="_blank">petrapixel</a>'s layout generator. You may remove the credit in the footer, but please leave the credit in the code. Thank you!</p>
<p>
I will now show you how to use the most common HTML text elements:
<b>This is bold text.</b>
<strong>This is also bold text.</strong>
<i>This is italic text.</i>
<em>This is also italic text.</em>
<strike>This is strikethrough text.</strike>
<u>This is underlined text.</u>
<a href="https://petrapixel.neocities.org/">This is a link.</a>
<a href="https://petrapixel.neocities.org/" target="_blank">This is a link that will open in a new tab.</a>
<code>This is code (displayed in a monospace font).</code>
<abbr title="Example.">This is an abbreviation (Try hovering over it).</abbr>
<mark>This is highlighted text.</mark>
This is a line break (The br stands for break.): <br />It's different from a paragraph because it does not add space inbetween the lines of text.
</p>
<p>This is a paragraph. As you can see, there's a bit of space between it and the previous paragraph.</p>
<blockquote>This is a blockquote. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</blockquote>
<h2>Heading 2</h2>
<ul>
<li>Unsorted list</li>
<li>Unsorted list</li>
<li>Unsorted list</li>
</ul>
<p>Lorem ipsum dolor sit amet.</p>
<ol>
<li>Sorted list</li>
<li>Sorted list</li>
<li>Sorted list</li>
</ol>
<h3>Heading 3</h3>
<pre>This is preformatted text, which means that spaces are preserved:
:D</pre>
<p>This is preformatted code:</p>
<pre><code><!DOCTYPE html>
|
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html></code></pre>
</body>
</html>
css
/ FONT IMPORT /
@import url('https://fonts.googleapis.com/css2?family=Cossette+Titre:wght@400;700&display=swap');
/ -------------------------------------------------------- /
/ VARIABLES /
/ -------------------------------------------------------- /
/ Variables are used like this: var(--text-color) /
:root {
/ Background Colors: /
--background-color: #686868;
--content-background-color: #000000;
--sidebar-background-color: #000000;
/ Text Colors: /
--text-color: #ffffff;
--sidebar-text-color: #ffffff;
--link-color: #b7b7b7;
--link-color-hover: #979797;
/ Text: /
--font: 'Cosette Titre', sans-serif;
--heading-font: 'Cosette Titre', sans-serif;
--font-size: 14px;
/ Other Settings: /
--margin: 8px;
--padding: 30px;
--border: 5px solid #ffffff;
--round-borders: 20px;
--sidebar-width: 160px;
}
/ -------------------------------------------------------- /
/ BASICS /
/ -------------------------------------------------------- /
- {
box-sizing: border-box;
}
body {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 100vh;
font-size: var(--font-size);
margin: 0;
padding: var(--margin);
color: var(--text-color);
font-family: var(--font);
line-height: 1.2;
background: var(--background-color);
background-image: url("https://i.postimg.cc/1zfCvMwp/711492quxsntt3op.gif");
}
::selection {
/ (Text highlighted by the user) /
background: rgba(0, 0, 0, 0.2);
}
mark {
/ Text highlighted by using the <mark> element /
text-shadow: 1px 1px 4px var(--link-color);
background-color: inherit;
color: var(--text-color);
}
/ Links: /
a {
text-decoration: underline;
}
a,
a:visited {
color: var(--link-color);
}
a:hover,
a:focus {
color: var(--link-color-hover);
text-decoration: none;
}
/ -------------------------------------------------------- /
/ LAYOUT /
/ -------------------------------------------------------- /
.layout {
width: 1000px;
display: grid;
grid-gap: var(--margin);
grid-template: "header header" auto "leftSidebar main" auto "footer footer" auto / var(--sidebar-width) auto;
/ Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid /
}
main {
grid-area: main;
overflow-y: auto;
padding: var(--padding);
background: var(--content-background-color);
border: var(--border);
border-radius: var(--round-borders);
}
/ -------------------------------------------------------- /
/ HEADER /
/ -------------------------------------------------------- /
header {
grid-area: header;
font-size: 1.2em;
border: var(--border);
border-radius: var(--round-borders);
background: var(--content-background-color);
}
.header-content {
padding: var(--padding);
}
.header-title {
font-family: var(--heading-font);
font-size: 1.5em;
font-weight: bold;
}
.header-image img {
width: 100%;
height: auto;
}
/ -------------------------------------------------------- /
/ SIDEBARS /
/ -------------------------------------------------------- /
aside {
grid-area: aside;
border: var(--border);
border-radius: var(--round-borders);
overflow: hidden;
background: var(--sidebar-background-color);
padding: var(--padding);
color: var(--sidebar-text-color);
}
.left-sidebar {
grid-area: leftSidebar;
}
.right-sidebar {
grid-area: rightSidebar;
}
.sidebar-title {
font-weight: bold;
font-size: 1.2em;
font-family: var(--heading-font);
}
.sidebar-section:not(:last-child) {
margin-bottom: 3em;
}
.sidebar-section ul,
.sidebar-section ol {
padding-left: 1.5em;
}
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
margin-top: 10px;
}
/ Sidebar Blockquote: /
.sidebar-section blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
overflow: hidden;
}
.sidebar-section blockquote > *:first-child {
margin-top: 0;
}
.sidebar-section blockquote > *:last-child {
margin-bottom: 0;
}
/ Site Button: /
.site-button {
display: flex;
flex-direction: column;
align-items: center;
}
.site-button textarea {
font-family: monospace;
font-size: 0.7em;
}
/ -------------------------------------------------------- /
/ FOOTER /
/ -------------------------------------------------------- /
footer {
grid-area: footer;
border: var(--border);
border-radius: var(--round-borders);
overflow: hidden;
font-size: 0.75em;
padding: 15px;
background: var(--content-background-color);
display: flex;
justify-content: center;
}
footer a,
footer a:visited {
color: var(--link-color);
}
footer a:hover,
footer a:focus {
color: var(--link-color-hover);
}
/ -------------------------------------------------------- /
/ NAVIGATION /
/ -------------------------------------------------------- /
nav {
margin-bottom: 3em;
}
nav .sidebar-title {
margin-bottom: 0.5em;
}
nav ul {
margin: 0 -5px;
padding: 0;
list-style: none;
user-select: none;
}
nav ul li {
margin-bottom: 0;
}
nav > ul li > a,
nav > ul li > strong {
display: inline-block;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 5px 10px;
}
nav > ul li > a.active,
nav > ul li > details.active summary {
font-weight: bold;
}
nav ul summary {
cursor: pointer;
}
nav ul ul li > a {
padding-left: 30px;
}
/ -------------------------------------------------------- /
/ CONTENT /
/ -------------------------------------------------------- /
main {
line-height: 1.5;
}
main a,
main a:visited {
color: var(--link-color);
}
main a:hover,
main a:focus {
color: var(--link-color-hover);
text-decoration-style: wavy;
}
main p,
main .image,
main .full-width-image,
main .two-columns {
margin: 0.75em 0;
}
main ol,
main ul {
margin: 0.5em 0;
padding-left: 1.5em;
}
main ol li,
main ul li {
margin-bottom: 0.2em;
line-height: 1.3;
}
main ol {
padding-left: 2em;
}
main blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
}
main pre {
margin: 1em 0 1.5em;
}
main code {
text-transform: none;
}
main center {
margin: 1em 0;
padding: 0 1em;
}
main hr {
border: 0;
border-top: var(--border);
margin: 1.5em 0;
}
/ HEADINGS: /
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
font-family: var(--heading-font);
margin-bottom: 0;
line-height: 1.5;
}
main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
margin-top: 0;
}
main h1 {
font-size: 1.5em;
}
main h2 {
font-size: 1.4em;
}
main h3 {
font-size: 1.3em;
}
main h4 {
font-size: 1.2em;
}
main h5 {
font-size: 1.1em;
}
main h6 {
font-size: 1em;
}
/ COLUMNS: /
.two-columns {
display: flex;
}
.two-columns > * {
flex: 1 1 0;
margin: 0;
}
.two-columns > *:first-child {
padding-right: 0.75em;
}
.two-columns > *:last-child {
padding-left: 0.75em;
}
/ -------------------------------------------------------- /
/ CONTENT IMAGES /
/ -------------------------------------------------------- /
.image {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.full-width-image {
display: block;
width: 100%;
height: auto;
}
.images {
display: flex;
width: calc(100% + 5px + 5px);
margin-left: -5px;
margin-right: -5px;
}
.images img {
width: 100%;
height: auto;
padding: 5px;
margin: 0;
overflow: hidden;
}
/ -------------------------------------------------------- /
/ ACCESSIBILITY /
/ -------------------------------------------------------- /
/ please do not remove this. /
skip-to-content-link {
position: fixed;
top: 0;
left: 0;
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1;
font-size: 1.25rem;
background-color: var(--content-background-color);
color: var(--text-color);
transform: translateY(-3rem);
transition: transform 0.1s ease-in;
z-index: 99999999999;
}
skip-to-content-link:focus,
skip-to-content-link:focus-within {
transform: translateY(0);
}
/ -------------------------------------------------------- /
/ MOBILE RESPONSIVE /
/ -------------------------------------------------------- /
/ CSS Code for devices < 800px /
@media (max-width: 800px) {
body {
font-size: 14px;
}
.layout {
width: 100%;
grid-template: "header" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
/ Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid /
}
.right-sidebar {
display: none;
}
aside {
border-bottom: 1px solid;
padding: 9px;
font-size: 0.9em;
}
nav {
padding: 0;
}
nav > ul {
padding-top: 0.5em;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 0.5em;
}
main {
max-height: none;
padding: 15px;
}
.images {
flex-wrap: wrap;
}
.images img {
width: 100%;
}
skip-to-content-link {
}
}
content
NOTE: this layout was made with petrapixel's layout generator!
Am I using licensed images/images without credits? Contact me here.
About Me (on homepage)
Hi, I'm Donnie. I'm 15 and a Sagittarius. The only typology of mine that I know is INTP-T and 4w5. Also, I'm a "dandere". Does that count? put badges w/ pronouns stuff
Anyway, I'm just some random dude who picked up coding stuff around late 2024. My first experience with it was Rentry, but since then I've expanded to Fluffle and that's what I main now. I'm bored and self-centered and I like talking about myself, so I figured, why not make a personal website.
I go to high school (shocking) so I'm pretty busy with that, but summer break is soon (June 26th; it's late this year because that storm earlier this year hit us pretty bad so we had like a week off). I'm an idiot and failing all of my classes. Anyone wanna do my algebra work for me?