Red Computer Layout

Tags: red, computer, retro, 90s, simple, pink

Description:

Please comment or friend me if using !!

Preview:

click on the image for a larger preview

Code:

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

<style>
/* profile background/the image behind the profile box */
body { 
background: url(https://i.imgur.com/xplruGx.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: red;
}
</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:#911919;
}
</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(#911919, #911919);
-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(#911919, #911919);
-webkit-background-clip: text;
-webkit-text-fill-color: #911919;

}
</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 red;
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: #911919;
    }
</style>

<style>
/* link colors when you hover over links */
   a:hover {
     color: #520902; 
   } 
   a{
     color: #911919; 
   }
</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/50407.png'), auto;
}
* {
 cursor: url('http://www.rw-designer.com/cursor-view/50403.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: #911919;  
}
.profile .friends .person p:hover {
color: #911919;  
}
</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(254, 120, 180, 0.71);
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(13, 4, 4, 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/22.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 78 comments ( View all | Add Comment )

RandomNameWithGabe	1754095593 using!!! Report Comment
Bubble	1752237662 using! Report Comment
Quinn	1750056594 using Report Comment
gose	1749830140 using Report Comment
asu	1743488061 usingg Report Comment
breadstick430	1738482176 using Report Comment
valen ♰	1729351110 using Report Comment
D4NN4	1728279809 using Report Comment
Aracne	1717312233 I loved it, I'm using it Report Comment
𝙍𝙀𝙈𝙈𝙔	1717201162 using Report Comment
fifui / d5vvp	1716721222 Using. Report Comment
nerd	1716258175 using Report Comment
nerd	1716258161 using Report Comment
★ 𝒯ℴ𝒷𝒾𝒾 ☆	1710564918 using!! Report Comment
𐙚 🇭🇦🇱 🇸🇹🇷🇮🇩🇪🇷	1707675734 Using! Report Comment
【 ALLI 】	1703815643 Using ! ^_^ Report Comment
machine	1698852153 using! Report Comment
kai ^_^	1694658811 usingg Report Comment
tori 𐙚	1692210602 Using Report Comment
Jasper	1689322447 uuuuuuuussssssiiiinnnnggg Report Comment