Happy Tree Friends Flippy layout [check description for image]

Tags: happy tree friends, green, green and black, black

Description:

Link to an image of the layout on le average computer screen: https://i.ibb.co/r4Q84t2/Screenshot-2023-12-21-005234.png HACKSAW layouts used as template. Coded and tested through SpaceHey Layout Editor. Dark and twisted bear man go boom. Flippy/Fliqpy images are obscured when viewed vertically on phone in browser.

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@900&display=swap');

p{ font-family: 'Orbitron', sans-serif;

font-size: 100%;

color: white;

text-shadow: 1px 1px 1px black;

}

h1, h2, h3, h4, h5{

font-family: 'Orbitron', sans-serif;

font-size: 100%;

color: white;

text-shadow: 1px 1px 1px black;

}

body {

background:url(https://i.ibb.co/7vV9J9p/Untitled94-20231220210218.png);

}

main {

background:url(https://i.ibb.co/gVzTkBR/Untitled12-20231221003444.png) ;

border: none;

}

:root {

--logo-blue: transparent;

--darker-blue: white;

--lighter-blue: transparent;

--even-lighter-blue: transparent ;

--lightest-blue: transparent;

--dark-orange: white;

--light-orange:transparent;

--even-lighter-orange:;

--green: blue;

}

friends p, .friends a {

color: white;

}

a:hover {

     color: white;

   }

   a{

     color: white;

   }

}

    .count {

        color:white;

    }

.profile .friends .person p {

color: white;  

}

.profile .friends .person p:hover {

color:white;

}

friends p, .friends a {

color: white;

}

a:hover {

     color:white;

}

    .count {

        color: white;

    }

nav .top{

background-image:url(https://media.istockphoto.com/id/1277137302/vector/modern-black-camouflage-seamless-pattern-camo-vector-background-illustration-for-web-banner.jpg?s=612x612&w=0&k=20&c=iUn9J6xF6rZqMSRks3QdpAZBe54j53472RkydULCLMs=);margin: 1em 0;

text-align: center;

border-radius: 0px;

}

nav .links{

background-image:url(https://media.istockphoto.com/id/1277137302/vector/modern-black-camouflage-seamless-pattern-camo-vector-background-illustration-for-web-banner.jpg?s=612x612&w=0&k=20&c=iUn9J6xF6rZqMSRks3QdpAZBe54j53472RkydULCLMs=);border-radius: 0px;

display: flex;

flex-wrap: wrap;

justify-content: space-around;

font-style: italic;

}

.profile .contact .heading,

.profile .table-section .heading{

color: #FFFFFF;

background-image: blue;border-radius: 25px;

text-align: center;

padding: .1em;

}

.profile .blurbs .heading,

.profile .friends .heading{

color: #FFFFFF;

background-image: transparent;border-radius: 25px;

text-align: center;

padding: .1em;

}

footer {

color: white;

box-shadow:transparent;

text-decoration:;

text-decoration-style:;

background-image:url(https://media.istockphoto.com/id/1277137302/vector/modern-black-camouflage-seamless-pattern-camo-vector-background-illustration-for-web-banner.jpg?s=612x612&w=0&k=20&c=iUn9J6xF6rZqMSRks3QdpAZBe54j53472RkydULCLMs=) ;

border: 10px solid black;

}

body { cursor: url(https://cur.cursors-4u.net/others/oth-5/oth454.cur), auto; }

}

a:hover {

     color: white;

}

nav{

font-size: 13px !important;

font-family: 'Orbitron', sans-serif;

text-shadow: 1px 1px black;

text-transform:none;

padding-left:3px;

text-align: center;

}

/* contact icons */

.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://i.ibb.co/q75YbBH/Untitled89-20231219100358.png);

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorite */

content: url(https://i.ibb.co/q75YbBH/Untitled89-20231219100358.png);

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* send a message */

content: url(https://i.ibb.co/q75YbBH/Untitled89-20231219100358.png);

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* forward to friend*/

content: url(https://i.ibb.co/q75YbBH/Untitled89-20231219100358.png);

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content:
url(https://i.ibb.co/q75YbBH/Untitled89-20231219100358.png);

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: url(https://i.ibb.co/q75YbBH/Untitled89-20231219100358.png);

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add 2 group */

content: url(https://i.ibb.co/q75YbBH/Untitled89-20231219100358.png);

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report */

content: url(https://i.ibb.co/q75YbBH/Untitled89-20231219100358.png);

}  

.friends {

    overflow: scroll;

    overflow-x: scroll;

    overflow-x: hidden;

    height: 300px;

}

count, .friends a p {

color: black;

}

.general-about .profile-pic img {

border: 10px solid black;

border-color: solid green 60 fill round;

box-shadow: 0px 0px 0px 0px #30472e;

 }  

.profile .friends .person img:not(.icon) {

box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.3);

border: 10px solid black ;

}

main:before {

width: 100%;

height: 300px;

display: block;

content: "";

background-image: url(https://i.ibb.co/F4s0BrN/Untitled99-20231220220421.png);

background-position: center center;

background-size: cover;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;
  }

</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.