clem blue layout

Tags: blue, aesthetic, gif

Description:

This is the first layout I made that I've posted, I hope u like it (Ɔ˘з˘)(ꈍヮꈍ)˘ε˘ C)

Lemme know if ur gonna use it!（｡>‿‿<｡）

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2family=Turret+Road:wght@300&display=swap');

body{
background-image:url(https://imgur.com/fYFz9UX.gif);
height: 100%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

nav .top{
background-image:url(https://imgur.com/jDFWLBj.jpg);
border-radius: 20px;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 1px 2px 3px rgb(0, 1, 15);
margin: 1em 0;
}

nav .links{
background-color: rgb(0, 1, 20);
border-radius: 20px;
border: 2px solid rgb(0, 3, 61);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

nav .links li::after{
display: none;
}


main{ 
background-color: rgb(0, 2, 33);
border-radius: 20px;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
margin: 1em 0;
padding: .5em;
opacity: .9;
}

.profile h1{
font-family: 'Turret Road', cursive;;
color: white;
text-shadow: 1px 1px 2px rgb(15, 21, 148);
font-size: 25px;
}

.online{
font-family: 'Turret Road', cursive;
color: white;
font-size: 20px;
text-shadow: 1px 1px 2px rgb(0, 1, 20);
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}

.online img{
display: none;
}

.profile .profile-info{
border-radius: 20px;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
text-shadow: 1px 1px 2px rgb(0, 2, 38);
color: white;
background-image: url(https://i.gifer.com/DXp.gif);
background-repeat: no-repeat;
background-size: cover;
}

.profile .general-about{
color: white;
font-style: italic;
text-shadow: 1px 1px 2px #AC3862;
}

.profile .blog-preview,
.profile .mood{
color: white;
font-style: italic;
}

.profile .profile-pic img{
border-radius: 20px;
box-shadow: 1px 1px 2px rgb(0, 1, 15);
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}

.profile .contact .heading,
.profile .table-section .heading{
font-family: 'Turret Road', cursive;
color: white;
background-color: rgb(0, 1, 23);
border-radius: 20px 20px 0 0;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .table-section,
.profile .contact,
.profile .url-info{
border-radius: 20px;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
text-shadow: 1px 1px 2px rgb(0, 4, 89);
font-style: italic;
color: white;
}

table.details-table td {
background-color: transparent !important;
color: white !important;
font-style: italic !important;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: white;
font-family: 'Turret Road', cursive;
background-color: rgb(0, 1, 20);
border-radius: 20px 20px 0 0;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
text-align: center;
padding: .5em;
font-size: 15px;
}

.profile .blurbs,
.profile .friends{
border-radius: 20px;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
text-shadow: 1px 1px 2px rgb(0, 4, 89);
font-style: italic;
color: white;
}

.profile .friends{
text-align: center;
}

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

.profile .blurbs .section h4{
color: white;
padding: .5em;
}

.profile .comments-table{
background-color: #E76292;
border-radius: 20px;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
font-style: italic;
color: white;
}

.profile .comments-table td{
background-color: transparent;
}

.profile .comments-table .comment-replies{
background-color: rgb(0, 1, 23);
border-radius: 20px;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
font-style: italic;
color: white;
}

.comments-table img,
.person img{
border-radius: 20px;
box-shadow: 1px 1px 2px rgb(0, 1, 15);
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}


footer{
background-image: url(https://imgur.com/Qz0BPPc.jpg);
border-radius: 20px;
border: 2px solid rgb(0, 4, 87);
box-shadow: inset 2px 3px 5px rgb(0, 1, 15);
font-style: italic;
color: white;
}

.count{
color: #E76292;
}

a{
color: rgb(199, 202, 255);
text-shadow: 1px 1px 2px rgb(1, 4, 69);
}

a:visited {
color: rgb(199, 202, 255);
text-shadow: 1px 1px 2px rgb(1, 4, 69);
}

a:hover {
color: white;
}

a:active {
color: #DAEDFF;
text-shadow: 1px 1px 2px #AC3862;
}

nav .links a:hover{
text-decoration: underline;
color: #DAEDFF;
}

</style>

<style>

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}
/* gif profile picture */
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://imgur.com/1SDXN59.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; } 
.profile-pic:after{ 
  border: 2px dashed  rgba(5, 9, 94, 1);  
  box-shadow: 1px 0px 10px 2px rgba(15, 21, 148, 0.46);
 }   
</style>


<style>
/* floating animations */
.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}    
</style>

<style>* {cursor: 
url("https://downloads.totallyfreecursors.com/cursor_files/lightsaberblue.cur"), url("https://downloads.totallyfreecursors.com/thumbnails/light-saber-blue.gif"), auto;}
A:hover
url("https://downloads.totallyfreecursors.com/cursor_files/lightsaberblue.cur"), url("https://downloads.totallyfreecursors.com/thumbnails/light-saber-Blue.gif"), auto;}</style>

<style>.contact .inner a img {
       font-size: 0;
   }
   .contact .inner a img:before {
       font-size: 0em;
    display: block
   }
   .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
   	/* Add to Friends */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
   	/* Add to Favorites */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "☆"
   }
   .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "☆"
   }
</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.

Comments

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

Sar	1717481964 Using! Report Comment
fyo ^_^	1706637449 usin' Report Comment
fyo ^_^	1706637447 usin' Report Comment
𝓕𝓻𝓮𝓪𝓴𝔂wanderer	1692618488 Using! Report Comment
Lu	1692196099 defo gon be using THX!!! Report Comment
symbite	1676858744 This is very nice, im using. :)) Report Comment
ang3l (天使)	1670599197 Using it!! Report Comment
Sickenedfangs (not active anymore)	1667309317 Using this! Report Comment
gutz	1651193693 its so pretty omfg Report Comment THANK YOU!! :,D by clemerit alt; 1651861157; Report Its really pretty! I'm using this! hope you don't mind? by Louis; 1663175236; Report Its really pretty! I'm using this! hope you don't mind? by Louis; 1663175236; Report um OFC NOT i would love if u used it!! :)) by clemerit; 1667400154; Report