Design comparison
SolutionDesign
Community feedback
- @shakhboz-shukhratPosted over 1 year ago
Hello there👋! Congratulations on completing this challenge!
The code looks fine with the exception of the following:
1.The font family "Josefin Sans" was not specified correctly in the CSS. To fix this, add the fallback font-family "sans-serif" after "Josefin Sans".
2.The CSS selector for the button hover effect was incorrect. To fix this, change "button:hover" to ".btn:hover".
Here is the corrected code:
* { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } :root { /* paddings */ --header-padding: 3.1rem 0 3.2rem 3.2rem; --main-title-padding: 6.2rem 3.2rem 1.6rem 3.2rem; --footer-padding: 2.2rem 3.2rem 9.2rem 3.2rem; --desktop-padding: 7.4rem 0 0 16.8rem; /* fonts weight*/ --min-font-weight: 300; --medium-font-weight: 400; --large-font-weight: 600; } body { font-family: "Josefin Sans", sans-serif; background: linear-gradient(150.03deg, #ffffff 0%, #fff4f4 84.51%); } header { padding: var(--header-padding); } .hero { width: 100%; } .hero-desktop { display: none; } .imgs { display: flex; flex-direction: column; align-items: center; } section { padding: var(--main-title-padding); } .title { font-style: normal; font-weight: var(--large-font-weight); font-size: 4rem; line-height: 4.2rem; text-align: center; letter-spacing: 10.8254px; color: #423a3a; } .title::before { content: "WE'RE"; font-style: normal; font-weight: var(--min-font-weight); font-size: 4rem; line-height: 4.2rem; text-align: center; letter-spacing: 10.8254px; color: #ce9898; display: block; } .card-content { font-weight: var(--medium-font-weight); font-size: 1.4rem; line-height: 2.2rem; text-align: center; color: #ce9898; } footer { padding: var(--footer-padding); position: relative; } .mail { mix-blend-mode: normal; opacity: 0.5; border: 1px solid #ce9898; border-radius: 2.8rem; width: 100%; height: 4.8rem; padding: 1.1rem 0 0.9rem 2.4rem; } ::placeholder { color: #ce9898; mix-blend-mode: normal; opacity: 0.5; } .error-img { position: absolute; z-index: 3; top: 3.2rem; right: 10rem; display: none; } .logo { display: none; } .btn { background: linear-gradient(135deg, #f8bfbf 0%, #ee8b8b 100%); box-shadow: 0px 15px 20px rgba(198, 110, 110, 0.247569); border-radius: 28px; width: 6.4rem; height: 4.8rem; border: none; position: absolute; transform: translateX(-100%); } .btn img { cursor: pointer; transition: background-color 0.3s ease; } .btn:hover { background-color: hsl(0, 40%, 87%); } .error { font-style: normal; font-weight: var(--medium-font-weight); font-size: 13px; line-height: 13px; color: #f96464; text-align: center; margin-top: 1.7rem; display: none; } .visible { display: block; } @media screen and (min-width: 1440px) { .container { display: grid; grid-template-columns: repeat(2, 1fr); } .hero { display: none; } .hero-desktop { display: inline-block; min-height: 100vh; width: 100%; } header { display: none; } section { padding: unset; width: 47.5rem; } .logo { display: inline-block; position: absolute; top: 11.7rem; } .container-1 { background-image: url(./images/bg-pattern-desktop.svg); background-repeat: no-repeat; background-size: 100% 100%; grid-area: 1/1; display: flex; flex-direction: column; justify-content: center; width: 100%; padding: var(--desktop-padding); } .title { text-align: left; font-weight: 600; font-size: 64px; line-height: 71px; letter-spacing: 17.3206px; } .title::before { font-weight: 300; font-size: 64px; line-height: 64px; text-align: left; } .card-content { font-weight: 400; font-size: 16px; line-height: 28px; text-align: left; margin-top: 3.2rem; } footer { padding: unset; margin-top: 4rem; width: 47.5rem; } .error-img { top: 1.2rem; } }
Anyway, your code looks great. Hope you will find this helpful. Good luck
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord