<section class="products">
<h1 class="products__heading">Products</h1>
<ul class="products__list">
<li class="products__item"><a href="#">Fashion</a></li>
<li class="products__item"><a href="#">Notebooks & tablets</a></li>
<li class="products__item"><a href="#">Household electronics</a></li>
<li class="products__item"><a href="#">Car equipment</a></li>
</ul>
</section>
<div class="products">
<h1 class="products__heading">Products</h1>
<div class="products__list">
<p class="products__item"><a href="#">Fashion</a></p>
<p class="products__item"><a href="#">Notebooks & tablets</a></p>
<p class="products__item"><a href="#">Household electronics</a></p>
<p class="products__item"><a href="#">Car equipment</a></p>
</div>
</div>
<aside class="offers">
<h2 class="offers__heading">Our current offer</h2>
<div class="offers__content">
<p class="offers__copy">
This, of course, is not the real copy for this advertisement. The <em>real words</em> will be written once you have approved the headline.
</p>
<p class="offers__copy">
Rest assured, the words will expand the concept. With clarity. Conviction. And even a little wit.
</p>
</div>
</aside>@mixin primaryHeading() {
font-size: 2rem;
text-transform: uppercase;
border-bottom: 2px solid #000000;
margin-bottom: 1rem;
}
@mixin copy() {
font-size: 1rem;
line-height: 1.2;
}
@mixin box() {
padding: 0.5rem;
margin: 0.5rem;
}
/* the products block */
.products {
@include box;
background-color: #cccccc;
&__heading {
@include primaryHeading;
}
&__list {
@include box;
}
&__item {
@include copy;
font-weight: 700;
a{
text-decoration: none;
color: inherit;
&:focus,
&:hover {
text-decoration: underline;
}
}
}
}
/* the offers block */
.offers {
@include box;
background-color: #cccccc;
&__heading {
@include primaryHeading;
}
&__content {
@include box;
}
&__copy {
@include copy;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.