plushie uwu ai - standard

NOTE: haiii this crd is a little complicated bc of the css frameworks but if u have any questions u can send me a ccat at crrdcore / send me a dm / a retrospring at soobinzz! also pls credit doiibahi / crrdcore when remaking this carrd it took me a looong time to make lol. also general disclaimer all positions were made to fit my personal devices the best you might have to change the positions to fit your devices better!

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

#image01 {
position: absolute;
left: 27em;
bottom: 15.4em;
}

@media only screen and (max-width: 600px) {
#image01 {
left: 23.8em;
bottom: 16.3em;
}
}

#text01 {
font-family: windows;
}

#buttons01, #buttons02, #buttons03 {
background: #C0C0C0;
border-radius: 3px 3px 0px 0px;
box-shadow: inset -1px -0px #0a0a0a, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
}

#buttons01:hover, #buttons02:hover, #buttons03:hover {
background: #A3C4E3;
}

#buttons01 {
position: absolute;
left: 13.9em;
bottom: 1px;
}

@media only screen and (max-width: 600px) {
#buttons01 {
left: 12.4em;
}
}

#buttons02 {
position: absolute;
left: 20.23em;
bottom: 1px;
}

@media only screen and (max-width: 600px) {
#buttons02 {
left: 17.6em;
}
}

#buttons03 {
position: absolute;
left: 26.5em;
bottom: 5.6px;
}

@media only screen and (max-width: 600px) {
#buttons03 {
left: 22.8em;
bottom: 6.5px;
}
}

#container03 >.wrapper {
width: 30%;
height: 17.5em;
border: 3px inset;
border-radius: 10px;
position: absolute;
left: 7px;
bottom: 3.2em;
}

@media only screen and (max-width: 600px) {
#container03 {
left: -2px;
bottom: -0.4em;
}
}

#text02 {
font-family: windows;
}

#container04 >.wrapper {
width: 50%;
position: absolute;
right: 5em;
bottom: 21em;
}

#container05 >.wrapper {
width: 50%;
height: 7em;
border-radius: 0 px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: 5em;
bottom: 14em;
overflow-y: scroll;
}

#container06 >.wrapper {
width: 50%;
position: absolute;
right: -3em;
bottom: 12.9em;
}

#container07 >.wrapper {
width: 50%;
height: 7em;
border-radius: 0px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: -3em;
bottom: 5.9em;
overflow-y: scroll;
}

#image02 {
border: 3px solid #595959;
border-radius: 0px 15px 0px 15px;
position: absolute;
left: 11.2em;
bottom: 8.1em;
overflow-y: hidden;
}

@media only screen and (max-width: 600px) {
#image02{
left: 9.9em;
bottom: 8.8em;
}
}

#container08 >.wrapper {
width: 50%;
position: absolute;
right: 5em;
bottom: 12.9em;
}

#container09 >.wrapper {
width: 50%;
height: 7em;
border-radius: 0px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: 5em;
bottom: 5.9em;
overflow-y: scroll;
}

#container10 >.wrapper {
width: 50%;
position: absolute;
right: -3em;
bottom: 21em;
}

#container11 >.wrapper {
width: 50%;
height: 7em;
border-radius: 0px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: -3em;
bottom: 14em;
overflow-y: scroll;
}

#image03 {
border: 3px solid #595959;
border-radius: 15px 0px 15px 0px;
position: absolute;
left: 29.5em;
bottom: 8.1em;
overflow-y: hidden;
}

@media only screen and (max-width: 600px) {
#image03{
left: 24.3em;
bottom: 8.8em;
}
}

#container12 >.wrapper {
width: 70%;
position: absolute;
right: -1.5em;
bottom: 16em;
}

#container13 >.wrapper {
width: 70%;
height: 9em;
border-radius: 0px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: -1.5em;
bottom: 7em;
overflow-y: scroll;
}

#container14 >.wrapper {
border-radius: 0px 0px 5px 5px;
}

#buttons04 {
border: 2.5px inset;
}
</style>

--- SOUND ---
<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("https://cdn.discordapp.com/attachments/916511538410569829/1006909357981712414/mouse_click_fx.mp3")
var clicksound=createsoundbite("https://cdn.discordapp.com/attachments/916511538410569829/1006909357981712414/mouse_click_fx.mp3")

</script>

--- TOP ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #9ED6FFBA;">
<div class="title-bar-text">☆</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<a href="#home" onclick="clicksound.playclip()"><button aria-label="Close"></button></a>
</div>
</div>

--- MENU ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<ul role="menubar" class="can-hover" style ="background:linear-gradient(180deg, #9ED6FFBA 25%, #D4D4D4 100%);">
<li role="menuitem" tabindex="0" aria-haspopup="true">
File
<ul role="menu">
<li role="menuitem">
<a href="#menubar">
Open <span>Ctrl+O</span>
</a>
</li>
<li role="menuitem">
<a href="#menubar">
Save <span>Ctrl+S</span>
</a>
</li>
<li role="menuitem" class="has-divider">
<a href="#menubar">
Save As... <span>Ctrl+Shift+S</span>
</a>
</li>
<li role="menuitem"><a href="#menubar">Exit</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Edit
<ul role="menu">
<li role="menuitem"><a href="#menubar">Undo</a></li>
<li role="menuitem"><a href="#menubar">Copy</a></li>
<li role="menuitem"><a href="#menubar">Cut</a></li>
<li role="menuitem" class="has-divider"><a href="#menubar">Paste</a></li>
<li role="menuitem"><a href="#menubar">Delete</a></li>
<li role="menuitem"><a href="#menubar">Find...</a></li>
<li role="menuitem"><a href="#menubar">Replace...</a></li>
<li role="menuitem"><a href="#menubar">Go to...</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
View
<ul role="menu">
<li role="menuitem" tabindex="0" aria-haspopup="true">
Zoom
<ul role="menu">
<li role="menuitem"><button control-id="ControlID-45">Zoom In</button></li>
<li role="menuitem"><button>Zoom Out</button></li>
</ul>
</li>
<li role="menuitem"><a href="#menubar">Status Bar</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Help
<ul role="menu">
<li role="menuitem"><a href="#menubar">View Help</a></li>
<li role="menuitem"><a href="#menubar">About</a></li>
</ul>
</li>
</ul>

--- VIO NAME CHANGES ---
#bubble {
color: #9ED6FF;
font-family: Pixelated MS Sans Serif;
font-size: 2.1em;
font-weight: bold;
position: absolute;
left: 5.4em;
bottom: 8.7em;
-webkit-filter: drop-shadow(1px 1px 2.5px #424242);
}

@media only screen and (max-width: 600px) {
#bubble {
font-size: 2.3em;
left: 4.1em;
bottom: 7.7em;
}
}

---> #9DCFF5 , #B2DAF7

--- SEARCH ---
<input type="search" placeholder="Search 4 Vioo ☆" control-id="ControlID-55">

<style>
#elementid {
position: absolute;
left: 10.9em;
bottom: 15.6em;
}

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

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

@font-face {
font-family: Chemre;
src: url(https://dl.dropbox.com/s/a4vu0khvvhe5lwq/Chemre.ttf);
}

mark {
font-family: Chemre;
color: #9AC5ED;
background: transparent;
}

#about {
font-family: windows;
font-size: 1.2em;
text-align: left;
letter-spacing: 1px;
color: #4F4F4F;
height: 8em;
padding: 5px;
border: 2px inset;
background: white;
overflow-y: scroll;
}

@media only screen and (max-width: 600px) {
#about {
height: 7.5em;
}
}
</style>
<div id="about">
<p>Welcome to Vio.Net~ please enjoy your stay and enjoy learning about Vio<i>!</i></p>
<br>
<p><mark><strong>About Us~</strong></mark> Vio.Net is a website dedicated to Vio aka <u>Vee</u> ☆ We aim to teach everyone about Vio and their interests.</p>
<br>
<p><mark><strong>About VIO~</strong></mark> Vio is blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<br>
<p><mark><strong>VIO Loves~</strong></mark> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>

--- PROGRESS ---
<div role="progressbar" class="animate">
<div style="width: 75%"></div>
</div>

--- MUSIC PLAYER CHANGES ---
#glenplayer02 {
position: relative;
bottom: -2px;
margin-bottom: 0;
left: -3px;
margin-left: 0.3em;
right: 0;
margin-right: 0em;
display:flex;
background: #C2C2C2;
padding: 1px;
border: 3px solid;
border-style: inset;
width: 150px;
}

