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
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!
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 😃
All feedbacks is welcome.
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 😃
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!
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! 😃
Any feedback is welcome! :)
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!
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.
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!
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.
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!
Any feedback is always welcome
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.
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.
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
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.
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
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.
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 😉
