Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
body{
font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
background:linear-gradient(145deg, rgb(0, 100, 109) 42%, rgb(65, 28, 206)) 0% 0% / cover;
color:white;
}
.header{
background:grey;
width: 100%;
min-height: 60px;
display: flex;
padding: 0 10px;
align-items: center;
justify-content: space-between;
}
.main{
display: flex;
flex-wrap: wrap;
}
.orangebox{
background: orange;
min-width: 180px;
min-height: 180px;
align-items: center;
justify-content: center;
margin: 15px;
display: flex;
}
.whitebox{
min-height: 40px;
min-width: 40px;
background: white;
}
<header class="header">
<div class="whitebox">
</div>
<div class="whitebox">
</div>
</header>
<main class="main">
<section class="orangebox">
<div class="whitebox">
</div>
</section>
</main>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment