Skip to content

Instantly share code, notes, and snippets.

@jdbruxelles

jdbruxelles/Odoo.html

Created November 24, 2021 16:10
Show Gist options
  • Save jdbruxelles/3cc4a1a64cc79e8d3ac10b6af4ff7c3e to your computer and use it in GitHub Desktop.
Save jdbruxelles/3cc4a1a64cc79e8d3ac10b6af4ff7c3e to your computer and use it in GitHub Desktop.
Download ZIP
Odoo is a CSSBattle challenge : https://cssbattle.dev/play/81
Raw
Odoo.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Odoo</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style type="text/css">
body {
display: flex;
align-items: center;
justify-content: center;
background: #191919;
height: 90vh;
}
.o, .d {
width: 40px;
height: 40px;
background: transparent;
border: 20px solid;
border-radius: 50%;
}
.o.a {
border-color: #714B67;
}
.o.b, .o.c, .d {
border-color: #8F8F8F;
}
.d {
position: relative;
}
.d::after {
content: "";
width: 20px;
height: 70px;
border-radius: 20px;
display: inline-block;
position: relative;
background: #8F8F8F;
top: -41px;
right: -40px;
}
div {
position: relative;
margin-right: 2px;
top: 20px;
left: 0;
}
</style>
</head>
<body>
<div class="o a"></div>
<div class="d"></div>
<div class="o b"></div>
<div class="o c"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment