This is my first landing page. I tried to use CSS variables, utility classes and keep close to the design.
What is the better approach for the layout in this case - grid or flexbox?
How to change on button hover("LEARN MORE") just the opacity of the underline (and not the whole button, as I´ve done)?
Any comments/critics/suggestions are very welcome!
Hi Anna :) You have done good work and your solution looks well and it's responsive. To the questions:
article #btn-yellow:hover > .underliner-yellow {
opacity: 80%;
}
article #btn-red:hover > .underliner-red {
opacity: 80%;
}
And you could change the radius-border measure from % to px so the corners look more rounded.
I struggled to do the triangle on the bottom of the share bar for the desktop active version. However, I did manage to use a filled in triangle (which I think looks better). I am not sure how to get the one specified in the design files, however, using pure CSS.
Hi Amelia, if you just change the border-top from 24px to 12px your triangle will look closer to the one of the provided design. Another way to make the triangle arrow under the share bar only with CSS is to use pseudo element. For this remove the element with id=arrow and add
#share-bar::after {
content: "";
width: 1rem;
height: 1rem;
background-color: #48556a;
position: absolute;
left: 50%;
bottom: 0;
transform: rotate(45deg) translateY(75%);
}
I can't figure out how to round the border of the "Learn more" gradient
Hi Davide. You've created the underlining of "Learn more" as linear background half of it transparent and the lower part of it with color (yellow or red). This way the roundness of the upper corners will never be visible because the corners are not visible itself. Try useing pseudo elements to implement this decoration - something like this.
How to get the background images (top/bottom) in place for desktop/mobile view without using media query? Perfect is the enemy of finished, so I'm submitting and then check out how others did it :)
I'm not sure if that possible :) Even with media queries is difficult to achieve the result from the original design. Here's the best solution I've came across but it is also with media queries.
("Perfect is the enemy of finished" - I have to frame this... :D)
Is there a way to make the logo sizing closer to the mockup? I experimented but still couldn't get it to look smaller.
Hi Genie! I have no much experience using styles with React so I'm just guessing. Try to change the logo style:
@media (max-width: 768px) {
max-width: 100%;
height: auto;
}
with
min-width: 8rem;
width: 100%;
max-width: 13.5rem;
or with
width: clamp(8rem, 15vw, 13.5rem);
I went wild and added some simple animations :D such a enjoyable challenge I really liked it 👍I'd love to get some feedbacks on this
I have a question regarding the <br> in the paragraph, the places of the <br> are different between desktop and mobile screen, does implementing multiple <br>and use display: none | display: block with medias queries is the good way to go ?
If you have a better solution or other feedbacks I will be happy to read.
Hi @myrdn, I don't think you need any <br> element in the paragraph text. Remove them all. Just leave the text fill the width of the container and you may use padding to add some space on the left and right of it.
Hey everyone, I've completed the first challenge and I'm looking forward to getting some feedback on this project. Thank you.
Hi Adham! Very good first solution from you. I think the html and css are well structured, just pay attention to the accessibility issues from the report. It says that you need to use sematic HTML to add more meaning to your tags - Semantics in HTML. You could wrap the nft-container in <main> tags and use <h1> for the title element.
No particular questions. I'm grateful, however, for any kind of feedback.
Cheers 👍
Hi Stefan :) Your solution looks very close to the original. My only concern is that it switches from desktop to mobile view too early and it would be more convenient to set the breakpoint into variable so it can be more easily changed.
I greatly appreciate any feedback. Thank you very much. 😁🙏
Thank you for any time spent!
Hi, your app looks great and the buttuns work as they should (with one exception) but I made some tests and found out that:
Warmly welcome to any suggestion and feedbacks.
Hi Thin :) I like your solution. It works great and the JS is readable. There are some accessibility issues that can be cleared with using semantic HTML.
