Skip to content
OverviewSolutions
35
Comments
1
Matt Davis
@mattdavis06

All comments

  • 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