Noob HTML5 and CSS3 project

Community feedback

• 

  Brandon Rordriguez•300

  @MizunenPosted over 1 year ago

  You can set each corner of the border radius by giving four values. Ex border-radius: 1rem 0 0 1rem Syntax for border radius is Border-radius: top-left top-right bottom-right bottom-left.

  You can also add media queries to style based on screen size @media screen and (min-width: 1440px){ Body{ Whatever styles} }

  Think best practice is to style websites mobile first but if you wanted to do a media query for the mobile view you’d use max-width: 375px.

  Marked as helpful

  2

  ---

  

  Andrey Borges•20

  @Borges0110Posted over 1 year ago

  @Mizunen Thz dude. ill try it later (y)

  0
• 

  Matt Davis•780

  @mattdavis06Posted over 1 year ago

  You need to wrap your two cards (.card, .summary) within an outter div. You can then display flex on that outter div to put them side by side and style the background and your borders.

  But you need to remove some other styling from the .card and .summary. Like below:

  `<div class="cards-wrapper" style=" display: flex; background: white; border-radius: 22px;">
  <div class="card"> <p id="result">Your Result</p> <div class="grade"> <span>76</span> <p>of 100</p> </div> <p id="great">Great</p> <p class="text">You scored higher than 65% of the people who have taken these tests.</p> </div> <div class="summary"> <h2>Summary</h2> <ul> <li> <img class="icon" src="assets/images/icon-reaction.svg" alt="Icon React"> <p class="text-list"> </p><div class="list-name">Reaction</div> <div class="num1">80</div> <div class="num2">/ 100</div> <p></p> </li> <li> <img class="icon" src="assets/images/icon-memory.svg" alt="Icon Memory"> <p class="text-list"> </p><div class="list-name">Memory</div> <div class="num1">92</div> <div class="num2">/ 100</div> <p></p> </li> <li> <img class="icon" src="assets/images/icon-verbal.svg" alt="Icon Verbal"> <p class="text-list"> </p><div class="list-name">Verbal</div> <div class="num1">61</div> <div class="num2">/ 100</div> <p></p> </li> <li> <img class="icon" src="assets/images/icon-visual.svg" alt="Icon Visual"> <p class="text-list"> </p><div class="list-name">Visual</div> <div class="num1">72</div> <div class="num2">/ 100</div> <p></p> </li> </ul> <div class="button"> <button> <p> Continue </p> </button> </div> </div> </div>
  

  then do the below on your css: from .card, remove: box-shadow: 13px 13px 30px hsl(221, 100%, 96%);

  from .summary remove: box-shadow: 13px 13px 30px hsl(221, 100%, 96%) border-radius: 22px;

  from .summary add: border-top-right-radius: 22px; border-bottom-right-radius: 22px;

  you can then add your box-shadow to the .cards-wrapper rather than each card.

  that should work for you!

  just some info, this isn't mobile responsive which is a key feature of any modern web app. please keep that in mind when building anything.

  hope that helps and good luck!

  Marked as helpful

  1

  ---

  

  Andrey Borges•20

  @Borges0110Posted over 1 year ago

  @mattdavis06 I just forgot mobile responsive, and as it had already ended and my head was burning, i just gave up. =D But thx man, its was helpfull. (y)

  1

  

  Matt Davis•780

  @mattdavis06Posted over 1 year ago

  @Borges0110 ha, we've all been there. learning to code isn't easy and takes time. Stick at it though, the payoff is worth it! 👍🏻

  Marked as helpful

  1