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

All comments

  • Deepali Panchal•310
    @Deepali25-KSubmitted about 1 year ago

    Hello there! This is my code solution for the "Fylo Landing Page with Two Column Layout" challenge.

    I would love to receive some feedback. I'm eager to learn and improve my coding skills, so any constructive criticism or suggestions for improvement would be greatly appreciated.

    Thank you in advance for taking the time to review my work, and I look forward to hearing your thoughts!

    Fylo Landing Page with Two Column Layout

    1
    faizan•2,420
    @afaiz-spacePosted about 1 year ago

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

    • Header content is overflowing. The ul tag in the footer also has an overflow
    0
  • faizan•2,420
    @afaiz-spacePosted over 1 year ago

    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;
}
    1
  • Danielle Aranda•20
    @DLMedeiroSubmitted over 1 year ago

    Looking for input on how others would style the "$29 per month" piece.

    Currently I have a H3 with 2 spans, the appearance is close, but this solution doesn't feel right and I wasn't able to center the "per month" portion.

    Thanks!

    Price Grid Gomponent using CSS Grid

    2
    faizan•2,420
    @afaiz-spacePosted over 1 year ago

    Hey @DLMedeiro,

    • add display: flex; align-items: center; gap: 8px; in h3 tag for vertical center alignment.
    0
  • faizan•2,420
    @afaiz-spacePosted over 1 year ago

    Hey @deepaksaroha,

    • background curve images used in the body element in the CSS file.
    • remove height: 80%; from .container class.
    Marked as helpful
    1
  • Karen Lourenço•380
    @KarenMascarenhasLourencoSubmitted over 1 year ago

    Is my code understandable?

    Did I use the semantic HTML tags correctly, should I add more or less?

    In what areas of my code can I improve on?

    All feedback is greatly appreciate. It helps me to improve as a frontend developer. Thanks!

    Clipboard Landing Page

    1
    faizan•2,420
    @afaiz-spacePosted over 1 year ago

    Hey, @KarenMascarenhasLourenco

    • add hover color in social icon and footer links.
    0
  • faizan•2,420
    @afaiz-spacePosted over 1 year ago

    hey @nikitabarnawal,

    • change color / 100.
    • why not use heading tags for heading.
    • verticle align icons and heading.
    0
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted almost 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Intro section with dropdown navigation.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Intro section with dropdown navigation

    9
    faizan•2,420
    @afaiz-spacePosted almost 2 years ago

    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.
    0
  • faizan•2,420
    @afaiz-spacePosted almost 2 years ago

    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.
    1
  • Endo_hr•60
    @EndoHrSubmitted almost 2 years ago

    During this challenge, I faced too many questions and problems. If you r able to answer, please help me to figure.

    1. To centering that card, I used position: relative (left, top). But I think it's not good idea to do responsive thing. I thought I had to use display: flex then (justify, align to center). But when I did that I don't know my align-items didn't work, so I just Googled and found I had to set the height of the card 100%, but to do that, I can't use border-radius (cuz my height is now 100%). I had more problems, but this one is the hardest one to figure.

    Product-preview-card-component

    4
    faizan•2,420
    @afaiz-spacePosted almost 2 years ago

    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.
    0
  • faizan•2,420
    @afaiz-spacePosted almost 2 years ago

    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.

    0
  • faizan•2,420
    @afaiz-spacePosted almost 2 years ago

    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
    0
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted almost 2 years ago

    Hello, Frontend Mentor community! This is my solution to the News homepage.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    News homepage

    9
    faizan•2,420
    @afaiz-spacePosted almost 2 years ago

    @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)
    0