Skip to content
OverviewSolutions
24
Comments
8
Konstantin Christ
@Konstantinchrist

All comments

  • Konstantin Christ•450
    @KonstantinchristPosted almost 2 years ago

    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
    @tobezhanabiSubmitted almost 2 years ago

    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.

    News Homepage

    1
    Konstantin Christ•450
    @KonstantinchristPosted almost 2 years ago

    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
  • Konstantin Christ•450
    @KonstantinchristPosted almost 2 years ago

    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
  • Konstantin Christ•450
    @KonstantinchristPosted almost 2 years ago

    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
  • Konstantin Christ•450
    @KonstantinchristPosted almost 2 years ago

    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
  • Konstantin Christ•450
    @KonstantinchristPosted about 2 years ago

    Hi @hitch95, here is a solution for your problem.

    Give your main a display: grid; and grid-template-columns: repeat(2, 1fr). This gives the grid two columns for every row.

    Give your id="one" item grid-column: span 2; and this says that the id="one"item is 2 fractions wide.

    1fr = 1 fraction

    If you have more questions about grid, just ask. Hope it helps!

    0
  • Konstantin Christ•450
    @KonstantinchristPosted about 2 years ago

    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
    @KonstantinchristSubmitted about 2 years ago

    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

    Responsive business stats site

    2
    Konstantin Christ•450
    @KonstantinchristPosted about 2 years ago

    Also I didn't know how to edit so soecific words so it'd be helpful if someone knows that :)

    0