Space Layout

Tags: space, travel, cyan, bela

Description:

Feel free to customize as you wish.
If you have any questions, please comment below or go to my blog here.
✧ I appreciate your comments ٩(๑❛ᴗ❛๑)۶

Background Image Credits —

⇘ Profile Background 1: https://www.pikpng.com/pngl/b/31-313214_spaceship-cockpit-png-pc-game-clipart.png

⇘ Profile Background 2: https://i.imgur.com/ZsBfUYU.gif

Layout Preview:

Preview:

click on the image for a larger preview

Code:

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

<style>
/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://www.cursors-4u.com
============⚠️==========*/

.container{
    width:100%;
    height:auto;
}
body {
  background-image: url('https://www.pikpng.com/pngl/b/31-313214_spaceship-cockpit-png-pc-game-clipart.png'), url('https://i.imgur.com/ZsBfUYU.gif');
  background-attachment: fixed;
  background-size: cover;
  background-color: black;
}
main {
  background: rgba(0,0,0,0.0);
  border-radius: var(--curve);
  overflow-y: scroll;
  height:400px;
  width:70%;
  margin:auto;
}
.profile{
    display:flex;
    flex-direction: column;
}
.profile .left{
    width: 100%;
}
nav {
  background-color: transparent;
  border: var(--borders);
  border-radius: var(--curve);
  margin-bottom:80px;
}
nav .top {
  background: transparent;
}
nav .top a, nav .links a {
  color: var(--text);
}
nav .links {
  color: var(--text);
  background-color: transparent;
  border-radius: var(--curve);
  text-align: left;
  font-size: 12px;
  text-shadow: 2px 1px 5px black;
}
</style>
<style>
a:hover {
  cursor: url('https://img.icons8.com/wired/48/fa314a/define-location.png'), auto;
}
.profile {
  cursor: url('https://img.icons8.com/color/48/000000/define-location.png'), auto;
}
@font-face {font-family:"TextMeOne-Regular"; src: url('//dl.dropbox.com/s/ob6fg25uw67e72i/TextMeOne-Regular.ttf');}
</style>
<style>
@font-face {font-family:"Clip"; src: url('//dl.dropbox.com/s/qpn1qi0thbtpatb/Clip.ttf');}
</style>
<style>

:root {
  --headers: cyan;
  --text: cyan;
  --links: cyan;
  --borders: 0px solid black;
  --font-family: "TextMeOne-Regular";
  --curve: 0px;
}
/* this is where the colors for specific things are located */

h2, h3, h4, h5, nav label {color: var(--headers)!important;}/* headings*/
a {color: var(--links)!important;}/* color of links */
p, .count, .friends a, .friends p{color: var(--text) !important;}/* color of text */
.section h4 {color: var(--headers);!important;}/* aboutme & want2meet headings */
.blurbs .heading {display: none;}/* hides the blurbs title */

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
  content: " ø";
  color: var(--links);
}
/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo {
  filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(2642%) hue-rotate(106deg) brightness(107%) contrast(106%);
}
/* the search wrapper and button */

.search-wrapper input[type=text] {
  background-color: transparent;
  border: 5px double var(--text);
  color: var(--text);
  border-radius: 50px;
}
button {
  border-radius: var(--curve);
  border: 0px solid var(--text);
  font-family: var(--font-family);
  background-color: transparent;
  color: var(--text);
}
.details{
    text-align: right;
}
/* the online symbol and text */

.online {
  color: var(--links) !important;
  text-transform: lowercase;
}
.online img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(2642%) hue-rotate(106deg) brightness(107%) contrast(106%);
}
/* this is where your name appears */

h1 {
  color: cyan;
  font-family:  "Clip";
  font-size: 50px!important;
  font-weight: 1;
  text-align: right;
}
/* font family for the headers, navigtion links, links, body text */

a, p, .section, #comments{
    font-family: var(--font-family) !important;	
    font-size: 24px;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{
    font-family: "Clip";
    letter-spacing: .3px;
    font-size: 26px;
}
/* the hr code.
the hr is the horizontal line when you want to 
separate important info or add a break in your paragraphs*/

hr {
  height: 3px;
  background: var(--links);
  border: none;
}
/* this is where you adjust the borders and background */

.blurbs, .friends, .profile .table, .blog-preview, .profile .table-section, .contact {
  border-radius: var(--curve) !important;
  border: var(--borders) !important;
  background-color: transparent!important;
}
.icon {
  border: none !important;
}
.comment-replies {
  border: 1px solid cyan;
}
/* this is the border around the replies */

.comment-reply:not(:first-child) {
  border-top: 2px solid cyan;
}
/* line in bewtween comment replies*/

