flopxiao tut codes

<!--- COLUMN STYLING --->
<style>
#container01 > .wrapper > .inner > :nth-child(1) {
margin-left: auto;
margin-right: auto;
width: 36%;
border-radius: 0em 1em 1em 1em;
border: 1px solid #ff93c9;
padding: 6px;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,212,234,1) 50%, rgba(255,255,255,1) 100%);
}
#container01 > .wrapper > .inner > :nth-child(2) {
width: 60%;
margin-left: auto;
margin-right: auto;
border-radius: 1em 0em 1em 1em;
border: 1px solid #ff93c9;
padding: 6px;
height: 18em;
overflow: auto;
background: radial-gradient(circle, rgba(255,212,234,1) 50%, rgba(255,255,255,1) 100%);
}
#container01 {
justify-content: space-between !important;
margin: auto;
border-radius: 1em;
}
</style>


<!--- CSS STYLING --->
<style>
@font-face {
font-family: utonium;
src: url(https://dl.dropbox.com/s/i1ca9p2b9cwhzbg/Utonium.otf);
}
@font-face {
font-family:chick;
src:url(https://dl.dropbox.com/s/wrt1sab5vv6r25n/CHICK___.TTF);
}

#text01 {
font-family: utonium;
background: linear-gradient(180deg, rgba(255,187,221,1) 0%, rgba(255,234,246,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #ffa9d4;
-webkit-filter: drop-shadow(0px 0px 1px #ff93c9);
font-style: italic;
font-size: 2em;
}

#text02 {
padding: 4px;
background:#ffd4ea;
border: 1px solid #ff93c9;
border-radius: 0.5em;
}

#text03, #text04, #text05, #text06, #text07 {
padding: 8px;
border: 1px solid #ff93c9;
border-radius: 0.5em;
background: white;
}

#image01 {
border: 1px solid #ff93c9;
}

mark {
font-family:chick;
font-size:1.25em;
color: white;
-webkit-text-stroke: 1px #ffbbdd;
background: radial-gradient(circle, rgba(255,212,234,1) 0%, rgba(255,255,255,1) 100%);
padding-top: 3px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
border: 1px solid #ffa9d4;
border-radius: 70%;
}
</style>