.+Strawberry Layout+.

Tags: pink, cute, strawberry, kawaii, blue, cottoncandycolours
Description:

.+This is my first layout so this may not be perfect, but it is cute! BTW: It is a work in progress.+.
Code:

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

<style>
.general-about .profile-pic img{
  clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
</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>

<style>
/* customizable heart styling */
.heart {
  color: pink;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px white;
}
@keyframes hearts-fall{0%{top:-10%}100%{top:100%}}@keyframes hearts-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.heart{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:hearts-fall,hearts-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.heart:nth-of-type(0){left:1%;animation-delay:0s,0s}.heart:nth-of-type(1){left:10%;animation-delay:1s,1s}.heart:nth-of-type(2){left:20%;animation-delay:6s,.5s}.heart:nth-of-type(3){left:30%;animation-delay:4s,2s}.heart:nth-of-type(4){left:40%;animation-delay:2s,2s}.heart:nth-of-type(5){left:50%;animation-delay:8s,3s}.heart:nth-of-type(6){left:60%;animation-delay:6s,2s}.heart:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.heart:nth-of-type(8){left:80%;animation-delay:1s,0s}.heart:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.heart:nth-of-type(10){left:25%;animation-delay:2s,0s}.heart:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="hearts"><div class="heart">♡</div><div class="heart">❀</div><div class="heart">♡</div><div class="heart">❀</div><div class="heart">♡</div><div class="heart">❀</div><div class="heart">♡</div><div class="heart">❀</div><div class="heart">♡</div><div class="heart">❀</div><div class="heart">♡</div><div class="heart">❀</div></div>
<style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h1{
  font-family: 'Lobster', cursive;
  font-size: 2.5em !important;
}
</style>

<style>
*{
  border-radius: 9px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}
</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>

<style>
body{
background-image:url(https://i.ibb.co/my7LvXf/Strawberry-2-backgrounds-wallpapers.gif);
height: 100%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

.profile {
background-image:url(https://i.ibb.co/30JTwLc/ppi.png);
  background-repeat: repeat;
    border-radius: 12px;
}

/*the username glow and shadow*/
h1
{
color: /*the username glow and shadow*/
h1
{         color:#Ffaec9;
//text-shadow: 1px 1px #99d9ea;
};

text-shadow: 2px 2px 3px #99d9ea, 0 0 25px #99d9ea, 0 0 5px pink;
}

h1, h2, h3, h4,h5,a, p, nav label, .section
{
main, top, links, nav .top, nav .links, details-table
{
    background:  !important;
background-image:   !important;
background-size: cover !important;
    padding: 0 !important;
    /*font-size: small;*/
    color: #b3e7fa;

{
.mood
text-transform:uppercase !important;
}

table, td
}

/* border: 1px solid var(--url-pink-bg)!important; */
border-spacing: 2px;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions
{
    width: 100%;
    border: 2px solid var(--#ffd1dc);
}

table, th, td
}

   border: 1px solid #ffd1dc;
   border-spacing: 2px;
}

.blog
}   

   border: 10px solid #ffd1dc;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions
}

   width: 100%;
   border: 4px outset #ffd1dc;
   margin 10px 2;
}

.online
{
  color: gold!important;
  //text-shadow: 1px 1px pink;
}

:root
{
--logo-blue: ;
--darker-blue: ;
--lighter-blue: purple 55;
--even-lighter-blue: ;
--lightest-blue: ;
--dark-pink: ;
--light-pink: ;
--even-lighter-pink: ;
--blue: ;

      
        --table-header:#ffd1dc;
--table-color: white;
--link-text: white;
--main-text: white;
    }   

main
{
  /* changes made to stuff outside of columns */
    background: blue;
    padding: 0;
    font-size: small;
    color: #b3e7fa;
text color: pink;
  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;
}

footer {
    border-radius: 15px;
    background-image: url (https://e1.pxfuel.com/desktop-wallpaper/332/166/desktop-wallpaper-strawberry-milk-aesthetic-posted-by-zoey-peltier-anime-strawberry.jpg);
    color: pink;
}

.comments-table{
display: block;
height: 500px;
overflow-y: scroll;
Border-radius: 15px;
color: pink;
  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000;
}

.contact {
  border-radius: 8px;
  background-image: url(https://i.ibb.co/wSWKf13/Screenshot-2023-01-02-082037.png);
  background-position: right top;
  background-repeat: repeat;
background-attachment: scroll;
Width: 310px;
Height:180px;
color: blue;
  text-shadow: 1px 1px 2px #Ffc9de, 0 0 25px #Ffc9de, 0 0 3px #Ffc9de;
}

.friends th, tr, .friends td, th, .icon, main, .comments-table, .friends, .profile-info, .table, .table-section,  .url-info, .mood, .blurbs, .blog-preview, .details,

{
border: 1px curve #000000 !important;
outline: curve !important;
}

img

{
border-radius: 12px;
}

main {
background:  blue;
border-radius: 14px;
padding: 0;
font-size: 85%;
color: #000000;
}

nav, footer, .profile .contact {
display: inherit !important;
opacity: 1 !important;
border-radius: 12px;
}

main {
background:  ;
border-radius: 12px;
border: 12px solid #000000;
padding: 0;
font-size: 90%;
color: #b3e7fa;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(gif or image url)
}

/*customising interests box*/
  .profile .table-section{
    border:2px solid #Fdc6c6;
    border-radius: 15px;
  }

  .profile .table-section .heading{
    background:#000000;
    border: 1px solid #Fdc6c6;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
  }

  .profile .table-section .heading h4{
    color: #Fdc6c6;
    text-shadow: 1px 1px 2px blue;
  }

  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }

/*customising friend space heading*/
  .profile .friends .heading{
    background: #Fdc6c6
    color: #ffffff;
    text-shadow: 1px 1px 2px blue;
    text-align: center;
  }

  .profile .friends .heading h4{
    text-align: center;
    color: #ffffff;
    text-shadow: 1px 1px 2px pink
  }

.general-about {
background-image: url(https://i.ibb.co/wSWKf13/Screenshot-2023-01-02-082037.png);
padding: 20px;
border-radius: 10px;
box-shadow: 4px 4px 0 #febab9;
text-align: center;
animation: nineties2 2s ease 0s infinite normal none;
animation-delay: .46s;
}

.profile .blurbs .section :nth-child(2) {
background-image: url(https://i.ibb.co/wSWKf13/Screenshot-2023-01-02-082037.png);
     /* margin-top: -5px; */
padding: 18px;

box-shadow: 4px 4px 0 #000;
}

.profile .profile-info .inner h3 {

filter: drop-shadow(3px 3px 0 #faa6d4);
margin: 0!important;
color:#FFF;

}
.profile .profile-info .inner h3 a {
color: #FFFFFF;
}

.profile .profile-info {
background-image: url(https://i.ibb.co/wSWKf13/Screenshot-2023-01-02-082037.png);
padding: 20px;
border: none;
border-radius: 10px;
box-shadow: 4px 4px 0 #2d1157;
text-align: center;
animation: nineties2 2s ease 0s infinite normal none;
animation-delay: .15s;
border: none;
}
</style>

<style>
.general-about .profile-pic img,
.comments-table,
.profile-info{
  border: 10px dashed #Ffc6dc;
}

.profile .blurbs .heading, .profile .friends .heading,
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  background: #Ffc6dc;
  color: #B5eafd;
}

.profile .blurbs .heading, .profile .friends .heading a,
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading a{
  color: #B5eafd;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions{
  border: 2px solid #Ffc6dc;
}
</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 )