<body>
<span class="section-name">body</span>
<header>
<span class="section-name">header</span>
<nav>
<span class="section-name">nav</span>
</nav>
</header>
<main>
<span class="section-name">main</span>
<section id="navsection">
<span class="section-name">section</span>
<header>
<span class="section-name">header</span>
</header>
<nav>
<span class="section-name">nav</span>
</nav>
</section>
<section id="articlesection">
<span class="section-name">section</span>
<header>
<span class="section-name">header</span>
</header>
<article id="aside-article">
<span class="section-name">article</span>
<header>
<span class="section-name">header</span>
</header>
<aside>
<span class="section-name">aside</span>
</aside>
<p>
<span class="section-name">p</span>
<code><span class="section-name">code</span></code>
</p>
<p>
<span class="section-name">p</span>
</p>
<footer>
<span class="section-name">footer</span>
</footer>
</article>
<article>
<span class="section-name">article</span>
<header>
<span class="section-name">header</span>
</header>
<p>
<span class="section-name">p</span>
</p>
<p>
<span class="section-name">p</span>
</p>
<footer>
<span class="section-name">footer</span>
</footer>
</article>
</section>
</main>
<footer>
<span class="section-name">footer</span>
</footer>
</body>
</html>body {
min-height: 100vh;
background-color: rgb(0,0,0,0.2);
border: 2px dashed;
text-align: center;
padding: 5px;
}
header {
background-color: rgb(0,0,0,0.1);
border: 2px dashed;
padding: 0px;
margin-bottom: 5px;
}
nav {
background-color: rgb(0,0,0,0.1);
border: 2px dashed;
margin-bottom: 0px;
}
main {
background-color: rgb(0,0,0,0.1);
border: 2px dashed;
position: relative;
padding: 5px;
}
section {
background-color: rgb(0,0,0,0.1);
border: 2px dashed;
padding: 5px;
margin: auto;
}
article {
background-color: rgb(0,0,0,0.1);
border: 2px dashed;
margin-bottom: 5px;
}
p {
background-color: rgb(0,0,0,0.1);
border: 2px dashed;
padding: 10px;
margin: 5px 10px
}
aside {
background-color: rgb(0,0,0,0.1);
border: 2px dashed;
width: 30%;
height: 120px;
margin: 5px 5px;
float: right;
}
footer {
background-color: rgb(0,0,0,0.1);
border: 2px dashed;
}
#aside-article p{
width: 65%;
margin-left: 5px;
}
#articlesection {
width: 70vw;
}
#navsection {
width: 22vw;
left: 75%;
float: right;
margin: auto;
}
#navsection nav {
height: 300px;
}
#articlesection {
margin: auto 24vw auto auto;
}
.section-name {
display: block;
width: 100%;
padding: 5px;
}
code {
display: block;
width: 200px;
margin: auto;
margin-bottom: 5px;
background-color: #696969 !important;
color: #fff;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.