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

⋆. 𐙚˚࿔ 𝒮𝒾𝓁ℯ𝓃ℰ_𝒮𝓉ℯ𝓃𝒪𝓅𝒽𝓎𝓁𝓁𝒜 𝜗𝜚˚⋆	1773243522 Using :) Report Comment
Nana !	1767424428 Using! Report Comment
brielle	1766093796 using!! Report Comment
brielle	1766093768 using! Report Comment
Hannah	1750966641 using Report Comment
misa	1737754462 usiiiingggg Report Comment
misa	1737754462 usiiiingggg Report Comment
XdsSayUubX	1737668380 USING >D Report Comment
Chris ˚˖𓍢ִִ໋🌊🦈˚˖𓍢ִ✧˚.	1733402334 using! Report Comment
★,°:.☆☆kirara☆☆.:°,★	1732990434 using Report Comment
Alicia	1730500385 Using Report Comment
Damian	1730054749 Using Report Comment
𖦹˚. ꒷ 𝑲𝓲𝓴𝓲 ! ֺ۪ 💿	1728660794 Using!! Report Comment
Layla!!	1725028448 Usinggg!! Report Comment
Liz_hk	1722721088 using Report Comment
homyakov kobyakov💉	1717355978 using !! Report Comment
oliver ☆	1716709951 OMGEE USING Report Comment
tiffany ᢉ𐭩 ⋆.˚	1712515548 using :3 Report Comment
aliennalex¡	1711712966 using Report Comment
leiny_	1711425814 USING Report Comment