Leena's profile picture

Published by

published
updated

Category: SpaceHey

Blue Rose Layout

     For Halloween, I decided to make another layout. For this one, I wanted to do another goth one, but I also wanted it to be very feminine and elegant. This one has beautiful cursive font, and lots of blue and black rose themed imagery. The main info sections also have an overflow scrollbar that scroll over the background images to avoid clipping and repeating. *If anyone knows how to add a hidden audio player, please let me know. That's the only thing I haven't figured out yet.* I'll be using this layout temporarily starting 10/23/2022, for a full preview, you can visit my profile at: https://spacehey.com/profile?id=1470363

     You can also click here for a preview or go to the Spacehey layouts section here to see it and copy the code.

    Also, an update on the steampunk mannequin, I wanted to have her finished by Halloween, but it doesn't look like that's going to happen. So, I'm taking a break on her for now however, we are planning a big Halloween party at our house, so I'll be sure to post pictures of that. Happy Halloween everyone and enjoy!


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


<style>

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

</style>


<style>* {cursor: url(https://i.ibb.co/Mfh4b4S/bluerose1.png), auto !important;}</style>


<style>


body {

  background: url(https://i.ibb.co/Kx10pnM/background1.jpg);

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: center;

  background-size: cover;

}</style>


<style>

.profile {

background: url(https://i.ibb.co/LZYFbz5/bluerose2.jpg);

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

background-size: 825px 780px;

border-radius: 8px;

border: 2px solid #0307ff;

font-family: 'Quintessential', cursive;


}


table, td {


border-spacing: 2px;

}


.profile .contact, .profile .table-section, .home-actions

{

    width: 100%;

    border: 0px solid var(--#0307ff);

    color: #0398fc;

    text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;


    }


.profile .url-info {

    color: #0307ff;

}


.table-section td {

    color: #0307ff;

}


.profile .table-section {

    overflow-y: scroll;

    Height: 200px

}


mood {

  color: #0307ff!important;

  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

}


.mood p {

  color: #0307ff;

  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

}


.mood a {

  color: #0398fc;

  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

}


.mood a:hover {

  color: #f703ff;

}


table, th, td

{

   border: 0px solid #0307ff;

   border-spacing: 0px;

}



.profile .table-section, .home-actions

{


   border: 2px solid #0307ff;

   border-radius: 8px;


}


:root 

{

--logo-blue: ;

  --darker-blue: ;

--lighter-blue: purple 55;

--even-lighter-blue: ;

--lightest-blue: ;

--dark-orange: ;

--light-orange: ;

--even-lighter-orange: ;

--turquoise: ;

        --hover: #f703ff;

        --table-header:#0398fc;

--table-color: white;

--link-text:#0398fc;

--main-text: #0307ff;


    }   


footer 

{


    background-image: url(https://i.ibb.co/vsmSnmy/Blue-roses-on-black.jpg);

    background-position: center;

    background-repeat: repeat;

    border-radius: 8px;

    border: 2px solid #0307ff;

}


.comments-table{

background-image: url(https://i.ibb.co/jgNTnBx/blackrose2.jpg);

background-position: center;

background-repeat: no-repeat;

background-attatchment: fixed;

background-size: 475px 500px;

display: block;

height: 500px;

overflow-y: scroll; 

color: #0307ff;

border: 2px solid #0307ff;

border-radius: 8px;


}


.contact .heading {

  background: transparent!importnt;

  text-align: center;

  color: #0307ff!important;

  font-size: medium;

  font-family: 'Quintessential', cursive;

  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;


}


.contact {

  border-radius: 8px; border: 2px solid #0307ff!important;

  background-image: url(https://i.ibb.co/KDRDnyN/400684-455183304556906-937350928-n.jpg);

  background-size: 300px 120px;

  background-repeat: no-repeat;

  background-attachment: scroll;

  Width: 300px;

  Height:120px;

}


.contact a {

  color: #0398fc;

  font-family: 'Quintessential', cursive;

  text-decoration: italic;

  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

  font-size: 12px;

}

.contact a:hover{

    color: #f703ff!important;

}


.friends th, tr, .friends td, th, .icon, main, .comments-table, .friends, .profile-info, .table, .table-section,  .url-info, .mood, .blog-preview, .details, 

{

border: 1px #0307ff!important;


}


footer, .profile .contact {

color: #0307ff!important;

font-family: 'Quintessential', cursive;

font-weight: bold;

}


main {

background: transparent!important;

border: none;

padding: 0;

font-size: 90%;

color: #0307ff;

  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

}



nav {

  background-image: url(https://i.ibb.co/vsmSnmy/Blue-roses-on-black.jpg);

  background-position: center;

  background-repeat: repeat;

  border: 2px solid #0307ff!important;

  border-radius: 8px!important;

  color: #0307ff!important;

  font-family: 'Quintessential', cursive;

  font-weight: bold; text-align: center;

}


nav .top a, nav .logout-btn, nav .links a {

    color: #0307ff!important;

    font-family: 'Quintessential', cursive;

    text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

}


.logout-btn:hover{

    color: #f703ff!important;

}

nav .top a:hover{

    color: #f703ff!important;

}

nav .links a:hover{

    color: #f703ff!important;

}


nav .links li:not(:last-child)::after,

footer .links li:not(:last-child)::after{

    content: " 🏵 ";

    color: #0398fc;

}


.logo {


  filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(4445%) hue-rotate(243deg) brightness(105%) contrast(153%) !important;


}



  .profile .table-section{

    border:2px solid #0307ff;


  }

  .profile .table-section .heading{


    border: none;

    text-align: center;


  }

  .profile .table-section .heading h4{

    color: #0398fc;


  }


  .profile .friends .heading{

    border: none;

    border-radius: 8px;

    background: transparent;

    color: #0398fc;

    text-align: center;

  }


  .profile .friends .heading h4{

    text-align: center;

    color: #0398fc;

  }


.general-about {

   border-radius: 8px;

   border: 2px solid #0307ff;

   background: url(https://i.ibb.co/RhXqmsm/Skulls-and-blue-roses.jpg);

   background-position: center;

   background-size: cover;

   padding: 5px;

   color:#0398fc;

}


 .profile-pic {

        border-radius: 500px;

        border: 2px solid #0307ff;

        overflow: hidden;

}


.blog-preview, .blog-preview h4, .blurbs .heading {

    border: none;

    border-radius: 8px;

    background: transparent!important;

    color: #0307ff;

    text-align: center;

}


.blog-preview a, .blog-preview h4 a, .more{

  color: #0398fc;

  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

}

.blog-preview h4 a:hover {

  color: #f703ff!important;

}

.blog-preview a:hover {

  color: #f703ff!important;

}


h1, .blurbs .heading {

   color: #0398fc!important;

   text-align: center;

}


.profile .blurbs .section h4  {

   color: #0398fc!important;

   text-align: center;

   border-radius: 8px;

   border: 2px solid #0307ff;

}


.profile .blurbs .section :nth-child(2) {

        color: #0307ff;

  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

     /* margin-top: -5px; */

padding: 18px;

        border-radius: 8px;

        border: 2px solid #0307ff;

        overflow-y: scroll;

        height: 360px;

}


.profile .blurbs .section:nth-of-type(even) {

  background: url(https://i.ibb.co/C6Ps4hH/Rose2.jpg);

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

}

.profile .blurbs .section:nth-of-type(odd) {

  background: url(https://i.ibb.co/C9CjLMm/Rose1.jpg);

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

}


.profile .profile-info .inner h3 a {

color: #0307ff;

        text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;

}

.profile .profile-info {

background-image: url(https://i.ibb.co/hmgW5zk/bluerose4.jpg);

        background-position: center;

        background-size: cover;

padding: 5px;

        border-radius: 8px;

        border: 2px solid #0307ff;

text-align: center;

        text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #a200ff;


}



::-webkit-scrollbar {

  width: 20px;

}


::-webkit-scrollbar-track {

  border: 2px solid #0307ff;

  background: #000000;

}


::-webkit-scrollbar-thumb {

  border: 2px solid #0307ff;

  background: #000000;

}


::-webkit-scrollbar-button {

  background: #000000;

  border: 2px solid #0307ff;

}


::-webkit-scrollbar-corner {

  background: #0398fc;

}


.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 {

/* add to friends */

content: "🏵"

}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorite */

content: "🏵"

}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send a message */

content: "🏵"

}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* foward 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 2 group  */

content: "🏵"

}


.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: "🏵"

}


.online{

    color:#f703ff!important;



.online img{

    filter: invert(18%) sepia(99%) saturate(3252%) hue-rotate(289deg) brightness(106%) contrast(125%);

}

</style>


0 Kudos

Comments

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