Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
8
Rohit Kumar Saini
@rockingrohit9639

All comments

  • John Soto•130
    @Soto-J
    Submitted about 3 years ago

    Flexbox

    1
    Rohit Kumar Saini•270
    @rockingrohit9639
    Posted about 3 years ago

    Hey @Soto-J

    I saw your submission and found some issues. I am giving you some suggestions which will help you in improving your design.

    Suggestion 1

    Instead of giving the class card-container to the body give this class to the div inside body. Then you can give the following styles to this class -

    .card-container {
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

    This will make sure that all your content is in the center of the screen. Then you can give property flex:1 to both of your sections inside the main. This will make sure that both of your sections have equal width.

    Suggestion 2

    To make the overlay effect you can do the following.

    • Add an empty div as <div class="overlay"></div> in your picture section.
    • Add the following style to picture section
    .picture {
        position: relative;
    }
    

    Then you can give the following styles to overlay

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: hsl(277, 64%, 61%);
        mix-blend-mode: multiply;
    }
    

    You can also try different values of mix-blend-mode.

    I hope this will help you in improving your design.

    Marked as helpful
  • João Gabriel•340
    @joaojgabriel
    Submitted about 3 years ago

    Profile Card

    2
    Rohit Kumar Saini•270
    @rockingrohit9639
    Posted about 3 years ago

    Hey @joaojgabriel

    Your background does not match the provided design. There are two approaches to doing this.

    First Approach

    • You can use background-image to set the background images and play with background properties like background-size, background-repeat, etc. to make your background look like a design.

    Second Approach

    • You can give position: relative; to the parent element and can have two img with the source of images and you can position them accordingly.
    .parent {
        position: relative;
    }
    
    .img-top {
        position: absolute;
        width: 100%;
        top: -50%; /* this can be different according to you.*/
        left: -50%; /* this can be different according to you.*/
    }
    
    .img-bottom {
        position: absolute;
        width: 100%;
        bottom: -50%; /* this can be different according to you.*/
        right: -50%; /* this can be different according to you.*/
    }
    
    Hope this will help you in improving your design.
    
    Marked as helpful
  • John Soto•130
    @Soto-J
    Submitted about 3 years ago

    Flexbox

    1
    Rohit Kumar Saini•270
    @rockingrohit9639
    Posted about 3 years ago

    Hey @Soto-J I have some suggestions for you.

    • You can use background-repeat: no-repeat; which will make sure that your background image does not repeat.
    • You can use background-size: contain; which will maintain the aspect ratio of the image, you can also use background-size: cover; according to your need.
    • You can give a background color to the body from the style guide. I think the color is hsl(245, 75%, 52%);

    Only these changes will make your design a lot better.

    • To remove the report warning you can give an alt text in your image.

    Hope this helps you.

    Marked as helpful
  • Kachi•20
    @IAmKachi
    Submitted about 3 years ago

    Product Preview Card Challenge

    #accessibility
    3
    Rohit Kumar Saini•270
    @rockingrohit9639
    Posted about 3 years ago

    Hey @IAmKachi

    Media queries are difficult at first but when you get to know about they become a lot easier. You can refer to this link to learn about media queries -> Media Queries

    Firstly learn about these two media queries and more than half of the work will be done -

     @media only screen and (min-width: 900px) {}
     @media only screen and (max-width: 900px) {}
    
    • You should use semantic HTML tags, they define the meaning to both the developers and browsers. Some tags are - `main, section, article, header, footer, etc. To learn more HTML, CSS or JavaScript follow this link - w3schools
  • Isaac•210
    @Isaaclkm
    Submitted about 3 years ago

    Responsive Layout using Flex-box

    2
    Rohit Kumar Saini•270
    @rockingrohit9639
    Posted about 3 years ago

    Hey @Isaaclkm, It is good to have classes on all of your HTML elements, but there are some CSS Selectors which are very helpful while working and styling using CSS. To learn about different CSS Selectors you can go with the following link. CSS Selectors

    Apart from it, some issues which I found are:-

    • You should use semantic HTML tags like main, section, footer, etc in your HTML.
    • You should use / in image src not \ E.g. Use this
    <img src=`images/perf1.jpg` alt=`perfume bottle`>
    

    not this

    <img src=`images\perf1.jpg` alt=`perfume bottle`>
    
    Marked as helpful
  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003
    Submitted about 3 years ago

    Cypto Tab

    #sass/scss#accessibility
    2
    Rohit Kumar Saini•270
    @rockingrohit9639
    Posted about 3 years ago

    Hey, @Mosestule2003 Congratulations on your submission.

    I looked at your design and found that it could be improved more. The things which you can improve are --

    • Use the font-size of paragraph to be 18px and don't have any <br> in your <p>. It will automatically fit with the container width.
    • The color of the paragraph also does not match, you can change it too.
    • You should have all the content in <main> and you should also have <footer>. So your report will not be having any issues.
    • Add <!DOCTYPE html> at the top of your HTML document.
    • You should have width: 100% in the CSS not at the direct element.
    • You should not have <p> inside H3 or any other heading element, instead you can use <span>.

    I hope this feedback will help you a little bit in improving your design. All the best.

  • Nino Tsitsriashvili•110
    @NinoTsitsriashvili
    Submitted about 3 years ago

    NFT Card

    2
    Rohit Kumar Saini•270
    @rockingrohit9639
    Posted about 3 years ago

    Hello Nino, I think your live site url is not working fine. It is giving a 404 page not found error. You should update this.

  • Brian Schooler•440
    @superschooler
    Submitted about 3 years ago

    NFT Preview Card Component

    2
    Rohit Kumar Saini•270
    @rockingrohit9639
    Posted about 3 years ago

    Hey @superschooler,

    You can use

    body {
          display: flex;
          align-items: center;
          justify-content: center;
    }
    

    This will immediately make your solution more accurate to the design.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub