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

tiffie ‧₊˚ 🍓 ⋅	1712515548 using :3 Report Comment
Ash	1711712966 using Report Comment
re1ra!	1711425814 USING Report Comment
karter <3	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