Layout Preview

"/making layouts"

Put a tiny description about yaself!

ONLINE!

Mood: inspired

View my: Blog | Forum Topics

Contacting Layout Preview

Add to Friends

Add to Favorites

Send Message

Forward to Friend

Instant Message

Block User

Add to Group

Report User

SpaceHey URL:

https://spacehey.com/lionzlytspreviewer

Layout Preview's Interests

General	Personally....I think scrollboxes are best used here to keep everything together but feel free to write as you please in here without them! If you are looking for a scrollbox, you can find ones that suit the style on my website!
Music	The default music player for these layouts is 'Soundcloud' but I do have a compatible Youtube version on my website as well, check it out!
Movies	For some reason, my coding removes the 'Television' row....I apologize. Workaround: Combine the Movies/TV category! Imma work it out eventually lol
Television	This row may work.....or it may not...
Books	Speaking of books, make sure to read the notes/instructions I've written to get the layout juuuuuust right.
Heroes	Strive to be your own hero. /𝕷𝖎𝖔𝖓𝖟 /JENNA

Layout Preview's Links

Instagram	@mikeyveeruff
Twitter	@mikeyvruff

Layout Preview's Latest Blog Entries [View Blog]

Why yes.... (view more)

Layout Preview's Blurbs

About me:

This is Some Good Head-er...

Hello all, so you've chosen this layout to preview...nice choice! I always knew you had good taste. So you've noticed, I'm sure, that I have chosen to remove the 'About Me' and 'Who I'd Like To Meet' Section, but I did this purely for customization purposes. This way you can make the headers say what you want without some excess coding! Simply enclose the sentence you want like so:

SIDENOTES: The scrollbars in the scrollboxes are hidden, just use the middle scroll on your mouse. Wow, I said scroll a lot.....

I've also changed most of the font html styles as you can see below to really create a stylistic way of typing!

Who I'd like to meet:

Get me out of this place
Before I cause more damage
A small price to pay
For building houses out of matchsticks
& when things get too hot
You've got me to blame,
For every fire that breaks out in every lover's name...

Get The Code:

<style>

/*  CODED BY 'RUNNINGFROMLIONZ LYTS' @ SpaceHey  */
	/*  spacehey dot com slash runningfromlionzlyts  */

/* sets background */

body {
  height:auto;
  width: 700px;
  margin-top:0px;
    background-image: url("https://i.ibb.co/9qrTZj3/Photo-Feb-19-8-02-53-PM.png");
    background-color: #A480CF;
    background-size: cover;
    background-attachment: fixed; 
    background-position: bottom left; 
    background-repeat: no-repeat;
  margin-top:0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  color: ######; 
  font-family: arial; 
  font-size: 18px;
  letter-spacing:0px; 
  line-height: 14px; 
  text-align:justify; 
}

html:before {
  background-image: url("");
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
  z-index: -1;
  filter: ;
}

img {
  width: 100%;
  height: 100%;
}

.online {
  overflow: hidden;
}

b {
  color: #FF499E;
  font-family: arial black; 
  font-size: {text:Font Size}; 
  text-transform: uppercase;
  letter-spacing: 0px;
}

i {
  font-family: times new roman;
  color: ######;
  letter-spacing: 1px;
}

u {
  color: ######;
}

