mirror of
https://github.com/turbomaster95/coderrrrr.git
synced 2025-11-04 09:18:35 +00:00
Compare commits
4 Commits
872fb74a68
...
2dd618fcce
| Author | SHA1 | Date | |
|---|---|---|---|
| 2dd618fcce | |||
| 5a3ac237f2 | |||
| e0471d8637 | |||
| bace71cd23 |
203
indeedlayout.css
Normal file
203
indeedlayout.css
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
/* these are the colors! there's only three. the background, the text, and the accent color. */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bgcolor: #1f1c1c;
|
||||||
|
--txtcolor: #ece9e3;
|
||||||
|
--popcolor: #DD1155;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* JAUNTY TITLES - DELETE THIS SECTION IF YOU WANT NORMAL HEADERS IN YOUR BOXES */
|
||||||
|
.box>h1 {
|
||||||
|
border: 2px var(--txtcolor) solid;
|
||||||
|
background-color: var(--bgcolor);
|
||||||
|
width: fit-content;
|
||||||
|
padding: 10px;
|
||||||
|
margin-left: -30px;
|
||||||
|
margin-top: -50px;
|
||||||
|
transform: rotate(-5deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
.box>h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reversebox>h1 {
|
||||||
|
border: 2px var(--popcolor) solid;
|
||||||
|
background-color: var(--txtcolor);
|
||||||
|
transform: rotate(5deg);
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
margin-right: -15px;
|
||||||
|
margin-left: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* END OF JAUNTY TITLES */
|
||||||
|
|
||||||
|
/* the rest of the layout vv */
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: var(--popcolor)
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
scrollbar-color: var(--popcolor) var(--bgcolor);
|
||||||
|
scrollbar-width: thin;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bgcolor);
|
||||||
|
color: var(--txtcolor);
|
||||||
|
font-family: Verdana, Helvetica, sans-serif;
|
||||||
|
text-underline-offset: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
u {
|
||||||
|
text-decoration: underline double var(--popcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: bolder;
|
||||||
|
color: var(--popcolor);
|
||||||
|
text-decoration: underline dotted 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--txtcolor);
|
||||||
|
background-color: var(--popcolor)
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.container {
|
||||||
|
/* everything in this layout is inside this container. increase the percentage and max-width to make it wider! */
|
||||||
|
width: 50%;
|
||||||
|
margin: auto;
|
||||||
|
min-width: 400px;
|
||||||
|
max-width:700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header>h1 {
|
||||||
|
font-size: 50pt;
|
||||||
|
line-height: 0.9;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header>h2 {
|
||||||
|
text-align: right;
|
||||||
|
font-family: Georgia;
|
||||||
|
margin-top: 0px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio {
|
||||||
|
min-height: 150px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio>div {
|
||||||
|
max-width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#profilepic {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
border-radius: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
outline: var(--txtcolor) 2px solid;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: var(--bgcolor);
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: var(--txtcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar>a {
|
||||||
|
color: var(--bgcolor);
|
||||||
|
font-weight: bolder;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar>a:hover {
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: var(--popcolor);
|
||||||
|
color: var(--txtcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.box {
|
||||||
|
padding: 15px;
|
||||||
|
margin-top: 50px;
|
||||||
|
border: var(--txtcolor) 2px solid;
|
||||||
|
font-size: 11pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.reversebox {
|
||||||
|
background-color: var(--txtcolor);
|
||||||
|
color: var(--bgcolor);
|
||||||
|
border: var(--popcolor) 2px solid;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#pagetop {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 25px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 100%;
|
||||||
|
color: var(--popcolor);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pagetop:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 9pt;
|
||||||
|
padding: 25px;
|
||||||
|
padding-top: 5px;
|
||||||
|
margin-top: 100px;
|
||||||
|
border-top: 1px var(--txtcolor) solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* adjustment for small screens */
|
||||||
|
@media only screen and (max-width: 700px) {
|
||||||
|
.container {
|
||||||
|
width: 95%;
|
||||||
|
min-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
#profilepic {
|
||||||
|
height: 90px;
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
121
test.html
Normal file
121
test.html
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<link rel="icon" type="image/x-icon" href="">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>coderrrrr</title>
|
||||||
|
<link href="indeedlayout.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- the entire layout is contained in this "container" div.-->
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- here you can put your site title and your name! -->
|
||||||
|
<div class='header'>
|
||||||
|
|
||||||
|
<h1>coderrrrr's portfolio</h1>
|
||||||
|
<!-- <h2>by Xo Xixxii</h2> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--now here's the bio part-->
|
||||||
|
<div class='bio'>
|
||||||
|
|
||||||
|
<img src='shutterstocknerd.jpg' id='profilepic'> <!--replace this with a picture of you, or an avatar or something. for the indieweb it's usually a face pic.-->
|
||||||
|
|
||||||
|
|
||||||
|
<!--put a short bit about yourself or your site in this div; if it's outside a div it'll look a little weird.-->
|
||||||
|
<div>
|
||||||
|
<p>Jake, 35, he/him. US-based programmer & indie web enthusiast; proud to be a father, an ally, and a geek!</p>
|
||||||
|
</div>
|
||||||
|
<!--end of text div-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--end of bio section-->
|
||||||
|
|
||||||
|
<!--navigation bar! change the links to whatever you want. it's a flexbox, so you can put as many as you want. -->
|
||||||
|
<div id='navbar'>
|
||||||
|
<a href=''>Now</a>
|
||||||
|
<a href=''>About</a>
|
||||||
|
<a href=''>Uses</a>
|
||||||
|
<a href='https://blog.coderrrrr.site'>Blog</a>
|
||||||
|
<a href='https://blog.coderrrrr.site/index.xml'>RSS</a>
|
||||||
|
</div>
|
||||||
|
<!--end of navigation bar-->
|
||||||
|
|
||||||
|
<!--box one-->
|
||||||
|
<div class="box">
|
||||||
|
<h1>Box Name</h1>
|
||||||
|
<h2>Indeed.</h2>
|
||||||
|
<p>Indeed Web is a jolly twist on the most popular form of IndieWeb site design, with a little pop of color and optional jaunty box titles to give it some character. If you feel the need to disguise yourself as a professional computer man with a blog, perhaps this can help!</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>This is a list.</li>
|
||||||
|
<li>Some ideas for pages on your web site:</li>
|
||||||
|
<ul>
|
||||||
|
<li>display some of your favorite pictures you have on your computer</li>
|
||||||
|
<li>share your bookmarked sites</li>
|
||||||
|
<li>write down instructions for how to do something you're pretty good at doing</li>
|
||||||
|
</ul>
|
||||||
|
<li>Or nothing at all. Do what you want.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--end of box one-->
|
||||||
|
|
||||||
|
<!--box two-->
|
||||||
|
<div class="box reversebox">
|
||||||
|
<h1>Box Name</h1>
|
||||||
|
<h2>Opposite Day!</h2>
|
||||||
|
<p>This is a reverse box.</p>
|
||||||
|
</div>
|
||||||
|
<!--end of box two-->
|
||||||
|
|
||||||
|
<!--box three. this one's here so you can see one without a jaunty title card. -->
|
||||||
|
<div class="box">
|
||||||
|
<h2>Inside title.</h2>
|
||||||
|
<p>Text inside your box goes here.</p>
|
||||||
|
</div>
|
||||||
|
<!--end of box three-->
|
||||||
|
|
||||||
|
<!--footer. good for putting copyright info, contact info, credits, and webrings... -->
|
||||||
|
<div class="footer">
|
||||||
|
<p>Footer text footer text...</p>
|
||||||
|
<a href="https://coderrrrr.site/"><img src="https://cdn.coderrrrr.site/misc/button.gif" alt="Use My button!"></a>
|
||||||
|
<a target="_blank" href="https://status.cafe"><img src="https://status.cafe/assets/button.png" alt="Status Cafe"/></a>
|
||||||
|
<a target="_blank" href="https://eightyeightthirty.one"><img src="https://notnite.com/buttons/88x31.png" alt="88x31"/></a>
|
||||||
|
<a target="_blank" href="https://notnite.com"><img src="https://notnite.com/buttons/notnite.png" alt="NotNite"/></a>
|
||||||
|
<a target="_blank" href="https://tamanotchi.world"><img src="https://tamanotchi.world/includes/img/tamanotchi.gif" alt="tamaNOTchi!"/></a>
|
||||||
|
<a target="_blank" href="https://gifypet.neocities.org"><img src="https://gifypet.neocities.org/images/badge.gif" alt="GifyPET!!"/></a>
|
||||||
|
<a target="_blank" href="https://melankorin.net/"><img src="https://melankorin.net/assets/img/buttons/button-1.gif" alt=""></a>
|
||||||
|
<a target="_blank" href="https://www.bruh.ltd/"><img src="https://www.bruh.ltd/images/buttons/yours-truly.png" alt=""></a>
|
||||||
|
<a href="https://512kb.club"><img src="https://512kb.club/assets/images/orange-team.gif" alt="a proud member of the orange team of 512KB club" /></a>
|
||||||
|
<a href="https://nekoweb.org/"><img src="https://nekoweb.org/assets/buttons/button10.png"></a><!-- button by felixfever.nekoweb.org -->
|
||||||
|
<a target="_blank" href="https://possiblyaxolotl.com"><img src="https://possiblyaxolotl.com/images/88x31/88x31.png" title="PossiblyAxolotl? It's more likely than you think!" alt="PossiblyAxolotl" /></a>
|
||||||
|
<a target="_blank" href="https://dimden.dev/"><img src="https://dimden.dev/images/88x31.gif"></a>
|
||||||
|
<a href="https://blackmagegaming.neocities.org"><img src="https://blackmagegaming.com/buttons/blackmagegamingButtonGenoSadness.gif"></a>
|
||||||
|
</div>
|
||||||
|
<!--end of footer-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--end of layout container!!-->
|
||||||
|
|
||||||
|
<!-- this is the little guy in the corner; clicking it takes you to the top of the page. -->
|
||||||
|
<a href="#" id="pagetop">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path fill="var(--ci-primary-color, currentColor)" d="M256,496A240,240,0,0,1,86.294,86.294,240,240,0,0,1,425.706,425.706,238.432,238.432,0,0,1,256,496Zm0-448C141.309,48,48,141.309,48,256s93.309,208,208,208,208-93.309,208-208S370.691,48,256,48Z" class="ci-primary"/>
|
||||||
|
<polygon fill="var(--ci-primary-color, currentColor)" points="356.686 315.313 256 214.628 155.314 315.313 132.686 292.687 256 169.373 379.314 292.687 356.686 315.313" class="ci-primary"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<!--end of corner guy-->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user