Code - Sunflower

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js%22%3E</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js%22%3E</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js%22%3E</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js%22%3E</script>
<script src="https://roleplay.chat/jquery.tooltipster.js?v=8%22%3E</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js%22%3E</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js%22%3E</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css%22%3E
<link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script defer>
window.onload = function() {

};
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Permanent Marker');

body {background-color: #946141;}

.box {position: fixed; top: 300px; left: 710px; height: 250px; width: 500px; border-radius: 2px; border: 0px solid; border-color: #ffe8a3; background-color: #ffbf44; z-index: 2;}

.inbox {position: fixed; top: 310px; left: 720px; height: 220px; width: 470px; border-radius: 2px; border: 5px solid; border-color: #fff5d6; background-color: #fff5d6; z-index: 2;}

/*.circle {position: fixed; top: 325px; left: 520px; height: 200px; width: 200px; border-radius: 500px; border: 15px solid; border-color: #9ec4ee; background-color: #fff; z-index: 2;}*/

.stripe {position: fixed; top: 400px; left: -100px; height: 80px; width: 3000px; border-radius: 2px; border: 0px solid; border-color: #946141; background-color: #ffbf44; z-index: -1;}

.stripe2 {position: fixed; top: 425px; left: -100px; height: 30px; width: 3000px; border-radius: 2px; border: 0px solid; border-color: #a3dcff; background-color: #fff5d6; z-index: 3;}

.line {position: fixed; top: 320px; left: 730px; height: 30px; width: 460px; background-color: #ffbf44; z-index: 3;}

.sfbutton {position: fixed; top: 255px; left: 1170px; height: 80px; width: 80px; background: url('https://i.imgur.com/P6zf2uR.png?1'); background-size: 100%; z-index: 5; transition: 0.5s;}

.sfbutton:hover {left: 1165px; height: 90px; width: 90px; transition: 0.5s;}

.name { letter-spacing: 0; z-index: 10; position: fixed; left: 320px; top: 460px; font-family: 'Permanent Marker', cursive; font-size: 70px; color: #000; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url('https://i.imgur.com/qi97Ksv.gif') repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; background-position: center; background-size: cover; width: 800px; }

.titleline {position: fixed; left: 788px; top: 322px; font-family: 'Permanent Marker', cursive; font-size: 20px; color: #56260c; }

.text {}

</style>

</head>

<body>
<div class="box">
<div class="inbox">
<div class="line">
<div class="titleline">She was all bad-bad, nevertheless...</div>

</div>
</div>
<div class="circle"></div>
<div class="sfbutton"></div>
</div>

<div class="stripe">
<div class="stripe2"></div>
<div class="name">Sunflower</div>
</div>


</body>


</html>