strawberry layout

Tags: strawberry, pink, red

Description:

La verdad es que no me gusto como me quedo pero son las 2 de la mañana y me quiero ir a dormir :b ¡NINGUNO DE LOS CODIGOS SON MIOS! YO LOS MODIFICO PARA DARLE OTRA FACHADA AL LAYOUT. La frutilla que esta de fondo en el container, gira! Si te gusto, deja tu comentario :D

Preview:

click on the image for a larger preview

Code:

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

<style>


    .online{
    font-family: 'Signika Negative', italic;
    color: white;
    font-size: 20px;
    text-shadow: 1px 1px 2px #ff4d4d;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1.0,0,0,1.0);
    animation-duration: 2s;
    }
    
    .online img{
    display: none;
    }
    
    
    @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');
    
        body
            {background: url("https://wellnessbykatharine.com/wp-content/uploads/2020/05/Strawberries-Slider-EMPTY-2.jpg")
            no-repeat fixed; background-size:cover;
    
         }
    
    nav .top{
    background-color: #fd3a54;
    border-radius: 40px;
    border: 2px solid #fd8e8e;
    box-shadow: inset 2px 3px 5px #fcbdcd;
    margin: 1em 0;
    }
    
    nav .links{
    background-color: transparent ;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-style: 'Signika Negative', italic;
    }
    
    nav .links li::after{
    display: none;
    }
    
    main
    {background: url("https://media3.giphy.com/media/k5dX3BHkIQAqWRnT1H/giphy.gif")
            no-repeat fixed; background-size:1500px;
            border-radius: 40px;
    
         }
    
    .profile h1{
    font-family: 'Signika Negative', cursive;
    color: white;
    text-shadow: 1px 1px 2px #ff4272;
    font-size: 25px;
    <style>
    
    }
    <style>
    
    
    .profile .general-about{
    color: white;
    font-style:'Signika Negative', italic;
    text-shadow: 1px 1px 2px #ff4272;
    }
    
    .profile .blog-preview,
    .profile .mood{
    color: white;
    font-style: 'Signika Negative', italic;
    }
    
    .profile .profile-pic img{
    border-radius: 20px;
    box-shadow: 1px 1px 2px #ff4272;
    opacity: 1;
    }
    
    .profile .contact .heading,
    .profile .table-section .heading{
    font-family: 'Signika Negative', cursive;
    color: white;
    background-color: #ff748c;
    border-radius: 20px 20px 0 0;
    border: 2px solid #ff748c;
    box-shadow: inset 2px 3px 5px #ffdde5;
    text-align: center;
    padding: .5em;
    font-size: 15px;
    }
    
    .profile .table-section,
    .profile .contact,
    .profile .url-info{
    border-radius: 20px;
    border: 2px solid #ffdde5;
    box-shadow: inset 2px 3px 5px #ffdde5;
    text-shadow: 1px 1px 2px #ff748c;
    font-style:'Signika Negative', italic;
    color: white;
    }
    
    table.details-table td 
    {
    background-color: transparent !important;
    color: white !important;
    font-style: italic !important;
    }
    
    .profile .blurbs .heading,
    .profile .friends .heading{
    color: white;
    font-family: 'Signika Negative', cursive;
    background-color: #ff748c;
    border-radius: 20px 20px 0 0;
    border: 2px solid #ff748c;
    box-shadow: inset 2px 3px 5px #ffdde5;
    text-align: center;
    padding: .5em;
    font-size: 15px;
    }
    
    .profile .blurbs,
    .profile .friends{
    border-radius: 20px;
    border: 2px solid #ffdde5;
    box-shadow: inset 2px 3px 5px #ffdde5;
    text-shadow: 1px 1px 2px #ff748c;
    font-style: 'Signika Negative', italic;
    color: white;
    }
    
    .profile .friends{
    text-align: center;
    }
    
    .profile .friends-grid .person p{
    color: white;
    }
    
    .profile .blurbs .section h4{
    color: white;
    padding: .5em;
    }
    
    <style>
    
    .profile .comments-table{
    background-color: #ff8fab;
    border-radius: 20px;
    border: 2px solid #ffdde5;
    box-shadow: inset 2px 3px 5px #ffdde5;
    font-style: italic;
    color: white;
    }
    
    .profile .comments-table td{
    background-color: transparent;
    }
    
    .profile .comments-table .comment-replies{
    background-color: #ff8fab;
    border-radius: 20px;
    border: 2px solid #ffdde5;
    box-shadow: inset 2px 3px 5px #ffdde5;
    font-style:'Signika Negative', italic;
    color: white;
    }
    
    .comments-table img,
    .person img{
    border-radius: 20px;
    box-shadow: 1px 1px 2px #ff748c;
    filter: sepia(100%) hue-rotate(299deg);
    opacity: .5;
    }
    
    
    footer{
    background-color: #ff8fab;
    border-radius: 20px;
    border: 2px solid #ffdde5;
    box-shadow: inset 2px 3px 5px #ffdde5;
    font-style: 'Signika Negative', italic;
    color: white;
    }
    
    .count{
    color: #ff4272;
    }
    
    a{
    color: #fffdda;
    text-shadow: 1px 1px 2px #ff748c;
    }
    
    a:visited {
    color: #fffdda;
    text-shadow: 1px 1px 2px #ff748c
    }
    
    a:hover {
    color: white;
    }
    
    a:active {
    color: #fffdda;
    text-shadow: 1px 1px 2px #ff748c;
    }
    
    nav .links a:hover{
    text-decoration: underline;
    color: #fffdda;
    }
    .profile-pic img:hover{
      animation: rotation 0.3s infinite linear;
    
    }
    footer::after{
      bottom: -30%;
      font-size:0;
      left: 77%;
      position:fixed;
      pointer-events: none;
      content:url("");
    }
    <div style="float: ; max-height: 800px; position: fixed; left: 1px; bottom: 0px; z-index:200;">
    <img src="https://media.tenor.com/un_1UBmXMNAAAAAi/strawberry.gif" height="360"/>
    
    
    
    
    
    
    <div style="float: ; max-height: 800px; position: fixed; right: 1px; bottom: 0px; z-index:200;">
    <img src="https://media.tenor.com/un_1UBmXMNAAAAAi/strawberry.gif" height="360"/>
    
    <!-- (c) Layout created by zzzombiekitten (https://layouts.spacehey.com/layout?id=100825) -->
    
    <style>
    .comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://cdn-icons-png.flaticon.com/512/69/69495.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
    
    .profile .friends .person img {-webkit-mask-image: url( https://cdn-icons-png.flaticon.com/512/69/69495.png );-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
    </style>
    
    <style>
    @keyframes spin{
      from{ transform:rotate(0deg); }
      to{ transform:rotate(0deg); }
    }
    .general-about .profile-pic img{
      border-radius: 50%;
      animation: spin 7s infinite linear;
    }
    </style>
    
    <style>
    @keyframes spin{
      from{ transform:rotate(0deg); }
      to{ transform:rotate(-360deg); }
    }
    .general-about .profile-pic img{
      border-radius: 50%;
      animation: spin 7s infinite linear;
    }
    </style>
  <div class="snowflakes">
    <div class="snowflake"><img src="https://files.catbox.moe/3ozzaa.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/xdhc73.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/d375rz.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/mlw3g4.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/twn9av.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/hf4ztv.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/sytodu.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/sytodu.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/3ozzaa.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/hf4ztv.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/xdhc73.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/twn9av.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/d375rz.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/mlw3g4.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/twn9av.png"/></div>
    <div class="snowflake"><img src="https://files.catbox.moe/hf4ztv.png"/></div>
    </div>
    
    
    <style>
    .snowflake {
    font-size: 16px;
    }
        @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
    </style>
    
    <style>
    body:before {
        content: " ";
        height: 100vh;
        width: 100vw;
        display: block;
        position: fixed; 
        top: 0; 
        left: 0; 
        z-index: 100;
        background-image: url('https://media1.tenor.com/m/zD892GVsXZ8AAAAd/aikatsu-aikatsu-stars.gif');
        background-size: cover;
        background-repeat: no-repeat;
    background-position:center;
        animation: yourAnimation 4s ease 0s 1 normal forwards;
        pointer-events: none;
    }
    @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
    
    <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 16 of 16 comments ( View all | Add Comment )

Chris ˚˖𓍢ִִ໋🌊🦈˚˖𓍢ִ✧˚.	1733402334 using! Report Comment
_Eno_	1732990434 using Report Comment
Alicia	1730500385 Using Report Comment
Damian	1730054749 Using Report Comment
⋆ ˚｡⋆୨୧˚ Kiki (^_^♪)	1728660794 Using!! Report Comment
Layla!!	1725028448 Usinggg!! Report Comment
Princess_hk	1722721088 using Report Comment
homyakov kobyakov💉	1717355978 using !! Report Comment
oliver ☆	1716709951 OMGEE USING Report Comment
tiffie ‧₊˚ 🍓 ⋅	1712515548 using :3 Report Comment
Al3x1	1711712966 using Report Comment
leiny_	1711425814 USING Report Comment
✩ karter ✩	1710349908 using!!! Report Comment
nerd !?	1710284315 using!! soo cute :3 Report Comment
nescafe	1710268623 Hi, wow this is so beautiful! I was looking for something in reference to the anime Nana and this was a great fit! Thank you very much! 💕💕 Report Comment
nescafe	1710268623 Hi, wow this is so beautiful! I was looking for something in reference to the anime Nana and this was a great fit! Thank you very much! 💕💕 Report Comment