carrd tut #41 - standard

haii and welcome!! as always all positions have been set to fit my personal devices the best so you may have to edit them to better fit your devices! for any questions about this pastebin / carrd you can dm me @ crrdcore or send me a retrospring @ soobinzz. and please credit archangeliic if you rm this carrd :3

--- CODES ---
<style>
@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

#container02 {
width: 200px;
border: 2px #F2F2F2 inset;
position: absolute;
bottom: 4.9em;
left: 15em;
}

@media only screen and (max-width: 600px) {
#container02 {
bottom: 3.7em;
left: 12em;
}
}

#text02 {
font-family: windows;
font-size: 1.1em;
}

#container03 {
width: 150px;
position: absolute;
bottom: 0.6em;
left: 11em;
}

@media only screen and (max-width: 600px) {
#container03 {
bottom: 0em;
left: 8em;
}
}
</style>

--- ABOUT WINDOW ---
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="window" style="width: 200px">
<div class="title-bar">
<div class="title-bar-text">aboutme.txt</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body" style="font-size: 1.1em;">
<p>vio #1 moawajjunie ☆</p>
</div>
<div class="window-body" style="font-size: 1.1em; height: 80px; background: white; padding: 5px; line-height: 14px; border: 2px #f2f2f2 inset; overflow-y: scroll;">
<p>haiii im <mark>vio</mark> :3 or <u>vee</u>!!! 20 it/bun/they prns pan mexican enby autistic aquarius eng/spa OK!</p>
<br>
<p><mark>likes:</mark> bx <333, sanrio, kirby, deco, pc collecting, yeonjuns aotm, soobin noises, reading, <s>coding</s>, old web, music, the color pink, my cats :P, and plushies!!</p>
<br>
<p><mark>links:</mark> <a class="link" href="https://x.com/dollbahi" target="_blank">dollbahi</a> <a class="link" href="https://www.pinterest.com/crrdcore/" target="_blank">pinterest</a> <a class="link" href="https://x.com/crrdcore" target="_blank">crrdcore</a> <a class="link" href="https://retrospring.net/@soobinzz" target="_blank">retrospring</a></p>
<br>
<p><mark>credit</mark>© archangeliic on pinterest</p>
</div>
<div class="window-body" style="font-size: 1.1em; text-align: right;">
<p>☆ navigate with the text below!</p>
</div>
</div>
<style>
mark {
color: #0818A6;
font-weight: bold;
background: transparent;
}

#embed02 {
position: absolute;
bottom: 7em;
left: 15em;
}

@media only screen and (max-width: 600px) {
#embed02 {
bottom: 5.5em;
left: 12em;
}
}
</style>

--- RULES WINDOW ---
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="window" style="width: 200px">
<div class="title-bar">
<div class="title-bar-text">rules.txt</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body" style="font-size: 1.1em;">
<p>vio #1 moawajjunie ☆</p>
</div>
<div class="window-body" style="font-size: 1.1em; height: 80px; background: white; padding: 5px; line-height: 14px; border: 2px #f2f2f2 inset; overflow-y: scroll;">
<p><mark>before u follow...</mark> info info info info <mark>info info info info</mark> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</p>
<br>
<p><mark>dont follow if...</mark> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info <mark>info info info info info info info</mark> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</p>
</div>
<div class="window-body" style="font-size: 1.1em; text-align: right;">
<p>☆ navigate with the text below!</p>
</div>
</div>
<style>
mark {
color: #0818A6;
font-weight: bold;
background: transparent;
}

#embed03 {
position: absolute;
bottom: 7em;
left: 15em;
}

@media only screen and (max-width: 600px) {
#embed03 {
bottom: 5.5em;
left: 12em;
}
}
</style>

