<article>
<header>
<h1>Article title</h1>
</header>
<p>Some text in my article.</p>
<p>Some more text in my article.</p>
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
</article>
<aside>
<h4 class = "aside-heading">Side menu</h4>
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
</aside>article {
background-color: #eee;
float: left;
width: 60%;
}
aside {
background-color: #eeff00;
float: left;
width: 40%;
}
.aside-heading {
padding: 0 0 0 24px;
}$(document).ready(function() {
$("p").click(function() {
$(this).hide();
console.log("A paragraph was annoyingly hidden. Why do you keep doing that to your nice website visitors?");
});
});
External CSS
This Pen doesn't use any external CSS resources.