Skip to content
OverviewSolutions
14
Comments
24

Naleeka

@NaleekaSriLanka470 points

trying to change the frequency

I’m currently learning...

HTML , JavaScript , CSS

Latest solutions

View more solutions

Latest comments

  • Naleeka•470
    @Naleeka

    Hi @BLADEHEDA 👋

    The best practice is not to use px units. Use rem instead

    Don't use fixed heights/widths. Ex:

    .container{
    height:390px;
    width:530px;
}

    Use min-height, min-width Ex:

    .container{
  min-height: 20rem;
  min-width: 33rem;
}

    That's why your Add to cart button got out of the container box

    • Put whole "container" div in to a main tag
    <main>
   <div class='container'>
      // your content goes here
      ....
   </div>
</main>

    Nice work buddy 🖤

    Hope this helps.Happy Coding 😄👩‍🚀

  • Naleeka•470
    @Naleeka

    Both Live site URL & Repository link doesn't work

    You may have to check it again

  • Naleeka•470
    @Naleeka

    Work , play, study .. cards doesn't seem to be working

  • Naleeka•470
    @Naleeka

    Your Repository link isn't working

  • Naleeka•470
    @Naleeka

    Hi @NelJulgan 👋

    • Use <footer> tag to wrap up the elements in bottom of the body
    <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://www.frontendmentor.io/profile/NelJulgan">Neljulgan</a>.
  </div>
    • Use <main> instead of <header> since it's not the heading you are building
    <main>
  <div class="container">

      <div class="card">
        <div class="card-content">
          <img src="./images/image-qr-code.png" alt=" qr-code image" class="qrcode"  aria-label="qr-code">
          <h3 class="card-title">Improve your front-end skills by building projects</h3>
          <p class="card-text"> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
        </div>
</main>
    • instead of using alt=" qr-code image" describe where it will be headed, like this 👉 alt="qr-code to FrontendMentor"

    Hope this was helpful

    Happy Coding Buddy 👩‍🚀🖤

  • Naleeka•470
    @Naleeka

    Hi @osamanazakat 👋

    Answer to your Question,

    To zoom the image on hover, You must add overflow hidden to the parent element and scale up the image using transform property.

    It'd be like this 👇

    // css file
.container{
  padding: 1.5rem;
}
.image-container{
  width: 100%;
  overflow :hidden;
}
.image-container img{
  width: 100%;
  object-fit: contain;
  transition : transform 0.25s ease;
}
.image-container:hover img{
  transform : scale(1.2);
}

    If you want to add the eye icon on hover you must follow these steps 👇

    (There is maybe another way, this is how I did it)

    // html file
<div class="img-container">
  <img src="images\image-equilibrium.jpg" alt="equilibrium image">
  <div class = 'view'>
    <img src="./images/icon-view.svg" alt="" class="eye-icon" aria-hidden="true" />
  </div>
</div>

// css file
.img-container{
  position: relative;
}
.view {
  position: absolute;
  width: 100%;
  height : 100%;
  padding: 4rem;
  pointer-events: none;
  background: var(--cyan-color);
  opacity: 0;
  display: flex;
  justify-content:center;
  align-items : center;
  transition : all 0.3s ease;
}
.img-container:hover .view{
  opacity: 1;
}

    Happy Coding Buddy 👩‍🚀🖤

View more comments