Taylor ☘︎ 🃟's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Layouts! pt. 2

<
More layouts: 


 Vaporwave Layout with custom cursor and 3 hours of vapowarve autoplay:

Story pin image
 

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

<div style="float:  ; height: 100px; position: fixed; left: -100px; bottom: 600px; z-index: 30;"><img src="https://64.media.tumblr.com/c4cf1484df038473920ab20853c186d0/c38739e75f44613d-04/s500x750/d5f5154d16d5eb4e63e7af2ada8aff6a540c85a3.pnj"/></div>


<div style="float:  ; height: 100px; position: fixed; right: -100px; bottom: 600px; z-index: 30;"><img src="https://64.media.tumblr.com/235ce61a17e94716e3794fbc263ea141/c38739e75f44613d-e4/s500x750/014f9c0eedbe827e2dae8682171221805ebe3a11.pnj"/></div>


<style>

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

body{font-family: 'LXGW Marker Gothic', sans-serif;}

</style>


<style>


body{

background:url("https://64.media.tumblr.com/75f2cfce9968127b99c6375da06d793b/81586f5dfe6ac986-f9/s1280x1920/eba43c7591877ae1b126514d74de22e8efe7e3ce.pnj") no-repeat fixed; background-size:cover;

}


nav .top {

    background: #156b6880;

    color: #bc2851;

    padding: 15px 10px 14px 10px;

    position: relative;

    border: 2px solid #bc2851;

}


.logo {


content:url("https://www.gifservice.fr/img/gif-vignette-large/def07e87f36d0958f0efaaad1a224b8c/179155-arizona-ice-tea-tea-infusions-drinks.gif");

}


button, input {

    overflow: visible;

    background: #156b6880;

    border: 2px solid #bc2851;

    color: #bc2851;

    font-weight: bold;

}


.logout-btn, .logout-form {

    color: #bc2851;

    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: #cdd8db;

}


nav .links {

    background-color: #156b6880;

    text-align: center;

    padding: 3.5px 16px 5.5px 16px;

    border: 2px solid #bc2851;

}


nav .links a {

    text-decoration: none;

    color: #bc2851;

    background: #30aaab00;

    font-size: 0.98em;

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

}


nav .links .special a {

    color: #bc2851;

}


nav .links a:hover {

    text-decoration: underline;

    color: #bc2851;

    font-weight: bolder;

    text-transform: uppercase;

}


main:before {

    width: auto;

    margin-bottom: 25px;

    border: 2px solid #bc2851;

    height: 150px;

    display: block;

    content: "";

    background-image: url(https://c-p.rmcdn1.net/5f4861fc094533006deb743c/2129515/Image-acdfc993-c329-41e6-a68d-c24f8cc817b0.gif);

    background-position: center center;

    background-size: auto;

}


main {

    background: #156b6880;

    color:#bc2851;

    border: 2px solid #bc2851;

    padding: 6px 0px;

    font-size: 80%;

    text-align: center;

}


span {

    text-align: center;

    color: #bc2851;

    text-transform: uppercase;

    font-size: 170%;

}


a {

    color: #bc2851;

    text-decoration: none;

}


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

    color: #bc2851;

    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: 2px solid #bc2851;

}


.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: 175px;

    background-image: url(https://64.media.tumblr.com/0f6abb9369560ec65b105520bf805b4a/c38739e75f44613d-d0/s400x600/c3fe2b81c39444e5f3a9485bd51718e81fa63ff3.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: #156b6880;

    color: #bc2851;

    text-align: center;

    border-bottom: 2px solid #bc2851;

    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: 2px solid #bc2851;

    margin: 10px 0;

}


.details-table td:first-child {

    background: #156b6880;

    color: #bc2851;

    text-align: center;

    font-weight: bold;

    border: 2px solid #bc2851;

    width: 33%;

}


.details-table td {

    background: #156b6880;

    color: white;

    border: 2px solid #bc2851;

    vertical-align: top;

}


.profile-info {

    border: 2px solid #bc2851;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 30px;

    margin-bottom: 10px;

}


.profile .profile-info {

padding: 20px;

        border: 2px solid #bc2851;

    

}


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

    background: #156b6880;

    border-bottom: 2px solid #bc2851;

    color: #bc2851;

    padding: 2px 7px;

    text-align: center;

}


