Pink and Batty

Tags: pink, cute, bats, simple, hearts

Description:

This was mostly test code, but I thought it was pretty cute and simple so I figured I should share it!! Eventually I’ll go in and label what does what, and maybe clean it up a little but it gets the job done for now. Inspired by Valentine’s Day approaching and my love for bats. If you have any questions, let me know! No need to credit, but you can if you want to !! This is super customizable so pls make it your own. That’s why I make these in the first place Photo on mobile website

Code:

<!-- (c) Layout created by Daph's Coding House (https://layouts.spacehey.com/layout?id=99111) --> <style> .online{content:url("https://pixelsafari.neocities.org/text/onlinebat.gif");} </style> <style> :root { --logo-blue: #000000; --darker-blue: #000000; --lighter-blue: #000000; } body { background: url(https://i.postimg.cc/nzQmWLvL/IMG-2589.jpg); } main { color: black; background: rgba(241, 228, 238, 1); border-radius: 15px; border: 2px solid rgba(69, 22, 58, 1); font-size: 15px; } .profile .contact, .profile .url-info, .profile .table-section, .home-actions { border: none; } .profile .blurbs .heading, .profile .friends .heading { color: black; background-color: rgba(242, 188, 203, 0.4); font-size: 20px; text-transform:lowercase !important; border-radius:15px; border: 3px dotted rgba(69, 22, 58, 1); } .profile .friends .person p { color: #ff75ac; } .profile .friends .person p:hover { color: #ffd6f1; } .blog-preview{ text-align: center; font-size: 20px; background-color: rgba(242, 188, 203, 0.4); text-transform:lowercase !important; color: black; border-radius:15px; border: 5px dotted rgba(69, 22, 58, 1); } .profile .contact .heading, .profile .table-section .heading, .home-actions .heading { background-color: rgba(171, 118, 207, 0.4); border-radius:15px; border: 3px dotted rgba(69, 22, 58, 1); } .profile .contact { background-color: rgba(239, 215, 255, 0.4); border-radius: 15px; border: 3px solid rgba(69, 22, 58, 1); } .profile .friends .comments-table td { background-color: rgba(171, 118, 207, 0.4); border: 1px solid rgba(255, 161, 207, 0.5); } .profile .table-section .details-table td { background-color:rgba(223, 162, 210, 0.58); border-radius: 15px; border: 3px solid rgba(69, 22, 58, 1); } nav{ color: black; font-size: 13px !important; text-shadow: 1px 1px black; text-transform:none; padding-left:3px; text-align: center; border-radius: 15px 15px 0 0; overflow: hidden; } nav .links a{ color: #ffd6f1 !important; text-shadow: none !important; font-weight: bolder; } nav .links a:hover {color: #ff75ac !important;} nav .links { text-align: center; padding: 3.5px 3.5px 5.5px 3.5px;} .profile .blurbs .section h4{ color: black; } p{ color: black; } h1{ font-size: 30px !important; text-transform:uppercase !important; padding-left: 2px !important; } <style> h4{ font-size: 16px !important; text-transform:uppercase !important; padding-left: 2px !important; } </style> <style> p{ font-size: 14px !important; font-weight: bold; text-transform:none !important; } </style> <style> .contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { content: url("https://pixels.crd.co/assets/images/gallery06/0d202a95.gif?v=1987e5e0") } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { content: url("https://pixels.crd.co/assets/images/gallery06/0d202a95.gif?v=1987e5e0") } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { content: url("https://pixels.crd.co/assets/images/gallery06/0d202a95.gif?v=1987e5e0") } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { content: url("https://pixels.crd.co/assets/images/gallery06/0d202a95.gif?v=1987e5e0") } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { content: url("https://pixels.crd.co/assets/images/gallery06/0d202a95.gif?v=1987e5e0") } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { content: url("https://pixels.crd.co/assets/images/gallery06/0d202a95.gif?v=1987e5e0") } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { content: url("https://pixels.crd.co/assets/images/gallery06/0d202a95.gif?v=1987e5e0") } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { content: url("https://pixels.crd.co/assets/images/gallery06/0d202a95.gif?v=1987e5e0") } footer { background-color: rgb(242, 188, 203); font-size: 20px; text-transform:lowercase !important; border-radius:15px; border: 3px solid rgba(69, 22, 58, 1); display: block !important; } </style> <div class="snowflakes"> <div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div> <div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery31/553335f9.gif?v=1987e5e0"/></div> <div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div> <div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery31/553335f9.gif?v=1987e5e0"/></div> <div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div> <div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery31/553335f9.gif?v=1987e5e0"/></div> <div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div> <div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery31/553335f9.gif?v=1987e5e0"/></div> <div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div> <div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery31/553335f9.gif?v=1987e5e0"/></div> <div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div> <div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery31/553335f9.gif?v=1987e5e0"/></div> <div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div> <div class="snowflake"><img src="https://pixels.crd.co/assets/images/gallery31/553335f9.gif?v=1987e5e0"/></div> <div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div> </div> <style>     @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s} </style> <style> .general-about img {-webkit-mask-image: url(https://i.postimg.cc/tJMphMW8/IMG-0091.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;} </style>

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.