Add content and change style
This commit is contained in:
parent
91cf24845b
commit
815afd604e
75
index.html
75
index.html
|
@ -3,7 +3,9 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, user-scalable=yes">
|
||||
<meta name="author" content="acdw">
|
||||
|
||||
<title>acdw's house</title>
|
||||
|
||||
|
@ -11,13 +13,80 @@
|
|||
<script src="script.js" type="text/javascript"> </script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="everything">
|
||||
<section id="cover">
|
||||
<h1>~acdw</h1>
|
||||
<a id="moon" href="moon/">🌚</a>
|
||||
</section>
|
||||
<div id="below-the-fold">
|
||||
<main role="main">
|
||||
<h1>Hey there</h1>
|
||||
<p>What's up man?</p>
|
||||
<section id="house">
|
||||
<table id="site-header">
|
||||
<tr><td>
|
||||
<pre>
|
||||
__
|
||||
/ \
|
||||
/ \
|
||||
------
|
||||
| ____|
|
||||
| | ||
|
||||
| | '||
|
||||
~~~~~~~~
|
||||
</pre>
|
||||
</td>
|
||||
<td id="titleblock">
|
||||
<h1>acdw's house</h1>
|
||||
<h2>in the
|
||||
<a href="https://tilde.town">
|
||||
~.town
|
||||
</a>
|
||||
</h2>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section id="links">
|
||||
<h2>links</h2>
|
||||
<dl>
|
||||
<dt>world wide web</dt>
|
||||
<dd><a href="feels">
|
||||
feels</a></dd>
|
||||
<dd><a href="https://www.acdw.net">
|
||||
my "real" website</a></dd>
|
||||
<dd><a href="/~loosepoops/">
|
||||
L O O S E P O O P S</a></dd>
|
||||
<dt>around town</dt>
|
||||
<dd><a href="/~troido/cadastre/town.html">
|
||||
town plots</a></dd>
|
||||
<dd><a href="/~demophoon/">
|
||||
~demophoon</a></dd>
|
||||
</dl>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<span class="ring" id="tilde_ring">
|
||||
<em>a member of the ~ring</em>
|
||||
(<a href="/~eeeeeta/ring/join.html">join</a>)
|
||||
</span>
|
||||
<span class="ring-links">
|
||||
<a id="tilde_town_ring" class="tilde_ring_link" href="">
|
||||
random ~user
|
||||
</a>
|
||||
| <a id="random_tildebox" class="tilde_ring_link" href="">
|
||||
random ~box
|
||||
</a>
|
||||
| <a id="tilde_town_ring_next" class="tilde_ring_link" href="">
|
||||
next ~user
|
||||
</a>
|
||||
</span>
|
||||
<script type="text/javascript">
|
||||
var ringjs = document.createElement('script')
|
||||
ringjs.src = document.location.protocol
|
||||
+ '//tilde.town/~login/tilde_ring.js'
|
||||
document.getElementById('tilde_ring').appendChild(ringjs)
|
||||
</script>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
64
style.css
64
style.css
|
@ -6,6 +6,8 @@ body,
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html { font: 16px/22px "Courier Prime", "Courier New", monospace; }
|
||||
body { background: PapayaWhip; }
|
||||
|
||||
#cover h1 {
|
||||
position: absolute;
|
||||
|
@ -13,6 +15,15 @@ body,
|
|||
bottom: 1em;
|
||||
font-size: 3em;
|
||||
}
|
||||
#cover {
|
||||
position: fixed;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: no-repeat center/100% url("flamingobathroom.jpg");
|
||||
}
|
||||
|
||||
#moon {
|
||||
position: absolute;
|
||||
|
@ -20,14 +31,59 @@ body,
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
#cover {
|
||||
background: no-repeat center/100% url("flamingobathroom.jpg");
|
||||
#everything {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
#below-the-fold {
|
||||
position: relative;
|
||||
top: 100vh;
|
||||
}
|
||||
|
||||
main { }
|
||||
main section {
|
||||
max-width: 50rem;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
background: papayawhip;
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
main section :first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#house pre {
|
||||
background-color: #efd5ff;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
#titleblock {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
max-width: 50rem;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
background-color: #d5efff;
|
||||
text-align: right;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
a:link {}
|
||||
a:active {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
a:hover {
|
||||
text-transform: uppercase;
|
||||
background-color: #d5d5ff;
|
||||
}
|
||||
a:visited {}
|
||||
|
|
Loading…
Reference in New Issue