Skip to content
OverviewSolutions
14
Comments
24
Naleeka
@Naleeka

All comments

  • Naleekaโ€ข470
    @NaleekaPosted about 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
  • Naleekaโ€ข470
    @NaleekaPosted about 2 years ago

    Both Live site URL & Repository link doesn't work

    You may have to check it again

    0
  • Naleekaโ€ข470
    @NaleekaPosted about 2 years ago

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

    0
  • Moscowโ€ข420
    @MOSCOW2022Submitted about 2 years ago

    my 2 problems are: i couldnt center the line through price. i couldnt change the image when we switch to phone view i tried to do the <picture> tag with source but i was so confused and it didnt work so i left it like this

    thank you all for your help

    parfume page using html and css

    2
    Naleekaโ€ข470
    @NaleekaPosted about 2 years ago

    Your Repository link isn't working

    0
  • Nel Julganโ€ข130
    @NelJulganSubmitted about 2 years ago

    Responsive page using HTML and CSS flexbox.

    feel free to comment.

    thank you :)

    flexbox

    1
    Naleekaโ€ข470
    @NaleekaPosted about 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
  • osamaโ€ข270
    @osamanazakatSubmitted about 2 years ago

    I could not add zoom image. Would anyone help me with that?

    NFT Card

    2
    Naleekaโ€ข470
    @NaleekaPosted about 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
  • COโ€ข80
    @melco10Submitted about 2 years ago

    I'm a newbie, there's in some code that I'm sure but I'm happily accepting any suggestion and negative feedback to improve my webeev

    2. Product preview card component

    2
    Naleekaโ€ข470
    @NaleekaPosted about 2 years ago

    Hi @melco10 ๐Ÿ‘‹,

    Use "alt" attribute and describe the image every time you using the <Img> tags

    <img src="images/image-product-desktop.jpg" alt="add to cart icon" class="product-img" aria-hidden="true">

    Happy coding ๐Ÿ‘จโ€๐Ÿš€

    Marked as helpful
    0
  • Naleekaโ€ข470
    @NaleekaPosted about 2 years ago

    Hi @Chiku100 ๐Ÿ‘‹

    You could use,

    this will work only while you pressing this div though

    // css
.share:active{
    background-color: lighblue;
}

    or you could use some JavaScript to change the color

    //css
.share.clicked {
   background-color: lightblue;
}


// js file 
const shareBtn = document.querySelector(".share");
    
shareBtn.addEventListener('click', ()=> {
   shareBtn.classList.add("clicked");
})

    Great work.

    Hope this was helpful.

    Happy Coding ๐Ÿ‘จโ€๐Ÿš€๐Ÿ–ค

    Marked as helpful
    1
  • Naleekaโ€ข470
    @NaleekaPosted about 2 years ago

    Hi @alexanderbonney ๐Ÿ‘‹

    You've been really creative with the hover effects ๐Ÿ‘Œ๐ŸŒŸ

    I think something that you could change is,

    • Put all <section>s inside a <main> tag to fix the accessibility issue you have

    Great work, Happy Coding ๐Ÿ‘จโ€๐Ÿš€๐Ÿ–ค

    Marked as helpful
    0
  • Naleekaโ€ข470
    @NaleekaPosted about 2 years ago

    hello @mcddcm ๐Ÿ‘‹

    You could use <h1> tag instead of <h3> tag and change it's font-size to fix the accessibility issue.

    Use media queries to make the component responsive

    @media screen and (min-width: 375px;){
   .product-card{
       width:30vw;
    }
}

    hope this was helpfull

    happy coding ๐Ÿ‘‹

    Marked as helpful
    0
  • Naleekaโ€ข470
    @NaleekaPosted about 2 years ago
    • favicon doesn't work because of spelling mistakes. It should belike this ๐Ÿ‘‡

    < link rel="icon" type="image/png" sizes="32x32" href="./images/favicon.png" />

    • You could use media queries to make the website responsive.

    Ex:-

    @media screen and (min-width: 768px){
    .selector{
        width: 30vw;
    }
}

    hope this was helpful. Happy Coding๐Ÿฆธโ€โ™‚๏ธ

    Marked as helpful
    1
  • Zineb Boutaaโ€ข750
    @zineb-BouSubmitted about 2 years ago

    Hi everyone, it's been a long time since my last submission here on Frontend Mentor, this time I tried to build a real-time commenting system inspired by the Interactive Comments Section challenge, I have used different technologies over here, using firebase in the backend and Nextjs as a framework, the thing that helped me to keep it at real-time is using the SWR library, this time I chose tailwinds for styling as it is easy to set up, plus I want to focus more on the how to generate and save data.

    take a look at my solution, test it by leaving a comment, and any feedback is welcomed. happy coding :)

    Real-time commenting system

    1
    Naleekaโ€ข470
    @NaleekaPosted about 2 years ago

    This is really cool

    I don't know about the language u made this with, but I don't think the upvote button works correctly .

    I can upvote a comment more than once

    happy coding buddy ๐Ÿ™ƒ

    0