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.
|
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.**
|
**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-size: var(--fs-footer);
|
||||||
font-weight: var(--fw-footer);
|
font-weight: var(--fw-footer);
|
||||||
line-height: var(--lh-footer);
|
line-height: var(--lh-footer);
|
||||||
width: 30ch;
|
width: 32ch;
|
||||||
|
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem;
|
||||||
}
|
}
|
||||||
|
@ -254,6 +254,80 @@ footer {
|
||||||
--image-background: url(../assets/bg-main-tablet.png);
|
--image-background: url(../assets/bg-main-tablet.png);
|
||||||
--image-page-background: url(../assets/bg-pattern-1.svg);
|
--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) {
|
@media screen and (min-width: 1400px) {
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
<img class="logo-footer" src="assets/logo.svg" alt="equalizer company logo">
|
<img class="logo-footer" src="assets/logo.svg" alt="equalizer company logo">
|
||||||
|
|
||||||
<p class="footer__body">
|
<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
|
Have any problems? Contact us via social media or email us at <span
|
||||||
class="footer__email">equalizer@example.com</span>
|
class="footer__email">equalizer@example.com</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
Loading…
Reference in New Issue