Black & Neon Green Plain 2.0 layout

Tags: simple, clean, black, green, modern, dark, 2.0

Description:

I made this layout by combing 2 layouts and tweaking them. Thanks to both Div and Dez for their layouts. After the codes for the 2 layouts, there's codes to hide stuff. The first layout I used was "Plain 2.0." by Div The second layout I used is "day-glo" by Dez

Preview:

click on the image for a larger preview

Code:

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

-------------------PLAIN 2.0-----------------------------------------------

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

<style>

::-webkit-scrollbar {
	width: 6px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background: rgba(245, 245, 245);
	border-radius: 4px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

body {
	font-size: 1.25
	line-height: 20px;
}

main {
	padding-top: 20px;
}

.container {
	margin-bottom: 0;
}

a {
	transition: all 0.2s ease;
	outline: none;
}

.heading h4 {
padding-left: 3px;
	line-height: 1.7rem;
}

.count {
	color: #df7e65 !important;
	font-weight: bold !important;
}

nav .links {
	text-align: center !important;
}

nav .links li:not(:last-child)::after {
	color: var(--darker-blue);
}

nav .links a {
	text-shadow: none;
	background: linear-gradient(0deg, #fff, #fff) no-repeat right bottom / 0 var(--bg-h);
	transition: background-size 350ms;
	--bg-h: 100%;
	--bg-h: 1px;
}

nav .links a:where(:hover, :focus-visible) {
	background-size: 100% var(--bg-h);
	background-position-x: left;
}

nav .links a:hover {
	color: var(--darker-blue);
	text-decoration: none;
}

nav .top a, .logout-btn {
	padding: 0 6px 0 6px !important;
}

nav .top label {
	display: none;
}

nav .top input {
	color: #fff;
	background-color: var(--darker-blue);
	border: solid 1px #4e6ed8;
	line-height: 24px;
	margin: 10px 4px 0 8px;
	width: 250px;
	border-radius: 5px;
	text-indent: 5px;
	outline: none;
}

nav .top input:focus {
	border: solid 1px #6782dd;
	box-shadow: 0 0 2px #6782dd;
}
 
button {
	color: var(--darker-blue);
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 5px 10px 5px 10px;
}

button:hover {
	color: #fff;
	background-color: var(--darker-blue);
	border: 1px solid #fff;
	transition: all 0.2s ease;
	cursor: pointer;
}

nav .top .right {
	margin-top: 20px !important;
}

.top button {
	margin-top: 10px;
}

.friends button {
	color: #fff;
	font-size: .7rem;
	margin: 7px 7px 7px 4px;
	background-color: var(--dark-orange);
	border: solid 1px var(--dark-orange);
}

.friends button:hover {
	color: #fff;
	background-color: var(--lighter-blue);
	border: solid 1px var(--lighter-blue);
	transition: all 0.2s ease;
	cursor: pointer;
}

.logout-btn:hover {
	border: 0;
}

.url-info b {
	color: #1d4ed8 !important;
}

main {
	padding-bottom: 20px;
}

.blurbs .inner, .friends .inner  {
	padding: 18px !important;
}

.col.left .heading, .col.right .heading {
	padding: 0 0 3px 10px;
	border-radius: 4px;
}

.col.left .contact, .col.left .url-info, .col.left .table-section, .comments-table {
	border: 0;
}

.mood {
	margin-bottom: 20px !important;
}

.contact {
	padding-bottom: 6px !important;
	border-radius: 4px;
}

.url-info {
	margin-top: 20px !important;
	padding-bottom: 20px !important;
}

.detail-table th, td {
	padding: 6px 12px 6px 12px;
}

.col.right .blog-preview h4, .col.right .blog-preview p {
	padding: 5px;
}

.col.right .profile-info, .col.right .blurbs, .col.right .friends {
border-radius: 4px;
}

.col.right .profile-info {
	border-color: var(--lighter-blue);
}

.count {
	color: var(--dark-orange) !important;
}

.more {
	padding: 4px 10px 0 0;
}

#comments .heading {
	margin-top: 20px;
}

.comment-replies {
	border: solid 3px #fff !important;
	margin-bottom: 7px;
}

.comment-reply:not(:first-child){
	border-top: solid 1px #fbeede !important;
}

.comments-table td {
	border: solid 2px #fff !important;
}

.profile .friends .person {
	margin: 0 5px 0 5px;
}

footer {
	color: #3e3e3e;
	background-color: transparent !important;
	margin: 0;
}

footer .links li:not(:last-child)::after {
	color: #9e9e9e;
}


/********************* Media Queries *********************/

/* Min-width 768px */
@media (min-width: 768px) {
    
	body {
    	font-size: 1.125rem;
    	line-height: 20px;
	}
    
	main {
    	padding-top: 20px;
	}
    
	nav .top .center {
    	text-align: right !important;
	}
    
	nav .top .right {
    	margin: 4px 0 0 4px !important;
	}
    
	nav .top input, nav .top button {
    	margin-top: 14px;
	}
    
	nav .links a {
    	padding: 0 4px 0 4px !important;
    	line-height: 24px;
	}
    
	.heading h4 {
    	line-height: 1.9rem;
	}
    
	.url-info {
    	font-size: 0.79rem;
	}
    
	.more {
    	padding-top: 6px;
	}

	table.comments-table {
    	font-size: 0.75rem;
	}

}


/* Min-width 992px */
@media (min-width: 992px) {

	.container {
    	width: 992px;
    	margin-top: 20px;
    }
    
	body {
    	font-size: 1.13rem;
    	line-height: 22px;
	}
    
	main {
    	padding-top: 30px;
    	border-radius: 0 0 10px 10px;
	}

	main .left {
    	padding: 0 10px 0 20px;
	}

	main .right {
    	padding: 0 20px 0 10px;
	}
    
	nav .top {
    	padding: 20px 0 20px 0;
    	border-radius: 10px 10px 0 0;
	}

	nav .top .center {
    	text-align: right !important;
    	margin-top: 20px;
	}

	nav .top .right {
    	margin: 20px 8px 0 4px !important;
	}
    
	nav .top .left {
    	margin-top: 10px;
	}
    
	nav .top input, nav .top button {
    	margin-top: 0;
	}
    
	nav .links {
    	padding: 5px 0 5px 0;
	}
    
	nav .links a {
    	padding: 0 8px 0 8px;
	}
    
	.heading h4 {
    	line-height: 2rem;
	}
    
	.contact .f-row {
    	line-height: 26px;
	}
    
	.url-info {
    	font-size: 0.85rem;
	}
    
	.profile .friends .person {
    	margin: 0 10px 0 10px;
	}
    
	.friends button {
    	font-size: .75rem;
	}
    
	.more {
    	padding-top: 6px;
	}
    
	table.comments-table {
    	font-size: 0.8rem;
	}

	footer {
   	 margin: 2px 0 5px 0;
    	border-top: 0;
	}

}


/* Min-width 1200px */
@media (min-width: 1200px) {
    
	body {
    	font-size: 1.23rem;
    	line-height: 24px;
	}

	.container {
    	width: 1200px;
	}
    
	main .left {
    	padding: 0 15px 0 30px;
	}
    
	main .right {
    	padding: 0 30px 0 15px;
	}

	nav .links a {
    	padding: 0 10px 0 10px;
	}
    
	.heading h4 {
    	padding-left: 5px;
    	line-height: 2.6rem;
	}
   	 
	.contact .f-row {
    	line-height: 30px;
	}
    
	.url-info {
    	font-size: 0.9rem;
	}
    
	.profile .friends .person {
    	margin: 0 25px 0 25px;
	}
    
	.friends button {
    	font-size: .8rem;
	}
    
	.more {
    	padding-top: 8px;
	}
    
	table.comments-table {
    	font-size: 0.85rem;
	}
    
	footer .links a {
    	font-size: 0.7rem;
    	padding: 0 2px 0 2px;
	}
}

</style>

----------------------------------------------


-------------NEON GREEN AND BLACK LAYOUT---------------------------------

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

<style>
  /* font import */
  @import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');

  :root {
	--black: #000;
	--white: #cfc;
	--neon1: #0f6;
  	--darkneon: #093;
  }

  body {
	background: var(--black);
  	background: #000;

	font-family: 'Oswald', 'Merriweather', 'Comic Neue', sans-serif;
  	text-transform: none;
  }

  a:hover {
	text-decoration-style: wavy !important;
  }

  .table-section td {
	color: var(--white) !important;
  	color: #cfc !important;
    
	background: var(--black) !important;
  	background: #000 !important;

	border: 1px solid var(--neon1) !important;
  	border-color: #0f6 !important;
  	border-radius: 3px !important;
  }
	.table-section td:nth-child(1) {
  	color: var(--black) !important;
  	  color: #000 !important;
  	text-align: right !important;

  	background: var(--neon1) !important;
  	  background: #0f6 !important;
	}

  footer {
	color: var(--white) !important;
  	color: #cfc !important;

	background: var(--black) !important;
  	background: #000 !important;

	border: 1px solid var(--neon1) !important;
  	border-color: #0f6 !important;
  	border-radius: 3px !important;
  }
	footer a {
  	color: var(--neon1) !important;
  	  color: #0f6 !important;
	}
	.copyright {
  	text-decoration: none !important;
	}

  .count, .section h4 {
	color: var(--neon1) !important;
  }

  nav {
	color: var(--white);
  	color: #cfc;
  }
	nav .top {
  	color: var(--black) !important;
  	  color: #000 !important;

  	background: var(--neon1);
  	  background: #0f6;
	}
  	nav img.logo{
  	  filter: brightness(0) saturate(100%);
  	}

  	.search-wrapper input[type=text] {
  	  color: var(--neon1) !important;
		  color: #0f6 !important;
  	  background-color: var(--black) !important;
		  background-color: #000 !important;
      
  	  border: 1px solid var(--darkneon) !important;
		  border-color: #093 !important;
		  border-radius: 3px !important;
  	}

  	.logout-btn, .logout-form {
  	  color: var(--black) !important;
		  color: #000 !important;
  	  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
  	  text-transform: none !important;
  	}
  	  .logout-btn:hover {
		  text-decoration-style: wavy !important;
  	  }

	nav .links {
  	display: flex;
  	  flex-wrap: wrap;
  	  flex-direction: row;
  	  justify-content: space-around;
  	  align-items: center;
      
  	background: var(--black);
  	  background: #000;

  	border-bottom: 1px solid var(--neon1);
  	border-left: 1px solid var(--neon1);
  	border-right: 1px solid var(--neon1);
  	  border-bottom-left-radius: 3px !important;
  	  border-bottom-right-radius: 3px !important;
  	  border-color: #0f6;
	}
	nav .links a {
  	color: var(--neon1) !important;
  	  color: #0f6 !important;

  	border: none !important;
	}

	main {
  	color: var(--white) !important;
  	  color: #cfc !important;
    
  	background: var(--black) !important;
  	  background: #000 !important;
	}
  	main a {
  	  color: var(--neon1) !important;
		  color: #0f6 !important;
  	}

	.profile-info {
  	color: var(--black) !important;
  	  color: #000 !important;

  	background: var(--neon1) !important;
  	  background: #0f6 !important;

  	border: none !important;
  	  border-radius: 3px !important;
	}
  	.profile-info .inner a {
  	  color: var(--black) !important;
  	  color: #000 !important;
  	}

	.heading {
  	color: var(--black) !important;
  	  color: #000 !important;

  	background: var(--neon1) !important;
  	  background: #0f6 !important;
	}
  	  .more {
		  color: var(--neon1) !important;
  		  color: #0f6 !important;
  	  }
  	  .friends .heading {
		  background: var(--black) !important;
  		  background: #000 !important;
  	  }
		  .friends .heading h4 {
  		  color: var(--neon1) !important;
  		  color: #0f6 !important;
		  }
  	  .person p {
		  color: var(--neon1) !important;
  		  color: #0f6 !important;
  	  }
  	  .friends .pfp-fallback {
		  border: 1px solid var(--neon1);
		  border-radius: 3px;
  	  }

	.contact {
  	border: 1px var(--neon1) solid !important;
  	  border-color: #0f6 !important;
  	  border-radius: 3px !important;
	}

	.table-section {
  	border: none !important;
	}
  	.table-section .heading {
  	  background: var(--black) !important;
		  background: #000 !important;

  	  color: var(--neon1) !important;
		  color: #0f6 !important;
  	}

	.url-info {
  	color: var(--black) !important;
  	  color: #000 !important;

  	background: var(--neon1) !important;
  	  background: #0f6 !important;
  	border: none !important;
  	  border-radius: 3px !important;
	}
  	.url-info a {
  	  color: var(--black) !important;
		  color: #000 !important;
  	}

	.blurbs {
  	border: 2px var(--neon1) solid!important;
  	  border-color: #0f6 !important;
  	  border-radius: 1px !important;
	}

	.person {
  	color: var(--neon1) !important;
		  color: #0f6 !important;
	}

	.w-40 .table-section:last-child {
  	display: none !important;
	}

	.left h1 {
  	font-size: 50px;
  	font family: 
         color: var(--neon1) !important;
		  color: #0f6 !important;
	}

	/* comments */

	.comments-table {
  	border: none;
	}
	.comments-table td {
  	color: var(--white) !important;
  	  color: #cfc !important;
  	text-transform: none !important;
    
  	background: var(--black) !important;
  	  background: #000 !important;

  	border: 1px var(--neon1) solid !important;
  	  border-color: #0f6 !important;
  	  border-radius: 3px !important;
  	  border-spacing: 3px !important;
	}

	.comment-replies {
  	margin-top: 0 !important;
  	margin-bottom: 3px !important;
  	border: 1px var(--neon1) solid !important;
  	  border-color: #0f6 !important;
  	  border-radius: 3px !important;
	}
  	.comment-reply {
  	  color: var(--white) !important;
  	  color: #cfc !important;
  	}
  	  .comment-reply a {
		  text-transform: none !important;
  	  }
  	.report {
  	  text-transform: none !important;
  	}

	.ago {
  	text-transform: none !important;

	.profile-picture img {
  	border-radius: 3px !important;
	}

	.online {
  	color: var(--neon1) !important; color: #0f6 !important;
	}
</style>

Hide stuff codes
-----------------------------------------------------------------------------
<!--Hide Stuff -->

&lt;-----1.-URL Box--&gt;

<style> .url-info{display:none !important;} </style>

<!----2.-------------Blog------------ -->

<style> .blog-preview{display:none} </style>

<!---3.---"xxx" is your friend box-->

<style>.profile-info{border: 1px solid black !important; </style>

<!---4-----Blurb Title-->

<style>.blurbs .heading{display: none !important;}</style>

<!------5-------Make footer transparent but functional-->

<style>footer {background:none !important; line-height:0px !important;}</style>

<!------6------Center About Me and WITM Header-->

<style> .right .section h4 {text-align: center;}</style>

<!------7----Hide Contact Header------->

<style>.contact .heading{display: none !important;</style>

<!-----8-----Hide Who I'd Like To Meet-->

<style>.profile .blurbs .section:nth-child(2) {display: none;<style></style>


<!-----9---------Hide Friends-->

<style> .friends-grid{display: none !important;} </style> 

<!-----10-------------Comments-->

<style>
.friends{display: none !important;}
</style>


<!------11----------------Friends Section-->

<style>
div.table-section:nth-child(6) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(5),
div.table-section:nth-child(7) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(5) {display: none;}
</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 18 of 18 comments ( View all | Add Comment )

Zillak	1744312064 usingggg Report Comment
Aztri0	1740429172 using!! Report Comment
Hazzard	1735598680 Perfect! using!! Report Comment
gideon_hates-you	1732476263 using!!! Report Comment
Jean	1720741241 using! Report Comment
m-a-t-t	1710740639 Usingggg Report Comment
★	1705156161 Using! Report Comment
[AUTOPLAY] PROFILE UNDER CONSTRUCTION	1703738896 using! Report Comment
⭐TYLER⭐	1700962498 USING!! Report Comment
comfy	1695670703 using! Report Comment
theo	1691353307 usingg Report Comment
Cicada Boy	1690231759 using Report Comment
enegydrink	1689543247 using :3 Report Comment
tori 𐙚	1689385946 using Report Comment
rgemini	1689107047 using! Report Comment
st4r3uddy	1688784123 using, thank you! :) Report Comment
koasng	1688365015 using at the moment Report Comment
Shitty_Shartyy	1688237986 using :) Report Comment