Looking to hire developers?
@juanpb96
@dknyd
Submitted
Hey All,
I have finished this challenge, although for the life of me I could not get that damn exclamation mark icon where it should be, so within the email input field. -which I know is pretty stupid-, so if anyone has an advice for placing it where it should be, I would be grateful. :)
Thanks as usual!
Daniel
@juanpb96
Posted
Hi Daniel, good job on your solution!
I was looking at you code and I see you can do some fixes. You should consider the use of position: relative; in your #inputContainer or changing the layout of your input just a bit. I think you can use #inputContainer with display: flex; and place the button and icon better. The border could be moved to the container, so you can adjust styles in an easy way.
Hope it helps!
Marked as helpful
@mehra-sourav
Submitted
@juanpb96
Posted
Hey Sourav 👋
Good job on this one!
I think I can help you with your questions and include additional comments:
width in your .class and you should change it according to what you want with media queries. I recommend starting with a mobile-first approach.<div class="attribution"> should be <footer class="attribution"> or <div class="card"> could be <main class="card">.I think it is not a personal preference in general. If you use tags properly, your site increases in accessibility and best practices. You can take a look at HTML reference as it has helped me when I wonder about tags.
Hope this can be useful for you 😃
Marked as helpful
@harsha094
Submitted
All feedbacks is welcome.
@juanpb96
Posted
Hi Harsh 👋
Your solution looks great! 👍
I think you can consider some points to improve your project:
<div class="main"> could be <main>.::before or ::after) to avoid unnecessary HTML elements such as <div class="bg_image">Hope this can help 😃
@Mismisty
Submitted
I would love any and all feedback on this challenge, from the overall look to the code itself. Please let me know if there is any code that is unnecessary or could have been shorten somehow. Thanks, and have a great week!
@juanpb96
Posted
Hey Kim! 👋
Your solution looks good! 🥳
I have some tips for you to improve your project:
div class="attribution" to footer class="attribution" this way you add a more semantic tag in your HTML 😉display: flex in your body but this is causing two columns, so the layout looks a bit weird..review are using inline styles, I consider you can include a class or play with selectors to easily add the margin that you need. Maybe something like .review > img { margin-right: 9px } could work.Hope this helps! 😃
Marked as helpful
@hellomarina
Submitted
Any feedback is welcome! :)
@juanpb96
Posted
Hi Marina! 👋
Congrats on your solution! 🙌
I've seen some things that you can do to improve your project:
font-weight and make it use the same font-family as it is taking the default from browser styles. Also, include cursor: pointer so the user will know that this button is clickable.<br> and play with margin instead 😋Hope you find this useful!
Marked as helpful
@St4niuu
Submitted
Hi! I have started my journey with React, it's the first project that I've done completely all alone. Any tips would be welcome.
@juanpb96
Posted
Hi Staniuu! 👋
Good job in this one! 😃 I was looking at your solution vs the design and I found out few things you can do to improve your project:
border-radius in the first and third cardpadding on the left and right sidesHope this helps!
Marked as helpful
@TrueKapline
Submitted
I am really unsure about the modernity of my solution. Many people are using rems instead of pixels, and I don't know if I'm also should use them at this project.
@juanpb96
Posted
Hey Kapline 👋
Your solution looks great! 😎... I've read this article Pixels vs Rem. It explains very clearly the difference and when to use each one. Hope you find it useful to solve your doubts!
@caarlosdamian
Submitted
Any feedback is always welcome
@juanpb96
Posted
Hi Carlos 👋
Good job on this one! 💪. I noticed that you implemented all the info in your icons as a link, that is what it looks like when you hover over them 🤔. Try to remove hover styles when there is no data available and apply opacity to your text as you did with the icon. Another thing I saw is that links for user blog, twitter and company aren't working as expected.
@nigelvidaaal
Submitted
@juanpb96
Posted
Hi Nigel 👋
Your solution is great! I've noticed that you are positioning your button with percentages and that causes a weird behaviour when someone sees your page in a large screen. I would recommend moving your button inside .form-box and using display: inline-block in your .button (I wonder why you added that additional div 🤔). Then, you can try fixing sizes and position values to make it look as the design.
@Jasper-Ik
Submitted
I had in mind for the layout to use display flex to center the container but the footer portion just had to make it a two column layout so i opted for using margin auto
@juanpb96
Posted
Hi Jasper 👋
Good job on your solution! 👍... As you want to use flex to center your content I will give you one idea for you to try.
In your body set width to 100% and height to 100vh, this takes the total size of the screen (set margin to 0, just to prevent horizontal scrolling). Then, add display: flex and flex-flow: column to keep the layout that you want. To centralize your content use justify-content: center and align-items: center, this will do the magic 🧙. Finally, remove margin in your .container class.
Another thing I saw is that you have 'Document' as your page title.
@andrytoni
Submitted
@juanpb96
Posted
Hi @andrytoni 👋 Good job in your solution!
If you want to improve your project by centering your div differently, I would recommend checking this example: How to center a div with transform
@gab9244
Submitted
The most problematic thing for me was centralizing the layout, I used margin but I don't think that's the right way to do that and also I'm not used to using box-shadow and border-radius.
@juanpb96
Posted
Hi Gabriel 👋.
Good job on your solution! I think you can solve your problem centralizing your content differently. Have you tried grid? ... If you want to, add a new parent container for your main content (or using your body tag works too). This new element should take 100% width and 100vh heigth. Lastly, add place-items: center and that should do the work. Don't forget to remove those margins to avoid horizontal scrolling 😉
Marked as helpful
@UnTalPeluca
Submitted
How can I apply color to the image? In "Order summary component" I used background-image and background-color, but in this case it didn't work
@juanpb96
Posted
Hi 👋
Good job on your solution! 👌
If you want to apply color to your image, try this: background-blend-mode in your .card-image class.
On the other hand, I think you should remove the media query @media screen and (min-width:375px) as you want to work mobile-first.
Happy coding! 😄
Marked as helpful
@tomiwaorimoloye
Submitted
Any feedback would be appreciated.
@juanpb96
Posted
Hi Tomiwa.
Good job on you solution 🙌.
I have a suggestion for you:
span to your anchor tag for social media icons. This is a way to put text there and give screen readers the possibility to know the meaning of the icon and increase your accessibility score..sr-only {
width: 1px;
height: 1px;
position: absolute;
margin: -1px;
padding: 0;
overflow: hidden;
}
Hope that helps. Happy coding! 🥳
Marked as helpful
@Sloth247
Submitted
=== Re-done on 2 September 2021. ===
=== This is original issues raised in July 2021 ===
This is my first submission on frontendmentor. I could not solve below, however most of design is satisfactory;
I appreciate if you provide me good feedbacks.
Many thanks
@juanpb96
Posted
Hi @Sloth247
Good job on your solution 👍
To help you with your questions I consider:
background property that is not working, try using opacity and you will see the change on hover. So, please review your background property 👁️🗨️backgroud-repeat: no-repeat. However, I can't understand your question pretty well.form.addEventListener('submit', function(){})?Hope my suggestions could help you. 🙌
Happy coding!
Marked as helpful
@rogerdummer
Submitted
Hi, please feel free to give me your considerations and feedbacks. It will be very useful to my learning process.
@juanpb96
Posted
Hello Roger Dummer!
Great job on your challenge 🙌, I have some suggestion for you:
font-size through media queries breakpoints.max-width property to solve it. This could help if someone is watching your page on a tablet.Everything else looks good!
Happy coding 😄
@aaronpaulgz
Submitted
Awesome time doing this :D
@juanpb96
Posted
Good job in your solution!!!
It looks great for every view.
Happy coding 😁
@eh-ins
Submitted
What would you improve?
@juanpb96
Posted
Hey @eh-ins , good job on your solution!
I have some suggestions for you:
height in your body tag and give it a value of 50rem for example, to give you your card a posibility to be more centered in the page.Everything else seems great.
Happy coding!
@chinmayagarwal3007
Submitted
All feedbacks are appreciated :)
@juanpb96
Posted
Hey I have looked at your solution and I think you need to improve different things.
In my personal opinion you can try:
.div0 as all of them shared css properties.font-size could help.Your mobile version looks good!