Pure css

Community feedback

• 

  Kyle•80

  @KylesTech95

  Posted almost 3 years ago

  Hi Raul,

  Great job on this project! Although your HTML & CSS look sharp, there is always room for improvement.

  • I understand that the goal was to solely style your project, however, the element used for the ["price"] class seems to be preventing the $169.99 from looking like the preferred font-size in the desktop design.

  • Alternatively, I wrapped both contents separately, one for [h2.discounted-price] & one for [p.original-price]. Both elements are styled by setting their display to inline, and then styling both selections individually. Please view the changes made below:

  <h2 class="discounted-price">$149.99</h2>
  <p class="original-price">$169.99</p>
  

  /*added inline-block to place the h2 & p tags side-by-side*/
  .discounted-price, .original-price {
  /*color: var(--Dark-cyan);
  font-size: var(--font-fraunces);
  font-size: 30px;
  font-weight: 700;
  padding-bottom: 22px;*/
  display: inline-block;
  }
  h2.discounted-price {
  font-family: var(--font-fraunces);
  font-size: 30px;
  color: var(--Dark-cyan);
  }
  p.original-price {
  color: var(--Dark-grayish-blue);
  text-decoration: line-through;
  padding-left: 2rem;
  }
  

  • When it comes to flexbox, it is crucial to understand what is being flexed and how certain elements respond to flexbox. Rather than setting the flex direction to column, set the flex direction to row by deleting the column attribute. Reason being is that flex-row will span both [div] elements side-by-side. In other words, the "hero-image" will be right next to "card-info". Please view the changes made below:

  .container {
  display: flex;
  max-width: 100%;
  max-height: 55%;
  margin: 0 auto;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  }
  

  I hope this helps!

  03

  Marked as helpful