Compare commits
14 Commits
3b4084c584
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 4713e8d94a | |||
| 96db93167f | |||
| d209a0c37d | |||
| e17a84bd78 | |||
| 7fc7d1533b | |||
| 7c988959e5 | |||
| 4ec8ddc188 | |||
| 7fbf2b57f4 | |||
| 5872c40665 | |||
| d7bd83218a | |||
| 5161330a10 | |||
| 7bca3f744f | |||
| 9fd8b8aa56 | |||
| 4c5041aa7c |
@ -5,6 +5,24 @@
|
|||||||
<title>Odette website</title>
|
<title>Odette website</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<h1>Puppygirl.systems</h1>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/">home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about-me.html">about me</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog.html">BLOG?????</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
<h1>HELLO</h1>
|
<h1>HELLO</h1>
|
||||||
<p>hey uh my name is odette, i am currently of the she/they/it variety. In the time I have spent not working on this website I am no longer sick, but I feel it would be good to continue to work on it, websites are cool.</p>
|
<p>hey uh my name is odette, i am currently of the she/they/it variety. In the time I have spent not working on this website I am no longer sick, but I feel it would be good to continue to work on it, websites are cool.</p>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
11
blog.html
Normal file
11
blog.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
<title>Odette's blog???</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>this probably isnt going to be used at all but it thought it would be good to put there</h1>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!-- dumb pet couldn't figure out how to code this itself and made this one do so for it -6e6174 -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<title>shock it</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<form action="/bracelet.html#" method="POST">
|
|
||||||
<fieldset>
|
|
||||||
<legend>type:</legend>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="type" value="zap" checked>
|
|
||||||
shock
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="type" value="vibe">
|
|
||||||
buzz
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="type" value="beep">
|
|
||||||
beep
|
|
||||||
</label>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>strength:</legend>
|
|
||||||
<input type="number" name="strength" min="0" max="100" value="50">
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>message:</legend>
|
|
||||||
<textarea name="message" rows="4" cols="50">good drone</textarea>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<button type="submit">submit</button>
|
|
||||||
</form>
|
|
||||||
<hr>
|
|
||||||
<h2>scripting</h2>
|
|
||||||
one may easily use this page from the command line with curl:
|
|
||||||
<code>curl -X POST 'https://puppygirl.systems/bracelet.html' -d 'type=zap&strength=20&message=test%20using%20curl'</code>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
513
css/natalie.css
Normal file
513
css/natalie.css
Normal file
@ -0,0 +1,513 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'MapleMono';
|
||||||
|
src: url('/font/MapleMono.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'MapleMonoItalic';
|
||||||
|
src: url('/font/MapleMonoItalic.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
body {
|
||||||
|
margin: 0%;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
body {
|
||||||
|
margin: 0 20%;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: 'MapleMono';
|
||||||
|
font-size: 16.5px;
|
||||||
|
text-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #F2F4F8;
|
||||||
|
--alt-bg: #dde1e6;
|
||||||
|
--fg: #161616;
|
||||||
|
--hl: #33b1ff;
|
||||||
|
--link: #0154EF;
|
||||||
|
--visited-link: #673ab7;
|
||||||
|
--highlight: #0154EF;
|
||||||
|
--gray: #525252;
|
||||||
|
background: var(--bg);
|
||||||
|
background-image: radial-gradient(var(--gray) 2px, var(--alt-bg) 2px);
|
||||||
|
background-size: 1vw 1vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-punctuation-bracket {color: #ff7eb6}
|
||||||
|
.-function-macro {color: #08bdba}
|
||||||
|
.SpecialChar {color: #37474f}
|
||||||
|
.-punctuation-special {color: #ff7eb6}
|
||||||
|
.-variable {color: #37474f}
|
||||||
|
.-string-escape {color: #ffab91}
|
||||||
|
.-function {font-weight: bold; color: #673ab7}
|
||||||
|
.-punctuation-bracket {color: #ff7eb6}
|
||||||
|
.-keyword-function {color: #ff7eb6}
|
||||||
|
.Number {color: #ffab91}
|
||||||
|
.-variable {color: #37474f}
|
||||||
|
.-variable-builtin {color: #37474f}
|
||||||
|
.-keyword {color: #ee5396}
|
||||||
|
.Operator {color: #ee5396}
|
||||||
|
.-constant-builtin {color: #08bdba}
|
||||||
|
.-function-builtin {color: #673ab7}
|
||||||
|
.Type {color: #ee5396}
|
||||||
|
.-function {font-weight: bold; color: #673ab7}
|
||||||
|
.Comment {font-style: italic; color: #161616}
|
||||||
|
.Boolean {color: #ee5396}
|
||||||
|
.-keyword-operator {color: #ff7eb6}
|
||||||
|
.-punctuation-delimiter {color: #ff7eb6}
|
||||||
|
.-tag {color: #ee5396}
|
||||||
|
.-tag-delimiter {color: #ffab91}
|
||||||
|
.Operator {color: #ee5396}
|
||||||
|
.Underlined {text-decoration-line: underline}
|
||||||
|
.-tag-attribute {color: #ffab91}
|
||||||
|
.String {color: #be95ff}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #161616;
|
||||||
|
--alt-bg: #262626;
|
||||||
|
--fg: #f2f4f8;
|
||||||
|
--hl: #0f62fe;
|
||||||
|
--link: #33b1ff;
|
||||||
|
--visited-link: #be95ff;
|
||||||
|
--highlight: #33b1ff;
|
||||||
|
--gray: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-punctuation-bracket {color: #3ddbd9}
|
||||||
|
.-function-macro {color: #08bdba}
|
||||||
|
.SpecialChar {color: #d0d0d0}
|
||||||
|
.-punctuation-special {color: #3ddbd9}
|
||||||
|
.-variable {color: #d0d0d0}
|
||||||
|
.-string-escape {color: #82cfff}
|
||||||
|
.-function {font-weight: bold; color: #ff7eb6}
|
||||||
|
.-punctuation-bracket {color: #3ddbd9}
|
||||||
|
.-keyword-function {color: #3ddbd9}
|
||||||
|
.Number {color: #82cfff}
|
||||||
|
.-variable {color: #d0d0d0}
|
||||||
|
.-variable-builtin {color: #d0d0d0}
|
||||||
|
.-keyword {color: #78a9ff}
|
||||||
|
.Operator {color: #78a9ff}
|
||||||
|
.-constant-builtin {color: #08bdba}
|
||||||
|
.-function-builtin {color: #ff7eb6}
|
||||||
|
.Type {color: #78a9ff}
|
||||||
|
.-function {font-weight: bold; color: #ff7eb6}
|
||||||
|
.String {color: #be95ff}
|
||||||
|
.Comment {font-style: italic; color: #525252}
|
||||||
|
.Boolean {color: #78a9ff}
|
||||||
|
.-keyword-operator {color: #3ddbd9}
|
||||||
|
.-punctuation-delimiter {color: #3ddbd9}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rainbow-text {
|
||||||
|
animation:rainbow-text 5s ease-in-out infinite
|
||||||
|
}
|
||||||
|
@keyframes rainbow-text {
|
||||||
|
0% {
|
||||||
|
color:red
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
color:orange
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
color:green
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
color:blue
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
color:purple
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
color:red
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
text-wrap: wrap;
|
||||||
|
max-width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
overflow: auto;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 33px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: 'MapleMonoItalic';
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding-top: 10px;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
background-color: var(--bg);
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 100000;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
overflow: clip;
|
||||||
|
|
||||||
|
> nav {
|
||||||
|
border-bottom: 1px solid var(--fg);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: flex-start;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
> h1 {
|
||||||
|
display: inline
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: var(--alt-bg);
|
||||||
|
border-bottom: none;
|
||||||
|
margin: 15px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 20fr 1fr; /* icky hack */
|
||||||
|
grid-template-rows: min-content min-content;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin: 0 !important;
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
width: 88px;
|
||||||
|
height: 31px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background: var(--alt-bg);
|
||||||
|
box-shadow: 10px 10px var(--gray);
|
||||||
|
margin: 15px 30px;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
> details[open] {
|
||||||
|
summary {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> p {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> h1, h2, h3 {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ignore-section {
|
||||||
|
background: var(--bg);
|
||||||
|
box-shadow: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
background: var(--alt-bg);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 50%;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 15px 0;
|
||||||
|
box-shadow: 10px 10px var(--gray);
|
||||||
|
|
||||||
|
> button {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
color: var(--fg);
|
||||||
|
background: var(--bg);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--hl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> input {
|
||||||
|
color: var(--fg);
|
||||||
|
margin: 10px;
|
||||||
|
border: none;
|
||||||
|
background: var(--bg);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
max-width: 125%;
|
||||||
|
background: var(--bg);
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
padding: 10px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> figcaption {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:first-child, td:first-child {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:last-child, td:last-child {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: 10px solid var(--gray);
|
||||||
|
margin: 4px 16px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
code, pre {
|
||||||
|
background: var(--bg);
|
||||||
|
margin: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
xmp {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--link);
|
||||||
|
width: fit-content
|
||||||
|
}
|
||||||
|
|
||||||
|
a ~ a, li:has(a), a ~ span > a {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: var(--visited-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
width: 95%;
|
||||||
|
border: 10px solid var(--bg);
|
||||||
|
margin: 10px auto;
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
font-size: smaller;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footnote {
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post {
|
||||||
|
background: var(--alt-bg);
|
||||||
|
box-shadow: 10px 10px var(--gray);
|
||||||
|
margin: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.italic {
|
||||||
|
font-family: 'MapleMonoItalic' !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.captioned-image {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
max-width: 100%;
|
||||||
|
background: var(--bg);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
height: auto;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> p {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: var(--highlight)
|
||||||
|
}
|
||||||
|
|
||||||
|
image-column-container {
|
||||||
|
min-width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
image-container {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 5px;
|
||||||
|
flex: 1;
|
||||||
|
width: 33%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
flex-column {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
> captioned-image {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
image-column img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
text-column {
|
||||||
|
max-width: 66%
|
||||||
|
}
|
||||||
|
|
||||||
|
flex-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
flex-grid-item {
|
||||||
|
flex: 1 0 200px;
|
||||||
|
margin: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
flex-grid-item > img {
|
||||||
|
max-width: 110%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
image-container {display: inline-block; min-width: 100% !important}
|
||||||
|
div.captioned-image {min-width: 100%; margin-right: 0;}
|
||||||
|
text-column {display: inline-block; max-width: 100%;}
|
||||||
|
image-column-container {flex-direction: column;}
|
||||||
|
header > nav > ul > li > h1 { display: none};
|
||||||
|
}
|
||||||
45
css/styles.css
Normal file
45
css/styles.css
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #ebdbb2;
|
||||||
|
--fg: #282828;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: var(--bg);
|
||||||
|
color:#282828;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
padding-top: 10px;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
background-color: var(--bg);
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 100000;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
overflow: clip;
|
||||||
|
|
||||||
|
> nav {
|
||||||
|
border-bottom: 1px solid var(--fg);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: flex-start;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
> h1 {
|
||||||
|
display: inline
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
css/test.css
Normal file
14
css/test.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
body {
|
||||||
|
background-color: #ebdbb2;
|
||||||
|
color:#282828;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
display: flex;
|
||||||
|
width: 400px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
BIN
images/88x31.png
Normal file
BIN
images/88x31.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
images/discord.gif
Normal file
BIN
images/discord.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
images/mastodon.gif
Normal file
BIN
images/mastodon.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
46
index.html
46
index.html
@ -1,13 +1,32 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
<title>Odette website</title>
|
<title>Odette website</title>
|
||||||
|
<link rel="me" href="https://mastodon.catgirl.cloud/@0x4f4449">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>hey Im Odette</h1>
|
<header>
|
||||||
<p>this is my first website, I'm making this while waiting for me to stop being sick. This is my first time doing any sort of HTML or CSS so it probably wont look that good.</p>
|
<nav>
|
||||||
<a href='about-me.html'>About me</a>
|
<ul>
|
||||||
|
<li>
|
||||||
|
<h1>Puppygirl.systems</h1>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/">home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about-me.html">about me</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog.html">BLOG?????</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<p>this is my first website, I'm making this while waiting for me to stop being sick. This is my first time doing any sort of HTML or CSS so it probably wont look that good. this one really needs to work on its website, lack of motivation *sucksss*</p>
|
||||||
|
</section>
|
||||||
<hr/>
|
<hr/>
|
||||||
<section>
|
<section>
|
||||||
<h2>COOL people I know with 88x31s</h2>
|
<h2>COOL people I know with 88x31s</h2>
|
||||||
@ -23,9 +42,6 @@
|
|||||||
<a href='https://luxen.neocities.org/'>
|
<a href='https://luxen.neocities.org/'>
|
||||||
<img src="https://luxen.neocities.org/88x31.gif">
|
<img src="https://luxen.neocities.org/88x31.gif">
|
||||||
</a>
|
</a>
|
||||||
<a href='https://en.m.wikipedia.org/wiki/Special:Random'>
|
|
||||||
<img src="images/88x31birds.png">
|
|
||||||
</a>
|
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>other general 88x31s</h2>
|
<h2>other general 88x31s</h2>
|
||||||
@ -39,15 +55,11 @@
|
|||||||
<a href='https://br1dg3tt3.carrd.co/'>Br1dg3tt3</a>
|
<a href='https://br1dg3tt3.carrd.co/'>Br1dg3tt3</a>
|
||||||
</section>
|
</section>
|
||||||
<hr/>
|
<hr/>
|
||||||
<section>
|
<footer>
|
||||||
<h2>Socials</h2>
|
<a href="https://Puppygirl.systems">
|
||||||
<p>
|
<img src="https://puppygirl.systems/images/88x31.png" alt="88x31 puppygirl.systems">
|
||||||
Discord: mkfs.ntfs
|
</a>
|
||||||
</p>
|
</footer>
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<a href='/bracelet.html'>send commands to its shock bracelet</a>
|
|
||||||
</section>
|
|
||||||
<hr/>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: #ebdbb2;
|
|
||||||
color:#282828;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user