Skip to content
OverviewSolutions
20
Comments
46

Nayan Bhatt

@freaky4wrld980 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

View more solutions

Latest comments

  • Nayan Bhatt•980
    @freaky4wrldPosted 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
    0
  • Nayan Bhatt•980
    @freaky4wrldPosted 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
    1
  • Nayan Bhatt•980
    @freaky4wrldPosted 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
    0
  • Nayan Bhatt•980
    @freaky4wrldPosted 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

    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
    1
  • Nayan Bhatt•980
    @freaky4wrldPosted 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
    0
  • Nayan Bhatt•980
    @freaky4wrldPosted 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
    0
View more comments