alcohol free by twice themed layout

Tags: twice, summer, hibiscus

Description:

This is just a summer/alcohol-free (TWICE) layout i worked on today. I mostly only put this together, I did not create all of the codes, but rather learnt them from other users/the internet. credits in particular to pupupowa for the box layouts (padding coding). No need to give credits if used, although I don't really think anyone will use this as it seems a bit niche for spacehey

Code:

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

<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://64.media.tumblr.com/d278eafb96f00d6b4f7333a7f74a5e5e/4e1f2fc0b583f140-24/s1280x1920/f0b6b0b16108bc4b479d2fc44c0daa19a8fbba0a.gifv');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 2s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
nav, footer {
	margin: 1em;
	position: relative;
	box-shadow: 0px 0px 20px #ba2243;
</style>


<style>
  @import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');
p{ 
font-family: 'Cherry Bomb One', cursive;
font-family: 'Cherry Bomb One', cursive;
color: #ffae00;
font-size: 150%
</style>

<style>
h1, h2, h3, h4, h5 {
font-family: 'Cherry Bomb One', cursive;
font-size: 150%;
color: #ffae00;
background: -webkit-linear-gradient(left, #ff0059, #ffa600);
</style>

<style>
.profile {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.profile {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes float {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, -0px);
}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-8/nat793.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/09/20/flower-56.html" target="_blank" title="Frangipani Flower"><img src="https://cur.cursors-4u.net/cursor.png" alt="Frangipani Flower" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
   body {
   background-image:url(https://i.pinimg.com/564x/35/c4/1a/35c41a16adc4c04ab546155189cf011b.jpg);

}
footer {
background-image: url(https://64.media.tumblr.com/d94d9761b65d73184ab77c464243579e/f45388b3270190a3-8b/s1280x1920/d16a72311a3a96babf15365a20644f8e7015c9ea.jpg);
box-shadow: 0px 0px 20px #ff007b;
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
</style>

<style>
main:before {
	width: 94.5%;
	height: 250px;
	display: block;
        content: "";
	background-image: url(https://64.media.tumblr.com/055b2987b43ed017eb0f12fa358868f7/910b1c353bfc94d1-40/s540x810/23aec2053cb2c41860134457433eae6414c47e6d.gifv);
	background-position: center center;
	background-size: cover;
box-shadow: 0px 0px 20px #ff007b;
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

}
main {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes float {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, -0px);
</style>

<style>
.profile {
background-image: url(https://64.media.tumblr.com/28d3295d729d12e9110a1740582b1792/da66cff80914c06e-13/s500x750/2c7dd6c94aed8c989df26b668548da1564b925f1.gifv);
box-shadow: 0px 0px 20px #ff007b;
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;

}
h1 {
     background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

} 
.general-about .profile-pic img{
-webkit-mask-image:
url(https://assets.stickpng.com/images/5954be4edeaf2c03413be356.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
transform:scale(1.025,1.025);
position:relative;
top:-0.25em;

}
.blurbs {
background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

}
.blog-preview {
background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

}
.contact {
background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

}
table-comments {
background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

}
.friends {
background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

}
.friends-icons {
-webkit-mask-image:
url(https://assets.stickpng.com/images/5954be4edeaf2c03413be356.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
transform:scale(1.025,1.025);
position:relative;
top:-0.25em;


}
.table-section {
background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

}
.mood {
background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

} 
.general-interests {
background-color: rgba(255, 31, 102, 0.5);
padding: 20px;
border: groove #ff1f66 3px;
outline: groove #ff1f66 2px;
border-radius: 32px;
box-shadow: 0px 0px 20px #ff007b;

}
.online {
content: url(https://dl.glitter-graphics.com/pub/1405/1405444elmb9wgmf2.gif);

}
:root {
    --logo-blue: url(https://64.media.tumblr.com/d94d9761b65d73184ab77c464243579e/f45388b3270190a3-8b/s1280x1920/d16a72311a3a96babf15365a20644f8e7015c9ea.jpg);
    --darker-blue: #ffea4d;
    --lighter-blue: #ffea4d;
    --even-lighter-blue: #fff49e;
    --lightest-blue: #ffea4d;
    --dark-orange: #ffea4d;
    --light-orange: #ffea4d;
    --even-lighter-orange: #ffea4d;
    --green: #ffea4d;

</style>

<style>
.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 {
	content: '🌺'
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	content: '🌺'
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	content: '🌊'
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	content: '🌊'
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	content: '🍹'
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	content: '🍹'
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	content: '🐚'
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	content: '🐚'
}
</style>

<iframe width="1" height="1" src="https://www.youtube.com/embed/XA2YEHn-A8Q//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"> 
</iframe>

/* Put your about me text here, otherwise the div coding will screw up the text fsr*/

<div style="float:  ; &#10;max-height: 500px; &#10;position: fixed; &#10;right: -200px; &#10;top: -100px; &#10;z-index: 300;"><img src="https://cdn140.picsart.com/359921011018211.png?to=crop&type=webp&r=1456x1456&q=85" width="250" height="250"/>
</div>

<div style="float:  ; &#10;max-height: 500px; &#10;position: fixed; &#10;left: -200px; &#10;top: 850px; &#10;z-index: 300;"><img src="https://cdn140.picsart.com/359921011018211.png?to=crop&type=webp&r=1456x1456&q=85" width="250" height="250"/>
</div>

<div style="float:  ; &#10;max-height: 500px; &#10;position: fixed; &#10;left: -150px; &#10;top: 175px; &#10;z-index: 300;"><img src="https://cdn140.picsart.com/359921011018211.png?to=crop&type=webp&r=1456x1456&q=85" width="200" height="200"/>
</div>

<div style="float:  ; &#10;max-height: 500px; &#10;position: fixed; &#10;right: -150px; &#10;top: 550px; &#10;z-index: 300;"><img src="https://cdn140.picsart.com/359921011018211.png?to=crop&type=webp&r=1456x1456&q=85" width="200" height="200"/>
</div>

<div style="float:  ; &#10;max-height: 500px; &#10;position: fixed; &#10;left: -100px; &#10;top: -375px; &#10;z-index: 300;"><img src="https://cdn140.picsart.com/359921011018211.png?to=crop&type=webp&r=1456x1456&q=85" width="150" height="150"/>
</div>

<div style="float:  ; &#10;max-height: 500px; &#10;position: fixed; &#10;right: -150px; &#10;bottom: -100px; &#10;z-index: 300;"><img src="https://cdn140.picsart.com/359921011018211.png?to=crop&type=webp&r=1456x1456&q=85" width="200" height="200"/>
</div>

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.