Skip to content
OverviewSolutions
31
Comments
8

Joseph Fola

@Fola-JoeLagos, Nigeria590 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!

I’m currently learning...

HTML, CSS, JavaScript and React js

Latest solutions

View more solutions

Latest comments

  • Joseph Fola•590
    @Fola-Joe

    Nice work you have here! 😎🎊 Firstly, ensure you have all your CSS codes in your CSS file. It's a pretty good practice. So you could get rid of the style tag in the HTML file. The padding on the class .container is too much. Try reducing it to 2rem, 2.5rem, 3rem etc. Also, try making use of min-height: 100vh; rather than height: 100vh;, so that peradventure your page content gets more than usual, you can scroll to see the remaining content. I hope this helps! Happy coding!

    Marked as helpful
  • Joseph Fola•590
    @Fola-Joe

    Congratulations on your first project here! 😎🎉🎉 So, a few things to consider - concerning the music icon, you could have just used <img src="images/icon-music" alt=""> rather than the long svg tag you used. Also, try to avoid using inline CSS.

    You could solve the whole div issue using this:

    <div class="price">
    <div  class="left-side">
        <img src="images/icon-music" alt="music icon">
        <div class="inner-left-side">
            <h3>Annual Plan</h3>
            <p>$59.99/year</p>
        </div>
    </div>
    <a class="a" href="">Change</a>
</div>



.price {
    background-color: hsl(225, 100%, 98%);
    border-radius: 0.8rem;
    padding: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left-side {
    display: flex;
    align-items: center;
}
.inner-price-left {
    margin-left: 1rem;
}

    You can make adjustments to the values and more often, use rem or em instead of px. Of course, you can make use of your own class names 😄 I hope this helps, happy coding!😁🎈

    Marked as helpful
  • Joseph Fola•590
    @Fola-Joe

    Well done on your first project on Frontend Mentor 🎉🎊 Just make a little adjustment to your css code. First, set your main width to a definite value rather than using percentage

    main {
   max-width: 370px;
}

    You could as well not give the 'main' selector a 'height' property, but edit your body height to min-height and not max-height. I hope this helps! Happy coding!

    Marked as helpful
  • Joseph Fola•590
    @Fola-Joe

    Very nice work you have here 🎉 Regarding your second question, I think you should check this out, especially the article on pixel-perfection: How to get the most out of Frontend-mentor

    Marked as helpful
  • David•80
    @DavetOluwapelumi

    html and css

    #accessibility#angular#animation#cube-css#airtable
    2
    Joseph Fola•590
    @Fola-Joe

    A great work you have here!

    Although, you should make use of the mobile image for the mobile view. You could add it alongside your desktop image in your html code and use this css code:

    @media screen and (max-width: 425px) { 
       .desktop-img {
              display: none;
       }
}
@media screen and (min-width: 426px) {
       .mobile-img {
              display: none;
       }
}

    I hope this helps, happy coding!😀🎊

  • Joseph Fola•590
    @Fola-Joe

    Nice work here! I love it! I would recommend working on a mobile-first workflow before working on the media query for larger screen sizes. So I'd suggest setting .card {max-width: 375px;} and in your media query (min-width: 376px), you could increase the max-width. I hope this helps.

    Marked as helpful
View more comments