tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added backgrounds to corners, and some minor tweaks

This commit is contained in:
Robert McGovern 2021-09-11 14:36:45 +01:00
parent d1feaedefd
commit 75c631c7ef
2 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
FrontendMentor/newbie/profile-card-component/css/style.css
View File

@ -82,7 +82,7 @@ body {
.stats { .stats {
display: flex; display: flex;
justify-content: space-around; justify-content: space-evenly;
margin-top: 1.5rem; margin-top: 1.5rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
} }
@ -113,6 +113,30 @@ body {
margin-top: 0.5625rem; 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 { .attribution {
position: absolute; position: absolute;
font-size: 11px; font-size: 11px;

2
FrontendMentor/newbie/profile-card-component/index.html
View File

@ -18,6 +18,7 @@
</head> </head>
<body> <body>
<div class="page"> <div class="page">
<div class="topCircle"></div>
<div class="card"> <div class="card">
<div class="details"> <div class="details">
<div class="cardHeader"> <div class="cardHeader">
@ -51,6 +52,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bottomCircle"></div>
</div> </div>
<div class="attribution"> <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.