Leena's profile picture

Published by

published
updated

Category: SpaceHey

Steampunk Themed Layout

     I did another layout. This one has a steampunk theme complete with a cute little guard robot to watch over all your Spacehey stuff!! (You can totally kick him out if you want to.) I did spend a little more time on this one, I played around with custom texts and link colors, but I think you guys will like it. If you'd like a preview you can click here or check it out in the layouts section at https://layouts.spacehey.com/layout?id=24200. As always, if you want to use this, just copy and paste the code below into your About Me section and have a nice day!

<style>

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

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/movie/mov-1/mov1.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/19/doctor-who-dalek.html" target="_blank" title="Doctor Who Dalek"><img src="https://cur.cursors-4u.net/cursor.png" alt="Doctor Who Dalek" style="position:absolute; top: 0px; right: 0px;"/></a>


<style>


body {

  background: url(https://i.ibb.co/20z3TVx/300244-steampunk-clocks-time-748x468.jpg);

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: center;

  background-size: cover;

}</style>


<style>

.profile {

background: rgba(0, 0, 0, 0.6);

border-radius: none;

border: 2px solid #c44800;

font-family: 'Rye', cursive;


}


table, td {


border-spacing: 2px;

}


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

{

    width: 100%;

    border: 0px solid var(--#c44800);

    color: #a68202;

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


    }


.profile .url-info {

    color: #a68202;

}


.table-section td {

    color: #c44800;

}


.profile .table-section {

    overflow-y: scroll;

}


mood {

  color: #c44800!important;

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

}


.mood p {

  color: #a68202;

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

}


.mood a {

  color: #c44800;

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

}


.mood a:hover {

  color: #ff0303;

}


table, th, td

{

   border: 0px solid #c44800;

   border-spacing: 0px;

}



.profile .table-section, .home-actions

{


   border: 2px solid #c44800;

   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: #ff0303;

        --table-header:#000000;

--table-color: white;

--link-text:#a68202;

--main-text: #870303;


    }   


footer 

{


    background-image: url(https://i.ibb.co/2Y0jkgn/steampunk4.webp);

    background-position: left;

    background-repeat: no-repeat;

    border-radius: none;

    border: 2px solid #c44800;

}


.comments-table{

display: block;

height: 500px;

overflow-y: scroll; 

color: #c44800;

border: 2px solid #c44800;

border-radius: 8px;


}


.contact .heading {

  background: transparent!importnt;

  text-align: center;

  color: #a68202!important;

  font-size: medium;

  font-family: 'Rye', cursive;

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


}


.contact {

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

  background-image: url(https://i.ibb.co/fYjJbnk/steampunk1.jpg);

  background-repeat: no-repeat;

  background-attachment: scroll;

  Width: 300px;

  Height:180px;

}


.contact a {

  color: #c44800;

  font-family: 'Rye', cursive;

  text-decoration: italic;

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

  font-size: 12px;

}

.contact a:hover{

    color: #ff0303!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 #c44800!important;


}


footer, .profile .contact {

color: #a68202!important;

font-family: 'Rye', cursive;

font-weight: bold;

}


main {

background: transparent!important;

border: none;

padding: 0;

font-size: 90%;

color: #c44800;

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

}



nav {

  background-image: url(https://i.ibb.co/2Y0jkgn/steampunk4.webp);

  background-position: left;

  background-repeat: no-repeat;

  border: 2px solid #c44800!important;

  border-radius: none!important;

  color: #c44800!important;

  font-family: 'Rye', cursive;

  font-weight: bold;

}


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

    color: #a68202!important;

    font-family: 'Rye', cursive;

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

}


.logout-btn:hover{

    color: #ff0303!important;

}

nav .top a:hover{

    color: #ff0303!important;

}

nav .links a:hover{

    color: #ff0303!important;

}


.logo {


filter: invert(27%) sepia(87%) saturate(3290%) hue-rotate(22deg) brightness(94%) contrast(101%);!important;

}



  .profile .table-section{

    border:2px solid #c44800;


  }

  .profile .table-section .heading{


    border: none;

    text-align: center;


  }

  .profile .table-section .heading h4{

    color: #a68202;


  }


  .profile .friends .heading{

    border: none;

    border-radius: 8px;

    background: transparent;

    color: #a68202;

    text-align: center;

  }


  .profile .friends .heading h4{

    text-align: center;

    color: #a68202;

  }


.general-about {

   border-radius: 8px;

   border: 2px solid #c44800;

   background: url(https://i.ibb.co/zbDkFxb/steampunk2.jpg);

   background-position: center;

   background-size: cover;

   padding: 5px;

}


 .profile-pic {

        border-radius: 8px;

        border: 2px solid #c44800;

        overflow: hidden;

}


.blog-preview h4, .blurbs .heading {

    border: none;

    border-radius: 8px;

    background: transparent!important;

    color: #a68202;

    text-align: center;

}


.blog-preview h4 a, .more{

  color: #c44800;

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

}

.blog-preview h4 a:hover {

  color: #ff0303!important;

}


h1, .blurbs .heading, .profile .blurbs .section h4 {

   color: #a68202!important;

}


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

        color: #c44800;

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

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

padding: 18px;


}


.profile .profile-info .inner h3 a {

color: #a68202;

}

.profile .profile-info {

background-image: url(https://i.ibb.co/LrLDygK/steampunk-clock-time-fantasy.jpg);

        background-position: center;

        background-size: cover;

padding: 5px;

        border-radius: 8px;

        border: 2px solid #c44800;

text-align: center;

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


}


//--The last line of code is the image of the robot, keep it if you like, if not, just delete it.--//

</style>


<img src="https://i.ibb.co/4Kbs4Zp/steampunkrobot.png"/>


0 Kudos

Comments

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