/* your interest and comments table row background color */

td {
  background-color: transparent!important;
}
/* the interest table */

.table-section {
  border: none !important;
  background-color: var(--box_color_and_seethru)!important;
  border-radius: var(--curve) !important;
}
/* the header section of the boxes */

.heading, .blog-preview h4, .section h4 {
  background: none !important;
  text-align: center;
}
/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
  background-color: transparent;
  border: var(--borders) !important;
  border-radius: var(--curve) !important;
  padding: 0px;
}
/* adjusting images borders and adding styling if you want to */
.profile-pic{
    padding-left:15px;
}
.profile-pic img {
  outline: none !important;
  border-radius: 500px;
  border: 5px double cyan;
}
/* you can add text-align:center; if you want your friends to be centered */

.friends-grid {
  text-align: center;
}
.friends-grid img {
  border-radius: var(--curve) !important;
  filter: brightness(70%);
}
/* margin and padding */

h2, h3, h4, h5, p {
  padding-left: 5px !important;
}
/* this is important when you have rounded corners */

.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading, .profile .contact .heading {
  padding: 9px!important;
}
.friends {
  margin-bottom: 10px;
}
.mood{
    margin-top:15px;
    margin-bottom:40px;
    text-align: center;
}

/* custom contact */
.contact{text-align: center;}
.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 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 user */
  content: "⎔"
}
.url-info {
  display: none;
}
/* this is the comments table scroll code. 
you can delete this if you don't want a scroll box */

.comments-table {
  border: 0px dotted cyan !important;
  outline: none !important;
  border-radius: 8px;
  padding: 5px;
  border-spacing: 4px;
}
/* this styles the first column */

.comments-table td:first-child {
  background-image: url('');
  background-size: cover;
  background-position: center;
}
.comments-table td {
  background-image: url('');
  background-size: cover;
  background-position: center;
  border: 0px dashed cyan;
  padding: 10px;
  border-radius: 8px;
}
footer {
  background: transparent;
}
footer a, footer p, footer .links{
    font-size: 12px;
    text-shadow:2px 1px 2px black;
    text-align: left!important;
}
</style>
<style>
/* Force scrollbars onto browser windowa. 
Doesn't work in Firefox */

body {
  margin-bottom: fixed;
}
/* Box styles */

.myBox {
  width: 200px;
  height: 200px;
  overflow: scroll;
}
/* Scrollbar styles */

::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
::-webkit-scrollbar-track {
  border-radius: var(--curve);
  border: 0px solid cyan;
}
::-webkit-scrollbar-thumb {
  background: cyan;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: cyan;
}
</style>
<style>

@media(max-width: 600px){ /* MOBILE */
body{
  background-image: url('https://www.pikpng.com/pngl/b/31-313214_spaceship-cockpit-png-pc-game-clipart.png'), url('https://i.imgur.com/ZsBfUYU.gif');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-color: black;
}
main{
    background: transparent;
}
.profile{
  display:block;
  flex-direction: column;
}
.profile{
  overflow-y: scroll;
  width:350px;
  height:500px;
  margin:auto;
  background-color: transparent;
}
}
</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.

Comments

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

M0CHABEAR	1722203836 i luv luv LUVV this layout, but the space background didn't load in, how can i get it to? Report Comment
Louis	1682731693 AWEOMS Report Comment
Hamed M.	1647618752 this is on another level!!!!!!! super cool Report Comment
Hamed M.	1647618752 this is on another level!!!!!!! super cool Report Comment
James	1619268755 THIS IS AMAZBALLS!!! It's cool as hell so I decided to use it. Thank you. Report Comment
Cailea	1615957488 I'm using your layout, and will probably keep it but slowly modify it over time. This is the most unique, good looking, layout I've seen here. Thank you so much for making it! ... Also, you're great! :D I love website development, but somehow I ended up a programmer. I'm looking forward to getting back into some HTML here, and your tips/advice are really helpful. Thank you!!! :3 Report Comment I think you've done an amazing job with it. Tbh I got frustrated with it and just posted it like that lol sorry xD but I'm glad you like it and are making it look better. I appreciate you for saying that, I'm just getting started with this all too so no worries, I'm learning as I go too. :) by Bela; 1616303855; Report I really think you did a great job. It's so different from the other layouts I've seen, and it all fits together so well. If you don't mind me asking, what were you getting frustrated with? I'm only just getting back into css and html a little as I work on making my profile perfect, but I'd be happy to share knowledge with you and talk about things like this, if you want! by Cailea; 1616307769; Report
ash lynx	1614867182 THIS. IS. INCREDIBLE. Report Comment Thank you!! by Bela; 1614880380; Report