black&pink.floating

Tags: black, pink, bright, simple

Description:

this is an older layout that i've used before, but i've edited it a little ! like always, please comment / give credit thank you <33

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by nara (https://layouts.spacehey.com/layout?id=34908) -->

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

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

<style>

body{
background-image: url(https://i.pinimg.com/564x/77/52/40/775240deb3611b3e9676d62b88cd8e1f.jpg); }

main{
border: 5px double hotpink;
border-radius: 3px;
background-color: black;
margin-top: 0.8em;
margin-bottom: 0.8em; }

nav .top, nav .links, main, footer, .floating{
animation-name: floating;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; }
 
@keyframes floating {
0% { transform: translate(0,  0px); }
50%  { transform: translate(0, 15px); }
100%   { transform: translate(0, -0px); }
}

.general-about .profile-pic img, .profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon){
border: 3px solid white; 
border-radius: 100px; }
:root{
--logo-blue: black;
--darker-blue: white;
--lighter-blue: black;
--even-lighter-blue: black;
--lightest-blue: black;
--dark-orange: hotpink;
--light-orange: black;
--even-lighter-orange: black; }

nav .top{
margin-bottom: 0.8em;
font-family: 'outfit', serif;
font-size: 14px;
border: 5px double hotpink;
border-radius: 3px;
text-transform: lowercase; }

button.logout-btn{
font-family: 'outfit', serif;
font-size: 14px;
color: white; }

[id='q']{
border-radius: 3px; }

button{
font-family: 'outfit', serif;
text-transform: lowercase;
background-color: black;
color: white;
border: 1px solid white;
border-radius: 3px; }

nav .links, nav .links a, nav .links li.active a, nav .links .special a{
font-weight: normal;
font-family: 'staatliches', serif;
font-size: 18px;
text-align: center;
color: white;
margin-top: 0.8em; 
margin-bottom: 0.8em;
text-shadow: 1px 1px transparent; }

nav .links{
border: 5px double hotpink; 
border-radius: 3px; }

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
color: white; }

.profile h1{
font-family: 'staatliches', serif;
font-size: 50px;
color: hotpink; 
text-shadow: 4px 3px 4px deeppink; }

.profile-info{
font-family: 'staatliches', serif;
font-size: 20px;
border: 2px solid white; 
border-radius: 25px; } 

p, footer, footer p, footer .links, p.copyright{
background-color: black;
font-family: 'outfit', serif;
font-size: 14px;
color: white; }

.profile .friends .person p{
color: white; }

a.more{
color: hotpink; }

.profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading{
background-color: white;
font-family: 'outfit', serif;
font-size: 16px;
color: hotpink; 
text-transform: lowercase;
text-align: center; }

div.blog-preview{
font-family: 'outfit', serif;
font-size: 14px;
color: white; }

footer{
text-transform: lowercase;
border: 5px double hotpink;
border-radius: 3px; }

.profile .table-section, table.comments-table{
font-size: 14px;
border: 3px outset white;
border-radius: 3px; }

.profile .url-info{
border: 3px outset white;
border-radius: 3px;
font-size: 14px; }

.profile .contact, .profile .table-section, .profile .blurbs, .profile .friends{
font-family: 'outfit', serif;
font-size: 14px;
border: 3px outset white;
border-radius: 3px; }

div#comments.friends{
margin-top: 1.5em; }

table.details-table {
background-color: transparent;
border-spacing: 0.2em 0.2em; }
    
.details-table td{
background-color: transparent;
color: white;
border-radius: 3px;
border: 2px solid white; }
    
.details-table td *{
color: white;
background-color: transparent; }

table.comments-table { /*comments section*/
border: 3px outset white;
border-radius: 3px;
border-spacing: 0.2em 0.2em;
display: block;
height: 400px!important;
overflow-y: scroll; }

.comments-table td{
border-radius: 3px;
font-size: 14px; }

.count{
color: white; }

nav .links a:hover, a:hover{
color: hotpink;
text-decoration: initial; }

.contact .inner a img {
font-size: 0; }

.online{
content: url("https://i1.glitter-graphics.org/pub/253/253861meeqf2ls05.gif");
height: 25px;
width: 100px; }

.contact img.icon { 
display: none; }

.contact .f-col>a::before{ 
content: ""; 
display: inline-block; 
width: 15px; 
height: 15px; 
background-image: url(http://i122.photobucket.com/albums/o260/mhilka/minigifs/mini64.gif); 
background-size: 100% 100%; } 

li.active .icon { 
content:url('http://i122.photobucket.com/albums/o260/mhilka/minigifs/balaozinho16.gif'); }

.report .icon{
visibility: hidden; }

p.report{
background-image: url(http://lh4.ggpht.com/_NZJzdRm10Y0/TTSDQbxynAI/AAAAAAAAAEY/HABxACDH-10/s800/gif9.png); 
background-repeat: no-repeat; 
display: inline-block;
font-weight: bold; }

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat997.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/29/tiny-finger-point-hand-with-heart.html" target="_blank" title="Tiny Finger Point Hand With Heart"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny Finger Point Hand With Heart" style="position:absolute; top: 0px; right: 0px;"/></a>

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 20 of 45 comments ( View all | Add Comment )

m-miwa ✧	2 months ago using ty ,, xoxo ( ◜‿◝ )♡ Report Comment
سارة	3 months ago using Report Comment
des ᶻ 𝗓 𐰁	3 months ago using Report Comment
☆Blurr☆	5 months ago Usingg!! Report Comment
kann1balKannabz	5 months ago Using!! Report Comment
lona ౨ৎ	8 months ago USINGGGG Report Comment TYY IT LOOKS AMAZINGGG <333 by nara; 8 months ago; Report
limonth	1 year ago usinggg Report Comment
Ame	1 year ago using!! Report Comment
XxScxmbagxX	1 year ago Used! Report Comment
Arcadia.pines	1 year ago Using! : 4 Report Comment
Arou	1 year ago using! Report Comment
puppibaby	1 year ago using~ Report Comment
daisy	1 year ago usingg Report Comment
Lex / Six	1 year ago using! Report Comment
Hank	1 year ago Usando :33 Report Comment
pistacchio (kiara)	1 year ago using ^^ Report Comment
ssoobberry	1 year ago using Report Comment
amane ♡	1 year ago using Report Comment
tori 𐙚	1 year ago hsing Report Comment
「 Noel 」	1 year ago Using :v Report Comment