strong {
  letter-spacing: 3px;
  background-image: linear-gradient(60deg, #FF499E, #A480CF);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

sup {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  color: ######;
  line-height: 7px;
}

em {
  font-family: times new roman;
  color: #49B6FF;
  letter-spacing: 1px;
  font-style: italic;
  font-weight: bold;
}

.contact {
  background-color: ######;
  line-height: 3px;
}

h1 {
font-size: var(--mynamesize) !important;
line-height: 20px;
font-family: arial;
font-weight: bolder;
text-transform: uppercase;
letter-spacing: -2px;
color:  #FF499E;
text-align:center;
padding: 0px;
background: #49B6FF;
background-image:url("");
background-position: center;
background-size: 100%;
}

.general-about {
  background: #D264B6;
  color: ######;
  padding: 4px 4px 4px!important;
  margin-bottom: 0px;
  margin-top: 0px;
  font-style: arial;
  font-weight: normal;
  text-transform: none;
  text-align: left;
  font-size: 10px;
  line-height: 11px;
  letter-spacing: 0.5px;
  height: 220px;
}

.blurbs{margin:2px !important;}

.section h4{display:none}

.blurbs .heading{display:none !important;}

.url-info{
  font-size: 11px;
}

.profile-pic {
  overflow: hidden;    
}

.mood{text-transform: lowercase; !important; color: #ffffff80; letter-spacing: 2px; font-family: times new roman; font-style: none; background: #D264B6; margin-top: 0px; margin-bottom: 10px; padding-top: 5px; padding-left: 5px;}

.blurbs { 
  font-size: 14px;
  text-align: center;
  letter-spacing: -0.5px;
  text-transform: none;
  font-family: arial;
  background: #779BE7;
  height: auto !important;
}

.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner {
  margin-bottom: 10px;
  padding-left: 1px;
  padding-right: 1px;
  padding-bottom: 1px;
  padding-top: 1px;
}

.blog-entry {
  text-align: center;
}

.blog-preview {
  width: auto !important;
  background: #779BE7;
  float: center;
  text-align: center;
  padding: 0px 0px 0px!important;
    letter-spacing: 0px;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 10px;
  border-bottom: 2px solid #D264B6;
}

.blog-preview {
    overflow: scroll;
    height: 60px; 
    width: 97%;
  margin-bottom: 7px;
}

.blog-preview::-webkit-scrollbar {
  display: none;
}

.blog-preview {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.music {
  position: fixed;
  width: 60px;
  height: 20px;
  bottom: 5%;
  right: 0%;  
  opacity: .5;
    -webkit-filter: invert(1) grayscale(100%);
    filter: invert(1) grayscale(100%);
}

:root {
  --dark-orange: transparent;
  --light-orange: #ffffff80;
--mynamesize: 20px;
--curve: 15px;
}

/* colors for table cell background */
.profile .table-section .details-table td {
  background-color: #D264B6;
  color: #######;
  text-align: left;
  height: auto !important;
  letter-spacing: -1px;
}

.profile .left .table-section:last-child .details-table tbody {display:flex;}
.profile .left .table-section:last-child .details-table tbody tr{display:flex;flex-direction:column;flex:1;line-height:0;}
.profile .left .table-section:last-child .details-table tbody tr td{width:100%!important;text-align:center;background: #D264B6;}
.profile .left .table-section:last-child .details-table tbody tr td p a{font-size:0;transition:all .3s}
.profile .left .table-section:last-child .details-table tbody tr td p img{font-size:18px;opacity:1;transition:all .3s;height:auto;margin:0;}
.profile .left .table-section:last-child .details-table tbody tr td p a:hover img{opacity:1;transform:scale(1.2);z-index:10;}

main {
  /* changes made to stuff outside of columns */
    background: transparent;
    padding: 0px;
    color: var(--light-orange);
}

/* links within main. */
a, a:link, a:visited, a:active {
  font-family: arial;
  font-size: 10px;
  font-weight: normal;
  color: #ffffff90;
  text-transform: uppercase;
  letter-spacing:0px; 
}

a:hover {
  color: #49B6FF;
  text-transform: uppercase;
  font-weight: none;
  text-decoration: none;
}

a.two, a.two:link, a.two:visited, a.two:active {
  font-size: 18px;
  font-weight: normal;
  color: #738CBF;
  letter-spacing:-1px; 
  line-height: 20px;
}

a.two:hover {
  color: #D97373;
  text-transform: uppercase;
  font-weight: none;
  text-decoration: none;
}

/* color/style of borders around tables on the left */
.profile .contact, .profile .table-section, .profile .url-info {
  border: none;
  background: #D264B6;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background: #FF499E;
  color: #779BE7;
  font-family: arial;
  font-weight: bolder;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -1px;
}

.profile .left .table-section:last-child .details-table tbody {
	display: flex;
}

.profile .left .table-section:last-child .details-table tbody tr {
	display: flex;
}

.profile .left .table-section:last-child .details-table tbody tr td {
	width: 100%!important;
}

.profile .contact .f-row{
	text-align: center;
	height: 50%;
}

.profile .contact .heading {
	display: center!important;
	text-align: center;
	padding: 4px 0px 4px!important; 
	width: 100%;
	line-height: 9px;
}

.profile .contact .f-row .f-col {
	width: 80%!important
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a {
	font-size: 0; 
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {
	font-size: 11px;
	transition: all .3s;
        line-height: 5px;
          padding: 0px 30px 0px 0px;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:hover:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:hover:after, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:hover:after {
	transform: scale(2);
	opacity: 1
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after {
	content: "ADD ME"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after {
	content: "FAVORITE"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after {
	content: "MESSAGE"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after {
	content: "FORWARD"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after {
	content: "IM"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after {
	content: "BLOCK"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after {
	content: "GROUPS"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {
	content: "REPORT"
}

.col.w-40.left :nth-child(7) {
	text-align: left;
        margin-top: 7px;
        margin-bottom: 7px;
}

.count {
  color: #49B6FF;
}

.table-section:not(:last-child) .details-table tr td:first-child p{color: #A480CF;text-shadow: none !important;letter-spacing: 0px; font-size: 10px; text-transform: uppercase;}

.details-table tr td:first-child p::after{
  color:###### !important;
  letter-spacing:normal !important;  line-height: 14px;
   filter: brightness(95%) !important;
	margin: 0px; 
}

/* headings on the right */
.profile .blurbs .heading, .profile .friends .heading {
  background-color: #49B6FF;
  color: #DEE2E6;
  font-family: arial black;
  text-transform: uppercase;
  text-align: center;
}

.profile .friends .comments-table td {
  background-color: #779BE7;
  border: none;
  letter-spacing: 0px;
  font-size: 10px;
  text-transform: uppercase;
}

.profile .friends .person img {
}

.profile .friends {
  text-align: center;
}

nav {
  overflow-x: hidden;
  position: relative;
  width: 700px;
}

nav .links li:not(:last-child)::after,
  footer .links li:not(:last-child)::after {
    color: transparent;
  }

nav { 
background-image: url(); 
background-size: 100%;
background-position: bottom;
}

nav .top {
  background: transparent;
}

nav .links {
  background: transparent;
  text-align:center;
    font-size: 8px;
  letter-spacing:0px;
  padding-top: 7px;
}

nav ul.links a {
  color: #ffffff90;
  letter-spacing: 1px;
}

nav .links a:hover {
  color: #49B6FF;
  text-transform: uppercase;
  font-weight: none;
  text-decoration: none;
}

.friends {
    overflow: scroll;
    height: 200px; 
    margin-bottom: 5px;
    background: #779BE7;
}

.friends::-webkit-scrollbar {
  display: none;
}

.friends {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

footer {
   display: block !important;
   text-transform: uppercase;
   background: transparent;
   background-image: url();
   background-size: 100%;
   background-position: center;
   padding: 3px;
   margin-top: 0px;
   margin-bottom: 0px;
}

.comments-table td:first-child img{
}

.comments-table td:first-child img:hover{
border: 0px;
}

.comments-table td{
background: #779BE7;
color: ######;
}

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

.comments-table {
  border: none;
}

.comment-replies {
  background: #779BE7;
  border: 0px;
  letter-spacing: 0px;
  font-size: 10px;
  text-transform: uppercase;
}

* {cursor: url(), auto !important;}

@media only screen and (max-width: 600px){
.class { thing }
}

/*  CODED BY 'RUNNINGFROMLIONZ LYTS' @ SpaceHey  */
/*  CODED BY 'RUNNINGFROMLIONZ LYTS' @ SpaceHey  */
/*  CODED BY 'RUNNINGFROMLIONZ LYTS' @ SpaceHey  */
/*  spacehey dot com slash runningfromlionzlyts  */

</style>
<a class="two" href="https://spacehey.com/lionzlyts" target="_blank"><div style="position:fixed; top:0; left: 0; z-index: 9; width: 50px; height: 50px;">/𝕷𝖎𝖔𝖓𝖟</a><br><a class="two" href="https://spacehey.com/jenna" target="_blank">/JENNA</a></div>

**To get the proper 'YOUTUBE' or 'SOUNDCLOUD' music embed,
CLICK HERE!