VS#22 A Realistic Logical Ideologist

VS#22ATS: A Realistic Logical Ideologist

CSS

/* Last Update: 02/04/19 */

/* MUSICBOX CSS AND ANIMATION IMPORT - PLACE NOTHING ABOVE */
@import url("https://dl.dropboxusercontent.com/s/cvduve2pku4zf7l/musicbox.css?dl=0");
@import url("https://dl.dropboxusercontent.com/s/mztn8hnv8w9adqn/vs22-realistic-logical-ideologist.css");

/* PAGE BACKGROUND AND FONT */
body {
background:#0c3742 url() no-repeat fixed;
background-size:cover;
text-align:center;
}

/* MAIN DISPLAY COLORS */
#menu {
background:repeating-linear-gradient(#282729, #3c3b3d 5%, #282729 10%);
background:-o-repeating-linear-gradient(#282729, #3c3b3d 5%, #282729 10%);
background:-moz-repeating-linear-gradient(#282729, #3c3b3d 5%, #282729 10%);
background:-webkit-repeating-linear-gradient(#282729, #3c3b3d 5%, #282729 10%);
background-color:#282729;
}
.circle, .square, .unit > div {
background-color:#f2f2f2;
}
.circle {
box-shadow:0 0 10px #f2f2f2;
}
.dark {
background-color:#c0c2c2;
box-shadow:0 0 10px #c0c2c2;
}
.darker {
background-color:#8d8f8f;
box-shadow:0 0 10px #8d8f8f;
}
.square {
color:#0c3742;
text-shadow:0 0 5px #f2f2f2;
box-shadow:0 0 0.8vw 0.8vw #f2f2f2;
}
.square:nth-child(5n-3) {
background-color:#8d8f8f;
box-shadow:0 0 0.8vw 0.8vw #8d8f8f;
}
.square:nth-child(5), .square:nth-child(11) {
background-color:#c0c2c2;
box-shadow:0 0 0.8vw 0.8vw #c0c2c2;
}
.square:nth-child(13) {
background-color:#c0c2c2;
box-shadow:0 0 0.8vw 0.8vw #f2f2f2;
}
hr {
border:1px solid #0c3742;
box-shadow:0 0 5px #f2f2f2;
}
a, #musicbox {
text-decoration:none;
color:#737373;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#d9d9d9;
}
::-webkit-scrollbar-thumb {
background-color:#737373;
}

/* COLOR ANIMATIONS */
@keyframes color-change {
0%,24%,100% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
25%,49% {background-color:#8D8F8F;box-shadow:0 0 0.8vw 0.8vw #8D8F8F;}
50%,74% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
75%,99% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
}
@-o-keyframes color-change {
0%,24%,100% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
25%,49% {background-color:#8D8F8F;box-shadow:0 0 0.8vw 0.8vw #8D8F8F;}
50%,74% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
75%,99% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
}
@-moz-keyframes color-change {
0%,24%,100% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
25%,49% {background-color:#8D8F8F;box-shadow:0 0 0.8vw 0.8vw #8D8F8F;}
50%,74% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
75%,99% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
}
@-webkit-keyframes color-change {
0%,24%,100% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
25%,49% {background-color:#8D8F8F;box-shadow:0 0 0.8vw 0.8vw #8D8F8F;}
50%,74% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
75%,99% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
}
@keyframes color-change-2 {
0%,24%,100% {background-color:#8D8F8F;box-shadow:0 0 0.8vw 0.8vw #8D8F8F;}
25%,49% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
50%,74% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
75%,99% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
}
@-o-keyframes color-change-2 {
0%,24%,100% {background-color:#8D8F8F;box-shadow:0 0 0.8vw 0.8vw #8D8F8F;}
25%,49% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
50%,74% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
75%,99% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
}
@-moz-keyframes color-change-2 {
0%,24%,100% {background-color:#8D8F8F;box-shadow:0 0 0.8vw 0.8vw #8D8F8F;}
25%,49% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
50%,74% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
75%,99% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
}
@-webkit-keyframes color-change-2 {
0%,24%,100% {background-color:#8D8F8F;box-shadow:0 0 0.8vw 0.8vw #8D8F8F;}
25%,49% {background-color:#f2f2f2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
50%,74% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #c0c2c2;}
75%,99% {background-color:#c0c2c2;box-shadow:0 0 0.8vw 0.8vw #f2f2f2;}
}

/* CSS MEAT */
#mugshot, #icon {
position:absolute;
top:50%;
}
#mugshot {
z-index:3;
position:fixed;
left:0;
width:36vw;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
animation:fade-in 5s;
-o-animation:fade-in 5s;
-moz-animation:fade-in 5s;
-webkit-animation:fade-in 5s;
}
#menu {
z-index:4;
position:fixed;
left:0;
bottom:-14vh;
height:14vh;
width:100%;
text-align:center;
animation:slide 1s 3s forwards;
-o-animation:slide 1s 3s forwards;
-moz-animation:slide 1s 3s forwards;
-webkit-animation:slide 1s 3s forwards;
}
.circle, #musicbox {
display:inline-block;
position:relative;
top:3vh;
height:8vh;
width:8vh;
border-radius:50%;
font-size:4vh;
line-height:8vh;
overflow:hidden;
}
#icon {
z-index:1;
left:50%;
height:50%;
width:50%;
transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
.tab {
z-index:1;
position:fixed;
top:0;
right:0;
height:100vh;
width:100vw;
opacity:0;
transition:0.5s;
-o-transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
}
.tab:target {
z-index:2;
opacity:1;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.square {
float:right;
display:inline-block;
position:relative;
top:-11vw;
height:14vw;
width:14vw;
margin:1vw 5.4vw;
border-radius:2px;
overflow:hidden;
}
.text, .image {
position:absolute;
top:0;
height:100%;
opacity:0;
}
.text {
width:100%;
overflow-y:auto;
}
.text img {
width:100%;
}
.image {
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.unit {
display:block;
position:relative;
width:60%;
margin:1vw auto;
}
.unit img {
display:block;
width:100%;
}
.unit > div {
position:absolute;
bottom:0;
width:100%;
opacity:0.8;
}
.tab:target .text, .tab:target .image {
opacity:1;
transition:1s 2s;
-o-transition:1s 2s;
-moz-transition:1s 2s;
-webkit-transition:1s 2s;
}
.tab:target .square {
animation:color-change 0.6s 2;
-o-animation:color-change 0.6s 2;
-moz-animation:color-change 0.6s 2;
-webkit-animation:color-change 0.6s 2;
}
.tab:target .square:nth-child(3n) {
animation:color-change 0.6s reverse 2;
-o-animation:color-change 0.6s reverse 2;
-moz-animation:color-change 0.6s reverse 2;
-webkit-animation:color-change 0.6s reverse 2;
}
.tab:target .square:nth-child(5n-3) {
animation:color-change-2 0.6s 2;
-o-animation:color-change-2 0.6s 2;
-moz-animation:color-change-2 0.6s 2;
-webkit-animation:color-change-2 0.6s 2;
}
h2, hr {
margin:0.2vw;
}
#credit {
z-index:4;
position:fixed;
height:17px;
right:1%;
bottom:0;
background-color:#fff;
border-radius:5px;
}

HTML

<img src="https://dl.dropboxusercontent.com/s/orb5r7livn31y8y/IA-Ideologist.png" id="mugshot" alt=""/>

<div id="menu">
<div class="circle dark" id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload" style="left:0;">
<source src="http://k003.kiwi6.com/hotlink/ks02ctzjop/A_Realistic_Logical_Ideologist.mp3" type="audio/mpeg">
</audio>
</div>


<a href="" target="_blank" title="Sweetheart" class="circle" style="margin-right:4%;">
<img src="http://www.clker.com/cliparts/y/d/m/B/y/G/gray-heart-hi.png" id="icon"/>
</a>

<div class="circle" style="margin-right:8%;"></div>

<a href="#01" class="circle">1</a>
<a href="#02" class="circle darker">2</a>
<a href="#03" class="circle dark">3</a>
<a href="#00" class="circle">-</a>
</div>


<div class="tab" id="01">
<div class="square"></div><div class="square"></div>
<div class="square"></div><div class="square"></div>

<div class="square">
</div>

<div class="square">
<img src="https://dl.dropboxusercontent.com/s/71eicbrbmtpiof3/ia-regular.gif" class="image" alt=""/>
</div>

<div class="square">
<div class="text">
<h2>Stats</h2>
<hr/>
<p>
<b>Name:</b> Stat here
<br/>
<b>Species:</b> Stat here
<br/>
<b>Gender:</b> Stat here
<br/>
<b>Age:</b> Stat here
<br/>
<b>Hair:</b> Stat here
<br/>
<b>Eyes:</b> Stat here
<br/>
<b>Height:</b> Stat here
<br/>
<b>Weight:</b> Stat here
<br/>
<b>Build:</b> Stat here
<br/>
<b>Orientation:</b> Stat here
</p>
</div>
</div>

<div class="square"></div>

<div class="square">
<div class="text">
<h2>OOC</h2>
<hr/>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
<li>Bullet three</li>
<li>Bullet four</li>
<li>Bullet five</li>
<li>Bullet six</li>
<li>Bullet seven</li>
<li>Bullet eight</li>
</ul>
</div>
</div>

<div class="square">

</div>

<div class="square">
<img src="https://dl.dropboxusercontent.com/s/nsfh7l31szzmetr/ia-glasses.gif" class="image" alt=""/>
</div>

<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="square"></div><div class="square"></div>
</div>


<div class="tab" id="02">
<div class="square"></div><div class="square"></div>
<div class="square"></div><div class="square"></div>

<div class="square">
<img src="https://cdnb.artstation.com/p/assets/images/images/003/069/863/large/lee-antonio-aeng.jpg?1469271578" class="image" alt=""/>
</div>

<div class="square">
<div class="text">
<h2>Personality</h2>
<hr/>
<p>
Paragraph one.
</p>
<p>
Paragraph two.
</p>
</div>
</div>

<div class="square">
<img src="https://static.zerochan.net/Realistic.Logical.Ideologist.full.1038987.jpg" class="image" alt=""/>
</div>
<div class="square"></div>

<div class="square">

</div>

<div class="square">
<div class="text">
<h2>History</h2>
<hr/>
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
</div>
</div>

<div class="square">
</div>

<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="square"></div><div class="square"></div>
</div>


<div class="tab" id="03">
<div class="square"></div><div class="square"></div>
<div class="square"></div><div class="square"></div>

<div class="square">
<img src="https://i.ytimg.com/vi/bDBr-JI12yo/hqdefault.jpg" class="image" alt=""/>
</div>

<div class="square">
<div class="text">
<h2>Friends</h2>
<hr/>
<a class="unit" href="" target="_blank">
<img src="http://pm1.narvii.com/6233/ee863f2ffe8f4e620e422a05c639a4ba7bc93171_00.jpg"/>
<div>ONE</div>
</a>
<a class="unit" href="" target="_blank">
<img src="https://cdn.awwni.me/tj5c.png"/>
<div>Yukari</div>
</a>
</div>
</div>

<div class="square">
<img src="https://static.zerochan.net/Realistic.Logical.Ideologist.full.1370100.jpg" class="image" alt=""/>
</div>

<div class="square"></div>

<div class="square">
<img src="https://static.zerochan.net/Realistic.Logical.Ideologist.full.1038994.jpg" class="image" alt=""/>
</div>

<div class="square">
<img src="https://i.pinimg.com/originals/b9/23/db/b923db744549fbdf9a57467e193cf027.jpg" class="image" alt=""/>
</div>

<div class="square">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/0da98284-b9e5-4ede-adc3-6489209be3d7/d6x9m7k-0d080974-d042-466b-91cb-cf98f2300722.png/v1/fill/w_896,h_892,q_70,strp/ia____a_realistic_logical_ideologist_by_rifune_d6x9m7k-pre.jpg" class="image" alt=""/>
</div>

<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="square"></div><div class="square"></div>
</div>

<a href="http://wix.cera-nore.com/" target="_blank" title="VS#22">
<img src="https://orig00.deviantart.net/9a8a/f/2017/256/c/d/cera_by_cera_nore-dbncbii.png" id="credit"/>
</a>