Add to Favorites
View Layouts
View Profile
Report Layout
Tags:
Description:
layout by cristiana
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.
<!-- (c) Layout created by ΰΌΊdemidevilΰΌ» (https://layouts.spacehey.com/layout?id=35896) --> <style> body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://media2.giphy.com/media/lSEAsXV6RRN6iO9ff7/giphy.gif?cid=ecf05e47o5ujktm22nobx1mzne6g7msugb3y0pg14lbqnrsi&ep=v1_gifs_related&rid=giphy.gif&ct=g'); background-size: cover; background-repeat: no-repeat; background-position:center; animation: yourAnimation 3.2s ease 0s 1 normal forwards; pointer-events: none;} @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } </style> <!-- (c) Layout created by cristiana (https://layouts.spacehey.com/layout?id=1866) --> <style> :root { --image1: url("https://media.tenor.com/Apcup-n2PkkAAAAd/the-bakery-melanie-martinez.gif"); --image2: url("https://media.tenor.com/4hwP_rUA_KwAAAAC/melanie-martinez.gif"); --image3: url("https://media.tenor.com/cJ_KHB7YZi4AAAAC/melanie-martinez.gif"); --image4: url("https://media.tenor.com/2BD5Gog9_XcAAAAC/melanie-martinez-bakery.gif"); --image5: url("https://media.tenor.com/lJr0fyqvtSIAAAAC/melanie-martinez.gif"); --image6: url("https://media.tenor.com/P0thAdl6dW8AAAAC/melanie-adele.gif"); --image7: url("https://media.tenor.com/hdMlAkXrqmUAAAAC/melanie-martinez.gif"); --image8: url("https://media.tenor.com/A6M_ZBvpkowAAAAC/melanie-martinez.gif"); --image9: url("https://media.tenor.com/t2LO-dkQEeEAAAAC/cookie-melanie.gif"); --image10: url("https://media.tenor.com/a4QN2sWAA20AAAAC/melanie-martinez.gif"); --image11: url("https://media.tenor.com/UB2e8U72NGkAAAAC/melanie-martinez.gif"); --image12: url("https://media.tenor.com/5qwWqFY2ipQAAAAd/melanie-martinez.gif"); --image13: url("https://media.tenor.com/a4QN2sWAA20AAAAC/melanie-martinez.gif"); --image14: url("https://media.tenor.com/a4QN2sWAA20AAAAC/melanie-martinez.gif"); } .container { margin-top: 300px; } .side-photos { display: flex; flex-direction: column; align-items: center; position: absolute; top: 300px; width: 270px; } .banner { display: flex; flex-direction: row; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 300px; padding: 30px; } .side-photos.leftside { left: -20px; } .side-photos.rightside { right: -20px; } .polaroid { background: white; height: 266px; width: 214px; box-shadow: 5px 5px 10px #515151; padding: 12px; } .banner:hover, .side-photos:hover { z-index: 1; } .polaroid:hover { z-index: 1; } .banner.polaroid:not(div:first-child) { margin-left: -10px; } .side-photos.polaroid { margin-top: -10px; } .image { height: 190px; width: 190px; background-color: grey; background-size: cover; background-position: center; } #image1 { background-image: var(--image1); } #image2 { background-image: var(--image2); } #image3 { background-image: var(--image3); } #image4 { background-image: var(--image4); } #image5 { background-image: var(--image5); } #image6 { background-image: var(--image6); } #image7 { background-image: var(--image7); } #image8 { background-image: var(--image8); } #image9 { background-image: var(--image9); } #image10 { background-image: var(--image10); } #image11 { background-image: var(--image11); } #image12 { background-image: var(--image12); } #image13 { background-image: var(--image13); } #image14 { background-image: var(--image14); } .skewleft { transform: rotate(20deg); } .skewright { transform: rotate(-20deg); } .caption { display: flex; align-items: center; justify-content: center; max-width: 100%; height: 64px; overflow: hidden; text-align: center; line-height: 24px; color: #0f2440; } #credit { position: fixed; bottom: 3px; left: 3px; font-family: sans-serif; font-size: 10px; color: black; background: white; padding: 2px; border-radius: 2px; z-index: 5; letter-spacing: 1px; } @media screen and (max-width: 800px) { .container { margin-top: 525px; } .polaroid { height: 125px; width: 100px; padding: 10px; } .image { width: 80px; height: 80px; } .caption { height: 33px; font-size: 10px; line-height: 14px; margin: 1px 0; } .side-photos { flex-direction: row; top: 150px; } .side-photos.leftside { left: 30px; top: 275px; } .side-photos.rightside { right: 60px; top: 400px; } .banner { height: auto; flex-wrap: wrap; } } </style> <div class="banner flex-row"> <div class="polaroid skewleft"> <div class="image" id="image1"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image2"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image3"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image4"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image5"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image6"></div> <div class="caption"></div> </div> </div> <div class="side-photos leftside"> <div class="polaroid skewright"> <div class="image" id="image7"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image8"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image9"></div> <div class="caption"></div> </div> </div> <div class="side-photos rightside"> <div class="polaroid skewleft"> <div class="image" id="image11"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image12"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image13"></div> <div class="caption"></div> </div> </div> <div id="credit"> layout by <a href="https://www.spacehey.com/cristiana">cristiana</a> </div> <style> /* replace with cd image that has transparent background. must be 150px by 150px. */ :root { --cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png'); } .profile-pic { position: relative; width: 183px; filter: drop-shadow(0 0 0.25rem gray); } .profile-pic:after { content: ""; background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6)); background-size: contain, cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .profile-pic:before { content: ""; background: var(--cd-image); position: absolute; top: 5px; left: -20px; width: 150px; height: 150px; background-repeat: no-repeat; z-index: -1; animation-name: spin; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; transition: left ease 0.5s; } .profile-pic:hover:before { left: -75px; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .profile-pic .pfp-fallback { float: right; width: 163px; height: 160px; border: none; } .general-about .profile-pic img { max-width: inherit; } </style> <!-- (c) Layout created by nara (https://layouts.spacehey.com/layout?id=87357) --> <style> @import url('https://fonts.googleapis.com/css2?family=Gayathri&display=swap'); :root { --darker-blue: black; --dark-orange: black; } main, main p { font-family: 'gayathri', sans-serif; font-size: 14px; color: black; } body { background: url(https://i.pinimg.com/564x/b7/c4/ba/b7c4ba4d7c4b51064432abe714f56d99.jpg); } nav .top { font-family: 'gayathri', sans-serif; font-size: 13px; font-weight: bold; color: black; background: #fad2e6; border: 3px outset #ffc4da; border-bottom: none; border-radius: 4px 4px 0px 0px; text-transform: lowercase; } .logout-btn { font-family: 'gayathri', sans-serif; font-size: 13px; font-weight: bold; color: black; } footer { font-family: 'gayathri', sans-serif; font-size: 13px; font-weight: bold; text-transform: lowercase; color: black; background: #fad2e6; border: 3px outset #ffc4da; border-radius: 0px 0px 4px 4px; border-top: none; margin: 0px; } [id='q'] { border: 1px solid grey; border-radius: 4px; background: #f0f0f0; padding: 3px; } button { font-family: 'gayathri', sans-serif; border: 1px solid grey; border-radius: 4px; text-transform: lowercase; background: #f0f0f0; color: black; padding: 3px; } nav .links { font-size: 13px; text-align: center; text-transform: lowercase; word-spacing: 2px; background: #fad2e6; border: 3px outset #ffc4da; border-top: none; border-bottom: none; border-radius: 0px; } nav .links a, nav .links .special a { font-family: 'gayathri', sans-serif; font-weight: bold; color: black; } nav .links a { text-shadow: none; font-weight: bold; } main { background: #feedf5; border-bottom: none; border-left: 3px outset #ffc4da; border-right: 3px outset #ffc4da; border-radius: 0px; } .profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading, .profile .url-info { background: #fad2e6; padding: 8px; border: 2px solid #fff; border-radius: 4px; text-transform: lowercase; text-align: center; color: black; } .profile h1 { font-size: 250%; } .general-about .profile-pic img { border: 2px solid white; border-radius: 4px; height: 160px; width: 160px; } .profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) { border: 2px solid white; border-radius: 4px; width: 90px; height: 90px; } .profile .contact, .profile .table-section { border: none; text-transform: lowercase; } div.blog-preview { background: #fad2e6; padding: 5px; text-align: center; border: 2px solid white; border-radius: 4px; } div.blog-preview h4 { text-transform: lowercase; } .profile .blurbs .section h4 { text-decoration: 1px underline; text-transform: lowercase; text-align: center; } .profile .blurbs .section p { text-align: center; } .count { color: black; } .profile .friends .person p { color: black; } nav .links a:hover, a:hover { color: white; } .details-table td:first-child, .details-table td, .comments-table td:first-child, .comments-table td { background: #fad2e6; border-radius: 4px; } table.comments-table { border: none; overflow-y: scroll; height: 400px; } td { border: 2px solid #fff; border-spacing: 3px; } table { border-spacing: 3px; } b, p.report{ text-transform: lowercase; } .online { content: url(https://i6.glitter-graphics.org/pub/247/247506q0u4vuh84c.gif); } .contact .inner a img { font-size: 0px; } .contact .inner a img:before { font-size: 1em; display: block; } .contact .f-col>a:before { content: url(https://64.media.tumblr.com/tumblr_lkl75bsU9n1qfamg6.png); display: inline-block; } .report .icon{ visibility: hidden; } p.report { background: url(https://static.tumblr.com/rltvkjt/3Ddlmr3z3/mini-icone5.gif); background-repeat: no-repeat; display: inline-block; text-transform: lowercase; } .profile-info { background: #fad2e6; border: 2px solid white; border-radius: 4px; text-transform: lowercase; } </style> <style>* {cursor: url(https://cur.cursors-4u.net/others/oth-4/oth302.ani), url(https://cur.cursors-4u.net/others/oth-4/oth302.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/04/29/boucing-pink-bow-tie-ribbon.html" target="_blank" title="Boucing Pink Bow Tie Ribbon"><img src="https://cur.cursors-4u.net/cursor.png" alt="Boucing Pink Bow Tie Ribbon" style="position:absolute; top: 0px; right: 0px;"/></a> <!-- (c) Layout created by π₯ππ±π₯π² (ππππππππ) (https://layouts.spacehey.com/layout?id=33196) --> <style> .profile-pic > img { display:none; } .profile-pic:after { background-image: url(https://media.tenor.com/Prvbi7eJeyQAAAAd/melanie-martinez-after-school-melanie-martinez.gif); display: inline-block; content:"" } .general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; } .profile-pic:after{ border:solid; border-radius:2 0px; border-color:#ffb8cc; <style></style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )