Sollux Captor Layout W/ Music

Tags: sollux captor, homestuck, homestuck layout, sollux, sollux layout, gemini
Description:

FINALLY finished a sollux layout, Its simple but hey deal with it i guess lol. You can change things around as you see fit,
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by 𝓒𝓻𝓸𝓷𝓾𝓼 𝓐𝓶𝓹𝓸𝓻𝓪 (https://layouts.spacehey.com/layout?id=34623) -->

<style>

body::before {
content: "";
display: block;
position: fixed;
left: -32px;
top: 0;
width: calc(100% + 32px);
height: calc(100% + 32px);
background-image: url(https://tse2.mm.bing.net/th?id=OIP.oHI6WsPBhCa-b_UiP3FmIAHaEK&pid=Api&P=0&h=180);
background-size: cover;
background-position: center;
background-repeat: repeat;
z-index: 10000000;
animation: ScanlineAnimationRight 0.2s linear infinite;
pointer-events: none;
opacity: 1;
animation: hide 0.9s linear 1s 1 forwards;
}

@keyframes hide {
to {
opacity: 0;
}
}

:root {
        text-shadow: 0px 0px 6px;
        --logo-blue: ;
        --darker-blue: ;
        --lighter-blue: ;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: ;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: ;
    }

    .profile{
        background-color: #050308E3;
        border-radius: 30px;
        border: 7px solid white;
        box-shadow: 0px 0px 13px black;
    }
    
    .profile {
        border-color: Blue;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    main {
        background-color: transparent;
        color: #ff0000;
    }
    
    body {
        background-image: url(https://glowinthedarkness.com/wp-content/uploads/2020/10/Trippy-neon-animated-gif.gif);
        background-size: 2330px;
    }
    
    a {
        color: #0085ff;
    
    a:hover {
        animation:blinkingText 1.5s infinite;
    }
    
     nav .top {
        background-color: #050308E3;
        height: 100px;
        background-size: 796px;
        background-position: center;
        border-radius: 5px;
        position: relative;
        border: 7px solid white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    } 
    
    nav .top {
        border-color: #00ddff;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    nav .links {
        background-color: transparent;
        text-align: center;
        margin-top: 9px;
        margin-bottom: 8px;
    }
    
    .profile-pic {
        border: 6px Yellow;
        box-shadow: 0px 0px 7px White;
        border-radius: 30px;
        overflow: hidden;
    }
    
    .profile-pic {
        border-color: Yellow;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: #00ddff;
        border-width: 5px;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: Red;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    table.details-table td {
        background-color: yellow !important;
        opacity: 100%;
        border-radius: 5px;
    }
    
    .heading {
        padding: 10px 0 !important;
        text-align: center;
        background-color: #feff00 !important;
        border-radius: 10px;
    }
    
    .heading {
        animation:blinkingText 2.5s infinite;
    }
    
    table.comments-table td {
        background-color: #050308 !important;
        border: 1px #1b1b1c solid;
        box-shadow: 0px 0px 5px #1b1b1c;
        overflow
    }
    
    .comments-table td:first-child img {
        width: 90px;
        border-radius: 30px;
        border-style: solid;
        border-color: blue;
        border-width: 4.7px;
        box-shadow: 0px 0px 7px #feff00;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    .blog-preview p {
        font-size: 1.2rem;
    }
    
    .online {
        color: #cdce00;
        font-weight: bold;
        font-size: 80%;
    }
    
    .online img {
        content: url(<iframe src="https://giphy.com/embed/oM7qZMBlQJQ9rKDDrE" width="480" height="160" frameBorder="0" class="giphy-embed" allowFullScreen><p><a href="https://giphy.com/gifs/astrology-zodiac-star-sign-oM7qZMBlQJQ9rKDDrE">via GIPHY);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }
    
    .icon, .award img {
        content: url(<iframe src="https://giphy.com/embed/qeVnr8uYB2TRe" width="427" height="480" frameBorder="0" class="giphy-embed" allowFullScreen><p><a href="https://giphy.com/gifs/homestuck-karkat-gamzee-qeVnr8uYB2TRe">via GIPHY);
        height: 26px;
        width: 23px;
    }
    
    .profile .blurbs .section h4 {
        margin: 0;
        color: white;
    }
    
    @keyframes blinkingText{
        0%{     color: #FF173B;    }
        12.5%{    color: #FF5B29; }
        37.5%{    color: #FFD12A; }
        50%{    color: #75FF2A; }
        62.5%{    color: #2AFF97; }
        75%{    color: #2AB8FF; }
        87.5%{    color: #5C2AFF; }
        100%{    color: #FF173B; }
    }
    
    .profile .friends .person img {
        border-radius: 30px;
        border-style: solid;
        border-color: white;
        border-width: 4.7px;
        box-shadow: 0px 0px 7px black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }


    .count {
        color: blueviolet;
        text-shadow: 0px 0px 6px;
        animation:blinkingText 0.3s infinite;
    }
    
    .profile-info {
        background-color: #050308;
        height: 100px
        width: 100px
        border: 7px solid;
        border-radius: 10px
        border-width: 6px
        box-shadow: 0px 0px 7px black;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }
    
    .profile-info {
        border-color: white;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
    .profile .friends .person p {
        color: blueviolet;
        text-shadow: 0px 0px e;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
        animation:blinkingText 3.2s infinite;
    }
    
     footer {
        border-radius: 2px;
        background-color: Red; !important
        display: block !important;
        position: relative;
        border: 3px solid white;
        border-width: 6.5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }
    
    footer {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    
@keyframes flash_border {
  0% {
    border-color: #FF173B;
  }
  12.5% {
    border-color: #FF5B29;
  }
  37.5% {
    border-color: #FFD12A;
  }
  50% {
    border-color: #75FF2A;
  }
  62.5% {
    border-color: #2AFF97;
  }
  75% {
    border-color: #2AB8FF;
  }
  87.5% {
    border-color: #5C2AFF;
  }
  100% {
    border-color: #FF173B;
  }
}

@-webkit-keyframes flash_border {
0% {
    border-color: red;
  }
  16% {
    border-color: blue;
  }
  32% {
    border-color: red;
  }
  48% {
    border-color: blue;
  }
  64% {
    border-color: red;
  }
  80% {
    border-color: blue;
  }
  96% {
    border-color: red;
  }
  100% {
    border-color: blue;
  }
}

@-moz-keyframes flash_border {
  0% {
    border-color: red;
  }
  16% {
    border-color: blue;
  }
  32% {
    border-color: red;
  }
  48% {
    border-color: blue;
  }
  64% {
    border-color: red;
  }
  80% {
    border-color: blue;
  }
  96% {
    border-color: red;
  }
  100% {
    border-color: blue;
  }
}

</style>

<iframe width="713" height="401" src="https://www.youtube.com/embed/wYHMQTZi8-s" title="[Pre-Scratch] Homestuck - The La2t Frontiier Extended" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>


------------Extras Sollux Gifs ------VVV


<iframe src="https://giphy.com/embed/oM7qZMBlQJQ9rKDDrE" width="480" height="160" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe><p><a href="https://giphy.com/gifs/astrology-zodiac-star-sign-oM7qZMBlQJQ9rKDDrE">via GIPHY</a></p>




<iframe src="https://giphy.com/embed/qeVnr8uYB2TRe" width="427" height="480" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe><p><a href="https://giphy.com/gifs/homestuck-karkat-gamzee-qeVnr8uYB2TRe">via GIPHY</a></p>




<iframe src="https://giphy.com/embed/2SKqL4vmbR3sA" width="480" height="332" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe><p><a href="https://giphy.com/gifs/homestuck-misc-terezi-2SKqL4vmbR3sA">via GIPHY</a></p>



<iframe src="https://giphy.com/embed/sOJ5I64mRYUmJtN9F5" width="480" height="64" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe><p><a href="https://giphy.com/gifs/astrology-zodiac-horoscope-sOJ5I64mRYUmJtN9F5">via GIPHY</a></p>



<iframe src="https://giphy.com/embed/Keo0PagMDeQqlF1AVI" width="480" height="480" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe><p><a href="https://giphy.com/gifs/stars-zodiac-constellation-Keo0PagMDeQqlF1AVI">via GIPHY</a></p>



<iframe src="https://giphy.com/embed/Zq2PqxF1jTrRTpWLnT" width="480" height="480" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe><p><a href="https://giphy.com/gifs/cosmicrx-cosmic-gemini-geminiaf-Zq2PqxF1jTrRTpWLnT">via GIPHY</a></p>


<iframe src="https://giphy.com/embed/gAA9HUQBkCdq5ccCNN" width="480" height="449" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe><p><a href="https://giphy.com/gifs/taurus-taureau-wauou-gAA9HUQBkCdq5ccCNN">via GIPHY</a></p>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 1 of 1 comments ( View all | Add Comment )
⋆twinArmageddons
1726951726
u2iing!
Report Comment