Skip to content
Submitted almost 2 years ago

My solution to the Order Summary Component Main

João Paulo Coimbra•50
@joaopaulo-web
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

English Version:

Hi! Here's another solution to another challenge.

This was really cool to do, because I was able to manipulate the divs a lot and I got a result that was very close to what was proposed.

Any suggestion, feel free to leave it below, it will be a pleasure to read!

Versão Português:

Olá! Aqui vai mais uma solução para mais um desafio.

Esse foi bem legal de fazer, por que consegui manipular bastante as divs e cosnegui um resultado bem aproximado do que foi proposto.

Qualquer sugestão, sintam-se a vontade em deixar ai embaixo, será um prazer ler!

Community feedback

  • yishak abrham•2,150
    @yishak621Posted almost 2 years ago

    good job bro ...but Two basic things 1-the svg background must be dragged upward so use a background-position-y property For example -for large screens

    @media screen and (min-width: 800px) { 
   .center { 
     display: flex; 
     justify-items: center; 
     background: url(./images/pattern-background-desktop.svg) no-repeat top; 
     background-size: contain; 
     background-position-y: -30%;

    2-the background-color should also applied to fill the rest space so use a background-color property for the body or wrapper div

    body { 
   font-family: 'Red Hat Display', sans-serif; 
   margin: 0; 
   background-color: hsl(225, 100%, 94%); 
 }
    Marked as helpful
    1
    João Paulo Coimbra•50
    @joaopaulo-webPosted almost 2 years ago

    Thanks so musch for your help. I'll change for sure.

    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