Skip to content
Submitted over 1 year ago

summary page using css styling, html divs

Kristian•170
@KristianJ1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

i found it kinda tricky, used a lot of divs(and that might have been overkill), and a lot of repetitions in the css part, if u have any tips lmk.

Community feedback

  • Furk•600
    @doganfurkanPosted over 1 year ago

    I suggest you have a look at flex boxes. You shouldn't be using that much absolute positioning. My page structure would be like this:

    <body>
  <main id="card">
     <section id="result">{Here is where the "Your Result" section going to be}</section>
     <section id="summary">{Here is where "Summary" section going to be}</section>
  </main>
</body>

    And then, I would use flex boxes to position them:

    // This container styling positions my card at the center
body{
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

// This card styling makes my Result and Summary section side to side without using absolute positioning
#card{
  display: flex;
  background:#fff;
  box-shadow:3rem 3rem 5rem rgba(0,0,0,0.25);
  border-radius: 1rem;
}

    This is what I'm suggesting to you to kick off your flexbox knowledge. If you want to learn more about flexbox, you can click here But if you want to see how my structure would work in real life, I also completed this challenge, and you can have a look at it by clicking here

    You are off to a good start, I'm sure you can develop your knowledge by doing projects like this. If you have any further questions, I will be happy to help.

    At last, I would appreciate it if you find and mark my comment as useful.

    Marked as helpful
    1
    Kristian•170
    @KristianJ1Posted over 1 year ago

    @doganfurkan lovely; thanks man i appreciate it, ill have a look into these flexboxes, they look really usefull :)

    1
    Furk•600
    @doganfurkanPosted over 1 year ago

    @KristianJ1 They sure are useful. Have fun learning!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord