Renato Novaes• 180
@renatoalmeida49
Submitted
The close button in the menu has a behavior I don't understand. And I have no idea how to make the letters inside the card keep in the dark, without the filter effect when the hover kicks in.
Андрій Рогов
@Andrii-Rohov
All comments
- Андрій Рогов• 1,155
@Andrii-Rohov
Posted
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
1 - Avedi• 20
@AvediMusungu
Submitted
I would appreciate feedback specifically on the following:
- How to maintain the sizes of the various elements whenever i zoom in or out.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
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
1 - Elisa• 50
@elisa-charrier
Submitted
Hi there! This is my first time facing a Frontend Mentor challenge (loved it!) and my first time using SCSS. I'd appreciate to now if you have any advice for me. What could I improve? What to focus on next time? Thanks to all of you who will answer.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
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
0 - victoriaodemakin• 125
@victoriaodemakin
Submitted
I'll like any feedback on how to do the purple overlay on the image as I was unable to achieve that. Any other feedback is welcomed as I'm trying to improve my css before diving into js.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
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
0 - Bianca• 145
@Blanket25
Submitted
I couldn't find a solution that I understood to do the bubble on the desktop version...where should I begin to start understanding how to do it?
Андрій Рогов• 1,155@Andrii-Rohov
Posted
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; })
0 - Kofi Nartey• 650
@kofinartey
Submitted
Hi there, friends. I managed to pull this one off, really proud of myself. However, the slides seem to appear a little too sudden when the button is clicked. I'd be grateful if anyone suggest ways of improving this. Thank you.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
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
1 - shubham• 105
@Proximamusic
Submitted
hello guys, I have tried my best to make it responsive and make it function properly. I am a new developer, so any suggestion would mean the world to me.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi, this is a overall super dope solution. Great stuff!
0 - Mayura Rane• 20
@MayuraRane
Submitted
This is my first frontend mentor challenge. Please let me know how I can improve my code.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi there, its a great solution. one improvement, maybe try to set max-width to your container div
Marked as helpful
0 - Sodja Nathan O.• 205
@NateOs
Submitted
Desktop View was quite easy with bootstrap but then I need feedback how to get the cols to rearrange to suit the mobile view, or perhaps I might just redo the html and css with flexbox instead
Андрій Рогов• 1,155@Andrii-Rohov
Posted
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
0 - Brian Carlo Birondo• 320
@Briancarlo24
Submitted
I have a problem that I can't find an answer to this challenge.
If the screen size went below 300px in mobile. The total with of the page becomes weird and it doesn't stretch to full size. By weird means it becomes smaller and smaller than the current width of the page.
Best way to understand is to check the Live Site and try to check it for yourself.
Hopefully someone can help me with this as I can't figure why.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
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
0 - Allamprabhu• 120
@Allamprabhu2003
Submitted
Any feedbacks and suggestions are welcome!
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi, when email input empty, error message doesn't work
0 - Heritier Akilimali• 310
@heritio
Submitted
How can i make the pattern in the header with the svg that is given? I have no expirience with svg expect of using it as an image, would like to know how others made the svg pattern and also change the code so that the patterns are random instead of structured. Thanks for feedback
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi there, in my solution i just place img tag and add src attribute, which points to my svg file
Marked as helpful
0 - Brenda Michelle• 80
@BrendaMichellle
Submitted
Built using SASS/SCSS for the first time. Any feedback is appreciated. Thank you
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Great work, only thing you could add, is cursor: pointer; to all buttons
0 - SathishVM• 280
@SathishVM
Submitted
Coding after a long time break, Feedbacks are welcomed ♥️. Thank you for viewing my solution.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Good stuff, only problem is the hover states for buttons
0 - George Al Ismail• 200
@maotao11
Submitted
First time using grid and honestly i believe i messed it up real good :(
if you have any tips about using grid feel free to post them !
Андрій Рогов• 1,155@Andrii-Rohov
Posted
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
1 - Anderson Vallejo• 320
@Vallejoanderson
Submitted
I struggled trying to fixing the images, I will appreciate any documentation or source to improve in that sense. Also, I couldn't hide the overflow from the main image without hidding the little box too. Any suggestion or comment would be great!
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi, the position: fixed in body is preventing scrolling in mobile version
Marked as helpful
0 - Sandy• 210
@sandy930
Submitted
I have not done for mobile view. Could you tell me why we need to use grid-template-columns for this project ? Because when I don't use I cannot put these box at position I want .
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi, mobile version is super easy. Just change display:grid to display: flex and flex-direction: column; and its done
Marked as helpful
0 - Steven Parker• 10
@stevenandrewparker
Submitted
I could not figure out how to do the purple overlay on the images. I also really struggled with the layouts, particularly of the stats.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi there, you should try change hdref of link from /styles/style.css to ./style.css and it will aply css
Marked as helpful
0 - Vishal Biradar• 875
@vishalbrdr
Submitted
Have a look and you'll say "it's perfect!".
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Yeah, it's perfect....except you forget box-shadow))
Marked as helpful
0 - Jakub• 210
@flexer89
Submitted
Could you tell me if i have a tidy code? Or maybe there is some things to improve in code organisation. I also want to as if i correctly uploaded repository. I am waiting for some extra tips
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Try to use gitHub pages, its in repository settings, you would only need to add index.md file into youre project and write all files wich needed for page like this (index.html style.css etc)
0 - LouiseCW• 235
@costelloeward
Submitted
Any feedback much appreciated. This is a work in progress, so I would specifically ask these questions:
What's the best way to have the image completely cover the purple color?
The design guide specifies Lexend Deca font, but where does this apply? It gives a straight letter t and the design shows t with a tail on all the elements.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
And for the font, you should add not onli a link to fonts inside head tag, but also css rule like this (body { font-family: 'Lexend Deca', sans-serif; })
0 - LouiseCW• 235
@costelloeward
Submitted
Any feedback much appreciated. This is a work in progress, so I would specifically ask these questions:
What's the best way to have the image completely cover the purple color?
The design guide specifies Lexend Deca font, but where does this apply? It gives a straight letter t and the design shows t with a tail on all the elements.
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi there, good solution, but you should fix some bugs. Try to add min-width: 1280px; to main, so the image doesn't jump. And for the rounded corners of img, add border-radius: 0 10px 10px 0; to both col and image-tint boxes
Marked as helpful
0 - Snigdha Behera• 15
@Snigdha-162000
Submitted
I have tried my best to make this as similar to the design as possible. Can someone suggest a solution to how I can make the edges curved?
Андрій Рогов• 1,155@Andrii-Rohov
Posted
Hi, great job. In your solution, its imposiblle to add curved corners in one place so you should try to add border-radius: 10px 0px 0px 10px; to column1 and add border-radius: 0px 10px 10px 0px; to column3
0 - Lakshan• 305
@M-lakshan
Submitted
My NEWBIE-Free7th build-up. Can we use flex properties for HTML { } instead of body {}, inside a CSS sheet? I know it's possible but is it okay to do so?
Андрій Рогов• 1,155@Andrii-Rohov
Posted
There's a problem, when in mobile version, overflow: hidden; in the main box is preventing the layout from being scrollable. Try to remove it, and add margin-top: 400px;
Marked as helpful
0
