Gautam• 20
@gautam-hub
Submitted
can you please provide feedback and some tips for me?
Konstantin Christ
@Konstantinchrist
All comments
- Konstantin Christ• 450
@Konstantinchrist
Posted
Hi @gautam-hub, I really like your project. I just think that you forgot to make your parents borders round and also I don't understand why your 'add to cart' button has a margin-left of 10 px.
example for the border-radius:
.parent{ border-radius: 1rem; overflow: hidden; /* prevent the img from overflowing*/ }0 - Tobenna• 610
@tobezhanabi
Submitted
I still have mch to learn about designing a responsive website. Building a navigation bar was a bit difficult but it was worth learning the hard way.
Konstantin Christ• 450@Konstantinchrist
Posted
Hi @tobezhanabi, I like your solution, but I highly advise you to use a grid with more difficult layouts, such as this one. You can find lots of videos about CSS grid on youtube etc.
Hope I was able to help you!
0 - Shubh Patel• 110
@ShubhPatel06
Submitted
Was unable to implement the JS part for checking emails. Any feedback will be highly appreciated.
Konstantin Christ• 450@Konstantinchrist
Posted
Hello @ShubhPatel06, I like your project, but I highly advise you to use patterns for the email validation instead of the bulit in required tool.
Example:
const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/; if (emailInput.value.match(emailPattern){ // email valid } else{ // email not valid }If you use this way of email validation, you can give the error at the inputs also if the field is not empty, but the email is not valid. Such patterns exist for everything (e.g. phone number).
Hope it helps!
Marked as helpful
0 - Hafsat Nasidi• 60
@hafsatun2020
Submitted
I can make the view (eye icon) active state small. tried my best but to no avail.
Konstantin Christ• 450@Konstantinchrist
Posted
Hi @hafsatun2020, in my opinion your project is perfect, but still I highly advise you to add some transition to the hover background at the nft image.
Example:
.NFT-image{ transition: background-color 150ms;}I hope I was able to help you!
Marked as helpful
1 - Osman Topuz• 210
@otpz
Submitted
Konstantin Christ• 450@Konstantinchrist
Posted
Hi @optz, I really like your project. One thing I would suggest you to do is work with patterns at the email validation.
Example
const patternEmail = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/; if (inputEmail.value.match(patternEmail){ console.log('email is valid'); }I hope it helps! Konstantin
Marked as helpful
1 - hitch95• 140
@Hitch95
Submitted
Konstantin Christ• 450@Konstantinchrist
Posted
Hi @hitch95, here is a solution for your problem.
Give your main a
display: grid;andgrid-template-columns: repeat(2, 1fr). This gives the grid two columns for every row.Give your
id="one"itemgrid-column: span 2;and this says that theid="one"item is 2 fractions wide.1fr = 1 fraction
If you have more questions about grid, just ask. Hope it helps!
0 - Luke Janssen• 210
@lukejans
Submitted
Konstantin Christ• 450@Konstantinchrist
Posted
Hi @lukejans, you can center your main by giving the body display: flex; and then align-items: center; and justify-content: center; . Also to round the objects corners you can give the main a border-radius and then also an overflow: hidden; because the div-container are overflowing.
Ihope it helps, Konstantin
Marked as helpful
0 - Konstantin Christ• 450
@Konstantinchrist
Submitted
Hi guys, I hope you're doing great. I just wanted to know if my solution for the purple opacity image thing are valid or if there are better solutions. Thanks for the support :).
Konstantin
Konstantin Christ• 450@Konstantinchrist
Posted
Also I didn't know how to edit so soecific words so it'd be helpful if someone knows that :)
0
