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