Skip to content
OverviewSolutions
24
Comments
316
faizan
@afaiz-space

All comments

  • faizan•2,420
    @afaiz-space

    @Deepali25-Kv, hi..... I noticed some issues in your design.

    • Header content is overflowing. The ul tag in the footer also has an overflow
  • faizan•2,420
    @afaiz-space

    Hey @cristinakellyt .

    When hovering over the button of number 2. Then the color of the button of number 1 changes. This is happening with each and every button. When you hover over the forward button, then the hover effect will be seen on the button before it.

    -- I think there is a problem.

    #rating-values input:hover+input {
background-color: #959eac;
color: #fff;
}
  • faizan•2,420
    @afaiz-space

    Hey @DLMedeiro,

    • add display: flex; align-items: center; gap: 8px; in h3 tag for vertical center alignment.
  • faizan•2,420
    @afaiz-space

    Hey @deepaksaroha,

    • background curve images used in the body element in the CSS file.
    • remove height: 80%; from .container class.
    Marked as helpful
  • faizan•2,420
    @afaiz-space

    Hey, @KarenMascarenhasLourenco

    • add hover color in social icon and footer links.
  • faizan•2,420
    @afaiz-space

    hey @nikitabarnawal,

    • change color / 100.
    • why not use heading tags for heading.
    • verticle align icons and heading.
  • faizan•2,420
    @afaiz-space

    Hey @catherineisonline,

    • if not provide any hyperlink in the anchor tag. then use # ex (<a href="#">Todo List</a>)
    • add line-height: normal; in the button element.
    • replace min-width:1000px; with min-width:1200px; in the main element.
  • faizan•2,420
    @afaiz-space

    Hey @nukettas, congratulations on completing the challenge.

    • instead of using the top left property use the grid property then you will get a better result.
    • also make a responsive website. Must have a mobile-first approach.
  • faizan•2,420
    @afaiz-space

    Hey @EndoHr, congratulation on completing the first challenge.

    add

    body {
    /*background-color: hsl(30, 38%, 92%); */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    remove position left and top property from cart class.

    .cart {
    /* position: relative; */ 
    /* left: 28%; */
    /* top: 80px; */
    display: flex;
    border-radius: 10px;
    width: 35rem;
    flex-direction: row;
    overflow: hidden;
}
    • remove height and replace width:21%; with width:50%; in the .perfume class.
    • replace width:21%; with width:50%; in the .details class.

    remove top and left property from the media cart class.

    @media only screen and (max-width: 600px)
.cart {
    /* top: 10px; */
    flex-direction: column;
    /* left: 5%; */
    width: 100%;
}
    • replace /* width: 90%; */ with width: 100%; in the media .perfume_mob class.
  • faizan•2,420
    @afaiz-space

    Hey @cmb347827,

    • add display: grid; place-items: center; min-height: 100vh; in the body element. remove all properties from the main element.
    • add border-radius:12px; in the .container class.

    replace

    main .container form .svg {
    width: 38px;
    height: 38px;
    background-color: Silver;
    background-color: #7c8798;
    border-radius: 50%;
}

    with

     .svg-parent {
    /* border: 2px solid red; */
    width: 40px;
    height: 40px;
    display: grid;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8f8f8;
}

    for logo alignment appropriately.

  • faizan•2,420
    @afaiz-space

    Hey @irfanhfzh,

    ongratulation on completing the challenges. I noticed an issue in your project.

    • add align-items: center; justify-content: space-evenly; and replace padding: 78px 121px 64px 70px; with padding: 0 30px; in the .card__content class.
    • remove height: 180px; from the .card__summary class
    • replace width: 350px; with width: 100%; and remove margin-top: auto; from the .card__socials class
  • faizan•2,420
    @afaiz-space

    @catherineisonline

    • add box-sizing: border-box; in the ** * universal** selector;
    • replace height:100vh; with the min-height:100vh; in the body element.
    • remove margin-top: -0.6rem; from the .featured a element.
    • replace align-items: top; with align-items: flex-start; in the .post class.(Content is overflowing by giving height of post class)
  • faizan•2,420
    @afaiz-space

    Hey @candiuk

    • add min-height: 100vh; in the body element.
    • remove max-width:350px; and add width:100%; in the card class.
  • faizan•2,420
    @afaiz-space

    Hey @simplysabir

    • add a curved background image in the background.
    • add min-height:100vh; in the body and the .container class. -add height: 350px; in the .cards class.
    • remove the margin from the card1, card2 and card3 in the class.
    • add self-align:flex-start; in the card1.
    • add self-align:center; in the card2.
    • add self-align:flex-end; in the card3.

    same property used in the rating card.

    Marked as helpful
  • faizan•2,420
    @afaiz-space

    Hey, @josuep723

    • Remove width and add padding in the texto class.
    .texto {
    /* width: 80%; */
    padding: 10px;
}
    Marked as helpful
  • faizan•2,420
    @afaiz-space

    Hey @Souheib-Aloui

    • background circle image used in the body element with the help of background-image property use
  • faizan•2,420
    @afaiz-space

    Hey, @chambrin congratulation on completing the challenges.

    • also add a hover effect in the image and add an eye SVG image on the image.
    • add align-items: center; in the .content-bottom div class.
  • faizan•2,420
    @afaiz-space

    Hey, @Noseriousv congratulation on the completing challenges.

    • remove background color from the ( * ) universal selector.
    • add background color in the body element.

    . . keep it up......

    Marked as helpful