cute 2000s console ! (red ver)

Tags: red, 2000s, cute, kawaii, video games

Description:

this is just a simple layout i put together ! it’s sort of inspired by early 2000s nintendo video games, or just early cute 2000s websites . also kind of just a light mode cute version of my own layout and my first layout i’m posting !! i’ll hopefully be making other colours of this layout , so stay tuned !! notes: please feel free to delete some of the text shadow if you want ! i know it can be a bit hard to read comes with online icon, gradient headers, footer, and nav bar, and cute contact table icons … all pictures and graphics are from glitter graphics !

Preview:

click on the image for a larger preview

Code:

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

<style>

body {
background-color: white;
background-attachment: fixed;
background-repeat: repeat;
}

.container {
width: 95%;
padding-left: 5px;
padding-right: 5px;
margin: 0px auto;

}
main {
background-color: white;

}
.profile h1{
font-family: arial;
color: red;
font-size: 35px;
}

.profile .general-about{
padding: 1em;
color: black;
font-size: 16px;
font-family: arial;
text-shadow: none;
}

.profile-pic img{
border: 1px solid black;
box-shadow: 0px 0px 0px 5px red;
}

.online{
color: red;
font-family: arial;
text-shadow: 0px 0px 5px #dc8383;
font-size: 20px;
margin: 0;
padding: 0;
}

