Psychedelia1

Tags: psychedelic, layouts, mushrooms, art, neon, bif shamil

Description:

You don’t have to be a stoner to enjoy this psychedelic little piece of layout it’s very interesting you just have to have appreciation for. I do appreciate that you do add me or comment. If you want to use it outside of spacehey do mention me by chance. That’s all I’m asking for thank you

Preview:

click on the image for a larger preview

Code:

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


<style>

footer {
        border-radius: 15px;
background-color: transparent; 

</style>

<style>
    
  
body {
  font: normal small-caps normal 16px/1.4 monospace;
}



h1, h2, h3, h4,h5,a, p, nav label, .section {color: red ;}

h1 {
  color: red;
  text-shadow: 1px 1px 2px black, 0 0 25px darkred, 0 0 5px darkred;
}


 
:root {
        --logo-blue: ;
        --darker-blue: ;
        --lighter-blue: coral55;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: ;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: coral;
    }

main {
  /* changes made to stuff outside of columns */
    background: #0000;
    padding: 0;
    font-size: 80%;
    color: var(--light-orange);
  }


table, th, td {
  border: 0px solid #f994ff ;
}

body
        {background: url("https://i.ibb.co/hdrhj4y/E3-E91026-131-C-4-E3-B-BFF8-123-BE5-FAC8-BD.jpg")
        no-repeat fixed; background-size: cover;
     }



.profile .friends .person img {
        border-radius: 500px;
    }

.profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }

</style>

<style>

body:before {
 content: " ";
 height: 100vh;
 width: 100vw;
 display: block;
 position: fixed; 
 top: 0; 
 left: 0; 
 z-index: 100;
 background-image: url('https://i.ibb.co/rZJ5hLD/5-A2-A5004-6937-4-F53-903-D-DBC8-BDA3-FFFE.jpg');
 background-size: cover;
 background-repeat: no-repeat;
 animation: yourAnimation 3s ease 0s 1 normal forwards;
 pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

<style>

.online{content:url("http://dl7.glitter-graphics.net/pub/104/104607x61kd02dl0.gif");}

.friends-grid {
        visibility:hidden; display:none;
    }
.friends {
    overflow: scroll;
    overflow-x: scroll;
    overflow-x: hidden;
    height: 300px; 
}


</style>





<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <h1 class="list-heading">favorite albums</h1> <!--title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
<h1 class="list-heading">bucket list </h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>

<!-- REMOVE ALL OF THIS TEXT UNTIL THE CODE STARTS
***************************************
Code that I put in "Movies"
***************************************-->

<!--heading for games section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/802246269924933632/ezgif.com-crop2.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">GAMES</h1>
</div>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <h1 class="list-heading">plays station</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <h1 class="list-heading">pc</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <h1 class="list-heading">ipad</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <h1 class="list-heading">Other</h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>


<!-- REMOVE ALL OF THIS TEXT UNTIL THE CODE STARTS
***************************************
Code that I put in "Television"
***************************************-->


<!--heading for tv & movies section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/801967693834092594/ezgif.com-resize.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">TV & MOVIES</h1> 
</div>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <h1 class="list-heading">book genres </h1> <!--list title-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>

  <h1 class="list-heading">book genres </h1> <!--list title-->

    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  

<!-- REMOVE ALL OF THIS TEXT UNTIL THE CODE STARTS
***************************************
Code that I put in "Heroes"
***************************************-->


<!--heading for other interests section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/802378570080976936/ezgif.com-crop5.gif); vertical-align: middle; text-align: center; position: relative;">
  <h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">Food</h1>
</div>

<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </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 0 of 0 comments ( View all | Add Comment )