Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
2

Alessandra Casole

@alessandra-casoleItaly60 points

Welcome to my profile! Some curiosities about me 👇🏼 💻 Front End Development student at start2impact University 🎯 My professional goal is to help companies and startups create websites and apps that improve users' digital experience and have a positive impact through my work.

I’m currently learning...

- JavaScript - WordPress

Latest solutions

  • Responsive landing page using Sass and Bootstrap

    #bootstrap#sass/scss

    Alessandra Casole•60
    Submitted about 2 years ago

    0 comments
  • Mobile-first solution using Flexbox


    Alessandra Casole•60
    Submitted over 2 years ago

    0 comments
  • NFT project - Mobile first solution using Flexbox


    Alessandra Casole•60
    Submitted over 2 years ago

    1 comment
  • Responsive landing page using Grid, Flexbox, SASS and JavaScript

    #sass/scss

    Alessandra Casole•60
    Submitted over 2 years ago

    2 comments

Latest comments

  • Metin AKIN•120
    @Rheomacrodex
    Submitted over 2 years ago

    Overlay

    1
    Alessandra Casole•60
    @alessandra-casole
    Posted over 2 years ago

    Hello, yeah it was the hardest part for me too but I found this guide very useful https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity

    I can't see your code, so check mine if it helps

  • polukarp•190
    @polukarp
    Submitted over 2 years ago

    Responsive NFT Card Component Using Flexbox

    #sass/scss
    4
    Alessandra Casole•60
    @alessandra-casole
    Posted over 2 years ago

    Hi, I also used ":: before" and I solved the problem of the icons' alignment by making the sentences flex, which however I had inserted inside a p class (not span). So by changing the span to a p, you could remove the position properties and you can just give a class to both, so the alignment applies to both and then flex that class. Ex:

    <div class="card__row"> <p class="card-icons" id="card__price">0.041 ETH</p> <p class="card-icons" id="card__date">3 days left</p> </div>

    .card-icons { display: flex; }

    #card__price::before { content: .....; margin-right: .....; }

    #card__date::before { content: .....; margin-right: .....; }

    I hope you find it helpful!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub