CAOS' Layer

Tags: gwainsaga, free, creativecommons, community

Description:

[EN/ESP]

This is more of a personal layout, and it isn't as elaborate as many others. But alas, if you want to learn how to use them layouts, HTML and CSS, you can use mine as a base. Just comment if it was any helpful on your customization and that will be enough. I would recommend erasing them comments (the /**/ lines) but use it as you'd like. And remember, try to improve it with your OWN images, gifs, colors, whatever you like.

Love yall 💜.

UPDATE 1

Added contact icons and more custom fonts, font colors, background colors and the "spacehey" logo changed to a custom by good fella Shynneii. Also the backgroun image no longer repeats and is still.

Preview:

click on the image for a larger preview

Code:

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

<style>
/*Importar Fuentes//Import fonts.*/
@import url('https://fonts.googleapis.com/css2?family=Agdasima&family=Caprasimo&family=Caveat&family=Chakra+Petch:wght@300&family=Pacifico&family=VT323&display=swap');

/*Fondo de pantalla//Background image*/
body {background: top/100% url(https://simkl.in/fanart/77/77274123f6b430fdc_w.jpg); background-attachment: fixed;}

/*Cuadro Blog//Blog space (to make it stand out)*/
DIV.blog-preview{
text-align: center;
font-family: 'Agdasima';
font-size: 25px;
background-color:rgba(255, 128, 128, 0.7);
color: black;
border-radius:15px;
border: 5px dotted rgba(0, 0, 255, 0.65)
}

/*SPLASHSCREEN*/
.splash{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100%;
background: black;
z-index: 200;
opacity:1;
animation: fadeOut 4s ease-in forwards;
}

@keyframes fadeOut{
to{
z-index: -10;
opacity: 0;
}
}

main {

/*Borde de la página//Page Border*/
background: rgba(128, 255, 255, 0.6);
border-radius:15px;
border: 2px dotted rgba(128, 0, 255, 1)
}

/*Cuadros Internos//Inner Blocks (blurbs, friends, etc)*/
.profile .blurbs .heading, .profile .friends .heading {
color: BLACK;
background-color:rgba(128, 255, 128, 0.4);
text-transform:lowercase !important;
color: purple;
border-radius:15px;
border: 3px dotted rgba(0, 0, 255, 0.8)
}

/*"ONLINE" texto e imagen//Text and image*/
.online{
font-family: 'Caprasimo';
color: purple;
font-size: 20px;
text-shadow: 1px 1px 2px #AC3862;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2.5s;
}

.online img{
animation-duration: 2.5s;
}

/*Literalmente cualquier otro texto//Literally any text on screen*/
.profile .blurbs .section {
font-family: 'Chakra Petch';
font-size: 15px;
color: black;
}

/*Cambiar Logo//Change Logo*/
.logo{content: url(https://external-media.spacehey.net/media/s5dNpjJw6vYaMOuZyRv-CsObGAv9upU53W4UYspTuyBA=/https://media.discordapp.net/attachments/951319079527022652/1128491499575845024/252_sin_titulo_20230711190141.png);}

/*DETALLES. ESTADO Y ASÍ.//Status, Mood and that stuff*/
.details {
font-weight: bold;
font-size: 15px;
}

/*Nombre!!//Name Color&Font*/
.profile h1{
font-family: 'VT323';
font-size: 30px;
color: purple;
}

/*Colores de links//Links colors*/
a{
text-shadow: #F00 2px 0 12px;
color: #4d1294;
}
a:hover{
text-shadow: #F00 2px 0 12px;
color: #ff00ff;
}

/*Fuente de textos títulos//Titles' font*/
.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .setting-section .heading h4, .statistics .heading h4  {
font-family: 'Pacifico';
font-size: 16px;
color: darkblue;
}

/*Cuadros de contacto/info//Info&Contact box*/
.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading{
background: #8000809e;
}

/*Color Punto Principal//Main bar color (All the way top)*/
nav .top{
background: #ffbfff;
}

/*Color Opciones//Options color (below main bar)*/
nav .links{
background: #cf99fb;
}

/*Color Texto Principal//Main Text color*/
nav .top, .logout-btn, .logout-form{
color: black;
text-shadow: #F00 2px 0 12px;
}

/*Texto del Mood//Mood text color*/
.mood {
font-family: 'Caveat';
font-size: 25px;
}

/*Color Comentarios ETC//Comments box color*/
.comments-table td:first-child, .music-table td:first-child{
background: #a349a4;
}
.comments-table td, .music-table td{
background: #d6a3d6;
}

/*ICONOS CONTACTO//Contact icons*/
.contact .inner a img {
    font-size: 0;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before{
content: "🧨";
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before{
content: "💜";
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{
content: "📮";
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
content: "⏯";
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
content: "🎈";
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before{
content: "✋🏽";
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before{
content: "🍕";
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before{
content: "💀";
}


</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/gNP6rACrTco//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
/*Música De Fondo//Background Music*/
</iframe>

<div style="float: ; max-width: 100%; height: auto; position: fixed; right: 1px; bottom: 9px; z-index: 0;"><img src="https://staging.cohostcdn.org/attachment/eb219625-1f34-409e-8aac-7f9be8bf24db/download%20(4).png" alt="literalmente_yo" style="width: 50%; height: 50%;"/>/*Imagenes flotantes//Little Pop-Ups (use a href to put hyperlinks)*/</div>

<div style="float: ; max-width: 100%; height: auto; position: fixed; right: 1100px; bottom: 9px; z-index: 0;"><img src="https://media.tenor.com/V8nbGkJJ7ScAAAAd/chao-garden-chao-sonic.gif" alt="tambien_yo" style="width: 50%; height: 50%;"/></div>

<div style="float: ; max-width: 100%; height: auto; position: fixed; right: 1300px; bottom: 350px; z-index: 10;"><img src="https://i.gifer.com/origin/88/8874e9e1104e85d8e3369d739878aebe_w200.webp" alt="dum" style="width: 50%; height: 50%;"/></div>

<div class="splash">
/*Código del splashscreen//ACTUAL Splashscreen code*/
<img src="https://media.tenor.com/L51UsjMFSqAAAAAM/oomfie-twitter.gif" style="display: block; margin-left: auto; margin-right: auto; width: 60%;"/>
</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 )