Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
8

Hanana

@meantoes180 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • just a card solution


    Hanana•180
    Submitted about 1 month ago

    1 comment
  • Responsive Rating Card with JS


    Hanana•180
    Submitted almost 2 years ago

    0 comments
  • Three Screen Sizes of Four Card Challenge Using Media Queries


    Hanana•180
    Submitted almost 2 years ago

    0 comments
  • Responsive Social Proof Section using media queries


    Hanana•180
    Submitted almost 2 years ago

    0 comments
  • Profile Card preview


    Hanana•180
    Submitted about 2 years ago

    1 comment
  • Responsive Cards Preview using Flex and Media Queries


    Hanana•180
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • hameedmodibbo•110
    @hameedmodibbo
    Submitted almost 2 years ago

    single price grid component made with grid and flexbox

    1
    Hanana•180
    @meantoes
    Posted almost 2 years ago

    Hi, good job on completing this challenge🙌🏻

    I see that you used the wrong color for some sections, if you want to match the design, you can try them one by one until it matches.

    If you haven't, I suggest you use Live Server extension on VS Code to see how your code would look like, any browser works fine but I recommend you to use Firefox to live the code. It's my preference, I think it's more convenient, especially to inspect the page.

    I hope you find this helpful, have a nice day and happy coding⭐

  • suisoh•10
    @ssuish
    Submitted almost 2 years ago

    QR code component

    3
    Hanana•180
    @meantoes
    Posted almost 2 years ago

    Hi! congrats on completing your first challenge⭐

    I have some recommendations for you

    • wrap your whole content with <main> tag, you can learn more about HTML semantic tags here
    • use relative units for margin, padding, width, and height. learn more about it here

    for resources, I recommend you to check Kevin Powell's YouTube Channel, he gives lots of tricks and tips about CSS. I also recommend Web Dev Simplified, this is my preference, I like the way he explained things.

    oh and, check this video from the CEO of Scrimba, you might become more comfortable in web dev after knowing those checklists.

    hope this helps, have a great day⭐ and happy coding🙌🏻

  • FSKaura•10
    @FSKaura
    Submitted almost 2 years ago

    HTML: div, img, h1, p. CSS: font-size, border-radios, color, width.

    1
    Hanana•180
    @meantoes
    Posted almost 2 years ago

    hi! I see that GitHub can't read your code because of the way you name your file. Try to change your HTML file to index.html. I also recommend you rename your CSS file to style.css and reconnect it in your HTML file.

    You can also check the style-guide file given for background-color. Lastly, try to match the font-size to the design

    Don't forget to download this challenge's starter pack ⭐

    hope this helps, have a good day and keep going🙌🏻⭐

  • Mohamed8754•50
    @Mohamed8754
    Submitted almost 2 years ago

    prudect-card

    #animation
    1
    Hanana•180
    @meantoes
    Posted almost 2 years ago

    hi! congrats on completing the challenge⭐ I have some suggestions that might interest you,

    • wrap the whole content in the <main> tag instead of the div .container

    • use alt attribute for the perfume image

    for the css, use this trick to center the container

    • add these properties to your body element
        
        body {
            /* -- */
            display: flex;
            align-items: center;
            min-height: 100vh
        }
    
    
    • in the .container element, delete margin-top: 100px
    • Use relative units like em or rem for margin, padding, width, and height. here are some sources about CSS units, Relative and Absolute units in CSS and more complex source

    hope this helps

    Marked as helpful
  • Aryan Dogra•170
    @aryandogra2003
    Submitted almost 2 years ago

    Interactive card form using React

    #react
    1
    Hanana•180
    @meantoes
    Posted almost 2 years ago

    hi! congrats on finishing this challenge!

    I have some suggestions for the input type to match the design

    • edit its border and outline's width and color to make it lighter
    • give some space between the label and input-filed by giving a margin
    • create a grid for .exp-date (.month and .year) and CVC

    be sure to check style-guide.md file, it be easier for u to match the design.

    hope this helps🙌🏻 have a nice day⭐

  • Andrei•560
    @Xeotheosis
    Submitted almost 2 years ago

    Single Page Portfolio / React/EmailJS

    #react
    2
    Hanana•180
    @meantoes
    Posted almost 2 years ago

    hi! congrats on finishing this project!

    tbh, I have no idea how u write the code but if I can see the HTML file, I think u need more dividers for each section so u can set them with different sizes and displays.

    here's how I'd do it:

    • div for the hero:
    .hero {
    display: grid;
    grid-template-column: 2fr 1fr
    }
    
    • div for skills:
    .skills {
    display: flex;
    flex-wrap: wrap;
    }
    
    /* add class skill for each item */
    .skill {
    width: calc(100% / 2 - 20px); /* adjust for each screen sizes */
    }
    
    • div for projects' grid:
    .project-grid {
    display: grid;
    grid-template-column: 1fr 1fr; /* adjust for each screen sizes */
    }
    
    • div for contact and input (create two different grids for each):
    .contact {
    display: flex;
    flex-direction: row; /* adjust for each screen sizes */
    justify-content: space-between;
    }
    

    dont forget to add margin for each divs. or in the main-container if u put them in a container.

    hope this helps🙌🏻 have a great day⭐

View more comments
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

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