Latest solutions
Latest comments
- @BLADEHEDASubmitted over 2 years ago@NaleekaPosted over 2 years ago
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 😄👩🚀
0 - @Eeshan-VaghjianiSubmitted over 2 years ago@NaleekaPosted over 2 years ago
Both Live site URL & Repository link doesn't work
You may have to check it again
0 - @ROdrigoRRRRDSubmitted over 2 years ago
- @MOSCOW2022Submitted over 2 years ago
- @NelJulganSubmitted over 2 years ago@NaleekaPosted over 2 years ago
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 👩🚀🖤
0 - Use
- @osamanazakatSubmitted over 2 years ago@NaleekaPosted over 2 years ago
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 👩🚀🖤
2