HTML, CSS and JavaScript playground

}
 
html {
	overflow: scroll;
	overflow-x: hidden;

}
</style>
<div class="box">
	<div align="center">
		<text><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">title text</font></font>
		</text>
	</div>
	<br><font size="2.75 em"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   </font>

* PLEASE CREDIT LOBILLES WHEN REMAKING *

--- MAIN CONTAINER ---
#elementID > .wrapper {
padding: 0.3em;
border-radius: 0px 13px 13px 13px;
width: 60%;
right: 7px;
}

--- NAME TEXT ---
#elementID {
font-family: 'fenotype';
background: linear-gradient(to top, #828DF5 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px #585C82;
-webkit-filter: drop-shadow(0px 0px 1px #656A96);
}

--- MAIN IMAGE ---
#elementID .frame {
border-radius: 13px 13px 0px 0px;
}

--- SCROLLBOX ---
#elementID{
overflow: auto;
height: 5em;
border-radius: 0px 0px 13px 13px;
border: 1px solid #585C82;
border-top: 0px;
padding: 6px;
background: #FFE6EF;
}

#elementID a {
text-decoration-style: dotted;
}

--- BUTTONS ---
#elementID li a {
position: relative;
bottom: 3em;
left: 7.8em;
width: 3.4em;
height: 2.6em;
font-family: 'fenotype';
-webkit-text-stroke: 0.6px #656A96;
font-size: 12px;
border: 1px solid #585C82;
padding: 4px;
z-index: 3;
}

@media only screen and (max-width: 600px) {
#elementID li a {
position: relative;
bottom: 4em;
left: 8.8em;
font-size: 9px;
width: 3.6em;
line-height: 1.7em;
}
}

--- CONTAINER with IMAGE ---
#elementID > .wrapper {
width: 40%;
height: 8.2em;
padding: 0.3em;
background: radial-gradient(circle, #FFFFFF 0%, #828DF5 50%, #FFFFFF 100%);
border-radius: 13px;
animation: blur 1s ease;
position: absolute;
bottom: 4.2em;
right: 0.15em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
height: 8.5em;
bottom: 4.7em;
right: 0.25em;
}
}

--- PNG IMAGE ---
#elementID .frame {
position: relative;
top: 10px;
}

--- SCROLLABLE CONTAINER ---
#elementID > .wrapper {
width: 40%;
height: 8.2em;
padding: 0.3em;
background: linear-gradient(180deg, #828DF5 0%, #FFFFFF 50%, #828DF5 100%);
border-radius: 13px;
overflow: auto;
animation: blur 1s ease;
position: absolute;
bottom: 4.2em;
right: 0.15em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
height: 8.5em;
bottom: 4.7em;
right: 0.25em;
}
}

--- MARK TEXT ---
#elementID, #elementID, #elementID {
font-family: 'fenotype';
-webkit-text-stroke: 0.5px #6E7174;
-webkit-filter: drop-shadow(0px 0px 0.9px #656A96);
background-image: radial-gradient( #585C82 20%, #585C82 20% , transparent 80%);
}

--- INFO TEXT ---
#elementID, #elementID, #elementID {
background: white;
border: 1px solid #585C82;
border-radius: 13px;
padding: 0.3em;
}

--- FONT ---
@font-face {
font-family:fenotype;
src: url(https://dl.dropbox.com/s/18jzmzyoaj2goje/FontsFree-Net-02.10FEN.ttf);
}

--- BLUR ANIMATION ---
@keyframes blur {
from {
filter: blur(40px);
}

to {
filter: blur(0);
}
}

Check out our Python playground!