added backgrounds to corners, and some minor tweaks
This commit is contained in:
parent
d1feaedefd
commit
75c631c7ef
|
@ -82,7 +82,7 @@ body {
|
|||
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
@ -113,6 +113,30 @@ body {
|
|||
margin-top: 0.5625rem;
|
||||
}
|
||||
|
||||
.topCircle, .bottomCircle {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-size: auto;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.topCircle {
|
||||
background: url(../images/bg-pattern-top.svg) no-repeat bottom right;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bottomCircle {
|
||||
background: url(../images/bg-pattern-bottom.svg) no-repeat top left;
|
||||
|
||||
top: 100%;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.attribution {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="topCircle"></div>
|
||||
<div class="card">
|
||||
<div class="details">
|
||||
<div class="cardHeader">
|
||||
|
@ -51,6 +52,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomCircle"></div>
|
||||
</div>
|
||||
<div class="attribution">
|
||||
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
||||
|
|
Loading…
Reference in New Issue