Layouts! pt. 3

<

Part 3 of my endeavor to post layouts


"Jackpot" Layout (custom cursor & jazz autoplay)

Story pin image
 

<!-- (c) Layout created by Taylor ☘︎ 🃟 (https://layouts.spacehey.com/ratlinez) -->

<div style="float:  ; height: 100px; position: fixed; left: 2px; bottom: 75px; z-index: 30;"><img src="https://64.media.tumblr.com/ae1e1bad5cb7a06f638cf07efc51f915/cd1ec6481fd992b0-0a/s400x600/1ca21b97fc419c85b9e72f2f377217a5f6b08c2e.pnj"/></div>


<div style="float:  ; height: 100px; position: fixed; right: 2px; bottom: 75px; z-index: 30;"><img src="https://64.media.tumblr.com/13ee787efe7477d2de554126faa03dcd/cd1ec6481fd992b0-d8/s400x600/943b9df80fda9bbe49e218fac44b08ab1cf67f41.pnj"/></div>


<div style="float:  ; height: 0px; position: fixed; left: -250px; bottom: 800px; z-index: 30;"><img src="https://64.media.tumblr.com/725883086fa2cff27a251a8850ed9c25/7e80fcacb8e068ba-91/s1280x1920/94a9a5d08de20553e673bd913213b71df51ba387.pnj"/></div>


<div style="float:  ; height: 0px; position: fixed; right: -250px; bottom: 800px; z-index: 30;"><img src="https://64.media.tumblr.com/4afaff2f6dbcd4711daff573b1c9c4fc/7e80fcacb8e068ba-63/s1280x1920/a038d29d186609ce48331e00b71a130154c6e923.pnj"/></div>


<style>

@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');

body{font-family: 'Rye', serif;}

</style>


<style>


body{background:url("https://t4.ftcdn.net/jpg/07/09/07/99/360_F_709079922_rbSUw0mYT1luaTgytGT8569LllpAuHJH.jpg") no-repeat fixed; background-size:cover;}


nav .top {

    background: #000000c4;

    border: 1px solid #FFFFFF;

    color: #870b1e;

    padding: 15px 10px 14px 10px;

    position: relative;

}


.logo {


content:url("https://www.animatedimages.org/data/media/633/animated-playing-card-image-0071.gif");


}


button, input {

    overflow: visible;

    background: #00000099;

    border: 1px solid #FFFFFF;

    color: #870b1e;

    font-weight: bold;

}


.logout-btn, .logout-form {

    color: #870b1e;

    text-transform: uppercase;

    display: inline-block;

    font-size: 100%;

}


nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {

    content: "🎲";

    color: #FFFFFF;

}


nav .links {

    background-color: transparent;

    text-align: center;

    padding: 3.5px 16px 5.5px 16px;

}


nav .links a {

    text-decoration: none;

    text-shadow: none;

    color: #FFFFFF;

    font-size: 0.98em;

    font-size: max(0.98em, 12px);

}


nav .links .special a {

    color: #FFFFFF;

}


nav .links a:hover {

    text-decoration: underline;

    text-shadow: 0px 0px 3px #ffffff;

    color: #000000;

    font-weight: bolder;

    text-transform: uppercase;

}


main:before {

    width: auto;

    margin-bottom: 25px;

    border: 1px solid black;

    height: 124px;

    display: block;

    content: "";

    background-image: url(https://media1.tenor.com/m/3skyDmbMauIAAAAd/jackpot-slot.gif);

    background-size: contain;

}


main {

    background: #000000c4;

    color: #870b1e;

    border: 1px solid white;

    padding: 6px 0px;

    font-size: 80%;

text-align: center;

}


span {

    text-align: center;

    color: white;

    text-transform: uppercase;

    font-size: 170%;

}


a {

    color: white;

    text-decoration: none;

    text-align: left;

}


a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {

    color: black;

    text-shadow: 0px 0px 3px #ffffff;

    text-transform: uppercase;

    font-weight: bolder;

    font-style: italic;

}


.edit-link {

    font-size: 90%;

    text-align: center;

}


.general-about .profile-pic {

    display: block;

    float: left;

    margin: 0 15px 8px 0;

    border: 1px solid white;

}


.general-about .details {

    display: flow-root;

    text-align: center;

}


.profile .mood {

    width: 100%;

    display: inline-block;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

}


.mood:after {

    content: "";

    white-space: pre-wrap;

    display: block;

    height: 50px;

    background-image: url(https://64.media.tumblr.com/bfdf72c64145d00f4a50fe976b75fd41/f92a565f98ee3f1b-85/s400x600/41a339972b43233f25adb59fa7e0fb6312e0c1aa.pnj);

    background-position-x: center;

    background-repeat: no-repeat;

    background-size: 300px;

}



.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {

    background: transparent;

    color: #870b1e;

    text-align: center;

    border-bottom: 1px solid white;

    padding: 2px 7px;

}


.profile .contact .f-row {

    margin: 7px;

    font-weight: bold;

    font-size: 0.8em;

}


.profile .blurbs .section p {

font-size: 15px;

text-align: center;

}



.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

    width: 100%;

    border: 1px solid white;

    margin: 10px 0;

}


.f-col {

    display: table-cell;

    vertical-align: top;

    text-align-last: left;

}


.details-table td:first-child {

    background: transparent;

    color: #870b1e;

    text-align: center;

    font-weight: bold;

    border: 1px solid white;

    width: 33%;

}


.details-table td {

    background: transparent;

    color: #870b1e;

    border: 1px solid white;

    vertical-align: top;

}


.details-table td p {

    margin: 0;

    overflow-wrap: break-word;

    word-break: break-word;

    color: white;

}


.profile-info {

    border: 1px solid white;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 30px;

    margin-bottom: 10px;

}


.profile .profile-info {

    padding: 20px;

    border: 1px solid white;

    

}



.profile .blurbs .heading, .profile .friends .heading {

    background: transparent;

    border-bottom: 1px solid white;

    color: white;

    padding: 2px 7px;

    text-align: center;

}


.profile .blurbs {

    margin: 20px 0;

    border: 1px solid white;

    

}


.profile .blurbs .section h4 {

    margin: 0;

    color: #870b1e;

    text-align: center;

}


.friends {

    border: 1px solid white;

    

}


.music .heading a.more, .specials .heading a.more, .friends .heading a.more, .new-people .top a.more, .bulletin-preview .heading a.more, .blog-sub-preview .heading a.more, .spa .heading .spa-info {

    float: right;

    margin-top: 22px;

    font-size: 80%;

}


.count {

    color: white;

}


.profile .friends .person p {

    color: white;

    font-weight: bold;

    width: 100%;

    overflow-wrap: break-word;

    word-break: break-word;

    font-size: 100%;

    text-align: center;

}


.profile .friends .person img:not(.icon) {

    max-width: 95px;

    max-height: 95px;

    display: block;

    margin: 0 auto;

    border: 1px solid white;

    

}



.friends-grid {

    border-top: 1px solid white;

    padding-top: 10px;

}


.comments-table td:first-child, .music-table td:first-child {

    background: #00000099;

    border: 1px solid white;

    text-align: center;

    font-weight: bold;

    width: 38%;

}


.comments-table td:first-child img:not(.icon) {

    width: 90px;

    max-width: 100%;

    max-height: 200px;

    border: 1px solid white;

    

}


.comments-table td, .music-table td {

    background: #00000099;

    border: 1px solid white;

    vertical-align: top;

}


table.comments-table {

    border: 1px solid white;

    

}



footer {

    text-align: center;

    border: 1px solid #FFFFFF;

    font-size: 70%;

    margin: 10px 0 10px;

    padding: 10px 5px;

    background: #000000c4;

    color: #870b1e;

     

}



::-webkit-scrollbar {

    width: 12px;

    height: 12px;

BACKGROUND-COLOR: black;

}

::-webkit-scrollbar-track {

    border-radius: 10px;

    width: 2px;

    border: 1px solid white;

}

::-webkit-scrollbar-thumb {

    background: #870b1e;

    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

    background: white;  

}


.online {

    content: url(https://64.media.tumblr.com/5aad8c7d38f5fa6be164365f9561857b/5ae8c7ea6b320878-dd/s100x200/1efce6d9406a0cfd8ff2894d82df3b29e40e69d6.gifv)

}


    .icon, .award img {

        content: url(https://64.media.tumblr.com/19574dffb41109250f74b74af9e5b3de/2c26ab6ddd76e331-61/s75x75_c1/4e086dd7b1306d2c34174e9236be00dec7580cd8.gifv);

        display: inline-block;

        height: 2.0em;

        width: 2.0em;

        margin: 0 .05em 0 .1em;

        vertical-align: -0.3em;

        color: rgba(0,0,0,0);

    }



HTML,BODY{cursor: 

url(https://www.rw-designer.com/cursor-view/8306.png),

auto;}



A:hover{cursor: 

url(https://www.rw-designer.com/cursor-view/8306.png),

auto;}


body:before {


content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://media.licdn.com/dms/image/v2/D4E12AQFgRedt7P_4MQ/article-cover_image-shrink_600_2000/article-cover_image-shrink_600_2000/0/1691072860924?e=2147483647&v=beta&t=kuzhgDcGRovfVAsYlH1l6c3J7yfulu54arsEPldFFNI');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 3s ease 0s 1 normal forwards;

pointer-events: none;


}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 


<style>  body {

text-align: center;

}</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/GsELrKwc_Yw//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>


6 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )