Skip to content

Instantly share code, notes, and snippets.

@johnfn
Created July 9, 2020 00:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnfn/1779160c227221ebcf901a92a0e191d9 to your computer and use it in GitHub Desktop.
Save johnfn/1779160c227221ebcf901a92a0e191d9 to your computer and use it in GitHub Desktop.
<style type="text/css">
.container {
display: flex;
flex-direction: row;
width: 300px;
}
.left {
flex: 0 0 100px;
}
.right {
flex: 0 0 200px;
}
.circle {
background-color: red;
color: white;
width: 100px;
height: 100px;
border-radius: 50px;
}
.circle-text {
position: absolute;
top: 50px;
left: 40px;
}
.right {
text-align: center;
}
.right-text {
font-size: 22px;
color: #999999;
}
.right-button {
display: inline-block;
text-align: center;
color: #999999;
background-color: white;
border-radius: 6px;
font-size: 18px;
border: 4px solid #999999;
}
.right-button:hover {
background-color: red; /* lol */
}
</style>
<body>
<div class="container">
<div class="left">
<div class="circle">
<div class="circle-text">
1st
</div>
</div>
</div>
<div class="right">
<div class="right-text">
Code in the dark!
</div>
<div class="right-button">
Click
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment