Skip to content
OverviewSolutions
15
Comments
249
P

Atif Iqbal

@atif-devPakistan3,230 points

Interested in quality web development

I’m currently learning...

professional development through frontendmentor.

Latest solutions

View more solutions

Latest comments

  • Timony•190
    @Tori-BemideSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I found it a lot easier to do compared to previous projects.

    What specific areas of your project would you like help with?

    I'm always looking for ways to improve so any opinion and advice is very helpful. Thanks

    Blog Preview Card with CSS Flexbox

    #accessibility
    1
    P
    Atif Iqbal•3,230
    @atif-devPosted 7 days ago

    Hi Timony, congrats🎉 on completing the challenge.

    Use html semantic elemnets to avoid accessibility issues. Following is structure for semantic elements:

    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>

    Hope you will find this Feedback Helpful.

    0
  • P
    Atif Iqbal•3,230
    @atif-devPosted 9 days ago

    Hi EwkaKonewka, congrats on completing the challenge.

    To avoid accessibility issue "All page content should be contained by landmarks" use code as :

    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    Marked as helpful
    0
  • P
    Atif Iqbal•3,230
    @atif-devPosted over 1 year ago

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include a live preview link of your project. It is better for someone to check your preview project while interacting with code.
    • Include a README file in your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.
    • Have seen your project in my browser(1366 * 768), container looks big. I think if you will add margin top and margin bottom on container and will make the container little bit smalller(height wise) then view will look NICE. You can also check responsiveneess for different screen sizes using LT browser(Download: LT browser)

    (Have any questions🧪?reply to this comment😇)

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful
    1
  • P
    Atif Iqbal•3,230
    @atif-devPosted over 1 year ago

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • For better preview and centered, modify your code as:
    1. Add min-height: 100vh; in body selector inside CSS.
    2. Remove all CSS code of main selector.
    3. Add margin-top: 1em; in .attribution selector.
    .container {
  display: flex;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 0.1rem solid #ebdddf;
  box-shadow: 0 0.2rem 1rem black;
  height: 25rem;
  max-width: 520px;
}
.left-side {
    background: url(images/image-product-desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 50%;
}
@media (max-width: 525px)
.container {
    display: flex;
    flex-direction: column;
    height: 39rem;
    width: 20rem;
}

@media (max-width: 525px)
.left-side {
    background: url(images/image-product-mobile.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝: Twitter , Instagram , LinkedIn , GitHub

    0
  • P
    Atif Iqbal•3,230
    @atif-devPosted over 1 year ago

    Hi, congrats🎉 on completing the challenge. Better take care about following points.

    • According to requirements, your "Try it free" button 'f' should be capitalized and set the hover effect that is required.
    • There should be a curved shape before footer. Check design/image file.
    • Footer social icons are not in round shape and there is no hover effect on them.
    • You need to fix Subscribe button position.
    • Email validation is not working.
    • In responsive mode it is better to center Subscribe button and footer content.
    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.
    • It is preferred to use em unit for margin and padding and rem unit for font-size. Watch here.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful
    0
  • P
    Atif Iqbal•3,230
    @atif-devPosted over 1 year ago

    Hi, congrats🎉 on completing the challenge. Better take about following points:

    • You must be seeing Accessibility Issue, generated by FEM Report Generator. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • Your preview page needs to be responsive for different screens. For a better preview, centered and responsive modify your code as follows:
    body {
    background-color: var(--dark-blue);
    display: grid;
    place-content: center;
    min-height: 100vh;
}

    @media screen and (min-width: 500px)
.container-card {
    /* margin: 25%; */
    /* max-width: 600px; */
    border-radius: 20px;
    box-shadow: 1px 7px 40px rgb(21, 30, 36);
}

    .container-card {
    background-color: var(--dark-grayish-blue);
    margin: 0em 1em;
    max-width: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem 7rem 1rem;
    border-radius: 10px;
    box-shadow: 1px 3px 10px rgb(21, 30, 36);
}

    • If you are enough comfortable with CSS better learn about responsive units and responsiveness. For responsivness learning, take Conquering Responsive Layouts short course.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include a description and live preview link of your project.

    • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

    --Got any questions, REPLY--

    Hope you will find this Feedback Helpful.

    Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

    Marked as helpful
    0
View more comments