<body id="switch">
<div id="outwrap">
<header>
<h1>Style Switcher</h1>
</header>
<nav>
<ul>
<li id="swt"><a href="#switch">Switch Style</a></li>
<li id="back"><a href="#">Switch Back</a></li>
<li><a href="#">Some Link</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">One More Link</a></li>
</ul>
</nav>
<aside>
<h2>Side Bar</h2>
<p>An graece doctus omnesque mea, te pri laudem tamquam.
Ei alia dicta fabulas eos, sed cu probo laudem.
Et mel laoreet maluisset salutatus, ad illud fierent vim, vix an denique nostrum.
Ea duo delectus invenire, duo in libris labitur expetendis. Ad quem quas ceteros quo.</p>
</aside>
<main>
<h2>Main Text</h2>
<p>Hit "switch style" to change the css.</p>
<p>Lorem ipsum dolor sit amet, in augue tation doctus eos, virtute voluptatibus an per.
His ne legere deleniti mnesarchum.
Iusto facilisi reformidans eu sed, duo at aeque euismod iudicabit.
Quas iriure intellegam his cu, ad labore appetere phaedrum eos.
Ne pro utroque iudicabit, cu ignota everti quo.
Eum veri conclusionemque ne, sit an enim prima sanctus.</p>
<p>Ex pro euismod repudiare sententiae, molestie assueverit eu vim.
Summo mucius nostro ad has, solum reprimique ut qui.
No modo eligendi nominati nec.
Omnium periculis id usu, nonumes partiendo patrioque ad sit.
Nam eu accusata persecuti delicatissimi. Ei nec veritus prodesset.</p>
<p>An graece doctus omnesque mea, te pri laudem tamquam.
Ei alia dicta fabulas eos, sed cu probo laudem.
Et mel laoreet maluisset salutatus, ad illud fierent vim, vix an denique nostrum.
Ea duo delectus invenire, duo in libris labitur expetendis. Ad quem quas ceteros quo.</p>
<p>Modus delectus percipit duo ei, vis agam scripta saperet at.
Graeco perpetua vim ea, sit populo accumsan et.
Ius latine conceptam in. Velit patrioque duo et, id vim vide primis moderatius.</p>
</main>
<footer>
The Footer
</footer>
</div>
</body> body {
background: #000;
margin: 0;
padding: 0;
}
#outwrap {
background: #fff;
}
header,
footer {
background: #aaa;
padding: 0.4em;
font-weight: bold;
}
nav {
float: left;
margin-right: 1em;
}
aside {
background: #fff6d3;
float: right;
width: 16em;
padding: 0.4em;
}
main {
padding: 1em 1em 5em;
}
#back,
#switch:target #swt {
display: none;
}
#switch:target #back {
display: inline-block;
}
#switch:target {
background: #46b;
font-family: sans-serif;
}
#switch:target header,
#switch:target footer {
background: #9ad;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
text-align: center;
}
#switch:target header {
border-radius: 20px 20px 0 0;
}
#switch:target footer {
border-radius: 0 0 20px 20px;
}
#switch:target #outwrap {
background: transparent;
max-width: 65em;
width: 90%;
margin: 1.5em auto;
box-sizing: border-box;
/*min-height: 90vh;*/
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: flex-start;
}
#switch:target main {
background: #def;
flex: 1 1 40em;
}
#switch:target nav {
float: none;
margin: 0;
text-align: center;
}
#switch:target nav ul {
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#switch:target nav ul li {
display: inline-block;
box-sizing: border-box;
margin: 1px;
flex: 1 1 6em;
}
#switch:target nav a {
display: block;
padding: 0.3em;
box-sizing: border-box;
height: 100%;
border-radius: 8px;
background: #fff;
font-weight: bold;
text-decoration: none;
font-style: italic;
color: #46b;
}
#switch:target nav a:hover,
#switch:target nav a:focus {
background: #fea;
}
#switch:target nav a:active {
background: #d33;
color: #fff;
}
#switch:target header,
#switch:target nav,
#switch:target footer {
box-sizing: border-box;
flex: 1 0 100%;
}
#switch:target aside {
width: auto;
flex: 1 2 12em;
}
#switch:target footer,
#switch:target aside {
order: 1;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.