signs-and-portents/morden/ambition.html
2025-12-23 06:04:09 -05:00

153 lines
No EOL
6.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almendra+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Gemstones&display=swap');body {
background: #010D01;
background: linear-gradient(90deg, rgba(1, 13, 1, 1) 0%, rgba(190, 18, 8, 1) 50%, rgba(90, 2, 1, 1) 100%); color: #e1e7f5;
font-family: MS Gothic;
font-size: 18px;
}
.vt323-regular {
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
}
.rubik-gemstones-regular {
font-family: "Rubik Gemstones", system-ui;
font-weight: 400;
font-style: normal;
}
a, a:visited {
color: #e1e7f5;
}
.main {
position: absolute;
margin-left: 175px;
height: 650px;
width: 850px;
overflow-y: scroll;
border: 10px outset #7c8ea6;
background: #010D01;
background: radial-gradient(circle,rgba(1, 13, 1, 1) 0%, rgba(190, 18, 8, 1) 50%, rgba(90, 2, 1, 1) 100%);
box-shadow: 19px 19px #000b02;
}
aside {
position: absolute;
}
#float {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-style: italic;
font-size:2em;
position:fixed;bottom:0px;right:0px;z-index:999
font-weight:bold;
color: #fff;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.starborn {
-webkit-mask-image: url(https://web.archive.org/web/20231017005715im_/https://i.imgur.com/iE8ff6N.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
width: 200px;
height: auto
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}
.almendra-display-regular {
font-family: "Almendra Display", serif;
font-weight: 400;
font-style: normal;
}
nav li {
background:#be1208 ;
font-family: "Rubik Gemstones", system-ui;
font-size: 26px;
border: 10px inset #7c8ea6;
font-weight: boldest;
line-height: 250%;
width: 150px;
color:#000e00 ;
margin-top:34px;
box-shadow: 1px 20px #000e00;
}
.intro {
position: absolute;
border: 8px double #7c8ea6;
width: 550px;
background: #000e00;
padding: 1%;
margin-left: 128px;
margin-top: 20px;
}
.goals {
position: absolute;
border: 8px double #7c8ea6;
width: 250px;
background: #000e00;
height: 450px;
overflow: scroll;
margin-top: 160px;
margin-left: 15px;
padding: 1%;
}
.aboutbastard {
position: absolute;
border: 8px double #7c8ea6;
background: #000e00;
margin-top: 160px;
margin-left:340px;
padding: 1%;
height: 450px;
width: 450px;
overflow: scroll;
}
/* (c) imiyaimi */
.starborn {
-webkit-mask-image: url(https://i.imgur.com/1PjqQS6.png);
-webkit-mask-size: 200%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
height:400px;
width: 400px;
}
</style>
</head>
<body> <img src="https://file.garden/aJzQmzrHVB4BLKwu/tumblr_7b05aa6c721b3fb8b4e15b588cbf5edd_2a423de7_640.jpg" style="position:absolute;top:0px;right:0px;z-index:999;" class="starborn"/>
<aside><nav><li><a href="/morden/ambition" style="text-shadow: 10px 10px 2px #e1e7f5; font-weight: 900px;">ambition.</a></li>
<li><a href="/morden/release" style="text-shadow: 10px 10px 2px #e1e7f5;">release.</a></li>
<li><a href="/morden/delirious" style="text-shadow: 10px 10px 2px #e1e7f5;">delirious.</a></li>
<li><a href="/morden/lethal" style="text-shadow: 10px 10px 2px #e1e7f5;">lethal.</a></li>
<li><a href="/morden/idol" style="text-shadow: 10px 10px 2px #e1e7f5;">idol.</a></li></nav></aside>
<div class="main">
<div class="intro">Hello and welcome to AMBITION: a shrine to Mr. Morden from the show Babylon 5. This was made for <a href="https://b5-minvember.tumblr.com/">Minvember 2025</a>, and as such each page's title and color scheme corresponds to each 2025 prompt starting at Ambition.</div>
<div class="goals"><h3>Ambitions for this shrine...</h3>
Morden is a piece of shit, objectively, but something about him is deeply captivating to me! I'd like to make this shrine a place where I can safely share my love for this little bastard. I want this shrine to be a little home for all the villainfuckers. I want this shrine to hopefully shed some light on Morden's pre-canon characterization as well as how damn GOOD Jeanne Cavelos's <i>The Shadow Within</i> is. I want this shrine to make people feel more comfortable liking terrible and utterly fully wholly irredeemable characters. Most importantly, I want to have a sinfully good time making and updating it.</div>
<div class="aboutbastard"><h3>About the Shrine and its Subject</h3>
Mr. Morden is the secondary antagonist of 90s science fiction TV novel <i>Babylon 5 (1994).</i> He was recruited by force willingly to work for a group of ancient evil spider aliens who are hell-bent on getting all the various sapient races of the galaxy to fight each other so that only the strongest and most capable species will survive. They think they're doing this for the good of the universe, but alas.<br><br>Morden is a little shit with a chip in his brain like a dog that affects his hypothalamus in a way that gives him Happy Chemical when he does evil things. He's a shell of a man. He's more alive now than he ever was before. His entire purpose now is to serve the evil aliens (the "Shadows") and help integrate their motives across the universe. Shady! He has the hobbies of drinking tea, lying, wearing the same 2 suits over and over again, having gay sex for political purposes, and using too much hair gel.<br><br>
You can learn more about Morden on the Release page.</div>
</div>
</body>
</html>