finished tablet, need to swap px to rem, and tidy up
This commit is contained in:
parent
616f84c7d1
commit
7942635664
|
@ -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.
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue