@renatoalmeida49
Андрій Рогов
@Andrii-RohovAll comments
- @Andrii-Rohov
Hi, for the menu problem, i believe it should not be 100% of screen, try to set it (ul {height: 650px}). and for the button problem try and add to class .menu.active { position: absolute;} it will fix youre problems. And about how filter effect, it's complicated)) filter is not best solution, try to solve this problem with pseudo elements or some wrappers, you can check out my solution to see what i mean. But overall great job))👍
Marked as helpful - @AvediMusungu@Andrii-Rohov
Hey, try to delete these props {position: absolute; top: 50px; left: 500px;} from .landing-page and add those instead {margin-top: 100px; margin: auto; min-width: 400px; max-width: 600px;} for start. And try add to body { background-size: cover; or maybe contain;} see how it will affect it
Marked as helpful - @elisa-charrier@Andrii-Rohov
Hi, its a great work for first challenge )) i found only one small improvement, try to set body {height: 100vh}; this way page would stretch to full heigth
Marked as helpful - @victoriaodemakin@Andrii-Rohov
hi, add this css rule overlay::after { content: ""; inset: 0; background-color: purple; opacity: 0.5; } its called pseudo elements...look it up))
Marked as helpful - @Blanket25@Andrii-Rohov
Hello, great solution. Try to add to your div id of some sort and then add this css rule ( #(some id here) { possition: relative; } #(some id here)::after { content: ""; position: absolute; bottom: -20px; right: 0; border: 20px solid white; border-bottom-color: white; border-left-color: white; border-left-color: transparent; border-bottom-color: transparent; })
- @kofinartey@Andrii-Rohov
hi, nice job.., one thing is to add z-index: 1; to .quote block so the text hovers on top of image, and you could also add some animations
- @Proximamusic@Andrii-Rohov
Hi, this is a overall super dope solution. Great stuff!
- @MayuraRane@Andrii-Rohov
Hi there, its a great solution. one improvement, maybe try to set max-width to your container div
Marked as helpful - @NateOs@Andrii-Rohov
Hi there, its good solution, but yeah try to rewrite it, you have too mani divs and wrrapers you only need like three. https://andrii-rohov.github.io/Frontend-Mentor-Challenges-1-/ there is my solution, its not perfect but you can expect it in browser by clicking f12 and try to redo your by using less divs
Marked as helpful - @Briancarlo24@Andrii-Rohov
Hi, can't help you with your problem, but i noticed something you should use css rule ( input:focus { outline: none; } ) to remove blue border
- @Allamprabhu2003@Andrii-Rohov
Hi, when email input empty, error message doesn't work
- @heritio@Andrii-Rohov
Hi there, in my solution i just place img tag and add src attribute, which points to my svg file
Marked as helpful - @BrendaMichellle@Andrii-Rohov
Great work, only thing you could add, is cursor: pointer; to all buttons
- @SathishVM@Andrii-Rohov
Good stuff, only problem is the hover states for buttons
- @maotao11@Andrii-Rohov
Hey it good solution, you might check grid-template-areas, it's much easier way to build https://www.w3schools.com/cssref/pr_grid-template-areas.asp
- @Vallejoanderson@Andrii-Rohov
Hi, the position: fixed in body is preventing scrolling in mobile version
Marked as helpful - @sandy930@Andrii-Rohov
Hi, mobile version is super easy. Just change display:grid to display: flex and flex-direction: column; and its done
Marked as helpful - @stevenandrewparker@Andrii-Rohov
Hi there, you should try change hdref of link from /styles/style.css to ./style.css and it will aply css
Marked as helpful
