This is a template I made using HTML and CSS coding. I kept a simple color theme but used gradients to make it a but more dynamic. You can find the original posted work on here: click
The Final Result:
the code
Of course, it doesn't just appear. I coded the style elements with CSS and then put it together in the right order with HTML. The code you can see below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.typekit.net/ojo0pdz.css">
<style>
.milkshake1 {
background: linear-gradient(to bottom, #FFFBFB , #FFD7D7);
width:400px;
padding:25px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
border: 1px double #FF7979; }
.milkshake2 {
width:150px;
height:100px;
background:url("https://images.unsplash.com/photo-1516007445015-fc20d86f8468?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NjN8fG1pbGtzaGFrZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60");
background-size: 150px;
background-position: center;
clip-path: ellipse(50% 50% at 50% 50%);
transform: rotate(-10deg); }
.milkshake3{
width: 150px;
height: 99px;
border: 1px solid #FF7979;
border-radius: 50%;
margin-left:-1px; margin-top:-100px; }
.milkshake4 {
color: #fff;
background: linear-gradient(90deg, rgba(255,121,121,1) 0%, rgba(255,215,215,1) 100%);
width: 190px;
padding:20px 30px;
padding-left:60px;
height:15px;
font-size:35px;
margin-top: -80px;
margin-left:100px;
text-transform: uppercase;
font-family: rig-solid-bold-fill, sans-serif;
font-weight: 700; font-style: normal; }
.milkshake5 {
width:1px;
height:30px;
background:#FF7979;
margin-left:80px; }
.milkshake6 {
line-height:120%;
margin:auto;
margin-left:80px;
width:270px;
padding:10px;
border-color:#FF7979;
border-width: 0px 0px 1px 1px;
border-style:solid;
font-size: 12px;
font-family: protipo-wide, sans-serif;
font-weight: 300;
font-style: normal;
text-align:justify; }
.milkshake6 b {
font-family: protipo-wide, sans-serif;
font-weight: 700;
font-style: normal;
background: linear-gradient(90deg, rgba(255,121,121,1) 0%, rgba(255,215,215,1) 100%);
padding:0px 5px; }
.milkshake7 {
width:150px;
font-family:
protipo-wide, sans-serif;
font-weight: 700;
font-style: normal;
background: linear-gradient(90deg, rgba(255,121,121,1) 0%, rgba(255,215,215,1) 100%);
padding:5px;
margin:auto;
font-size:10px;
text-align:center;
margin-top:30px;
color:#FFF;
text-transform:uppercase;
margin-bottom:3px; }
.milkshake8 {
color:#FF7979;
text-align:center;
font-family: protipo-wide, sans-serif;
font-weight: 700;
font-style: normal; }
</style>
</head>
<body>
<div class="milkshake1">
<div class="milkshake2"></div>
<div class="milkshake3" style="transform: rotate(170deg);"></div>
<div class="milkshake3" style="transform: rotate(160deg);"></div>
<div class="milkshake4">TITLE HERE</div>
<div class="milkshake5"></div>
<div class="milkshake6">TEXT HERE</div>
<div class="milkshake7">Tag @[ person ]</div>
<a href="http://cttw.jcink.net/index.php?showuser=15275" style="milkshake8"><center>❅</center></a>
</div>
</body>
</html>
I quite like how it turned out, it's very aesthetic in its own way. Sadly I couldn't embed it since Codepen is not a supported format to embed.
