Gears Layout

Tags: gears, steampunk

Description:

If you use this theme, feel free to leave a comment and add me. Crediting me is highly appreciated, too. Round and round and round the gears go... Feel free to use this layout! It's my first one, so nothing is perfect. But, hopefully it's good enough for you! Cooked this up in about 2-3 days, and I barely have any experience with HTML/CSS (unless you count inspecting lol beginner stuff ncicndcide) It wasn't a copy/paste and edit type of thing, but I learned, and I'm still learning! Besides all of that, it's just a bunch of gears. Look at 'em go!

Preview:

click on the image for a larger preview

Code:

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

<style>

body {

background:url(https://media.tenor.com/JTlJU1QmYAQAAAAC/cogs-gears.gif);
}

div.top {
background:url(https://thumbs.gfycat.com/CraftyGenerousFrenchbulldog-size_restricted.gif)
}

.links {
background:url(https://media.tenor.com/TwVp807OEX4AAAAM/gears-moving.gif)
}

* {
    cursor: url(https://cur.cursors-4u.net/mechanics/mec-1/mec52.png), auto;
}

.logo {
   content: url(https://i.imgur.com/pFpx2wR.png);
}

main {
background:url(https://media.istockphoto.com/id/941775158/photo/brass-cogwheels-steampunk-background.jpg?s=170667a&w=0&k=20&c=7tnqcYf2m0YJXJFYM2wkXvbUMjH-qWRyVZAYAhW9OPs=)
}

.blog-preview {
    padding: 5px;
    background: rgba(0, 0, 0, 0.63);
    box-shadow: 0px 0px 15px 2px #ffffff;
    color: #FFF;
}

a {
    color: #FFFFFF;
}

a:hover {
    color: #808080;
}

.blurbs {
padding: 5px;
    background: rgba(0, 0, 0, 0.63);
    box-shadow: 0px 0px 15px 2px #ffffff;
    color: #FFF;
}

.profile-info {
padding: 5px;
    background: rgba(0, 0, 0, 0.63);
    box-shadow: 0px 0px 15px 2px #ffffff;
    color: #FFF;
}

.friends {
padding: 5px;
    background: rgba(0, 0, 0, 0.63);
    box-shadow: 0px 0px 15px 2px #ffffff;
    color: #FFF;
}

.contact {
padding: 5px;
    background: rgba(0, 0, 0, 0.63);
    box-shadow: 0px 0px 15px 2px #ffffff;
    color: #FFF;
}

.url-info {
padding: 5px;
    background: rgba(0, 0, 0, 0.63);
    box-shadow: 0px 0px 15px 2px #ffffff;
    color: #FFF;
}

.table-section {
padding: 5px;
    background: rgba(0, 0, 0, 0.63);
    box-shadow: 0px 0px 15px 2px #ffffff;
    color: #FFF;
}

.heading h4 {
    color: #FFFFFF
}

.profile .blurbs .heading {
background: #808080
}

.profile .friends .heading {
background : #808080
}

.profile .blurbs .section h4 {
color: #808080
}

.count {
color: #808080
}

.profile .contact {
border : #808080
}

.profile .contact .heading {
background: #808080
}

.profile .url-info {
border: #808080
}

.profile .table-section {
border: #808080
}

.profile .table section .heading {
background: #808080
}

.details-table td:first-child {
background: #808080
}

.details-table td {
background: #808080
}

.profile .table-section .heading {
background: #808080
}

.details-table td:first-child {
color: #FFFFFF
}

main {
color: #FFFFFF
}

.comments-table td:first-child {
background: #808080
}

.comments-table td {
background : #808080
}

.online {
color: #0C8C00
}

nav .links a {
text-shadow: 0 0 7px #FFFFFF
}

nav .links a:hover {
    color: #808080
}

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