Green Computer Layout

Tags: green, simple, computer, retro, ibuprofen barbie

Description:

Please friend me or comment if using !!

Preview:

click on the image for a larger preview

Code:

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

<style>
/* profile background/the image behind the profile box */
body { 
background: url(https://i.imgur.com/wDi56Vb.png);
}
</style>

<style>
/* this is the color of any text that you input */ 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
.profile .blurbs .section h4{
font-family: 'Josefin Sans', sans-serif;
text-transform:lowercase !important;
color: #087024;
}
</style>

<style> 
/* these are the colors for headers */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
p{
font-family: 'Josefin Sans', sans-serif;
text-transform:lowercase !important;
color:#087024;
}
</style>

<style>
/* this adjusts the size/font of your name */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h1{
font-size: 20px !important;
font-family: 'Paytone One', sans-serif;	
text-transform:uppercase !important;
padding-left: 7px !important;
}
</style> 

<style> 
/* this changes the color of your name */
.profile h1{
background: -webkit-linear-gradient(#087024, #087024);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

<style>
/* this changes the color of your headers */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h4{
font-size: 16px !important;
font-family: 'Paytone One', sans-serif;	
text-transform:uppercase !important;
padding-left: 2px !important;
/* gradient text, you can replace existing colors with whatever ones you want */
background: -webkit-linear-gradient(#087024, #087024);
-webkit-background-clip: text;
-webkit-text-fill-color: #087024;

}
</style> 

<style>
/* this is what makes the text bold/look bigger */
p{
font-size: 14px !important;
font-weight: bold;
 text-transform:none !important;
}
</style> 

<style>
/* links in the navigation bar @ the top */
nav{ 
font-size: 13px !important;
font-family: 'Paytone One', sans-serif;
text-shadow: 1px 1px #087024;
text-transform:none;
padding-left:3px;
text-align: center;
}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* the color of the number of your friends */
    .count {
        color: #087024;
    }
</style>

<style>
/* link colors when you hover over links */
   a:hover {
     color: green; 
   } 
   a{
     color: #087024; 
   }
</style>

<style>
/* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */
/* https://cursors-4u.net */
a:hover {    
 cursor: url('http://www.rw-designer.com/cursor-view/152995-48.png'), auto;
}
* {
 cursor: url('http://www.rw-designer.com/cursor-view/152980-48.png'), auto;
}
</style>


<style>
/* main profile background/the box that has all your text */
/* use https://rgbacolorpicker.com/ to pick a different color and adjust it's opacity */
main {
background: rgba(13, 4, 4, 1);
border-radius:15px;
border: 2px dotted rgbargba(13, 4, 4, 1)
}
</style>


<style>
/* this is the background color for the headings of your blurbs, friend space + comments */
.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:rgba(13, 4, 4, 1);
text-transform:lowercase !important;
color: black;
border-radius:15px;
border: 3px dotted rgba(13, 4, 4, 1)
}
</style>

<style>
/* links to your friends' profiles */
.profile .friends .person p {
color: #087024;  
}
.profile .friends .person p:hover {
color: #087024;  
}
</style>

<style> 
/* this is the box that says "_'s latest blog entries" */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
DIV.blog-preview{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
background-color:rgba(13, 4, 4, 1);
text-transform:lowercase !important;
color: white;
border-radius:15px;
border: 5px dotted rgba(13, 4, 4, 1)
}
</style>

<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgba(7, 133, 5, 1);
border: 3px dotted rgba(13, 4, 4, 1)
}
</style>


<style>
/* these are the colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: rgba(13, 4, 4, 1);
}
</style>

<style>
/* contacting "_" */
.profile .contact {
background-color: rgba(13, 4, 4, 1);
}
</style>

<style>
/* friend comments */
.profile .friends .comments-table td {
background-color: rgba(13, 4, 4, 1);
border: 1px solid rgba(13, 4, 4, 1);  
}
.comments-table td*{
    
    
}
</style>


<style>
/* colors for interest section */
.profile .table-section .details-table td {
background-color:rgba(13, 4, 4, 1);
}
</style>

<style>
/* navigation bar at the top/the bar that has navigation links */
nav .links {
background-color: black;
}
nav .links a:hover {
color: rgba(7, 133, 5, 1);
}
</style>

<style>
nav .top{
/* navigation bar at the top/the bar that has the search and spacehey logo */
background-color: black;
}
</style>

<style>

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}
<style>
/* floating animations */
.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}    
</style>


<style>
/* pink dashed borders */
.profile .url-info {
border: 2px dashed  rgba(13, 4, 4, 1);    
}
.profile .contact {
border: 2px dashed  black;     
}
.profile .table-section {
border: 2px dashed  rgba(13, 4, 4, 1);     
}

</style>

<style>
/* border inside of comments */
table.comments-table {
border: 2px dashed rgba(13, 4, 4, 1);      
}    
</style>

<style>
/* contact icons */
.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 favorite */
content: "🔪"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🔪"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "🔪"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🔪"
}   
</style>

<style>
footer {
color: transparent !important;
text-decoration: none !important;
text-decoration-style: none !important;
background-color: transparent;
  }    

.online{content:url("https://www.myspacegens.com/images/online_now/136.gif");}

<style>



h1{

  animation: type 3s steps(27);

  color: white;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

 }

@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}

<style>

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

̇ . ˚ VEE ♫ 、🎤⊹	1739525414 using !! Report Comment
Wil #2	1737562839 Deffo using Report Comment
iluvmumu	1732955492 using yum yum Report Comment
#1 mind fan	1727578711 using Report Comment
t6rrified	1717192448 using :) Report Comment
malachite	1697412122 using! Report Comment
Nomad	1694793880 usingg Report Comment
alex ౨ৎ	1692810795 using! Report Comment
CAS / FIZZ	1690205953 using,,,ghhh Report Comment
⛧𝔞𝔵𝔶𝔩𝔢⛧	1689620022 so gonna use!!🦝💕 Report Comment
BLANC	1686398388 ussinfg :3 Report Comment
KURT'S LAYOUT TESTER	1685561121 using! Report Comment
usbehd	1683416474 hey bro, using Report Comment
gren	1683407512 using this !! i love it :) Report Comment
Jay⚢	1682902250 using Report Comment
junebug!!	1682822802 using Report Comment
dean	1681755850 using !!! Report Comment
dean	1681755805 using !!! Report Comment
AcidAngels	1681490805 using Report Comment
ZIXZWYA¿	1680225388 I wanna use but i have no clue how to Report Comment HAHAHSH I figured it out guys by ZIXZWYA¿; 1680225895; Report