Looking to hire developers?
@strosi
@annab6
Submitted
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!
@strosi
Posted
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.
Marked as helpful
@riemann0
Submitted
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.
@strosi
Posted
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%);
}
Marked as helpful
@Sparkhand
Submitted
I can't figure out how to round the border of the "Learn more" gradient
@strosi
Posted
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.
Marked as helpful
@rauf-dev
Submitted
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 :)
@strosi
Posted
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)
Marked as helpful
@geniewu007
Submitted
Is there a way to make the logo sizing closer to the mockup? I experimented but still couldn't get it to look smaller.
@strosi
Posted
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);
@myrdn
Submitted
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.
@strosi
Posted
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.
Marked as helpful
@mehdi-adham
Submitted
Hey everyone, I've completed the first challenge and I'm looking forward to getting some feedback on this project. Thank you.
@strosi
Posted
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.
@stfnpczk
Submitted
No particular questions. I'm grateful, however, for any kind of feedback.
Cheers 👍
@strosi
Posted
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.
Marked as helpful
@ob2code
Submitted
I greatly appreciate any feedback. Thank you very much. 😁🙏
@strosi
Posted
I like your background effect :)
Marked as helpful
@BenjaDotMin
Submitted
Thank you for any time spent!
@strosi
Posted
Hi, your app looks great and the buttuns work as they should (with one exception) but I made some tests and found out that:
Marked as helpful
@GitHub-dev12345
Submitted
One of the best Project in my Frontendmentor Profile, Because i make this project best CSS Responsive Code and Used Best HTML5 Structure, in this project Used CSS Animation Code & Flex-Box CSS to make the webpage Responsive and attractive and Coders Reviewers read and undestand this Code easly.
Used Flex-Box #100DaysOfCode #WebDevelopment #CSS3 #HTML5
@strosi
Posted
Hi @GitHub-dev12345 :) Your solution looks very close to the original and I like the transition effects you added.
May be a little adjustments would be useful. I notised that the main heading is not centered in mobile view and the bottom background image on desktop view seems to be align to the bottom of the page content and not to the screen.
@rodrigovn
Submitted
This is my first javascript submmition, any comments are more than welcome. My main difficulties are still the background images in the right way, I would like to know how to put them in a wrapper, I have tried to do this by fitting them in a div, but it did not work once i had to put in absolute position. Is my script okay? I've tried to do this the simplest way. Thanks for reading >.<
@strosi
Posted
Hi @rodrigovn, your solution looks good. For the images, you could try to
background-image and adjust them with background-positionMarked as helpful
@Harshi786
Submitted
How can I make this component center in responsive? . . .
Any feedback on code and approach would be appreciable :D
@strosi
Posted
Hi @Harshi786, your desktop layout looks good, but there's something wrong in mobile view.
Try to change the width of the .card elements to 100% in the media query and I think the screen max-width should be at least as wide as the .container element (1080px) because of the fixed size.
I hope this will help for the current code.
Marked as helpful