.profile .blurbs {

    margin: 20px 0;

    border: 2px solid #bc2851;

    

}


.profile .blurbs .section h4 {

    margin: 0;

    color: #bc2851;

    text-align: center;

}


.friends {

    border: 2px solid #bc2851;

    

}


.count {

    color: #bc2851;

}

.profile .friends .person p {

    color: #bc2851;

    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: 2px solid #bc2851;

    

}



.friends-grid {

    border-top: 2px solid #bc2851;

    padding-top: 10px;

}


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

    background: #156b6880;

    border: 2px solid #bc2851;

    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: 2px solid #bc2851;

    

}


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

    background: #156b6880;

    border: 2px solid #bc2851;

    vertical-align: top;

}


table.comments-table {

    border: 2px solid #bc2851;

    

}



footer {

    text-align: center;

    font-size: 70%;

    margin: 10px 0 10px;

    padding: 10px 5px;

    background: #00000000;

    color: #bc2851;

     

}



::-webkit-scrollbar {

    width: 12px;

    height: 12px;

BACKGROUND-COLOR: #2b7b7c;

}

::-webkit-scrollbar-track {

    border-radius: 10px;

    width: 2px;

    border: 2px solid #2b7b7c;

}

::-webkit-scrollbar-thumb {

    background: #bc2851;

    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

    background: #bc2851;  

}