nav img.logo {
}
.online {content:url(http://dl2.glitter-graphics.net/pub/56/56932naqkkm9jkj.gif); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 

}

.profile .profile-info{
color: red;
font-family: arial;
text-shadow: 2px 3px 5px red;
background: white;
border: 1px solid red;
box-shadow: inset 0px 0px 5px red;
}

.profile .contact .heading,
.profile .table-section .heading{
font-family: arial;
font-size: 20px;
background: linear-gradient(#ff1100, white);
border: 1px solid black;
text-shadow: 2px 3px 5px black;
text-transform: lowercase;
}

.profile .contact,
.profile .table-section {
border: 1px solid black;
font-family: arial;
font-size: 16px;
text-transform: lowercase;

}

.profile .url-info{
border: 1px solid black;
font-family: arial;
font-size: 15px;

}

table.details-table td {
background-color: transparent!important;
color: black !important;
}

.profile .mood{
color: black;
text-shadow: 2px 3px 5px grey;
font-family: arial;
text-transform: lowercase;
}

.profile .url-info{
color: black;
background-color: transparent;
text-align: center;
text-shadow: 2px 3px 5px grey;
border: 1px solid black;
text-transform: lowercase;

}

.profile .blog-preview{
color: black;
background-color: transparent;
border: none;
font-family: arial;
text-transform: lowercase;
font-size: 15px;

}

.profile .blurbs .heading,
.profile .friends .heading{
font-family: arial;
font-size: 20px;
background: linear-gradient(#ff1100, white);
border: 1px solid black;
color: white;
text-shadow: 2px 3px 5px black;
text-transform: lowercase;

}

.profile .blurbs,
.profile .friends{
background: white;
border: 1px solid black ;
font-family: arial;
font-size: 15px;
}

.blurbs div.inner {
text-align: center;
height: 300px;
overflow-y: scroll;

}

.profile .blurbs .section h4{
color: red;
text-align: center;
text-shadow: 2px 3px 5px grey;
padding: 1em 0;
text-transform: lowercase;

}
.profile .blurbs p{
color: black;
text-shadow: 2px 3px 5px grey;
font-size: 16px;
text-align: center;
font-family: arial;
text-transform: lowercase;

}

.profile .friends .friends-grid p{
color: red;
text-shadow: 2px 3px 5px grey;
font-family: arial;
}
.profile .friends .person img {

}
.friends .inner {
overflow-y: scroll;
max-height: 360px;
}

.profile .friends p b{
color: black;
text-shadow: 2px 3px 5px grey;
}

.count{
color: red;
text-shadow: 2px 3px 5px grey;
}

.profile .comments-table{
color: red;
background-color: white;
box-shadow: 0px 0px 10px red;
margin: .5em 0;
}

.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
border: 1px solid black;
}
.profile .comments-table td{
background-color: white;
color: black;

}

footer{
background-color: transparent;
margin: 1em 0;
color: red;
}

a{
color: red;
text-shadow: 2px 3px 5px grey;
text-transform: lowercase;

}

a:visited {
color: red;
text-shadow: 2px 3px 5px red;
text-decoration: none;
}

a:hover {
color: red;
}

nav .links a:hover{
color: red;
}
.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:url(http://dl4.glitter-graphics.net/pub/2466/2466464z1jv28yo3f.gif);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content:url(http://dl4.glitter-graphics.net/pub/2466/2466464z1jv28yo3f.gif);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content:url(http://dl4.glitter-graphics.net/pub/2466/2466464z1jv28yo3f.gif);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url(http://dl4.glitter-graphics.net/pub/2466/2466464z1jv28yo3f.gif);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url(http://dl4.glitter-graphics.net/pub/2466/2466464z1jv28yo3f.gif);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url(http://dl4.glitter-graphics.net/pub/2466/2466464z1jv28yo3f.gif);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url(http://dl4.glitter-graphics.net/pub/2466/2466464z1jv28yo3f.gif);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report User */
content: url(http://dl4.glitter-graphics.net/pub/2466/2466464z1jv28yo3f.gif);
}
.comments-table td {
border: none!important;
}
.table-section td {
font-size: 18px;
border: 0px solid black;
}
.comment-reply:not(:first-child) {
background-color: transparent!important;
color: red!important;
}
.comment-replies {
border: 0px dashed rgb(245, 18, 17)!important;
background-color: transparent!important;
color: black!important;
}

nav .top {
background-image: url(http://dl8.glitter-graphics.net/pub/2784/2784408u0e5tnt4wk.jpg);
background-size: 30%;
color: black!important;
border: none!important;
font-weight: normal;
text-align: center;
font-family: arial;
text-transform: lowercase;
}

nav img.logo {
    filter: invert(0%) sepia(100%) saturate(100%) hue-rotate(307deg) brightness(0%) contrast(107%);
!important;

}

button{
border-radius: 3px;
border: 2px solid;
color: white;
text-transform: lowercase;
font-family: arial;
border-color: black;
background: linear-gradient(#ff1100, white);

}

.links {
background: linear-gradient(#ff1100, white);
color: black!important;
border: 1px solid black;
text-shadow: -2px 2px 3px black!important;
text-align: center;
font-weight: normal;
text-transform: lowercase;

}
.links a:not(#footer) {
font-family: arial;
font-size: 16px;
text-shadow: -2px 2px 3px black!important;
text-transform: lowercase;
color: black;

}
.url-info b {
color: rgb(245, 18, 17)!important;
font-size: 16px;
font-family: arial;
}
.url-info {
color: black!important;
font-size: 18px;
font-family: arial;
}
footer {
background-color: transparent!important;
background-image: url(http://dl8.glitter-graphics.net/pub/2784/2784408u0e5tnt4wk.jpg);
font-size: 10px;
text-transform: lowercase;
}
.friends:not(#comments) {
margin-bottom: 10px;
}
.comments-table {
border: 0px solid rgb(255, 255, 255);
border-spacing: 5px;

}
.general-about {
overflow: auto;
}
.profile-pic {
height: auto;
max-width: 80%;
object-fit: contain;
overflow: hidden;
border: none;
}
.profile-info {
font-family: arial;
font-size: 18px;
text-transform: lowercase;
background-image: );
background-position: center;
background-size: 30%;
border: none!important;
height: 97px;
}
.heading {
background-color: transparent!important;
}
.friends {
color: rgb(245, 18, 17)!important;
}
.friends-grid a {
color: rgb(245, 18, 17)!important;
}
.more {
font-family: arial;
}
.friends b {
font-weight: normal;
}
td {
background-color: transparent!important;
border: none!important;
}
a:hover {
color: rgb(245, 18, 17)!important;
}

<style>
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}

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