coder/coderrrrr.site
1
1
Fork 0
mirror of https://github.com/turbomaster95/coderrrrr.git synced 2025-08-01 02:02:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: coder:872fb74a687bca8b4f9ce41432f250a083ade918
Branches Tags
coder:main
...
compare: coder:2dd618fcce0ad594f28ec462fe8dcebbf4097c23
Branches Tags
coder:main

4 Commits
872fb74a68 ... 2dd618fcce

Author SHA1 Message Date
Deva Midhun
2dd618fcce
Update test.html 2025-01-26 17:22:07 +05:30
Deva Midhun
5a3ac237f2
Update test.html 2025-01-26 17:04:52 +05:30
Deva Midhun
e0471d8637
Create indeedlayout.css 2025-01-26 17:03:01 +05:30
Deva Midhun
bace71cd23
Create test.html 2025-01-26 17:02:42 +05:30
2 changed files with 324 additions and 0 deletions
Show Stats Expand all files Collapse all files

203
indeedlayout.css Normal file
View 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
View 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>