--- TUNES WINDOW ---
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="window" style="width: 200px">
<div class="title-bar">
<div class="title-bar-text">tunes.txt</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body" style="font-size: 1.1em;">
<p>vio #1 moawajjunie ☆</p>
</div>
<div class="window-body" style="font-size: 1.1em; height: 80px; background: white; padding: 5px; line-height: 14px; border: 2px #f2f2f2 inset; overflow-y: scroll;">
<p><mark>vio's ults!</mark> <u>cix</u> bx <u>txt</u> yeonjun + soobin <u>solo</u> bahiyyih</p>
<br>
<p><mark>vio's semi ults!!</mark> <u>txt</u> hueningkai <u>cix</u> yonghee + hyunsuk <u>bonedo</u> woonhak <u><s>chebul</s></u> jiwon <u>fromis_9</u> hayoung <u>nmixx</u> haewon <u>stayc</u> sieun + isa <u>katseye</u> megan <u>itzy</u> chaeryeong <u>ive</u> wonyo + rei <u>lsrfm</u> chaewon</p>
</div>
<div class="window-body" style="font-size: 1.1em; text-align: right;">
<p>☆ navigate with the text below!</p>
</div>
</div>
<style>
mark {
color: #0818A6;
font-weight: bold;
background: transparent;
}

#embed04 {
position: absolute;
bottom: 7em;
left: 15em;
}

@media only screen and (max-width: 600px) {
#embed04 {
bottom: 5.5em;
left: 12em;
}
}
</style>

--- NOTES WINDOW ---
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="window" style="width: 200px">
<div class="title-bar">
<div class="title-bar-text">notes.txt</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body" style="font-size: 1.1em;">
<p>vio #1 moawajjunie ☆</p>
</div>
<div class="window-body" style="font-size: 1.1em; height: 80px; background: white; padding: 5px; line-height: 14px; border: 2px #f2f2f2 inset; overflow-y: scroll;">
<p><mark>note:</mark> haii tysm for reading my carrd!! just as a general disclaimer though please please do not dm me on dollbahi for carrd help because i will Not answer lol also dont send any retrosprings to my personal retrospring! for carrd help dm me @ crrdcore or send a rtsp @ soobinzz :3</p>
</div>
<div class="window-body" style="font-size: 1.1em; text-align: right;">
<p>☆ navigate with the text below!</p>
</div>
</div>
<style>
mark {
color: #0818A6;
font-weight: bold;
background: transparent;
}

#embed05 {
position: absolute;
bottom: 7em;
left: 15em;
}

@media only screen and (max-width: 600px) {
#embed05 {
bottom: 5.5em;
left: 12em;
}
}
</style>

--- TUNES ---
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;800&display=swap" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<script src="https://kit.fontawesome.com/8119dfca45.js" crossorigin="anonymous"></script>

</head>

<style type="text/css">

@font-face {
font-family: 'music';
src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/LL_RECOR.TTF);
}

@font-face {
font-family: Pixelated MS Sans Serif;
src:url(ms_sans_serif.woff) format("woff");
src:url(ms_sans_serif.woff2) format("woff2");
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:relative;
display:flex;
background: #C2C2C2;
padding: .2em;
border: 3px #f2f2f2 inset;
margin: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
width:auto;
}

#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}

.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:18px;
cursor:pointer;
font-family: 'music';
}

.playy, .pausee {font-family: 'music'; font-size: 1.1em; color: #0818A6; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; } /* color of play & pause buttons */

.pausee {display:none;}

.sonata {
margin-left:0.4em;
font-family: Pixelated MS Sans Serif;
font-size:0.75em;
color:#000; /* color of music note symbol */
}

.labeltext {
margin-left:0.5em;
position: relative;
bottom:0.1em;
font-size:14px;/* color of song title */
}

</style>
<body>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">d</div>
<div class="pausee">k</div>
</div>
<div class="sonata">MP3 </div>
<div class="labeltext"><img src="https://64.media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif"> <span style="font-family: 'music'; font-size: 1.1em; color: #0818A6; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; ">o</span></div>
</div><!--end music player-->

<audio id="tune" src="https://drive.google.com/uc?export=download&id=1_NHDLb9goEYZk8G7uWKY812j2JNqgpMu"></audio>
</body>