Ben

Latest comments

• 

  Marcel Kuczynski•60

  @marcelkuczynskiSubmitted over 2 years ago

  

  Fylo dark landing page solution using Flexbox and CSS Grid

  1

  20
  

  Ben•770

  @BenConfigPosted over 2 years ago

  Hi, nice work!

  To stop the page from refreshing, you have to prevent the default behaviour on form submission.

  Try adding this JS:

  const form = document.querySelector('form');
  form.addEventListener('submit', event => {
    event.preventDefault();
  });
  

  Marked as helpful

  1
• 

  Larry•190

  @ljcuttsSubmitted over 3 years ago

  

  Tip-Calculator With CSS Grid, CSS Flexbox, Vanilla Javascript

  3

  10
  

  Ben•770

  @BenConfigPosted over 3 years ago

  The 'dots inside the zeros' are a feature of the Space Mono font family. It looks like you are using the Roboto font family which does not have the dots.

  Why not just use the character '$' and then you can apply the color property?

  You should try building the page for mobile first. The mobile design is usually much simpler than the desktop design so it makes sense to start with that. You then apply media queries when you have more viewport space to work with.

  0
• 

  Josiel Matos•10

  @JosielMatosSubmitted over 3 years ago

  

  Summary Card using CSS Flexbox

  2

  40
  

  Ben•770

  @BenConfigPosted over 3 years ago

  Remember to use <p> elements for blocks of text. <div>s and <span>s aren't semantic elements, they are just used to separate elements for styling purposes.

  For example, your .description element can be a <p>. And the .price element can be a <p> also in my opinion:

  <p class="price">
       <strong>Annual Plan</strong>
       <span>$59.99/year</span>
  </p>
  

  0
• 

  juanmfretes•90

  @juanmfretesSubmitted over 3 years ago

  

  Desktop-first solution using CSS Grid (grid areas)

  4

  40
  

  Ben•770

  @BenConfigPosted over 3 years ago

  Try to use the semantically correct HTML elements.

  For the .container you could use a <main> element instead of a <div> and your .cards could all be <section> elements instead of <div>s.

  Also you have used <p> elements for your .card-headings, but these are headings, so why not use <h2>?

  Marked as helpful

  0
• 

  Yunus Emre Arslan•140

  @earslanyunusSubmitted over 3 years ago

  

  Stats Preview Card Html and Css

  #accessibility

  1

  40
  

  Ben•770

  @BenConfigPosted over 3 years ago

  Hey, I checked your page in Safari. There is a lot of extra space above the <h1> and on larger screens the text content starts to disappear from the bottom of the .text-box.

  For some reason, removing align-items: center; from .card fixed the issue but I couldn't figure out why.

  Marked as helpful

  1
• 

  AzeezBNA•70

  @azizbnaSubmitted over 3 years ago

  

  Social proof section

  1

  40
  

  Ben•770

  @BenConfigPosted over 3 years ago

  How about this:

  .review::before {
      content: url(./images/icon-star.svg)
               url(./images/icon-star.svg)
               url(./images/icon-star.svg)
               url(./images/icon-star.svg)
               url(./images/icon-star.svg);
      margin: 0px 30px 0px 20px;
      display: inline-flex;
      gap: .25rem;
  }
  

  You can use the gap property to increase/decrease the space between the stars as you wish.

  Marked as helpful

  1