Clouds layout

Tags: simple, layout

Description:

Today after spending weeks maybe even ages long trying to make a layout {and failing a thousand times :>} I finally did it. if you use this theme make sure to comment.. Ps. {had so many tabs open I thought my laptop was gonna catch fire.)

Preview:

click on the image for a larger preview

Code:

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

<style>
/*=== body background image + font ===*/

body {
background-image: url(https://i.pinimg.com/736x/e1/20/5d/e1205d7c5fa45cda5288a583467a31f1.jpg);

background-attachment: fixed;
    p{ font-family:'Orbitron', sans-serif;
    font-size: 25px;
    color: white
}
</style>


<style>    
/*=== image for the top navigation box thingy ===*/

nav .top{
     background-image: url(https://i.pinimg.com/736x/86/03/83/8603838119e4f007e6ad87a42a10861a.jpg);  
     border: solid;
     border-color: black;
     border-width: 6px;
}
</style>

<style>
/*=== profile background/color + border ===*/

.profile{
   background-image: url(https://i.pinimg.com/736x/e1/20/5d/e1205d7c5fa45cda5288a583467a31f1.jpg); 
   border: dotted;
   border-color: black;
   border-width: 6px;
}
</style>

<style>
/*=== background color + border for headings + navigation links ===*/

.profile .blurbs .heading, .profile .friends .heading, main, top, links, nav .top, nav .links, details-table {
color: rgb(153, 0, 0);
background-image:url(https://i.pinimg.com/736x/86/03/83/8603838119e4f007e6ad87a42a10861a.jpg);  

color: #d1ad88;
border: solid;
border-width:3px;
border-color: black;
font-color: ##edc69f;
}
</style>

<style>
/*=== font import ===*/

@import 
p{ font-family:'Orbitron', sans-serif;
font-size: 100%;
color: white;
</style>

<style>
/*=== online now icon ===*/

.online {
    content: url(https://dl.glitter-graphics.com/pub/1917/1917323pkyxb66sla.gif )}

</style>

<style>
/*=== profile picture border ===*/

.profile-pic {
        border-radius: 250px;
        overflow: hidden;
     border: dotted;
     border-color: black;
     border-width: 2px;
}
.profile .friends .person img {
border-radius: 500px;
        overflow: hidden;
     border: dotted;
     border-color: rgb(237, 198, 159);
     border-width: 2px;
}
    }
</style>

<style>
/*=== custom cursor icon ===*/

*<style type="text/css">* {cursor: url(https://cur.cursors-4u.net/others/oth-3/oth205.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2006/05/04/oth205.html" target="_blank" title="Letter B Block"><img src="https://cur.cursors-4u.net/cursor.png" alt="Letter B Block" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
/*=== contact emojis ===*/

.contact .inner a img {
       font-size: 0;
   }
   .contact
 .inner a img:before {
       font-size: 5em;
    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>

<style>
/*=== contact background image ===*/

.contact {
  border-radius: 8px;
  background-image: url(https://i.pinimg.com/originals/9b/17/16/9b1716f55cec89ec0ca6d96340be0248.jpg);

 background-position: right top;
 background-repeat: repeat;
background-attachment: scroll;
Width: 310px;
Height:240px;
border: solid;
border-color: black;
border-width: 2px;</style>


<style>
/*=== color changes ===*/

:root {
    --logo-blue: rgb(204, 155, 106);
    --headers: rgb(204, 155, 106);
    --darker-blue: white;
    --lighter-blue: ;
    --even-lighter-blue: url(https://i.pinimg.com/736x/e1/20/5d/e1205d7c5fa45cda5288a583467a31f1.jpg);

  --lightest-blue: url(https://i.pinimg.com/736x/c8/8a/24/c88a24374474b51328a7577cf6e36c59.jpg); 

    --dark-orange: ;
    --light-orange: #000000;
    --even-lighter-orange: url(https://i.pinimg.com/736x/c8/8a/24/c88a24374474b51328a7577cf6e36c59.jpg);
    --green: black;
    --links: ;
}

</style>

<style>
/*=== footer image ===*/

footer {
background-image: url(https://images.fineartamerica.com/images/artworkimages/medium/3/dark-red-roses-flower-background-with-water-drops-julien.jpg) 
!important; 
background-position: bottom center !important;
background-repeat: repeat !important;
</style>

<style>
/*=== image for 'about me' section ===*/
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/UZEETyzql0Q&#10;//?&;amp;;autoplay=1&loop=1&;controls=1" title="bored" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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