Skip to content
OverviewSolutions
7
Comments
6
Kuraanal
@Kuraanal

All comments

  • Kuraanal•210
    @KuraanalPosted over 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
  • Kuraanal•210
    @KuraanalPosted over 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
  • BrunoMoleta•700
    @brunomoletaSubmitted over 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
    Kuraanal•210
    @KuraanalPosted over 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
  • Kuraanal•210
    @KuraanalPosted over 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
  • Caleb•180
    @xdcronSubmitted over 1 year ago

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

    Product review card

    3
    Kuraanal•210
    @KuraanalPosted over 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
    @kl3k0Submitted about 2 years 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
    Kuraanal•210
    @KuraanalPosted about 2 years 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