finished tablet, need to swap px to rem, and tidy up

This commit is contained in:
Robert McGovern 2022-10-12 18:17:27 +01:00
parent 616f84c7d1
commit 7942635664
3 changed files with 82 additions and 2 deletions

View File

@ -117,3 +117,9 @@ https://chenhuijing.com/blog/css-card-shadow-effects/#%F0%9F%A6%8A
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**
----
NOTES
Lighthouse notes that the offwhite on redish isn't a good contract.

View File

@ -230,7 +230,7 @@ footer {
font-size: var(--fs-footer);
font-weight: var(--fw-footer);
line-height: var(--lh-footer);
width: 30ch;
width: 32ch;
margin-bottom: 4rem;
}
@ -254,6 +254,80 @@ footer {
--image-background: url(../assets/bg-main-tablet.png);
--image-page-background: url(../assets/bg-pattern-1.svg);
}
body {
background-position: 13rem -2rem;
}
header::before {
position: absolute;
background-image: var(--image-page-background);
background-position: top right;
background-repeat: no-repeat;
background-size: 16.666875rem;
top: -32px;
left: 36px;
width: 100%;
height: 500%;
content: " ";
}
header {
padding: 0 2.4375rem;
}
.logo {
margin-top: 3.875rem;
}
.intro-section {
margin-top: 90px;
width: 61ch;
padding: 0 2.4375rem;
}
.main-body {
margin-top: 1.75rem;
}
.product-card::before {
top: -150px;
left: -14.9375rem;
width: 699px;
height: 600px;
background-position: 230px -30px;
}
.product-card {
margin-top: 400px;
width: 24.9375rem;
margin-left: 17rem;
padding: 3rem 3rem 2.875rem 3rem;
}
.product-card__image {
width: 16.8881rem;
margin: -21rem -14rem;
z-index: -1;
}
footer {
margin-top: 87px;
padding: 0 33px;
position: relative;
}
.footer__body {
width: 40ch;
}
.social-image-block {
position: absolute;
right: 39px;
bottom: 33px;
}
}
@media screen and (min-width: 1400px) {

View File

@ -59,7 +59,7 @@
<img class="logo-footer" src="assets/logo.svg" alt="equalizer company logo">
<p class="footer__body">
All rights reserved © Equalizer 2021
All rights reserved © Equalizer 2021<br />
Have any problems? Contact us via social media or email us at <span
class="footer__email">equalizer@example.com</span>
</p>