.online {

    content: url(https://64.media.tumblr.com/b832ae8c1045cbf4a811fdf779d72927/f05a1491d0b7651b-b8/s100x200/ed7d427c1de1ead0cd8812dbdce95c771b9a8e58.gifv)

}


    .icon, .award img {

        content: url(https://img1.picmix.com/output/stamp/normal/5/8/3/9/2429385_79c3f.gif);

        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(http://www.rw-designer.com/cursor-view/98664.png),

auto;}



A:hover{cursor: 

url(http://www.rw-designer.com/cursor-view/98664.png),

auto;}


body:before {


content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://64.media.tumblr.com/75f2cfce9968127b99c6375da06d793b/81586f5dfe6ac986-f9/s1280x1920/eba43c7591877ae1b126514d74de22e8efe7e3ce.pnj');

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/-CZHL8w52Co//?&;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>




Vintage arcade layout with custom cursor and abiance:

Story pin image
 

<!-- (c) Layout created by Taylor ☘︎ 🃟 (https://layouts.spacehey.com/layout?id=37430) -->

<div style="float:  ; height: 100px; position: fixed; left: 40px; bottom: 600px; z-index: 30;"><img src="https://64.media.tumblr.com/adfc6e3194c349f6354fc274638a6090/a662cb966d6fc5a9-f4/s250x400/ff19870805cb63671d0ed929fc755534203e1cc1.gifv"/></div>


<div style="float:  ; height: 100px; position: fixed; right: 50px; bottom: 320px; z-index: 30;"><img src="https://i.gifer.com/origin/3b/3b7f734f031a8db53b8456dd7237d298_w200.gif"/></div>


<style>

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

body{font-family: 'Bitcount Prop Single', system-ui;}

</style>


<style>


body{

background: url(https://pbs.twimg.com/media/EYjczSlXsAM79Gn.png)

}


nav .top {

    background: #000000c9;

    color: #8119e0;

    padding: 15px 10px 14px 10px;

    position: relative;

    border: 1px dotted #00fe00;

}


.logo {


content:url("https://media.tenor.com/_0RcafbzYdwAAAAj/game-over-game.gif");


}


button, input {

    overflow: visible;

    background: #000000c9;

    border: 1px dotted #ff7f2a;

    color: #ff0066;

    font-weight: bold;

}


.logout-btn, .logout-form {

    color: #ff0066;

    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: #8119e0;

}


nav .links {

    background-color: #000000c9;

    text-align: center;

    padding: 3.5px 16px 5.5px 16px;

    border: 1px dotted #00fe00;

}


nav .links a {

    text-decoration: none;

    color: #ff0066;

    font-size: 0.98em;

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

}


nav .links .special a {

    color: #8119e0;

}


nav .links a:hover {

    text-decoration: underline;

    color: #ff7f2a;

    font-weight: bolder;

    text-transform: uppercase;

}


main:before {

    width: auto;

    margin-bottom: 25px;

    border: 1px solid black;

    height: 350px;

    display: block;

    content: "";

    background-image: url(https://64.media.tumblr.com/8f7b706133d1c1f03199603e935e9184/11188bec4005abf4-0f/s500x750/e57889c7ee68e7fd2404c5ad954489a027d54cc3.gifv);

    background-position: center center;

    background-size: cover;

}


main {

    background: #000000c9;

    color: #8119e0;

    border: 1px dotted #00fe00;

    padding: 6px 0px;

    font-size: 80%;

text-align: center;

}


span {

    text-align: center;

    color: #8119e0;

    text-transform: uppercase;

    font-size: 170%;

}


a {

    color: #fe0066;

    text-decoration: none;

}


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

    color: #ff7f2a;

    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 dotted #00fe00;

}


.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/c8076f935077374db7a6408b6c601c85/b8a6ebea37049bcf-57/s400x600/d599dbfe887dd75ad2cea82a4e5ccfd097574ad2.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: #8119e0;

    text-align: center;

    border-bottom: 1px dotted #00fe00;

    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 dotted #00fe00;

    margin: 10px 0;

}


.details-table td:first-child {

    background: transparent;

    color: #ff0066;

    text-align: center;

    font-weight: bold;

    border: 1px dotted #ff7f2a;

    width: 33%;

}


.details-table td {

    background: transparent;

    color: white;

    border: 1px dotted #ff7f2a;

    vertical-align: top;

}


.profile-info {

    border: 1px dotted #00fe00;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 30px;

    margin-bottom: 10px;

}


.profile .profile-info {

background-image: url(https://pbs.twimg.com/media/EYjczSlXsAM79Gn.png);

padding: 20px;

    border: 1px dotted #00fe00;

    

}



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

    background: transparent;

    border-bottom: 1px dotted #ff7f2a;

    color: #8119e0;

    padding: 2px 7px;

    text-align: center;

}


.profile .blurbs {

    margin: 20px 0;

    border: 1px dotted #00fe00;

    

}


.profile .blurbs .section h4 {

    margin: 0;

    color: #ff0066;

    text-align: center;

}


.friends {

    border: 1px dotted #00fe00;

    

}


.count {

    color: #ff0066;

}


.profile .friends .person p {

    color: #ff0066;

    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 dotted #00fe00;

    

}



.friends-grid {

    border-top: 1px dotted #ff7f2a;

    padding-top: 10px;

}


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

    background: black;

    border: 1px dotted #00fe00;

    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 dotted #00fe00;

    

}


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

    background: #000000c9;

    border: 1px dotted #00fe00;

    vertical-align: top;

}


table.comments-table {

    border: 1px dotted #00fe00;

    

}



footer {

    text-align: center;

    background-color: #f5f5dc00;

    font-size: 70%;

    margin: 10px 0 10px;

    padding: 10px 5px;

    color: #8119e0;

     

}



::-webkit-scrollbar {

    width: 12px;

    height: 12px;

BACKGROUND-COLOR: black;

}

::-webkit-scrollbar-track {

    border-radius: 10px;

    width: 2px;

    border: 1px dotted #00fe00;

}

::-webkit-scrollbar-thumb {

    background: #8119e0;

    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

    background: #ff0066;  

}


.online {

    content: url(https://64.media.tumblr.com/c809ac8d3fb339e0d186c16e8136151a/a4cd45462b6186ca-d3/s75x75_c1/370fa93954588a1fdbb003f1c778936fa8579b2b.gifv)

}


    .icon, .award img {

        content: url(https://64.media.tumblr.com/e57f1ced798d1c8afa3c6b3d434a4e07/47004bdc9ce33ca6-69/s75x75_c1/c279c83a681fd83591492e4207de17638cda5feb.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/207499.png),

auto;}



A:hover{cursor: 

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

auto;}


body:before {


content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://i.pinimg.com/originals/2f/e4/60/2fe4604fdf9824873353a413d1435255.gif');

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/mpUy0nH9PYM//?&;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>




10 Kudos

Comments

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