<div class="container">
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 40px;
font: 1.2em 'Open Sans', sans-serif;
background-color: #fff;
}
h1, h2, h3 {
font-family: 'Averia Serif Libre', cursive;
}
.container {
background-color: #ddddda;
height: 720px;
width: 1280px;
padding: 20px;
padding: 220px 140px;
}
ul {
font-size: 200%;
font-family: 'Averia Serif Libre', cursive;
}
li {
padding: .3em;
}
li:first-child {
background-color: rgb(74, 112, 122);
color: #fff;
}
li:first-child::marker {
color: black;
}
This Pen doesn't use any external JavaScript resources.