green and white layout

Tags: green, kpop, simple, layout

Description:

green and white layout i made for a friend, has a loona mv embed already on there + a pink cursor + float animation pls comment and feel free to add me if u use

Preview:

click on the image for a larger preview

Code:

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

<style>

<iframe width="560" height="315" src="https://www.youtube.com/embed/rlje-6Kaysk?start=157" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>



MAIN {
    background-color: #ffffff;
    border: 10px groove #c8e2a8; }

main:before {
    background-image: url(https://media.discordapp.net/attachments/1028714151666794507/1097959607038656703/IMG_0701.jpg);
    content: "";
    width: 100%;
    height: 100px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
}

main:after {
    background-image: url(https://media.discordapp.net/attachments/1028714151666794507/1097959607038656703/IMG_0701.jpg);
    content: "";
    width: 100%;
    height: 100px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
}


</style>

<style>

    body {
        background-image: url("https://i.pinimg.com/564x/68/c0/40/68c040c4e589c7e9766bf753ec1d5deb.jpg");
        background-size: 400px;
    }
    
    nav img.logo {
        filter: brightness(0) saturate(10%) invert(10%) sepia(10%) saturate(100%) hue-rotate(0deg) brightness(10%) contrast(10%);
    }
    
    nav .top {
        background: #c8e2a8;
        margin-bottom: 1rem;
        border-width: 10px;
        border-style: groove;
        border-left-color:#c8e2a8;
        border-right-color: #c8e2a8;
        border-top-color: #c8e2a8;
    border-bottom-color: #c8e2a8; 
    }
    
    form > button {
        font-family: 'Balsamiq Sans';
        font-size: 13px;
        color: gray;
        background-color: #ffffff;
        border: 2px solid gray;
        border-radius: 4px;
        text-transform: lowercase;
    }
    
    [id='q'] {
        border: 2px solid gray;
        border-radius: 4px;
    }
    
    label {
        font-family: 'Balsamiq Sans';
        font-size: 13px;
        color: gray;
        text-transform: lowercase;
        font-weight: bold;
    }
    
    nav .top .right {
        font-family: 'Balsamiq Sans';
        color: gray;
        font-weight: bold;
        text-transform: lowercase;
    }

nav .links {
margin-bottom: 1rem;
background-color: #c8e2a8;
padding: 3px;
text-align: center;
border-width: 10px;
  border-style: groove;
    border-left-color: #c8e2a8;
    border-right-color: #c8e2a8;
    border-top-color: #c8e2a8;
    border-bottom-color: #c8e2a8;
    }
    
    nav .links a {
        font-family: 'Balsamiq sans';
        font-size: 14px;
        color: gray;
        text-transform: lowercase;
        text-shadow: 1px 0 10px white;  
    }
    
    .profile .contact .heading {
        text-align: center;
        background-color: #c8e2a8;
        box-shadow: 1.5px 1.5px 1.5px 1.5px green;
    }
    
    .profile .contact {
       
        text-transform: lowercase;
    }
    
    a {       
        font-family: 'Balsamiq sans';
        font-size: 14px;
        color: grey;
    }
    
    a:hover {
        color: lightblue;
        text-decoration: wavy underline;
    }
    
    .profile .url-info {
        text-align: center;
        border-color: transparent;
        color: gray;
    }
    
    .profile .table-section .heading {
        text-align: center;
        background-color: #c8e2a8;
        box-shadow: 1.5px 1.5px 1.5px 1.5px green;
        margin-bottom: 0.8rem;
    }
    
    .profile .table-section {
        
    }
    
    .profile .blurbs .heading {
        text-align: center;
        background-color: #c8e2a8;
        box-shadow: 1.5px 1.5px 1.5px 1.5px green;
    }
    
    .details-table td {
        background-color: #c8e2a8;
        box-shadow: 1px 1px 1px 1px green;
    }
    
    .details-table td * {
        text-align: center;
        background-color: #c8e2a8;
    }
    
    .profile .friends .heading {
        text-align: center;
        background-color: #c8e2a8;
        box-shadow: 1.5px 1.5px 1.5px 1.5px green;
    }
    
    table.comments-table {
        border-spacing: 0.5em 0.5em;
        border: 3.5px dotted green;
        display: block;
        height: 400px!important;
        overflow-y: scroll;
      }
    
    .comments-table td {
        box-shadow: 1px 1px 1px 1px green;
    }
    
    .profile .blurbs .section h4 {
        font-size: 14px;
        color: grey;
        text-align: center;
 }

    .count{
        color: grey;
    }
    
    :root {
        --logo-blue: #c8e2a8;
        --darker-blue: #c8e2a8;
        --lighter-blue: #c8e2a8;
        --even-lighter-blue: #c8e2a8;
        --lightest-blue: #c8e2a8;
        --dark-orange: #c8e2a8;
        --light-orange: #c8e2a8;
        --even-lighter-orange: #c8e2a8;
    }
    
.contact .inner a img {
    font-size: 0;
    }
    
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: url("https://cur.glitter-graphics.net/pub/72/72870cmxjrny8yc.gif");
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url("https://cur.glitter-graphics.net/pub/72/72870cmxjrny8yc.gif");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url("https://cur.glitter-graphics.net/pub/72/72870cmxjrny8yc.gif");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url("https://cur.glitter-graphics.net/pub/72/72870cmxjrny8yc.gif");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url("https://cur.glitter-graphics.net/pub/72/72870cmxjrny8yc.gif");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url("https://cur.glitter-graphics.net/pub/72/72870cmxjrny8yc.gif");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url("https://cur.glitter-graphics.net/pub/72/72870cmxjrny8yc.gif");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
content: url("https://cur.glitter-graphics.net/pub/72/72870cmxjrny8yc.gif");
}

.profile .friends .person img:not(.icon) {
border-radius: 100px; 
}

.general-about .profile-pic img{
border-radius: 15px;
}

DIV.friends-grid {
    
}

footer {
    background-color: #c8e2a8;
    border-width: 10px;
    border-style: groove;
    border-left-color: #c8e2a8;
    border-right-color: #c8e2a8;
    border-top-color: #c8e2a8;
    border-bottom-color: #c8e2a8;
}

.online { /*online icon*/
content: url("http://dl3.glitter-graphics.net/pub/115/115393wnio1b4fjb.gif"); 
}

button {
    background-color: #c8e2a8;
    border: 2px solid gray;
    font-family: 'Balsamiq Sans';
    color: grey;
}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur265.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/01/light-pink-pointer.html" target="_blank" title="Light Pink Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Light Pink Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>
 
 <style>
font-family: 'Balsamiq Sans';
</style>

<style>
p,h1,h2,h3,h4,h5{
font-family: 'Balsamiq Sans';
font-size: 15px;
color: grey;
text-transform: lowercase;
}
</style>

<style>
 font-family: Courier New, monospace;

.profile h1 {
font-family: 'Coiny', cursive;
text-transform: uppercase;
font-size: 55px;
color: #76b592;
text-shadow: 2px 2px #c8c7d7;
text-align: center;
padding: 10px;
}
</style>

<style>

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "games";
  --topic2: "music";
  --topic3: "movies/shows";
  --topic4: "name";
  --topic5: "name";
  --topic6: "name";

 }

<style>

<style>

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

</style>


<style>

.contact .heading h4{
display:none !important;}


</style>


blah blah blah

<iframe width="560" height="315" src="https://www.youtube.com/embed/rlje-6Kaysk?start=157" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

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

iris <33	1729033527 using!! Report Comment
ORBITfilips	1727276479 tyy!!!!! Report Comment
puponweb	1721350243 using! Report Comment
ivev.	1717215315 using! Report Comment
Daniela	1713571416 Using Report Comment
kimlipz	1707780179 usingg!! Report Comment
mina	1704394692 using !! Report Comment
Cari ౨ৎ	1697064234 using :3 Report Comment
matcha	1688029086 using!! Report Comment
jieru	1684080304 using! i love it sm it's so cute Report Comment
Charlie	1683920271 Using, thank youuu💐💐 Report Comment
Zelda rivia	1683816424 using it ! thx a lot!! its super cute Report Comment
¡ bleurie !	1682512864 using!! tysm!! :3 Report Comment
natalie	1682162424 using ty!! Report Comment
ᯓ★ alex (cutie pie)	1682094790 using Report Comment