<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rgg/pen/JdpQpx" />
<meta charset="utf-8">
<title>Envelope, a Pure CSS Icon</title>
<meta name="description" content="Envelope, a Pure CSS Icon by RGG">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
body,
html {
height: 100%;
}
body {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 16px;
background: #d0d0d0;
color: #444444;
}
h1 {
font-size: 2.5em;
margin: 2em 0 .5em;
}
h2 {
margin-bottom: 3em;
}
p {
margin-bottom: 1em;
}
strong {
font-weight: 700;
}
div {
position: relative;
}
input {
display: none;
}
article {
padding: 2em 0;
max-width: 480px;
text-align: center;
position: relative;
margin-bottom: 2em;
}
.container {
height: 100%;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
}
.envelope {
width: 18.75em;
height: 11.58838em;
position: relative;
display: inline-block;
z-index: 2;
background-color: #fcf6e2;
-moz-box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.15);
box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.8s cubic-bezier(0.61, -0.22, 0.38, 1.26);
-moz-transition: all 0.8s cubic-bezier(0.61, -0.22, 0.38, 1.26);
-ms-transition: all 0.8s cubic-bezier(0.61, -0.22, 0.38, 1.26);
-o-transition: all 0.8s cubic-bezier(0.61, -0.22, 0.38, 1.26);
transition: all 0.8s cubic-bezier(0.61, -0.22, 0.38, 1.26);
-moz-transform: scale(0.6) translateY(0em);
-ms-transform: scale(0.6) translateY(0em);
-webkit-transform: scale(0.6) translateY(0em);
transform: scale(0.6) translateY(0em);
font-size: 1em;
}
.envelope label {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
cursor: pointer;
}
.envelope .triangle {
height: 100%;
display: block;
overflow: hidden;
position: relative;
margin-top: 1px;
}
.envelope .triangle:before {
top: -4.8em;
left: 3.865em;
position: absolute;
display: inline-block;
content: "";
width: 11em;
height: 9.5em;
border: 1px solid white;
background-color: #fbf5dd;
-moz-transform: rotateZ(30deg) skew(-30deg);
-ms-transform: rotateZ(30deg) skew(-30deg);
-webkit-transform: rotateZ(30deg) skew(-30deg);
transform: rotateZ(30deg) skew(-30deg);
-moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.14);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.14);
}
.envelope .triangle.cap {
-webkit-transition: all 0.6s cubic-bezier(0.61, -0.22, 0.38, 1.26);
-moz-transition: all 0.6s cubic-bezier(0.61, -0.22, 0.38, 1.26);
-ms-transition: all 0.6s cubic-bezier(0.61, -0.22, 0.38, 1.26);
-o-transition: all 0.6s cubic-bezier(0.61, -0.22, 0.38, 1.26);
transition: all 0.6s cubic-bezier(0.61, -0.22, 0.38, 1.26);
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
z-index: 3;
}
.envelope .triangle.tail {
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
z-index: 2;
}
.envelope .triangle.tail:before {
top: -8.45em;
left: 2.46em;
width: 14em;
height: 14em;
border-color: #f8ecc2;
-moz-transform: rotateZ(38deg) skew(-15deg);
-ms-transform: rotateZ(38deg) skew(-15deg);
-webkit-transform: rotateZ(38deg) skew(-15deg);
transform: rotateZ(38deg) skew(-15deg);
-moz-box-shadow: -0.1em -0.1em 1em rgba(0, 0, 0, 0.14);
-webkit-box-shadow: -0.1em -0.1em 1em rgba(0, 0, 0, 0.14);
box-shadow: -0.1em -0.1em 1em rgba(0, 0, 0, 0.14);
}
.envelope .triangle.bag {
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.envelope .triangle.bag:after, .envelope .triangle.bag:before {
top: 0.4em;
left: -7em;
width: 13em;
height: 10.5em;
border: 1px solid #f8ecc2;
background-color: #fbf5dd;
-moz-transform: rotateZ(30deg) skew(-31deg);
-ms-transform: rotateZ(30deg) skew(-31deg);
-webkit-transform: rotateZ(30deg) skew(-31deg);
transform: rotateZ(30deg) skew(-31deg);
-moz-box-shadow: 1em 0.1em 1em rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 1em 0.1em 1em rgba(0, 0, 0, 0.14);
box-shadow: 1em 0.1em 1em rgba(0, 0, 0, 0.14);
}
.envelope .triangle.bag:after {
top: -2.15em;
left: auto;
right: -10.2em;
width: 14em;
height: 15em;
position: absolute;
display: inline-block;
-moz-transform: rotateZ(33.1deg) skew(-26.7deg);
-ms-transform: rotateZ(33.1deg) skew(-26.7deg);
-webkit-transform: rotateZ(33.1deg) skew(-26.7deg);
transform: rotateZ(33.1deg) skew(-26.7deg);
-moz-box-shadow: 0.1em 0em 1.2em rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0.1em 0em 1.2em rgba(0, 0, 0, 0.14);
box-shadow: 0.1em 0em 1.2em rgba(0, 0, 0, 0.14);
content: "";
}
.envelope .notification {
top: -9em;
right: -6em;
width: 11.58838em;
height: 11.58838em;
line-height: 11.58838em;
display: inline-block;
position: absolute;
background-color: #57CAF4;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-moz-transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-ms-transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-o-transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-moz-transform: rotateZ(0deg) translateY(0) scale(0.5);
-ms-transform: rotateZ(0deg) translateY(0) scale(0.5);
-webkit-transform: rotateZ(0deg) translateY(0) scale(0.5);
transform: rotateZ(0deg) translateY(0) scale(0.5);
-webkit-animation: waiting 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) infinite;
-moz-animation: waiting 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) infinite;
-ms-animation: waiting 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) infinite;
-o-animation: waiting 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) infinite;
animation: waiting 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) infinite;
z-index: 3;
}
.envelope .notification .number {
color: white;
font-size: 4em;
display: inline-block;
-webkit-transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-moz-transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-ms-transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-o-transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
transition: all 0.6s cubic-bezier(0.25, 0.1, 0.49, 1.14);
}
.envelope:hover {
cursor: pointer;
}
.overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 64, 105, 0.9);
z-index: 1;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-moz-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-ms-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-o-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.title {
z-index: 5;
opacity: 0;
filter: alpha(opacity=0);
margin: 0;
overflow: hidden;
height: 0;
width: 100%;
position: absolute;
top: 14em;
left: 0;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-moz-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-ms-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
-o-transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.49, 1.14);
}
.title h2 {
color: white;
display: block;
font-size: 4em;
font-weight: 700;
margin: 0 auto 0.8em;
}
.title label {
cursor: pointer;
text-transform: uppercase;
padding: 1.4em;
display: block;
color: white;
border: 1px solid white;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-moz-box-shadow: inset 0 0 0 #EC008C;
-webkit-box-shadow: inset 0 0 0 #EC008C;
box-shadow: inset 0 0 0 #EC008C;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.title label:hover {
color: white;
border-color: #EC008C;
background-color: #EC008C;
}
input.switch-on[type="radio"]:checked ~ .title {
opacity: 1;
filter: alpha(opacity=100);
height: auto;
}
input.switch-on[type="radio"]:checked ~ .title,
input.switch-on[type="radio"]:checked ~ .overlay {
display: block;
opacity: 1;
filter: alpha(opacity=100);
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
input.switch-on[type="radio"]:checked + .envelope {
-moz-transform: scale(0.8) translateY(-3em);
-ms-transform: scale(0.8) translateY(-3em);
-webkit-transform: scale(0.8) translateY(-3em);
transform: scale(0.8) translateY(-3em);
-moz-box-shadow: 0 4em 4em rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0 4em 4em rgba(0, 0, 0, 0.14);
box-shadow: 0 4em 4em rgba(0, 0, 0, 0.14);
background-color: #fdfaf0;
}
input.switch-on[type="radio"]:checked + .envelope label {
cursor: default;
}
input.switch-on[type="radio"]:checked + .envelope .cap {
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
input.switch-on[type="radio"]:checked + .envelope .bag {
-webkit-animation: setBagZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
-moz-animation: setBagZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
-ms-animation: setBagZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
-o-animation: setBagZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
animation: setBagZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
}
input.switch-on[type="radio"]:checked + .envelope .tail {
-webkit-animation: setTailZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
-moz-animation: setTailZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
-ms-animation: setTailZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
-o-animation: setTailZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
animation: setTailZindex 1.2s cubic-bezier(0.25, 0.1, 0.51, 1.3) forwards;
}
input.switch-on[type="radio"]:checked + .envelope .notification {
top: -6em;
background-color: #ECED52;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-moz-transform: rotateZ(-430deg) translateY(-5.55em) scale(0.8);
-ms-transform: rotateZ(-430deg) translateY(-5.55em) scale(0.8);
-webkit-transform: rotateZ(-430deg) translateY(-5.55em) scale(0.8);
transform: rotateZ(-430deg) translateY(-5.55em) scale(0.8);
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
-moz-box-shadow: -0.3em 0.1em 1em rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -0.3em 0.1em 1em rgba(0, 0, 0, 0.4);
box-shadow: -0.3em 0.1em 1em rgba(0, 0, 0, 0.4);
}
input.switch-on[type="radio"]:checked + .envelope .notification .number {
color: #0A4069;
-moz-transform: rotateZ(430deg);
-ms-transform: rotateZ(430deg);
-webkit-transform: rotateZ(430deg);
transform: rotateZ(430deg);
}
@-webkit-keyframes setTailZindex {
0% {
z-index: 1;
}
19.9% {
z-index: 1;
}
20% {
z-index: 5;
}
100% {
z-index: 5;
}
}
@keyframes setTailZindex {
0% {
z-index: 1;
}
19.9% {
z-index: 1;
}
20% {
z-index: 5;
}
100% {
z-index: 5;
}
}
@-webkit-keyframes setBagZindex {
0% {
z-index: 1;
}
19.9% {
z-index: 1;
}
20% {
z-index: 4;
}
100% {
z-index: 4;
}
}
@keyframes setBagZindex {
0% {
z-index: 1;
}
19.9% {
z-index: 1;
}
20% {
z-index: 4;
}
100% {
z-index: 4;
}
}
@-webkit-keyframes waiting {
0% {
margin-top: 0;
-moz-animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
}
25% {
margin-top: -3.85em;
}
30% {
margin-top: -4em;
-moz-animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
-webkit-animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
}
35% {
margin-top: -3.85em;
}
55% {
margin-top: 0;
-moz-animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
}
59% {
margin-top: -0.3em;
-moz-animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
-webkit-animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
}
63% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
@keyframes waiting {
0% {
margin-top: 0;
-moz-animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
}
25% {
margin-top: -3.85em;
}
30% {
margin-top: -4em;
-moz-animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
-webkit-animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
}
35% {
margin-top: -3.85em;
}
55% {
margin-top: 0;
-moz-animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
animation-timing-function: cubic-bezier(0, 0, 0.37, 1.01);
}
59% {
margin-top: -0.3em;
-moz-animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
-webkit-animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
animation-timing-function: cubic-bezier(0.91, 0.01, 1, 1);
}
63% {
margin-top: 0;
}
100% {
margin-top: 0;
}
}
@-webkit-keyframes shaking {
0% {
right: -6em;
-moz-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
right: -5.7em;
}
25.1% {
-moz-animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
right: -6em;
}
50.1% {
-moz-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
right: -6.3em;
}
75.1% {
-moz-animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
right: -6em;
}
}
@keyframes shaking {
0% {
right: -6em;
-moz-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
right: -5.7em;
}
25.1% {
-moz-animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
right: -6em;
}
50.1% {
-moz-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
right: -6.3em;
}
75.1% {
-moz-animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
right: -6em;
}
}
.action-tap {
display: none;
}
@media (max-width: 680px) {
h1 {
padding: 0 1em;
}
article {
max-width: 240px;
margin: 0 auto 2em;
}
.action-click {
display: none;
}
.action-tap {
display: inline;
}
.envelope {
left: -1.9em;
}
.title {
margin: 2em 0 0;
}
h2 {
display: none;
}
input.switch-on[type="radio"]:checked ~ .overlay {
display: none;
}
}
</style></head><body>
<div class="container">
<section>
<header>
<h1>Envelope, a Pure <strong>CSS</strong> Icon</h1>
<h2>Just <span class="action-click">click </span><span class="action-tap">tap </span>this envelope</h2>
</header>
<article>
<input type="radio" name="switch" id="switch-on" class="switch-on">
<div class="envelope">
<label for="switch-on">
<span class="triangle cap"></span>
<div class="notification waiting">
<span class="number">17</span>
</div>
<span class="triangle bag"></span>
<span class="triangle tail"></span>
</label>
</div>
<div class="title">
<input type="radio" name="switch" id="switch-off" class="switch-off">
<label for="switch-off">Close</label>
</div>
<div class="overlay"></div>
</article>
</section>
</div>
</body></html>
