Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
2

Shaurya Gupta

@madebyshauryaHamilton, ON, Canada100 points

My name is Shaurya Gupta from Canada and I am learning iOS Development

Latest solutions

  • Vanilla Javascript, HTML & CSS Countries Project

    #fetch

    Shaurya Gupta•100
    Submitted about 1 year ago

    0 comments
  • Rating Component - Vanilla Javascript and HTML, CSS


    Shaurya Gupta•100
    Submitted over 1 year ago

    0 comments
  • Product Card: CSS & HTML


    Shaurya Gupta•100
    Submitted over 1 year ago

    I don't really need a lot of help on actually building with plain HTML and CSS, but yes, I would want to explore more framework which can boost my performance. I know tailwind CSS, but I haven't used it too much but I do know how to use tailwind and I might include that in one of my future projects.


    1 comment
  • Results Component


    Shaurya Gupta•100
    Submitted over 1 year ago

    I would really like help with the part at the end where when you make a responsive and the both of the divs overlap each other I did in a very bad way. I think there is a better solution because I used position absolute and added like lots of margins, which I think is not the right way to go, and I would really want to improve that and learn more about how I can tackle, that type of issue in the future.


    0 comments
  • QR-Code-Project


    Shaurya Gupta•100
    Submitted over 1 year ago

    0 comments

Latest comments

  • Rossella Ferrandino•10
    @RossellaFer
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I planned the HTML beforehand, thinking about the semantic elements that could be used for the different sections of the design.

    Next time I would try out a CSS framework, or extend the design with some micro interactions on hover.

    What challenges did you encounter, and how did you overcome them?

    Getting the colors right without the use of Figma

    What specific areas of your project would you like help with?
    1. What semantic elements would you use for this layout? I chose because it is meant for a reusable component.
    2. What do you think about the CSS organization? I tried to have the more general rules at the top and then move on to the elements top to bottom

    Results summary using HTML/CSS/JS

    2
    Shaurya Gupta•100
    @madebyshaurya
    Posted over 1 year ago

    Hi, I wanted to say that if you were having trouble with colours, you can use the "style-guide" file included in every frontend mentor project. The style guide has specific colours which you can copy-paste in your website.

    If you found this useful please upvote this comment, thanks.

  • Jesús Rico•10
    @Riguedev
    Submitted over 1 year ago

    I used HTML5, CSS with custom properties and a mobile-first approach

    1
    Shaurya Gupta•100
    @madebyshaurya
    Posted over 1 year ago

    To be honest I am not a CSS pro either but looking at your code I would say to keep your code as concise and easy to read as possible. You can take a look at the way I did it (even though it also might have some problems in it.)

        height: 100%;
    }
    
    html {
        display: table;
        margin: auto;
    }
    
    body {
        display: table-cell;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        background-color: #d6e2f0;
        background-size: cover;
    }
    
    img {
        width: 300px;
        border-radius: 15px;
        margin-top: 15px;
    }
    
    h2 {
        padding-left: 25px;
        padding-right: 25px;
        text-align: center;
        font-family: 'Outfit';
    
    }
    
    .mainDiv {
        background-color: white;
        width: 330px;
        height: 500px;
        text-align: center;
        /* margin-top: 100px; */
        /* margin-left: 50px; */
        border-radius: 15px;
    }
    
    p {
        font-family: 'Outfit';
        color: #7b879d;
        padding-left: 40px;
        padding-right: 40px;
        font-size: 15px;
        text-align: center;
    } ```
    
    Please mark as helpful is this helped.
    
    Marked as helpful

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