social-proof-section with css and html

Community feedback

• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  Hi Esteban

  I wanted your project to look better on desktop view. Here are the steps I took

  remove </header> and place on line 120

  remove <main> and place on line 135

  remove </aside> and place on line 120 before </header>

  create new <div class="header-text"> </div> and cut and paste everything from line 18 to 22 to between the new div created

  let replace the media query from css/style.css line 105 to line 221

  with this code

  @media (min-width: 600px) { body { background-color: hsl(0, 0%, 90%); margin-top: 2.5em; min-height: 100vh; }

  .picture_top { width: 50%; top: 0; left: 0; }

  .picture_bottom { width: 80%; right: 0; bottom: -25vh; }

  .aside { display: ; width:40% ; }

  header { margin-left:; text-align: ; display: flex; flex-direction: row; } .header-text{ display: flex; flex-direction: column; width: 30%; left: 0; }

  main{ display: flex; flex-direction: row; width: 80%; }

  .aside { position: relative;

  }

  .cards_title { font-size: 1rem; color: hsl(300, 43%, 22%);

  }

  .cards_text { color: hsl(303, 10%, 53%); }

  .rectangle { text-align: left; }

  .icon_rectangle { display: inline-block;

  }

  .rectangle_text { display: inline-block; color: hsl(303, 10%, 53%);

  }

  .rectangle_top { margin-left: ; }

  .rectangle_center { margin-left: 60px; }

  .rectangle_bottom { margin-left: 90px; }

  .card_title { margin-left: ; }

  .card_subtitle { display: block; margin-left: 10px; margin-top: 10px; color: hsl(333, 80%, 67%); } */

  .card_left { top: 30px; left: 40px; }

  .card_center { top: 50px; left: 65px; }

  .card_right { top: 70px; left: 90px; }

  .attribution { margin-top: 10em; } }

  Marked as helpful

  0