Initial Commit with old site files
This commit is contained in:
Boreal
parent
3ccd376af9
commit
ba1d26a028
|
|
@ -0,0 +1,54 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>boreal.zip blog</title>
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
|
||||||
|
<style>
|
||||||
|
.responsive-iframe {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="blog">
|
||||||
|
<h3>Blog 7/15/24 4:05 PM</h3>
|
||||||
|
<p>
|
||||||
|
Yo! Just added the trinkets page to this site. Its based off the toybox.js created by dante and I found it from ribo.zone. I have a link to the github for the code at the bottom of the trinkets page. My plan it to put fun gifs and adoptables I find there and have them link back to the source I found them from. I can't wait to see it all filled up.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="blog">
|
||||||
|
<h3>Blog 7/14/24 1:43 PM</h3>
|
||||||
|
<p>
|
||||||
|
Trying a different site counter. It's still a cute counter but now its unique visitors. Well now that I'm typing this out nothinf is stopping me from doing both so I think im gonna do that.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="blog">
|
||||||
|
<h3>Blog 7/14/24 5:15 AM</h3>
|
||||||
|
<p>
|
||||||
|
Still working on the site some more and I made the blog an iframe on the homepage which I realise I've seen before I just never put 2 and 2 together. Finally having a personal site is weird, it is so much more effort than social media which makes me have time to tink about how I sould represent myself and I feel like the its alot more lowkey than social media so Im not really out here expecting people to read this. I feel like calling it a multiplayer journal might be a fun name. Somepoint my music this evening/morning has transitionsed to break core & ambient sutff. This is one of the songs that started getting me hooked.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<iframe class="responsive-iframe" src="https://www.youtube-nocookie.com/embed/UgP5IZoSEJ4?si=5Jw0czBJr7SiTjnt" title="YouTube video player" frameborder="0" allow="" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="blog">
|
||||||
|
<h3>Blog 7/14/24 4:16 AM</h3>
|
||||||
|
<p>
|
||||||
|
Been working on the site most of the last 24hrs. I'm very much
|
||||||
|
enjoying the tinkering with HTML and CSS. There is something to be
|
||||||
|
said about being stoned, tired, and alone at 4 in the morning
|
||||||
|
browsing indie sites and just going with the flow. Multiply that
|
||||||
|
feeling by 10 when you factor in music like Need 2 by Pinegrove.</br>
|
||||||
|
Transcendant....
|
||||||
|
</p>
|
||||||
|
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/zE_rK8PX83Q?si=xZBvi-c8BmfYA3u1" title="YouTube video player" frameborder="0" allow="" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,138 @@
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link
|
||||||
|
href="../cyanobacteria.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
media="all"
|
||||||
|
/>
|
||||||
|
<title>Boreal's Webzone / Collectables</title>
|
||||||
|
<style>
|
||||||
|
.buttonbox {
|
||||||
|
display: flex; justify-content: center; flex-wrap: wrap; padding: 5px; text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toybox {
|
||||||
|
height: 30vw;
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toybox>* {
|
||||||
|
padding: 3px;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toybox>*:hover {
|
||||||
|
transform: scale(2);
|
||||||
|
z-index: 30 !important;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header><span>Collectables</span></header>
|
||||||
|
<section class="full">
|
||||||
|
<div id="toybox">
|
||||||
|
<!--
|
||||||
|
any regular dom element here will get position:absoluted and moved around based on its size
|
||||||
|
you can add padding etc to modify this size
|
||||||
|
-->
|
||||||
|
<a
|
||||||
|
href="https://web.archive.org/web/20090728080910/http://hk.geocities.com/joesuenhk/profile.html"
|
||||||
|
>
|
||||||
|
<img src="./img/mmzaku.gif" />
|
||||||
|
</a>
|
||||||
|
<a href="https://99gifshop.neocities.org/">
|
||||||
|
<img src="./img/world.gif" />
|
||||||
|
</a>
|
||||||
|
<a href="https://artwork.neocities.org//">
|
||||||
|
<img src="./img/wirt.gif" />
|
||||||
|
</a>
|
||||||
|
<a href="https://artwork.neocities.org//">
|
||||||
|
<img src="./img/lowlygif.gif" />
|
||||||
|
</a>
|
||||||
|
<a href="https://artwork.neocities.org//">
|
||||||
|
<img src="./img/greg.gif" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="full">
|
||||||
|
<h1>Quiz Results</h1>
|
||||||
|
<div
|
||||||
|
style="display: flex; justify-content: center; flex-wrap: wrap;"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://casiopea.neocities.org/isopod/isopodquiz.html"
|
||||||
|
>
|
||||||
|
<img src="https://i.imgur.com/wXF6sld.png" />
|
||||||
|
</a>
|
||||||
|
<a href="https://clownfred.zone/clownquiz">
|
||||||
|
<img
|
||||||
|
src="https://clownfred.zone/!Media/CQ/JesterCard1.png"
|
||||||
|
alt="I am a Jester! Click here to take the clown quiz!"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="full">
|
||||||
|
<h1>88x31 Buttons</h1>
|
||||||
|
<h2>Games</h2>
|
||||||
|
<p>Games that I enjoy and would recommend playing!</p>
|
||||||
|
<div class="buttonbox">
|
||||||
|
<img src="../images/buttons/minecraft.gif" alt="Minecraft" />
|
||||||
|
<img src="../images/buttons/cs.gif" alt="Counter-Strike" />
|
||||||
|
<img src="../images/buttons/eveonline.gif" alt="EVE Online" />
|
||||||
|
<img src="https://yesterhost.neocities.org/archive/buttons/button136.gif" alt="DDR Online"/>
|
||||||
|
</div>
|
||||||
|
<h2>Silly</h2>
|
||||||
|
<p>
|
||||||
|
Some silly buttons I have found in button collections around
|
||||||
|
the web.
|
||||||
|
</p>
|
||||||
|
<div class="buttonbox">
|
||||||
|
<img src="../images/buttons/desp-anim.gif" alt="Despacito" />
|
||||||
|
<img src="../images/buttons/majimanow.png" alt="Majima Now" />
|
||||||
|
<img src="../images/buttons/nedscape_now.gif" alt="Nedscape now"/>
|
||||||
|
</div>
|
||||||
|
<h2>Other</h2>
|
||||||
|
<p>
|
||||||
|
Statements I support or other things that don't fit in other
|
||||||
|
sections.
|
||||||
|
</p>
|
||||||
|
<div class="buttonbox">
|
||||||
|
<img src="../images/buttons/elimdrm.gif" alt="Eliminate DRM"/>
|
||||||
|
<img src="../images/buttons/magic.gif" alt="Magic" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="small"></div>
|
||||||
|
<div class="small">
|
||||||
|
<nav>
|
||||||
|
<a href="../home.html">Back</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="small"></div>
|
||||||
|
</div>
|
||||||
|
<script src="toybox.js"></script>
|
||||||
|
<footer>
|
||||||
|
<span>
|
||||||
|
Theme based on cyanobacteria.css by
|
||||||
|
<a href="https://ribo.zone">ribo.zone</a>
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/dantescanline/toybox">Toybox.js</a>
|
||||||
|
created by
|
||||||
|
<a href="https://dantescanline.com/">DanteScanline</a>
|
||||||
|
</span>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
// toybox.js by Dante Scanline 2022
|
||||||
|
// UNIVERSAL PUBLIC DOMAIN LICENSE - This code and everything else in the universe is in the public domain
|
||||||
|
|
||||||
|
/// ------------
|
||||||
|
|
||||||
|
// CONFIGURATION VARIABLES, please change these!
|
||||||
|
const BUBBLE_IN = true; //makes the toys come in one at a time
|
||||||
|
const BUBBLE_DELAY = 250; // if bubbling in, how much time in miliseconds between each new toy. bigger number is slowe
|
||||||
|
|
||||||
|
const PUSH_SPEED = 3; // base amount that toys push each other, bigger number means quicker stronger pushing
|
||||||
|
const RANDOM_START_OFFSET = 200; // random distance from center in pixels where toys are spawned inside off
|
||||||
|
|
||||||
|
/// ------------
|
||||||
|
|
||||||
|
let toyContainer;
|
||||||
|
let items = []; // array of dom elements
|
||||||
|
|
||||||
|
// Fisher–Yates knuth shuffle
|
||||||
|
function shuffle(array) {
|
||||||
|
let currentIndex = array.length,
|
||||||
|
randomIndex;
|
||||||
|
|
||||||
|
// While there remain elements to shuffle.
|
||||||
|
while (currentIndex != 0) {
|
||||||
|
// Pick a remaining element.
|
||||||
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex--;
|
||||||
|
|
||||||
|
// And swap it with the current element.
|
||||||
|
[array[currentIndex], array[randomIndex]] = [
|
||||||
|
array[randomIndex],
|
||||||
|
array[currentIndex],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
// reenable items sequentially for bubbling
|
||||||
|
function reEnable(index) {
|
||||||
|
if (index > items.length - 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
items[index].domElement.style.display = "initial";
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
reEnable(index + 1);
|
||||||
|
}, BUBBLE_DELAY);
|
||||||
|
}
|
||||||
|
|
||||||
|
// the object, with width height from DOM and then a position we set :)
|
||||||
|
class Toy {
|
||||||
|
constructor(domElement) {
|
||||||
|
this.domElement = domElement;
|
||||||
|
this.domElement.style.position = "absolute";
|
||||||
|
|
||||||
|
let rect = toyContainer.getBoundingClientRect();
|
||||||
|
this.x = rect.width / 2 + 100 - Math.random() * 200;
|
||||||
|
this.y = rect.height / 2 + 100 - Math.random() * 200;
|
||||||
|
|
||||||
|
this.visualX = this.x;
|
||||||
|
this.visualY = this.y;
|
||||||
|
|
||||||
|
this.updateSize();
|
||||||
|
this.updatePosition();
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePosition() {
|
||||||
|
this.visualX += (this.x - this.visualX) * 0.1;
|
||||||
|
this.visualY += (this.y - this.visualY) * 0.1;
|
||||||
|
this.domElement.style.left = `${this.x}px`;
|
||||||
|
this.domElement.style.top = `${this.y}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSize() {
|
||||||
|
this.width = this.domElement.clientWidth;
|
||||||
|
if (this.width == 0 || this.width == undefined) {
|
||||||
|
console.error("no size for element yet");
|
||||||
|
}
|
||||||
|
this.height = this.domElement.clientHeight;
|
||||||
|
if (this.width < 65 || this.height < 65) {
|
||||||
|
this.domElement.style["z-index"] = "20";
|
||||||
|
}
|
||||||
|
this.domElement.style.marginLeft = `${-this.width / 2}px`;
|
||||||
|
this.domElement.style.marginTop = `${-this.height / 2}px`;
|
||||||
|
// this.domElement.style.transform = `translate(${-this.width / 2}px, ${-this.height / 2}px)`
|
||||||
|
}
|
||||||
|
|
||||||
|
pointOverlaps(xx, yy) {
|
||||||
|
return (
|
||||||
|
xx > this.x - this.width / 2 &&
|
||||||
|
xx < this.x + this.width / 2 &&
|
||||||
|
yy > this.y - this.height / 2 &&
|
||||||
|
yy < this.y + this.height / 2
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
toyOverlaps(otherToy) {
|
||||||
|
const corners = [
|
||||||
|
[otherToy.x - otherToy.width / 2, otherToy.y - otherToy.height / 2],
|
||||||
|
[otherToy.x + otherToy.width / 2, otherToy.y - otherToy.height / 2],
|
||||||
|
[
|
||||||
|
otherToy.x - otherToy.height / 2,
|
||||||
|
otherToy.y + otherToy.height / 2,
|
||||||
|
],
|
||||||
|
[otherToy.x + otherToy.width / 2, otherToy.y + otherToy.height / 2],
|
||||||
|
];
|
||||||
|
|
||||||
|
// check if the other toys corners are inside our rect
|
||||||
|
for (let i = 0; i < corners.length; i++) {
|
||||||
|
let pair = corners[i];
|
||||||
|
if (this.pointOverlaps(pair[0], pair[1])) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// edge case, where we are fit entirely inside the other rect, so check one of our points on them
|
||||||
|
return otherToy.pointOverlaps(this.x, this.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
getPushed(otherToy) {
|
||||||
|
let distance = PUSH_SPEED;
|
||||||
|
|
||||||
|
let centerX = this.x;
|
||||||
|
let centerY = this.y;
|
||||||
|
|
||||||
|
let otherCenterX = otherToy.x;
|
||||||
|
let otherCenterY = otherToy.y;
|
||||||
|
|
||||||
|
let angle = Math.atan2(centerY - otherCenterY, centerX - otherCenterX);
|
||||||
|
|
||||||
|
let finalStrength = distance;
|
||||||
|
|
||||||
|
// if the toy pushing us is roughly bigger than us, get pushed more to help offset some biasing
|
||||||
|
if (
|
||||||
|
otherToy.width + otherToy.height >
|
||||||
|
(this.width + this.height) * 1.3
|
||||||
|
) {
|
||||||
|
finalStrength *= 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.x += Math.cos(angle) * finalStrength;
|
||||||
|
this.y += Math.sin(angle) * finalStrength;
|
||||||
|
this.updatePosition();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", init);
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
toyContainer = document.querySelector("#toybox");
|
||||||
|
let nodes = Array.from(toyContainer.childNodes);
|
||||||
|
nodes = nodes.filter((node) => node.nodeType == 1);
|
||||||
|
nodes = shuffle(nodes); // help prevent biases
|
||||||
|
|
||||||
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
items.push(new Toy(nodes[i]));
|
||||||
|
|
||||||
|
if (BUBBLE_IN) {
|
||||||
|
if (i > 3) {
|
||||||
|
items[i].domElement.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (BUBBLE_IN) {
|
||||||
|
reEnable(3);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(main);
|
||||||
|
}
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
items.map((item) => item.updateSize());
|
||||||
|
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
const itemA = items[i];
|
||||||
|
|
||||||
|
for (let k = 0; k < items.length; k++) {
|
||||||
|
if (i == k) continue;
|
||||||
|
|
||||||
|
const itemB = items[k];
|
||||||
|
if (itemA.toyOverlaps(itemB)) {
|
||||||
|
itemB.getPushed(itemA);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let rect = toyContainer.getBoundingClientRect();
|
||||||
|
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
const itemA = items[i];
|
||||||
|
if (itemA.x - itemA.width / 2 < 0) {
|
||||||
|
itemA.x += 10;
|
||||||
|
itemA.updatePosition();
|
||||||
|
}
|
||||||
|
if (itemA.y - itemA.height / 2 < 0) {
|
||||||
|
itemA.y += 10;
|
||||||
|
itemA.updatePosition();
|
||||||
|
}
|
||||||
|
if (itemA.x + itemA.width / 2 > rect.width) {
|
||||||
|
itemA.x -= 10;
|
||||||
|
itemA.updatePosition();
|
||||||
|
}
|
||||||
|
if (itemA.y + itemA.height / 2 > rect.height) {
|
||||||
|
itemA.y -= 5;
|
||||||
|
itemA.updatePosition();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(main);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 480 B |
|
|
@ -0,0 +1,285 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Orbitron";
|
||||||
|
src: url(../fonts/Orbitron-Regular.ttf) format("truetype");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Roboto";
|
||||||
|
src: url(../fonts/Roboto-Regular.ttf) format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* start light mode styling */
|
||||||
|
:root {
|
||||||
|
--text: darkslategrey;
|
||||||
|
--border: lightgrey;
|
||||||
|
--accent: teal;
|
||||||
|
--bg: #dce3e1;
|
||||||
|
--gradientTop: white;
|
||||||
|
--gradientBottom: rgb(240, 248, 255, 0.8);
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background: url("***light mode banner image***");
|
||||||
|
}
|
||||||
|
/* end light mode styling */
|
||||||
|
|
||||||
|
/* start dark mode styling */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--text: #cdd6f4;
|
||||||
|
--border: #585b70;
|
||||||
|
--accent: #f38ba8;
|
||||||
|
--bg: #1e1e2e;
|
||||||
|
--gradientBottom: #11111b;
|
||||||
|
--gradientTop: #313244;
|
||||||
|
a:link {
|
||||||
|
color: #f38ba8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background: url("https://images.freeimages.com/images/large-previews/913/sea-3-1188161.jpg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* end dark mode styling */
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding: 10px;
|
||||||
|
font-family: "Orbitron", sans-serif;
|
||||||
|
color: var(--text);
|
||||||
|
|
||||||
|
/* page background pattern */
|
||||||
|
background-color: var(--gradientTop);
|
||||||
|
background-image: linear-gradient(
|
||||||
|
30deg,
|
||||||
|
var(--bg) 12%,
|
||||||
|
transparent 12.5%,
|
||||||
|
transparent 87%,
|
||||||
|
var(--bg) 87.5%,
|
||||||
|
var(--bg)
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
150deg,
|
||||||
|
var(--bg) 12%,
|
||||||
|
transparent 12.5%,
|
||||||
|
transparent 87%,
|
||||||
|
var(--bg) 87.5%,
|
||||||
|
var(--bg)
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
30deg,
|
||||||
|
var(--bg) 12%,
|
||||||
|
transparent 12.5%,
|
||||||
|
transparent 87%,
|
||||||
|
var(--bg) 87.5%,
|
||||||
|
var(--bg)
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
150deg,
|
||||||
|
var(--bg) 12%,
|
||||||
|
transparent 12.5%,
|
||||||
|
transparent 87%,
|
||||||
|
var(--bg) 87.5%,
|
||||||
|
var(--bg)
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
60deg,
|
||||||
|
var(--bg) 25%,
|
||||||
|
transparent 25.5%,
|
||||||
|
transparent 75%,
|
||||||
|
var(--bg) 75%,
|
||||||
|
var(--bg)
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
60deg,
|
||||||
|
var(--bg) 25%,
|
||||||
|
transparent 25.5%,
|
||||||
|
transparent 75%,
|
||||||
|
var(--bg) 75%,
|
||||||
|
var(--bg)
|
||||||
|
);
|
||||||
|
background-size: 20px 35px;
|
||||||
|
background-position:
|
||||||
|
0 0,
|
||||||
|
0 0,
|
||||||
|
10px 18px,
|
||||||
|
10px 18px,
|
||||||
|
0 0,
|
||||||
|
10px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 70rem;
|
||||||
|
margin: 5vw auto 12px auto;
|
||||||
|
border: 6px ridge var(--border);
|
||||||
|
outline: 3px solid var(--gradientTop);
|
||||||
|
outline-offset: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 5px;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
/* container background pattern */
|
||||||
|
background-color: var(--gradientBottom);
|
||||||
|
opacity: 1;
|
||||||
|
background-size: 10px 10px;
|
||||||
|
background-image: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
var(--bg) 0,
|
||||||
|
var(--bg) 5px,
|
||||||
|
var(--gradientBottom) 0,
|
||||||
|
var(--gradientBottom) 50%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
/* these control the column widths */
|
||||||
|
.small {
|
||||||
|
flex: 1 1 9%;
|
||||||
|
}
|
||||||
|
.large {
|
||||||
|
flex: 1 1 82%;
|
||||||
|
}
|
||||||
|
.full {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
}
|
||||||
|
.half {
|
||||||
|
flex: 1 1 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px; /* change banner height here*/
|
||||||
|
border: 2px ridge var(--border);
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
header span {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow:
|
||||||
|
1px 1px var(--text),
|
||||||
|
-1px 1px var(--text),
|
||||||
|
1px -1px var(--accent),
|
||||||
|
-1px -1px var(--accent);
|
||||||
|
color: var(--gradientTop);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
border: 2px ridge var(--border);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
background: linear-gradient(var(--gradientTop), var(--gradientBottom));
|
||||||
|
}
|
||||||
|
nav div {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin: 5px 5px 10px 5px;
|
||||||
|
}
|
||||||
|
nav a {
|
||||||
|
display: block;
|
||||||
|
margin: 5px;
|
||||||
|
background: linear-gradient(to right, var(--bg), var(--gradientBottom));
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 2px 7px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
nav a:link,
|
||||||
|
nav a:visited {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
nav a:hover,
|
||||||
|
nav a:focus {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
var(--bg),
|
||||||
|
var(--gradientBottom),
|
||||||
|
var(--gradientTop)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* optional button styling like in the preview */
|
||||||
|
div.small > img {
|
||||||
|
display: block;
|
||||||
|
margin: 5px auto;
|
||||||
|
border: 2px ridge var(--border);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
border: 2px ridge var(--border);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: linear-gradient(var(--gradientTop), var(--gradientBottom));
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1vw;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
footer a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: "Orbitron", sans-serif;
|
||||||
|
margin: 5px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 2px ridge var(--border);
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--accent);
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
margin: 5px;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-indent: 1em;
|
||||||
|
}
|
||||||
|
/* prevents overflow on smaller screens */
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
font-family: "Roboto";
|
||||||
|
}
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
a:visited {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
/*
|
||||||
|
Don't use this file to edit your site style! Create a different CSS file for that.
|
||||||
|
This file defines how custom elements (like sitebox) will look like.
|
||||||
|
Setting CSS that breaks main nekoweb site on purpose is prohibited and may result in ban and site deletion!
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Must start with ".site-box". Change how your website will appear on main nekoweb site: https://lune.dimden.dev/405a44b7e5.png */
|
||||||
|
.site-box {
|
||||||
|
text-align: center;
|
||||||
|
background-image: url(/static/assets/cookiebox.png); /* Only nekoweb URLs allowed, use full url to your site like https://example.nekoweb.org/images/coolbg.png */
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
color: #b08271;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.site-box > a > p {
|
||||||
|
color: var(--darkbrown);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.site-box > a > span {
|
||||||
|
color: var(--darkbrown);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style for your 'Follow on Nekoweb' button (<iframe src="https://nekoweb.org/frame/follow" frameborder="0" width="170" height="28"></iframe>) */
|
||||||
|
.follow {
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,133 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Boreal's Webzone / Home</title>
|
||||||
|
<link
|
||||||
|
href="cyanobacteria.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
media="all"
|
||||||
|
/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<style>
|
||||||
|
.responsive-iframe {
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<span>Boreal's Webzone</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="small">
|
||||||
|
<nav>
|
||||||
|
<h1>Navigation</h1>
|
||||||
|
<a href="https://borealzip.atabook.org">Guestbook</a>
|
||||||
|
<a href="./collectables">Collectables</a>
|
||||||
|
<a href="./sitewall.html">Other Sites</a>
|
||||||
|
<br />
|
||||||
|
<h4 style="display: flex; justify-content: center">Community AD</h4>
|
||||||
|
<div style="display: flex; justify-content: center">
|
||||||
|
<iframe
|
||||||
|
width="180"
|
||||||
|
height="180"
|
||||||
|
style="border: none"
|
||||||
|
src="https://dimden.neocities.org/navlink/"
|
||||||
|
name="neolink"
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="half">
|
||||||
|
<h1>Welcome to my internet zone!</h1>
|
||||||
|
<p>
|
||||||
|
This is my site dedicated to experiencing the web like it's the 90s. I
|
||||||
|
grew up as Web 1.0 was starting to fade out in favor of 2.0 and with
|
||||||
|
the misuse and misappropriation of 3.0 I decided to go back and try
|
||||||
|
something tried and true.
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<h1>Blog</h1>
|
||||||
|
<iframe
|
||||||
|
height="750"
|
||||||
|
class="responsive-iframe"
|
||||||
|
src="./blog.html"
|
||||||
|
name="blogframe"
|
||||||
|
frameborder="0"
|
||||||
|
></iframe>
|
||||||
|
</section>
|
||||||
|
<div class="small">
|
||||||
|
<nav>
|
||||||
|
<img src="./images/avator250x250.png" alt="Boreal's Avatar" />
|
||||||
|
<h1></h1>
|
||||||
|
<div style="display: flex; justify-content: center; flex-wrap: wrap">
|
||||||
|
<img
|
||||||
|
src="https://88by31.neocities.org/web/linux_powered.gif"
|
||||||
|
alt="Linux Powered"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<img
|
||||||
|
src="https://88by31.neocities.org/web/009button.gif"
|
||||||
|
alt="I use Firefox"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<img
|
||||||
|
src="https://88by31.neocities.org/drugs/legal.gif"
|
||||||
|
alt="legalize Weed"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<img
|
||||||
|
src="https://88by31.neocities.org/now/piracy.gif"
|
||||||
|
alt="Pro Piracy"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<img src="./images/buttons/gunpla88x31.png" alt="Gunpla" />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<img src="./images/dablinkie.gif" alt="dablinkie" />
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<span>
|
||||||
|
Theme based on cyanobacteria.css by
|
||||||
|
<a href="https://ribo.zone">ribo.zone</a>
|
||||||
|
<br />
|
||||||
|
<!-- Start of CuterCounter Code -->
|
||||||
|
<a href="https://www.cutercounter.com/" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://www.cutercounter.com/hits.php?id=humxppqaq&nd=6&style=21"
|
||||||
|
border="0"
|
||||||
|
alt="Unique Visitors"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<!-- End of CuterCounter Code -->
|
||||||
|
<br />
|
||||||
|
<!-- Start of CuterCounter Code -->
|
||||||
|
<a href="https://www.cutercounter.com/" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://www.cutercounter.com/hits.php?id=hxppqac&nd=6&style=15"
|
||||||
|
border="0"
|
||||||
|
alt="Visits"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<!-- End of CuterCounter Code -->
|
||||||
|
</span>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 401 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 299 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Boreal's Webzone / Landing</title>
|
||||||
|
<link
|
||||||
|
href="cyanobacteria.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
media="all"
|
||||||
|
/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header></header>
|
||||||
|
<section class="small">
|
||||||
|
<h2><a href="./home.html">ENTER SITE</a></h2>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Not found.</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
Page was not found.
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"useTabs": true,
|
||||||
|
"tabWidth": 4,
|
||||||
|
"html": {
|
||||||
|
"htmlWhitespaceSensitivity": "ignore"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link
|
||||||
|
href="./cyanobacteria.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
media="all"
|
||||||
|
/>
|
||||||
|
<title>Boreal's Webzone / Collectables</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header><span>Other Sites</span></header>
|
||||||
|
|
||||||
|
<section class="full">
|
||||||
|
<h1>Resources</h1>
|
||||||
|
<a href="https://nekoweb.org/"><img src="https://nekoweb.org/assets/buttons/button5.gif"/></a>
|
||||||
|
<a href="https://32bit.cafe/"><img src="https://32bit.cafe/linktous/32b-win9x.png"/></a>
|
||||||
|
<a href="https://99gifshop.neocities.org/"><img src="https://99gifshop.neocities.org/img/88x31.3.png"/></a>
|
||||||
|
</section>
|
||||||
|
<section class="full">
|
||||||
|
<h1>Neighbors</h1>
|
||||||
|
<a href="https://ribo.zone/"><img src="https://ribo.zone/88x31/site/ribozone.gif"/></a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="small"></div>
|
||||||
|
<div class="small">
|
||||||
|
<nav>
|
||||||
|
<a href="./home.html">Back</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="small"></div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<span>
|
||||||
|
Theme based on cyanobacteria.css by
|
||||||
|
<a href="https://ribo.zone">ribo.zone</a>
|
||||||
|
</span>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Orbitron";
|
||||||
|
src: url(fonts/Orbitron-Regular.ttf) format("truetype");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Roboto";
|
||||||
|
src: url(fonts/Roboto-Regular.ttf) format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* start light mode styling */
|
||||||
|
:root {
|
||||||
|
--text: darkslategrey;
|
||||||
|
--border: lightgrey;
|
||||||
|
--accent: teal;
|
||||||
|
--bg: #dce3e1;
|
||||||
|
--gradientTop: white;
|
||||||
|
--gradientBottom: rgb(240, 248, 255, 0.8);
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background: url("***light mode banner image***");
|
||||||
|
}
|
||||||
|
/* end light mode styling */
|
||||||
|
|
||||||
|
/* start dark mode styling */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--text: #cdd6f4;
|
||||||
|
--border: #585b70;
|
||||||
|
--accent: #f38ba8;
|
||||||
|
--bg: #1e1e2e;
|
||||||
|
--gradientBottom: #11111b;
|
||||||
|
--gradientTop: #313244;
|
||||||
|
a:link {
|
||||||
|
color: #f38ba8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background: url("https://images.freeimages.com/images/large-previews/913/sea-3-1188161.jpg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* end dark mode styling */
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding-right: 40px;
|
||||||
|
padding: 0px;
|
||||||
|
font-family: "Orbitron", sans-serif;
|
||||||
|
color: var(--text);
|
||||||
|
|
||||||
|
|
||||||
|
/* optional button styling like in the preview */
|
||||||
|
div.small > img {
|
||||||
|
display: block;
|
||||||
|
margin: 5px auto;
|
||||||
|
border: 2px ridge var(--border);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
padding-bottom: 50px
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
border: 2px ridge var(--border);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: linear-gradient(var(--gradientTop), var(--gradientBottom));
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 5vw;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
footer a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: "Orbitron", sans-serif;
|
||||||
|
margin: 5px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 2px ridge var(--border);
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--accent);
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
margin: 5px;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-indent: 1em;
|
||||||
|
}
|
||||||
|
/* prevents overflow on smaller screens */
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
font-family: "Roboto";
|
||||||
|
}
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
a:visited {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> * Your Site Here * </title>
|
||||||
|
<link href="cyanobacteria.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<span>site name here</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="small">
|
||||||
|
<nav>
|
||||||
|
<div>navigation</div>
|
||||||
|
<a href="">link</a>
|
||||||
|
<a>link</a>
|
||||||
|
<a>link</a>
|
||||||
|
<a>link</a>
|
||||||
|
<a>link</a>
|
||||||
|
<a>link</a>
|
||||||
|
<a>link</a>
|
||||||
|
<a>longer link</a>
|
||||||
|
<a>an even longer link</a>
|
||||||
|
<a>last link</a>
|
||||||
|
</nav>
|
||||||
|
<!-- optional spot for styled button outside the navigation box -->
|
||||||
|
<img src="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="half">
|
||||||
|
<h1>welcome to my homepage!</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<p>
|
||||||
|
<strong>This is strong,</strong>
|
||||||
|
this is normal, and
|
||||||
|
<em>this is emphasized!</em>
|
||||||
|
<a href="#">This is a link.</a>
|
||||||
|
<sup>This is superscript;</sup>
|
||||||
|
<sub>this is subscript.</sub>
|
||||||
|
<code>This is code.</code>
|
||||||
|
<s>This is strikethrough.</s>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>Unordered list item 1</li>
|
||||||
|
<li>Unordered list item 2
|
||||||
|
<ul>
|
||||||
|
<li>Nested list</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Unordered list item 3</li>
|
||||||
|
</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Unordered list item 1</li>
|
||||||
|
<li>Unordered list item 2
|
||||||
|
<ul>
|
||||||
|
<li>Nested list</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Unordered list item 3</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="small">
|
||||||
|
<h2>another section</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis orci at sodales convallis. Proin luctus vehicula dolor, id ultrices diam eleifend eu. Donec tincidunt tellus tellus, in maximus lorem fermentum ac. Phasellus sagittis nisi in ante pretium, eget molestie est pellentesque. Ut tincidunt ultricies porta.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="full">
|
||||||
|
<h2>full width section</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="half">
|
||||||
|
<h2>half width section</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="half">
|
||||||
|
<h2>half width section</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<span>cyanobacteria.css by <a href="https://ribo.zone">ribo.zone</a></span>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue