Skip to content
OverviewSolutions
9
Comments
8
P
ljmanayon
@ljmanayon

All solutions

  • Submitted 5 months ago

    Meet Landing Page

    • HTML
    • CSS
    1

    I would like help with refining my understanding of CSS Flexbox and Grid. While I have made significant progress, I believe there is always more to learn. I would also appreciate any advice on how to structure my CSS more effectively from the beginning to streamline the development process. Finally, I would value any tips on best practices for web accessibility to ensure my websites are usable for all visitors.

  • Submitted 5 months ago

    Testimonials Grid Section with CSS Grid

    • HTML
    • CSS
    1
    • Maybe there's a better way of doing the desktop view. If someone can improve the structure below, please let me know.

    '''@media (min-width: 80rem)

    .grid-container {
  width: 1260px;
  grid-template-columns: 1fr;
  margin: auto;
  margin-top: 250px;

  .daniel {
    width: 540px;
    height: 280px;
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .jonathan {
    width: 255px;
    height: 280px;
    grid-column: 3 / 4;
    grid-row: 1;
  }

  .kira {
    width: 220px;
    height: 650px;
    grid-column: 4;
    grid-row: 1 / 3;
  }

  .jeanette {
    width: 255px;
    height: 280px;
    grid-column: 1;
    grid-row: 2;
  }

  .patrick {
    width: 540px;
    height: 280px;
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .cards:first-child {
    background-position-x: 400px;
    background-size: 125px;
  }
}

    '''

  • Submitted 5 months ago

    Four card feature section solution with Flexbox

    • HTML
    • CSS
    1
    • I had to eyeball the position of the cards in desktop view. Maybe someone had a better solution?
      .team-builder {
    align-self: self-start;
    transform: translateX(52%);
    margin: 0 auto;
  }

  .karma {
    align-self: self-end;
    transform: translateX(-55%);
    margin: 0 auto;
  }
  .supervisor {
    align-self: center;
    transform: translateX(50%);
  }
  .calculator {
    align-self: center;
    transform: translateX(-50%);
  }
}
  • Submitted 5 months ago

    Responsive Product Preview Card Challenge

    • HTML
    • CSS
    1
    • CSS Grid
    • SASS
  • Submitted 5 months ago

    Responsive Recipe Page using Flexbox

    • HTML
    • CSS
    1
    • I'd like to use bootstrap, but haven't fully grasp the idea. Kinda overwhelming for me.
  • Submitted 6 months ago

    Social Links Profile Challenge

    • HTML
    • CSS
    1
    • How to shorten my css code and make more simple
  • Submitted 6 months ago

    Blow Preview Card Challenge

    • HTML
    • CSS
    1
    • More on flexbox
    • Margin and Padding
  • Submitted 6 months ago

    Blow Preview Challenge Solution

    • HTML
    • CSS
    0

    -More on flexbox -Margin and Padding

  • Submitted 6 months ago

    QR code component

    • HTML
    • CSS
    1

    CSS, flex