Skip to content
OverviewSolutions
4
Comments
3
Carolina Ciolin
@CarolinaCiolin

All solutions

  • Submitted 4 months ago

    Responsive Landing Page using CSS Grid and Flexbox

    • HTML
    • CSS
    • JS
    0

    All improvement suggestions are welcome!

  • Submitted 5 months ago

    Responsive landing page using Flexbox

    • HTML
    • CSS
    0

    I used vw and percentages on header, main and footer sections thinking it would be the easiest way to make the page responsive. I would like to know if it was indeed a good solution.

  • Submitted 5 months ago

    Responsive card using Flexbox and Media query

    • HTML
    • CSS
    • JS
    • API
    1
  • Submitted 5 months ago

    NTF card using Flexbox

    • HTML
    • CSS
    1

    I would like to know if there is any another way to make the hover styles on the main image link other than using pseudo-elements.

    .card .link-main-image{
    display: flex;
    position: relative;
}

.card .link-main-image::before{
    content: '';
    display: none;
    background-color: var(--cyan);
    border-radius: 10px;
    opacity: 40%;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card .link-main-image::after{
    content: '';
    display: none;
    background: url('../images/icon-view.svg') no-repeat center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card .link-main-image:hover::before,
.card .link-main-image:hover::after{
    display: block;
}