Skip to content
OverviewSolutions
20
Comments
46
Nayan Bhatt
@freaky4wrld

All comments

  • Nayan Bhatt•980
    @freaky4wrld

    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
  • Nayan Bhatt•980
    @freaky4wrld

    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
  • Nayan Bhatt•980
    @freaky4wrld

    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
  • Nayan Bhatt•980
    @freaky4wrld

    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
  • Nayan Bhatt•980
    @freaky4wrld

    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
  • Nayan Bhatt•980
    @freaky4wrld

    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
  • Nayan Bhatt•980
    @freaky4wrld

    Hey there, I guess there's a need to make your solution more close to the design specifications....

    • you don't have to make your body element flex, instead make your main element a flex, so that your cards go side-by-side
    • then on reaching the mobile-version width, set the flex-direction to column, so that they become as they are now....

    I would recommend you to have a good look on flex and mobile-responsiveness

    Do have a look on this playlist----> Brad Traversy it contains everything you need right now

    Hope it helps...... glad to help :)

  • Nayan Bhatt•980
    @freaky4wrld

    Hey there, here's what you can do to achieve the hover effect on your image......

    • first of all I would recommend you to wrap your image in a div, there's no harm in that.....
    • then create a new div that's going to give you the hover effect, give it similar width and height styling just like the nft-img
    • then you can add a background color to the newly created div, particularly using an rgba value and a background-image view-icon(eye-svg) and having a z-index of negative value
    .img-overlay:{
     background-image: url(eye-icon.svg);
     background-color: rgba-value;
     width: [similar to nft-img];  
     height: [similar to nft-img];
     z-index: -1;
}
    • give your nft-img a z-index of zero #nft-img{ z-index: 0 }
    • on hover over the parent-element of the image and the overlay...... you can increase the z-index of the overlay, i.e.
    .img-overlay:hover{
      z-index: [value greater than #nft-img] ;
}

    I hope this works, I would recommend you to look for z-index CSS property......glad to help you :)

  • Nayan Bhatt•980
    @freaky4wrld

    Hey there, here you go with the resources you want, hope it helps in solving your issues..

    • grid and flex-box are different in approach.....
      • in flex you can handle elements on a single axis (i.e. either rows or cols/ horizontal-axis or vertical-axis)
      • in grid you can handle elements on a 2-D basis (i.e. both rows and cols/ horizontal and vertical-axis)

    **Resources: ** grid-cheat-sheet, grid-crash-course

    Hope it adds and fills the void...... glad to help

    Marked as helpful
  • Nayan Bhatt•980
    @freaky4wrld

    Hey there, congratulations on completing the challenge......here's what you can do.......

    • to center the card-container class you can give your container some width in percentage and provide it a margin like...
    .card-container{
      width: [some-value-of-your-choice]%;
      margin: [some-value]rem/em/% auto;
}

    this will help you to center the content, you can checkout this article

    • as soon as you give your container class a suitable width, you solved your issues for flex-box adjustments and text-overflow, further if you feel that the text still persist to overflow you can make use of relative rem/em units to solve the issue

    • for deployment you can use vercel/github pages as they are free for your hobbyist deployment YOU CAN EASILY FIND A TUTORIAL ON YOUTUBE

    • FOR YOUR FURTHER QUERIES HERE ARE SOME REFERENCES: -

    Marked as helpful
  • Nayan Bhatt•980
    @freaky4wrld

    Hey there, buddy congratulations on completing the challenge...... as per your question

    • for making a design responsive you always try to look for empty spaces like margin, padding, gaps, and other white-spaces
    • and try to reduce/increase with the apt screen-sizes.....
    • also try to reduce/increase the font-sizes/line-heights if needed....
    • using %/rem/em units is better than hard-coded px...... (to achieve responsiveness px-units prove great for static elements)
    • for making the UI responsive we make use of media-queries

    Hope it helps in adding to your knowledge........ glad that I can be of any use to you!!

    Marked as helpful
  • Nayan Bhatt•980
    @freaky4wrld

    Hey there..... just a few tips to help:

    • you can add border-radius to the place-order button... and a box-shadow property that will improve it....

    • also in the Cancel Order link you can use a link tag(<a>) besides a <p> tag, to make it accessible.....

    • you can also add a bit space-between the button and the link.......

    Rest is amazing, you did great buddy........hope this helps you!!

  • Nayan Bhatt•980
    @freaky4wrld

    Hey there, here's some suggestions that might do the stuff for you....

    • first of all to center your container class you don't have to make the body element a flex, you can achieve it by giving container class(preferred in % not in hard-coded px units) and use the margin property to center it.........
    .container{
    width: [some-value]%;
    margin: [some-value]rem/em/% auto

    • well in the above code we are giving the container class the same top&bottom margin and for the left&right we are letting the browser set some margin.... and that's making our container class to be centered.....

    • in the container class you can add some padding.... to make the container look good

    • for the rest of the elements in the container like h1, p, img elements, try to wrap them in two different divs, divs are used for grouping and there's no harm in using them...

    <div class="container">
   <div class="qr-image">
       <img/>
   </div>
   <div class="card-text">
        <h1></h1>
        <p></p>
   </div>

    Hope this helps in making the required modification..... glad I can help you!!

  • Nayan Bhatt•980
    @freaky4wrld

    Hey there buddy, congratulations on completing the challenge, just a single modification that u can do is :-

    • at screen-size around 822px-810px the images are really squeezing, which kinda look odd...

    • first of all beside using classes like CS, IR, AW you can use a single class, like profile-info, u can do the same for art-1/2/3 & article-1/2/3 use a single classes like profile-img & profile-section, that would be great and easy for you to style them....

    • secondly separate the class of "profile-info" and "profile-img", so that you can handle them separately....

    <div class="profile-section">
      <div class="profile-img"></div>
      <div class="profile-info"></div>
</div>
    • lastly to make your image fit in properly, you can give profile-img class a width of your choice and give its child img a width of 100%, and that will stop the squeezing.....
    .profile-img{
     width: [some-value-of-your-choice]%;
}
.profile-img > img{
     width: 100%;
}

    Hope it helps, and works for you.....happy to be any help to you!!

    Marked as helpful
  • Nayan Bhatt•980
    @freaky4wrld

    Hey there buddy, here's what you can do.........

    • first of all be clear in mind that you will work only with the main-grid component, there's no need of a second-grid, use the below code to center your main-grid
    .main-grid{
        width: [value]%
        margin: [value]rem/em auto;

    that will do the work to center the component....

    • secondly use the same-classes and that you used to position your main-grid component, like the text-classes as it would help you to reduce the redundancy.....

    • now create a hide class to hide the signup-form on button-click, the hide class should be like the below code....

    .hide{
    display: none;
}
    • use the event-listener to toggle between the hide class to show up the thank you message...

    This would be the start to adding modifications to your project, I would suggest you to learn the DOM Manipulation, watch these tutorials and try to resolve your issue

    I hope that would be great to start in the right direction for modifications....... glad if I can be of any use to you....... do let me know what happened after you alter your code!!

    Marked as helpful
  • Nayan Bhatt•980
    @freaky4wrld

    Hey there, congratulations on completing the project, look what I would suggest, if justify content doesn't comes in handy, you can always take help of the gap property.........

    .container{
      display: flex;
       gap: [some value]rem/em;
}

    This would do the work for you, and I would refer to use this cheatsheet every time you get stuck with flexbox

    Hope it resolves your issue......happy to help!!

    Marked as helpful
  • Nayan Bhatt•980
    @freaky4wrld

    Just a suggestion, beside giving your body element a flex property, you could use a div element with a class of card-container , and make it a flexbox.......... to match the design specifically, i.e. making your whole design a card in the center of the body element you can follow the below code:

    .card-container{
       width: [value]%/rem;
       margin: [value]rem/%/em auto;

    that's all I point out, and Congratulations on achieving a milestone....... long way to go

    Hope it helps you.........

    Marked as helpful
  • Nayan Bhatt•980
    @freaky4wrld

    Hey there, well done you did it great, here's what you can do :-

    • either of making your .text_number a span element you can use a button element, that will do the work and make it possible to tab through the ratings

    • for providing the tabbing experience to the user, you have to make your element either

      • button element
      • a(link) element

    Hope it helps in achieving what you wanted..........glad I can be of any use :)

    Marked as helpful