<!DOCTYPE html>
<html>
<head>
<title>BUILD YOUR OWN LIFE</title>
</head>
<body>
<iframe srcdoc='<!DOCTYPE html>
<html>
<head>
<title>BUILD YOUR OWN LIFE</title>
<style>
.button:hover {color: rgb(96, 143, 184);background-color: rgb(255, 76, 124);}
.button {background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;}
body {background-color: rgb(124, 255, 198);}
#myShape {height: 200px; width: 200px; background-color: rgb(174, 144, 202);}
div {animation: example 2s linear 2s infinite alternate;}
div {width: 100px; height: 100px; background-color: rgb(135, 28, 28); position: relative; animation-name: example; animation-duration: 4s;}
@keyframes example {0% {background-color: rgb(169, 124, 124); left: 0px; top: 0px;} 25% {background-color: rgb(82, 82, 52); left: 200px; top: 0px;} 50% {background-color: rgba(136, 136, 192, 0.735); left: 200px; top: 200px;} 75% {background-color: rgb(178, 210, 252); left: 0px; top: 200px;} 100% {background-color: rgb(93, 44, 82); left: 0px; top: 0px;}}
.square {text-align: center; background-color: rgba(3, 78, 136, 0.7); width: 200px; height: 60px; line-height: 60px; color: rgba(140, 71, 71, 0.64); margin: 20px auto; position: relative;}
.square:before:before {content: ""; width: 60px; height: 6px; border-top: 60px solid rgba(3, 78, 136, 0.7); border-left: 60px solid color; position: 50px; right: 100%; top: 40px;}
.header-bottom.square {right: 60%; bottom: 56%;}
.square:before {content: ""; width: 100; height: 60; border-top: 80px rgba(150, 170, 185, 0.7); border-left: 80px ; top: 0; right: 100%;}
.button {background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; transition-duration: 0.4s;}
.button:hover {background-color: #4CAF50; color: white;}
.square {height: 200px; width: 200px; background-color: rgb(174, 59, 59);}
</style>
</head>
<body>
<h1>SHAPE</h1>
<p>My first paragraph.</p>
<div>
<div class="text"></div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="header">
<div class=".square:before">
<p>Here I go</p>
</div>
<div class=".square:before">
<p>Here we go</p>
</div>
</div>
<h2>Giada</h2>
<div class="square"></div>
<h1>I am a shape</h1>
<p style="color:DodgerBlue;">I am shape..</p>
<p style="color:rgb(241, 70, 204);">I am shape...</p>
<a href="#" class="button">Click here for more</a>
<a style="color:rgb(163, 247, 170)"></a>
<div class="text">
<button onclick=".style.color"></button>
</div>
</body>
</html>
<html>
<head>
<title>BUILD YOUR OWN LIFE</title>
</head>
<body>
<iframe srcdoc='<!DOCTYPE html>
<html>
<head>
<title>BUILD YOUR OWN LIFE</title>
<style>
.button:hover {color: rgb(96, 143, 184);background-color: rgb(255, 76, 124);}
.button {background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;}
body {background-color: rgb(124, 255, 198);}
#myShape {height: 200px; width: 200px; background-color: rgb(174, 144, 202);}
div {animation: example 2s linear 2s infinite alternate;}
div {width: 100px; height: 100px; background-color: rgb(135, 28, 28); position: relative; animation-name: example; animation-duration: 4s;}
@keyframes example {0% {background-color: rgb(169, 124, 124); left: 0px; top: 0px;} 25% {background-color: rgb(82, 82, 52); left: 200px; top: 0px;} 50% {background-color: rgba(136, 136, 192, 0.735); left: 200px; top: 200px;} 75% {background-color: rgb(178, 210, 252); left: 0px; top: 200px;} 100% {background-color: rgb(93, 44, 82); left: 0px; top: 0px;}}
.square {text-align: center; background-color: rgba(3, 78, 136, 0.7); width: 200px; height: 60px; line-height: 60px; color: rgba(140, 71, 71, 0.64); margin: 20px auto; position: relative;}
.square:before:before {content: ""; width: 60px; height: 6px; border-top: 60px solid rgba(3, 78, 136, 0.7); border-left: 60px solid color; position: 50px; right: 100%; top: 40px;}
.header-bottom.square {right: 60%; bottom: 56%;}
.square:before {content: ""; width: 100; height: 60; border-top: 80px rgba(150, 170, 185, 0.7); border-left: 80px ; top: 0; right: 100%;}
.button {background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; transition-duration: 0.4s;}
.button:hover {background-color: #4CAF50; color: white;}
.square {height: 200px; width: 200px; background-color: rgb(174, 59, 59);}
</style>
</head>
<body>
<h1>SHAPE</h1>
<p>My first paragraph.</p>
<div>
<div class="text"></div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="header">
<div class=".square:before">
<p>Here I go</p>
</div>
<div class=".square:before">
<p>Here we go</p>
</div>
</div>
<h2>Giada</h2>
<div class="square"></div>
<h1>I am a shape</h1>
<p style="color:DodgerBlue;">I am shape..</p>
<p style="color:rgb(241, 70, 204);">I am shape...</p>
<a href="#" class="button">Click here for more</a>
<a style="color:rgb(163, 247, 170)"></a>
<div class="text">
<button onclick=".style.color"></button>
</div>
</body>
</html>