playing with space, shape, colour & composition
<style>
.box-1 {
width: ${width}px;
}
.box-1 h2 {
display: inline-block;
}
</style>
<div class="box box-1">
<h2>1</h2>
</div>
<style>
.box-2 {
width: ${width}px;
display: flex; /* make the container div to make it a flex item. */
justify-content: center; /* center out item horizontally */
}
.box-2 h2 {
display: inline-block;
}
</style>
<div class="box box-2">
<h2>2</h2>
</div>
<style>
.box-3 {
width: ${width}px;
height: 400px;
display: flex;
justify-content: center;
align-items: center; /* vertically center to the parent container */
}
.box-3 h2 {
display: inline-block;
}
</style>
<div class="box box-3">
<h2>3</h2>
</div>
<hr>
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<style>
.box {
margin: 0px;
padding: 0px;
border: 4px dashed #5c2c45;
}
.box h2 {
background: #29bdad;
padding: 20px;
margin: 0px;
font-size: 36px;
font-weight: 400;
font-family:'Space Mono',monospace;
color: #5c2c45;
}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
