<div class="example bg-1">
<h1>
Gray on White
</h1>
</div>
<div class="example bg-2">
<h1>
Gray on Lighter Gray
</h1>
</div>
<div class="example bg-1 color-2">
<h1>
Opaque Black on White
</h1>
</div>
<div class="example bg-2 color-2">
<h1>
Opaque Black on Light Gray
</h1>
</div>
h1 {
color: #888;
font-size: 1.5em;
}
.color-2 h1 {
color: rgba(0, 0, 0, 0.465);
}
/**
* The styles below are unrelated to this demo and are just for scaffolding purposes.
*/
* {
box-sizing: border-box;
font-family: sans-serif;
line-height: 1.4;
margin: 0;
padding: 0;
}
html {
height:100%;
display: flex;
}
body {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
.example {
display: flex;
flex: 100% 0 0;
padding: 1em;
place-items: center;
border: 3px #ccc solid;
}
@media(min-width:30em) {
.example {
flex: 50% 0 0;
}
}
.example > * {
flex-grow: 1;
text-align: center;
}
.bg-2 {
background: #ddd;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.