All comments

• 

  Dipankar• 420

  @csdip

  Submitted about 1 year ago

  Too Ezy

  

  QR code challenge using HTML and CSS

  1

  4

  0

  

  Kuraanal• 210

  @Kuraanal

  Posted about 1 year ago

  You don't actually need all your divs.

  using flex you can have the following structure

  <div class="card">
  <img src="assets/images/image-qr-code.png" alt="QR Code to scan" class="card__picture">
  <h2 class="card__title">Improve your front-end skills by building projects</h1>
  <p class="card__text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
  

  and it will all be aligned with the following css

  .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  

  Hope this help you.

  0
• 

  Nataly Polnow• 10

  @NatalyPolnow

  Submitted about 1 year ago

  

  QR Code page using only HTML and CSS

  2

  2

  0

  

  Kuraanal• 210

  @Kuraanal

  Posted about 1 year ago

  You don't actually need all your divs.

  using flex you can have the following structure

  <div class="card">
  <img src="assets/images/image-qr-code.png" alt="QR Code to scan" class="card__picture">
  <h2 class="card__title">Improve your front-end skills by building projects</h1>
  <p class="card__text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
  

  and it will all be aligned with the following css

  .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  

  Hope this help you.

  Marked as helpful

  0
• 

  P

  BrunoMoleta• 540

  @brunomoleta

  Submitted about 1 year ago

  Hola Frontend Mentor community,

  I would be delighted if you regard how I made the elements change their appearance on hover. I used a few: .container: hover>.item {} and wonder if there's a better alternative.

  It's the third challenge I completed, and that's the one I think the design is more interesting.

  Best regards from Curitiba, Brazil 🇧🇷

  

  NFT Equilibrium Card

  1

  4

  0

  

  Kuraanal• 210

  @Kuraanal

  Posted about 1 year ago

  there is many way to make the overlay. Best is very subjective..

  One could be a container like this with the overlay opacity set to 0 and change to 0.5 on hover (Same for the view icon):

  <div class="card__image">
  <img src="./assets/images/image-equilibrium.jpg" alt="NFT preview" />
  <div class="image__overlay"></div>
  <img src="assets/images/icon-view.svg" class="overlay__icon" alt="" />
  </div>
  

  .image__overlay {
  position: absolute;
  inset: 0 0 0 0;
  background-color: var(--your-clr);
  }
  

  Or you can just pout the image like this, and use the CSS pseudo element ::before and ::after to make the overlay.

  <div class="card__image">
  <img src="./assets/images/image-equilibrium.jpg" alt="NFT preview" />
  </div>
  

  .card__image::after,
  .card__image::before {
  position: absolute;
  opacity: 0;
  }
  
  .card__image::before {
  content: '';
  inset: 0 0 0 0;
  background-color: var(--overlay-clr);
  }
  
  .card__image::after {
  content: url(../images/icon-view.svg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  
  .card__image:hover::before,
  .card__image:hover::after {
  opacity: 0.5;
  }
  

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Simranpreet singh• 180

  @Spsingh0005

  Submitted about 1 year ago

  

  Product card using HTML and CSS

  3

  4

  0

  

  Kuraanal• 210

  @Kuraanal

  Posted about 1 year ago

  Hey!

  Seems like your first import for the "Montserrat" font is wrong. you could import the 2 required font in a one line like this :

  @import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Montserrat:wght@300;500;700&display=swap');
  

  Also, you should define the main font family on either 'html' or 'body'. Every elements inside them will inherit the property by default. You can then apply another font only to the tags that need it.

  html {
  font-family: Montserrat;
  }
  

  Hope this help.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Caleb• 180

  @xdcron

  Submitted about 1 year ago

  Very happy with how this came out .would love to hear some feedback.

  

  Product review card

  3

  8

  1

  

  Kuraanal• 210

  @Kuraanal

  Posted about 1 year ago

  Hey.

  Instead of having a container "First-box" with 2 images inside and switching display in the css, you can use a 'Picture' tag with a sourceset and let the browser decide which one to load.

  <picture class="first-box">
  <source srcset="img/image-product-desktop.jpg"
  media="(min-width: 600px)"/>
  <img src="img/image-product-mobile.jpg" alt="Eau De Parfum"/>
  </picture>
  

  You can find more about the picture tag here: Picture Tag info page

  Marked as helpful

  1
• 

  Kleko• 20

  @kl3k0

  Submitted over 1 year ago

  Hello, there's my solution. I know there's a lot of divs but tbh that's the only way I was able to make everything work. :P

  

  Product Preview Newbie

  3

  5

  0

  

  Kuraanal• 210

  @Kuraanal

  Posted over 1 year ago

  Hey. here is a thing you could change to not see the card background

  • put the border-radius on your container with an overflow hidden and remove it from your image.

  .container {
    max-width: 700px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: hsl(0, 0%, 100%);
  
    border-radius: 1rem;
    overflow: hidden;
  }
  

  the overflow: hidden; will hide everything outside the block.

  Marked as helpful

  0