Black, white and blue minimalist layout

Tags: 90's; 00's; simple design; black

Description:

Hey guys! This is the first layout I published on Spacehey. That's a minimalism layout with a thin font and only 3 main colors (black for the backround, blue for the Spacehey logo and white for the majority of the text). This is inspired by the design of the 1st websites on the 90's and the early 00's.

I've made this layout with the code that I took on several layout, so feel free to use it as you want. You can of course modity it. Have fun :)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by GU beats 💿 (https://layouts.spacehey.com/layout?id=19244) -->

<style>

/*Intro GIF Animation (fade out)*/
  body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100;
    background-image: url('https://giphy.com/gifs/win-pain-paint-xTg8B31DCfCWKEThG8'); /*gif link here*/
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 4s ease 0s 1 normal forwards;
    pointer-events: none;
  }
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

  body {    
    background-color: rgba(0, 0, 0, 1);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Courier New', monospace;
    height: 100%;
    color: #ffffff;
    h1: #ffffff;
    h2: #ffffff;
    h3: #ffffff;
    h4: #ffffff;
    li: #ffffff;
  }

  .search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 1) !important;
    border: 1px dotted var(--headers) !important;
    color:var(--names) !important;
    border-radius: 10px !important;
  }
  button{
    border-radius: 10px !important;
    border: 1px dotted var(--headers) !important;
    font-family: Bree Serif; Arbutus Slab; Roboto Slab; Noto Serif !important;
    background-color:rgba(0, 0, 0, 1) !important;
    color:var(--headers) !important;
  }

  nav{
    background-color:rgba(0, 0, 0, 1); !important;
    border-radius: 0px 0px var(--curve) var(--curve); !important;
  }
  nav ul{
    background:none !important;
    font-size: 10px;
  }
  nav ul a img, .mood a img{
    display:none !important;
  }
  .top{
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba(0, 0, 0, 1); !important;
  }

  .url-info{
    display:none !important;
  }

  .mood a{
    color:#fffff;
  }

  main{
    background: rgba(0, 0, 0, 0) !important;
  }

  .profile {
    background:rgba(0, 0, 0, 1);
    color: #ffffff;
  }
  .profile .contact .heading{
    background:rgba(0, 0, 0, 1);
    text-align: center;
  }
  .profile .contact {
    border-radius: 15px;
    border:2px solid rgba(0, 0, 0, 0);
    background-position: right top;
    background-repeat: repeat;
    background-attachment: scroll;
    Height:180px;
    color: white;
  }
  .contact a{
    color: #ffffff;
  }
  .contact a:hover{
    color: rgba(0, 0, 0, 1);
  }
  .profile .table-section{
    border:2px solid rgba(0, 0, 0, 1);
    border-radius: 15px;
  }
  .profile .table-section .heading{
    background:rgba(0, 0, 0, 1);
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 15px 15px 0px 0px;
    text-align: center;
  }
  .profile .table-section .heading h4{
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
  }
  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }
  .profile .table-section .details-table td:first-child{
    background: rgba(0, 0, 0, 1);
    width: 10%; 
  }
  .profile .table-section .details-table td:first-child p{
    color: rgba(0, 0, 0, 0);
    font-size: 1px;
  }
/*customising header text for interest titles*/
  .list-heading{
    color:#fffff;;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    text-decoration: underline;
    font-weight: bold;
    text-align:center;
  }
  .profile .blurbs .heading{
    background: rgba(0, 0, 0, 1);
    color: rgba(0, 0, 0, 0);
    text-size: 1px;
    height: 2px;
  }
  .col.right .heading h4{
    color:  rgba(0, 0, 0, 0);
    text-size: 1px;
  }
  .profile .blurbs .section h4 {
    display: none;
  }
  .profile .blurbs .section p {
    font-size: 15px;
    text-align: center;
  }
  .col.right a{
    color: rgba(0, 0, 0, 1);
  }    
/*customising friend space heading*/
  .profile .friends .heading{
    background: rgba(0, 0, 0, 1);
    color: #fffff;
    text-shadow: 1px 1px 2px black;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: #fffff;
    text-shadow: 1px 1px 2px black
  }
/*making the comments section have a scroller*/
  .comments-table{
    display: block;
    height: 380px;
    overflow-y: scroll;
    Border-radius: 15px;
    background-color: rgba(0, 0, 0, 1);
  }
  .comments-table td:first-child{
    background-color: rgba(0, 0, 0, 1);
  }
  .comments-table td:first-child a{
    color: #fffff;
  }
  .comments-table td:first-child a:hover{
    color: #ffffff;
  }
  .comments-table td{
    background-color: rgba(0, 0, 0, 1);
  }
  .comments-table td a{
    color: #fffff;
  }
  .comments-table td a:hover{
    color: #ffffff;
  }
  
/*creating 'top 8' section*/
 .top-eight {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, [col] auto ) ;
  grid-template-rows: repeat(2, [row] auto  );
  background-color: transparent;
  color: #444;
  margin: 0px;
  width: 100%;
  }
  .top-row{
    grid-column: col 1 / span 4;
    grid-row: row 2;
  }
  .bot-row{
    grid-column: col / span 4;
    grid-row: row 3;
 
  .top-eight-header {
    grid-column: col 1 / span 4;
    grid-row: row 1;
    height:100%;
    background-color: rgba(0, 0, 0, 1);
    color: rgba(0, 0, 0, 0);
    font-weight: bold;
    padding: 4px !important;
  }
  .top-eight-header h2 {
    padding-bottom: 0px !important;
    margin-botton: 0px;
    font-family: 'Courier New', monospace;
    color: rgba(0, 0, 0, 0)
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }
  .social-logos{
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(4, [col] auto ) ;
    grid-template-rows: repeat(1, [row] auto  );
    background-color: transparent;
    color: #444;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    grid-column: col 1 / span 4
    grid-row: row 1;
    position: relative;
  }
  .social-logos img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  img.logohover:hover,
  img.logohover:focus{
    width: 53px;
    height: 53px;
    position: abolute;
  }
  footer{
    background:rgba(0, 0, 0, 1);
    a: #ffffff;
    color: #ffffff;
  }
</style>

<p> ********* </p><p> <!--main about me text-->

<br/><!--line break for space-->
<br/><!--line break for space-->

<!--top 8 code-->
<!--top 8 header-->
</p><div class="top-eight">
  <div class="top-eight-header">
    <h2> Cool stuffs </h2>
</div>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-7/oth665.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/24/tiny-finger-point.html" target="_blank" title="Tiny Finger Point"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny Finger Point" style="position:absolute; top: 0px; right: 0px;"/></a>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> 
  <h1 class="list-heading"> Stay tunned for ...</h1> <!--list title-->
  <ul>
    <li> some cool synthwave songs</li>
    <li> some cool synthwave and vaporwave mix </li>
    <li> some Lofi song for chilling </li>
   <ul>
</ul></ul></div>
--&gt;</div>

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 2 of 2 comments ( View all | Add Comment )

Shadz (mostly inactive mb)

1710141239

using

Report Comment

Puro!

1645107244

Thank youu! It's great!

Report Comment