MV• 30
@manjiri-vadujkar
Submitted
Aziz Najjar
@Njoura7
All comments
- Aziz Najjar• 240
@Njoura7
Posted
hello friend, your solution looks good, but I guess you forgot to change the font family and some line heights :D good coding journey
0 - Karol Binkowski• 1,640
@GrzywN
Submitted
Any feedback is welcome here!
Aziz Najjar• 240@Njoura7
Posted
Hello mate, your work is almost perfect, and I like how you are customizing your Readme section, lot of people don't do it x'D, I also liked the smooth animation that you ad I'll consider adding it to :D
there is a small detail that might improve your solution, which is giving a gap between the two cards of 30 px, and then make the width of the right card a bit smaller
Marked as helpful
0 - Daniel• 30
@danielfrontendjourney
Submitted
This is what I am able to build with the level I am at.
It would be helpful to get some points on what I need to study more. What it seems I did right and should keep doing.
Aziz Najjar• 240@Njoura7
Posted
hello friend, good job for this project, and congrats for your first project on github here are two tips that might improve your project give the body a display flex like this body{ display:flex; justify-content:center; /to center the container horizontally in your case/ alignm-items:center; /to center the container vertically in your case/ } another method to do it without flexblox is to center your container directly: .container{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
the other tip is to give your QR code img a width of 90% or 85% instead of max-width:100%; or you can give your container a padding of 1rem maybe hope it was helpful :D
1 @AbdulrahmanFalah
Submitted
Aziz Najjar• 240@Njoura7
Posted
Hello friend, good job for your project, you're almost there, here are two tips that might help you improve your solution. 1)try to give a bigger width to your container (75% or 80%) 2)give more width to your img container and give it a background-size:cover; so it can cover the whole space hope it was helpful, good luck in your code journey :)
Marked as helpful
0- Mario Salinas• 80
@marioCoding
Submitted
Hi all,
Did anyone else place a div container over the image to change the its color? How did you change the image's color?
Aziz Najjar• 240@Njoura7
Posted
hello, nice try you are almost there ! here is what you should do:
<div class="container"> <img src="images/image-header-desktop.jpg" alt="Image" class="image"> <div id="overlay"></div> </div> you should nest your image with another div and then give .container{position:relative;}#overlay{ position:absolute; width:100%; height:100%; }(so that it takes the whole space and then add the color with a specific opacity between 0.5 and 0.2 maybe)
Marked as helpful
1 - Gabriel Brunetto• 10
@Gabriel-Brunetto
Submitted
Aziz Najjar• 240@Njoura7
Posted
Hello mate, you need to refresh your gitHub images and then repost your url solution again :)
0 - Rina• 100
@dodrin
Submitted
Hi, this is my 3rd project on frontend mentor. I used CSS grid for the responsive design. Somehow I could not make the container rounded.
I appreciate your feedback! Happy coding🙌
Aziz Najjar• 240@Njoura7
Posted
Hello, good job for this project You might want to read the comment below of @stijnmeershoek it's a good tip, And secondly you might add a position absolute for the buttons and postion relative for their parents and then add bottom:10px (that's what i did) so that the button stick in the same position no matter what is the size of the view. Hope it was helpful :)
0 - Gnana Sekar• 70
@devsekar-1992
Submitted
Aziz Najjar• 240@Njoura7
Posted
Hello mate, nice try for this challenge, you are almost there I have 3 small tips that might help you improve you solution -try to change the size of the main container especially the width is remarkably small comparing to the design -give the left box (which contains the text) a display flex and flex-direction:column; and justify-content:space-between; and then play with the margins and paddings -finally make a div for the image and an overlay div inside it and give it the pink color with an opacity 0.5 to get the result. Please check my result for better understanding i tried to make as clear as possible https://github.com/devsekar-1992/frontendmentor-stats-preview-card have a good day, and enjoy coding
0 - Travolgi 🍕• 31,480
@denielden
Submitted
Hi community :)
In this challenge I used tailwindcss for the first time.
Tailwind is very convenient but sometimes in the elements that need many classes I find the html too long and confusing.
What do you think about it?
Aziz Najjar• 240@Njoura7
Posted
Hello, good job man , almost exactly the same pattern I came here trying to understand how did you make the eye totally visible but I didn't really understand since u used tailwinds and am still stuck in vanilla CSS xD, but I guess you used transition which a very good idea, I ll might try it, but I came across this '-webkit-"property":' and I ve ben searching about it and I didn't understand it well so I was wondering if you could explain it. Thank you
1 - Old• 6,240
@Old1337
Submitted
anyfeedback is appreciated
Aziz Najjar• 240@Njoura7
Posted
Hello mate good work, I have two feedbacks for you:
- try to set the image in a <div> and add background-size:cover; that will force the image to take all the space and won't overlap 2)also pay attention to the font-type/font-weight, it is not the same, you can check the "design ReadME file" where you can find the fonts and weights used
0 - Aziz Najjar• 240
@Njoura7
Submitted
Aziz Najjar• 240@Njoura7
Posted
This small project is nothing but a quick reminder to us that no matter how easy or simple the project is it might help to sharpen our skills (practice makes perfect as we all know), but also it can improve new skills, for example, I am not the UI/UX guy, but such projects will definitely help me improve my "designing eye"(colors, fonts, shapes and features that can attract users), Your feedback is appreciated(about the design or this paragraph) oh, and btw can someone explain to me what's wrong with those accessibility issues, I visited the link of the report and it felt overwhelming. Thank you and have a good coding journey
0 - Rina• 100
@dodrin
Submitted
Hi, Im newbie coder who want to become front end dev. In this project I have a few difficulties that I couldn't figure out.
- Overlay is somehow not matching with the image position.
- I want the card to be vertically centered when opened with smaller display.
I appreciate your help and feedback on my project. Thanks!
Aziz Najjar• 240@Njoura7
Posted
hello, I 've just finished this project (and I couldn't submit it idk why) anyways those are two methods to center your element (horizontally and vertically) set the parent element (the element that contains the specific element that you want to center) to display flex for example let's say you want to center a <div> inside a <body>: body{ display:flex; justify-content:center; /horizontally/ align-items:center;/vertically/ } but be careful display flex will center all the elements, so in this case, you have to use only one container inside the body then nest the rest of the elements in it
second method go to the element that you wanna center: let's say it's a <div> div{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
hope that was helpful :)
Marked as helpful
1 - Yemisrach• 1,430
@Yemisrach15
Submitted
Hello community
With this challenge I've tired out styled-components and styled-system. It was interesting working with these libraries since there are no css/sass files, only js. When starting out, I had difficulty on how I should define spaces and sizes in the theme file, it was all jumbled up. I would appreciate any kind of feedback🙏🏾
Aziz Najjar• 240@Njoura7
Posted
Hello mate, your solution looks good overall, I mean it doesn't have to be exactly the same, it's okay to adjust tp padding and margins, but try to fix those HTML issues in the report, I submitted the same work yesterday and I was amazed by this report it gives a lot of support try to use it.
Marked as helpful
0 - Just9krish• 590
@Just9krish
Submitted
Any feedback is appreciated :)
Aziz Najjar• 240@Njoura7
Posted
Hello mate, I finished this project today and I was looking for others solutions. and I noticed something in your footer that might help you improving this project: put a <section> inside your <footer> and give it a display:flex; and flex-direction:column; and it will be much better, then work on the margins and that padding :D
Marked as helpful
0
