Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
8
Mohd Gulam Ansari
@gulamansari57181

All comments

  • Luigi•240
    @luigi-perone
    Submitted almost 3 years ago

    3-column-preview-card-component using html-css

    4
    Mohd Gulam Ansari•210
    @gulamansari57181
    Posted almost 3 years ago

    You can explicitly import the fonts

    1. Either in your css file with the help of @import

    2)Or inside your html file using <link> which is available on google fonts once you click on the link provided inside the styleguide.md file.

    Hope this help. Happy Coding !

    Marked as helpful
  • Yunus Emre Çınar•360
    @yunusemrecinar
    Submitted almost 3 years ago

    Single Price Grid Component

    2
    Mohd Gulam Ansari•210
    @gulamansari57181
    Posted almost 3 years ago

    hey @correlucas how can he "you can improve it replacing the h3 with h3" , I think there is a typo in your suggestion.

    Is it h1 to h3 ?

  • Mohit Jain•190
    @MOHITBILALA
    Submitted almost 3 years ago

    This beautiful component was created with grid and flex

    2
    Mohd Gulam Ansari•210
    @gulamansari57181
    Posted almost 3 years ago

    Hey congratulations buddy ! I have gone through your live link. Great work ! But I have a small suggestion.

    On 100% viewport the main image is spreading inappropriately, so you can try below two fixes:

    1. Either limit the overall container in terms of width.i.e. ''' main{ width:80% //Yoc can play around with this } '''
    2. Or You can use background-image property as: background-position:contain;

    Hope this help. Happy Coding !!

    Marked as helpful
  • Ejemeare•30
    @Ejemeare
    Submitted almost 3 years ago

    Product display

    5
    Mohd Gulam Ansari•210
    @gulamansari57181
    Posted almost 3 years ago

    Hey buddy. I have seen your query and you must have been so frustrated. hahahah !!!! here is a solution to your problem

    Solution: in <img> tag you had written "src="\media\product.jpg" The issue is you have used backward slash "" . You should use forward slash "/" in your absolute path.

    conclusion: <img id= "img" src="media/product.jpg"> see the magic.

    Happy Coding !!! Do Upvote if you feel it helping.

    Marked as helpful
  • HassanCode985•10
    @HassanCode985
    Submitted almost 3 years ago

    Qr-Code

    1
    Mohd Gulam Ansari•210
    @gulamansari57181
    Posted almost 3 years ago

    Hello Hasan !!!! I have gone through your live site and its amazing but I have small suggestion for you.

    1. The QR code container , please do make it corner bit round by using

    .img-container{

    border-radius:"1rem"

    }

    1. Please do take care of font-size , font-style , letter spacing because it creat a huge impact on professionally build website.

    Happy Coding !!!!

    Marked as helpful
  • Hayley•260
    @HaylzRandom
    Submitted almost 3 years ago

    Stats Preview Card Component built with HTML, CSS and Flexbox

    1
    Mohd Gulam Ansari•210
    @gulamansari57181
    Posted almost 3 years ago

    Hello Hayley !!!!!!!!!

    Hope you doing well. I have gone through your project link, And found that its lacking in terms of margin and also border radius is not applied to left-side corner.

    Tips:

    1. To make border radius on all corner of container you can use

    .container { border-radius:20px; //To apply the property on all the side }

    1. To make margin from all the side

    .container{ margin:2em: }

    Hope this will help. Happy Coding !!!!!!!!

  • Nico Arifin•260
    @N1Coder
    Submitted almost 3 years ago

    Perfume Card Component Using Scss

    #sass/scss
    2
    Mohd Gulam Ansari•210
    @gulamansari57181
    Posted almost 3 years ago

    Ya also take care of the typography. Main heading in the design is rendering in three lines whereas in your design it is rendering in two line only. Tip : Make sure to use responsive font-size as per the viewport. So you can use (e.g. rem ,em) for typography. Note: use rem : for font-size and use em: for margin and padding for better control and code readability.

    👋 Happy Coding !!!👋

    Marked as helpful
  • Ryan Cruse•130
    @Cruse180795
    Submitted about 3 years ago

    QR Code with Sass

    #sass/scss
    1
    Mohd Gulam Ansari•210
    @gulamansari57181
    Posted about 3 years ago

    Use the rgba () Function to Overlay Background Image With Color in CSS We can use the rgba () function to create a color overlay over an image.

    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

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