Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
20
Comments
46

Nayan Bhatt

@freaky4wrld1,000 points

Trying to acquire most of the knowledge to develop my skills of developing the web. Currently know to create very basic static websites without any framework. Looking forward to meet some of the creative mind to mentor and guide me along my journey.

I’m currently learning...

JavaScript 🥅 CSS Animations 🫠 React.js 🧘‍♂️

Latest solutions

  • Advice Generator with tailwind CSS and Vanilla JS

    #accessibility#animation#tailwind-css#fetch

    Nayan Bhatt•1,000
    Submitted over 1 year ago

    1 comment
  • Notification page using Tailwind CSS, Vanilla JS, Animate JS

    #animation#tailwind-css#accessibility

    Nayan Bhatt•1,000
    Submitted almost 2 years ago

    0 comments
  • Expense chart using SASS-Vanilla Js-Chart.js

    #sass/scss#chart-js

    Nayan Bhatt•1,000
    Submitted almost 2 years ago

    0 comments
  • Time Tracking Dashboard with SASS and Vanilla JS

    #sass/scss#animation

    Nayan Bhatt•1,000
    Submitted almost 2 years ago

    0 comments
  • Age-calculator with Vanilla JS and Tailwind CSS

    #tailwind-css#accessibility

    Nayan Bhatt•1,000
    Submitted almost 2 years ago

    1 comment
  • Manage Landing Page with tailwind css and Vanilla JS

    #animation#tailwind-css

    Nayan Bhatt•1,000
    Submitted almost 2 years ago

    0 comments
View more solutions

Latest comments

  • Chanawin Kamolpanus•350
    @Chanawin-kmpn
    Submitted over 1 year ago

    Workit landing page using Flexbox

    1
    Nayan Bhatt•1,000
    @freaky4wrld
    Posted over 1 year ago

    Hey there here's a link to a video that's great in differentiating in rem and em, by Brad Traversy !!!

    I hope this helps in resolving your query.......

    Marked as helpful
  • Gabriel Noss•310
    @GabrielNoss
    Submitted over 1 year ago

    3 column preview card. Flex Mobile and grid to desktop

    2
    Nayan Bhatt•1,000
    @freaky4wrld
    Posted over 1 year ago

    Hey there buddy congratulations on completing the challenge, as far as your queries are concerned here's what you can do..........

    • first of all remove that a tag inside the button, that's the problem that the text "Learn More", shows up when you hover over that, button is complete in itself, it doesn't need <a> tag inside it, you can always use javascript to decide the functionality of the button and it's easily accessible like the <a> tag, follow the code...... <button class="sedan/suv/luxury-btn">Learn More<button>

    • then to resolve your increasing height issue, in your code you have given a border: none property to your button and when you are hovering over it you are providing it with new borders as border: 2px solid white , that's what is causing the whole problem.....here's what you can do

    button{
            // add the border to the button with the same background color of your button
            border: 2px solid [color-same-as-background-color-of-button];
    }
    
    button:hover{
              // remove the border property from here and do the same you were doing
    }
    

    I hope this clears all your doubt, and makes it easy for you........glad to help!!!

    Marked as helpful
  • Sulthan-Sabilillah•20
    @Sulthan-Sabilillah
    Submitted over 1 year ago

    Signup Component using Tailwind CSS

    #tailwind-css
    1
    Nayan Bhatt•1,000
    @freaky4wrld
    Posted over 1 year ago

    Hey there buddy, hope you having a good day........ follow the steps to get the image on your website....

    • move your images folder to public folder, vercel isn't able to understand where to look for the image that you have referenced in your html/css files....... it can only access things that are in the public folder.

    • then you have to relink the images in your html and css files, couple of commits would be good to save the changes.

    • then you have to redeploy your project on vercel and it will surely work.

    Hope this helps , if you have any other confusion do ask... I'm glad to resolve your issue

    Marked as helpful
  • Mailoon01•70
    @Mailoon01
    Submitted over 1 year ago

    Css,html and JavaScript

    1
    Nayan Bhatt•1,000
    @freaky4wrld
    Posted over 1 year ago

    Hey there buddy, hope you doing great ... and as of your question you doesn't need any money to learn Javascript......here are some of the resources that I would recommend

    • Brad Traversy Vanilla JS
    • You can go to freeCodeCamp site
    • Or can check out Odin Project site

    Note The above two site are kind of your very own boot-camp without spending any money and are self-paced.....

    So chin up buddy, and go for it!!! Hope it helps and I'm glad to be of any use.......

    Marked as helpful
  • Freedteck•130
    @Freedteck
    Submitted over 1 year ago

    Stats preview card component using HTML and CSS

    2
    Nayan Bhatt•1,000
    @freaky4wrld
    Posted over 1 year ago

    Hey buddy......hope you doing great, here's what I would suggest you to do

    • give a ids of mobile and desktop to your images........ now apply the below styles
    #mobile{
         display: hide;
    }
    #desktop{
         display: block;
          some other styles to position the image/height and width etc....
    }
    
    • now you can use media queries to assist you for achieving your image switching on reducing the width.......
    @media screen and (max-width: mobile-width/any width you want in px){
             #mobile{
                             display: block;
                             other styles that at you want
               }
             #desktop{
                           display: none;
              }
    

    That will do the work.....hope this helped you, glad to help you buddy!! Keep learning and coding!!!

    Marked as helpful
  • Meribe Victor•90
    @Mervic05
    Submitted over 1 year ago

    New-homepage with CSS Grid, Flexbox and Javascript

    2
    Nayan Bhatt•1,000
    @freaky4wrld
    Posted over 1 year ago

    Hey there buddy.....hope you doing great!! Here's what you can do to achieve the design goals

    • first of all you don't need to have two overlay containers, you can do so by having a div with a class of overlay and put it below body
    <body>
        <div class="overlay"></div>
         ............
         ............
         ............
    </body>
    
    • now give it the following property........
    .overlay{
           display: none;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            background-color: rgba(0,0,0,0.7);
    }
    .overlay.enabled{
            display: initial;
    }
    
    • do remember to toggle the class of enabled on button clicks.............

    I hope this works and help you, glad to be of any use!!!!

    Marked as helpful
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

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

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