@media only screen and (max-width: 600px) {
#glenplayer02 {
width: 140px;
bottom: -0.2em;
}
}

--- JOIN THE FANCLUB ---
<link
rel="stylesheet"
href="https://unpkg.com/98.css"
><div class="field-row-stacked" style="width: 100px">
<label for="text22">Email</label>
<input id="text22" type="email" />
</div>
<div class="field-row-stacked" style="width: 100px">
<label for="text23">Username</label>
<input id="text23" type="text" />
</div>
<div class="field-row-stacked" style="width: 100px">
<label for="text24">Password</label>
<input id="text24" type="password" />
</div>

<style>
@media only screen and (max-width: 600px) {
#text22, #text23, #text24 {
width: 90px;
}
}
</style>

--- BUTTON ---
<link rel="stylesheet" href="https://unpkg.com/7.css"><button control-id="ControlID-12" onclick="clicksound.playclip()">Submit</button>

--- TOP1 ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #9ED6FF;">
<div class="title-bar-text">☆☆</div>
<div class="title-bar-controls">
<a href="#home" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
</div>

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

@font-face {
font-family: alstoria;
src: url(https://dl.dropbox.com/s/8mxmroywtsttuc0/Alstoria%20Demo.ttf?);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

mark1 {
font-family: alstoria;
font-size: 1.3em;
color: #9AC5ED;
}

mark2 {
font-family: dreams;
font-size: 1.5em;
}

#byf {
font-family: windows;
font-size: 1.2em;
text-align: left;
letter-spacing: 1px;
color: #4F4F4F;
padding: 5px;
border: 2px inset;
background: white;
}
</style>
<div id="byf">
<p><mark1>before u req</mark1> <mark2><strong>9</strong></mark2></p>
<p>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>

--- TOP2 ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #9ED6FF;">
<div class="title-bar-text">☆☆</div>
<div class="title-bar-controls">
<a href="#home" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
</div>

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

@font-face {
font-family: alstoria;
src: url(https://dl.dropbox.com/s/8mxmroywtsttuc0/Alstoria%20Demo.ttf?);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

mark1 {
font-family: alstoria;
font-size: 1.3em;
color: #9AC5ED;
}

mark2 {
font-family: dreams;
font-size: 1.5em;
}

#dfi {
font-family: windows;
font-size: 1.2em;
text-align: left;
letter-spacing: 1px;
color: #4F4F4F;
padding: 5px;
border: 2px inset;
background: white;
}
</style>
<div id="dfi">
<p><mark1>dont req if</mark1> <mark2><strong>2</strong></mark2> 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>

--- TOP3 ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #9ED6FF;">
<div class="title-bar-controls">
<a href="#elementid" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
<div class="title-bar-text">☆☆☆</div>
</div>

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

@font-face {
font-family: alstoria;
src: url(https://dl.dropbox.com/s/8mxmroywtsttuc0/Alstoria%20Demo.ttf?);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

mark1 {
font-family: alstoria;
font-size: 1.3em;
color: #9AC5ED;
}

mark2 {
font-family: dreams;
font-size: 1.5em;
}

#loves{
font-family: windows;
font-size: 1.2em;
text-align: left;
letter-spacing: 1px;
color: #4F4F4F;
padding: 5px;
border: 2px inset;
background: white;
}
</style>
<div id="loves">
<p><mark1>my loves</mark1> <mark2><strong>4</strong></mark2></p>
<p><u>group</u> idol <mark2>1</mark2> <u>group</u> idol <mark2>1</mark2> <u>group</u> idol <mark2>1</mark2> <u>group</u> idol</p>
<br>
<p><mark1>my groups</mark1> <mark2><strong>4</strong></mark2></p>
<p>group <mark2>1</mark2> group <mark2>1</mark2> group <mark2>1</mark2> group <mark2>1</mark2> group <mark2>1</mark2> group</p></div>

--- TOP4 ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #9ED6FF;">
<div class="title-bar-text">☆☆☆</div>
<div class="title-bar-controls">
<a href="#elementid" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
</div>

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

@font-face {
font-family: alstoria;
src: url(https://dl.dropbox.com/s/8mxmroywtsttuc0/Alstoria%20Demo.ttf?);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

mark1 {
font-family: alstoria;
font-size: 1.3em;
color: #9AC5ED;
}

mark2 {
font-family: dreams;
font-size: 1.5em;
}

#ults {
font-family: windows;
font-size: 1.2em;
text-align: left;
letter-spacing: 1px;
color: #4F4F4F;
padding: 5px;
border: 2px inset;
background: white;
}
</style>
<div id="ults">
<p><mark1>my ults</mark1> <mark2><strong>1</strong></mark2></p>
<p><em>group</em> idol <mark2>4</mark2> <em>group</em> idol <mark2>4</mark2> <em>group</em> idol <mark2>4</mark2> <em>group</em> idol</p>
<br>
<p><mark1>semi ults</mark1> <mark2><strong>1</strong></mark2></p>
<p><em>group</em> idol <mark2>4</mark2> <em>group</em> idol <mark2>4</mark2> <em>group</em> idol <mark2>4</mark2> <em>group</em> idol</p></div>

--- TOP5 ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #9ED6FF;">
<div class="title-bar-text">☆☆☆☆</div>
<div class="title-bar-controls">
<a href="#home" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
</div>

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

@font-face {
font-family: Chemre;
src: url(https://dl.dropbox.com/s/a4vu0khvvhe5lwq/Chemre.ttf);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

mark {
font-family: Chemre;
color: #9AC5ED;
background: transparent;
}

mark3 {
font-family: dreams;
}

.link {
color: #4F4F4F;
}

.link:hover {
color: #9AC5ED;
}

#rate {
font-family: windows;
font-size: 1.2em;
text-align: left;
letter-spacing: 1px;
color: #4F4F4F;
height: 14.5em;
padding: 5px;
border: 2px inset;
background: white;
}

</style>
<div id="rate">
<p><mark><strong>rate vio.net ☆~</strong></mark></p>
<p>Here at Vio.Net we strive for a high quality website and good feedback from our consumers! Please rate this site in your most honest opinion.</p>
<br>
<br>
<br>
<p><mark><strong>customer support</strong></mark></p>
<p>☆~Find VIO at these links!</p>
<p><a class="link" href="https://twitter.com/doIIbahi" target="_blank">twitter</a> <mark3>1</mark3> <a class="link" href="https://www.pinterest.com/crrdcore/_created/" target="_blank">pinterest</a> <mark3>1</mark3> <a class="link" href="https://twitter.com/crrdcore" target="_blank">carrd twt</a> <mark3>1</mark3> <a class="link" href="https://www.vio.ju.mp" target="_blank">rkive</a> <mark3>1</mark3> <a class="link" href="https://try.carrd.co/crdcore" target="_blank">referral code</a>

--- OPTION ---
<select control-id="ControlID-33">
<option>5 - Incredible!</option>
<option>4 - Great!</option>
<option selected="">3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>

<style>
#elementid {
position: absolute;
left: 1em;
bottom: 7.8em;
}
</style>

--- SLIDER ---
<div class="field-row" style="width: 195px">
<label for="range25">Volume:</label>
<label for="range26">Low</label>
<input id="range26" type="range" min="1" max="11" value="5" />
<label for="range27">High</label>
</div>

--- ANIMATION 1 ---
<style>
#elementid , #elementid , #elementid , #elementid , #elementid , #elementid {
-webkit-animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}

/* ----------------------------------------------
* Generated by Animista on 2023-3-26 20:52:17
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation fade-in
* ----------------------------------------
*/
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

--- ANIMATION 2 ---
<style>
#elementid , #elementid , #elementid , #elementid {
-webkit-animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}

/* ----------------------------------------------
* Generated by Animista on 2023-3-26 20:53:21
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation fade-in
* ----------------------------------------
*/
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

--- 2NING ---
<style>
#elementid , #elementid {
-webkit-animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both;
animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both;
}

/* ----------------------------------------------
* Generated by Animista on 2023-3-26 20:55:26
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation fade-in
* ----------------------------------------
*/
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

--- HIHGLIGHT ---
<style>
::-moz-selection { /* EDIT THIS ONE TOO */
color: #4F4F4F;
background: #9AC5ED;
}

::selection {
color: #4F4F4F;
background: #9AC5ED;
}
</style>