Four Cards

Community feedback

• 

  Prince Roy•1,210

  @iprinceroyyPosted over 2 years ago

  Hey @victorebegbuna, You did a good job. But this solution is not robust. I would suggest another approach which is easy:

  1. You should first create one main container for the four cards.
  2. Set the display property for the container to flex in mobile view. Like this .container{ display: flex; flex-direction: column; }
  3. For desktop view, use the @media query & change the display property. @media (min-width:992px){ .container{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } }

  You can see this approach in my solution. I've done it. I hope it adds to your learning, happing coding :)

  Marked as helpful

  1
• 

  imad•3,330

  @imadvvPosted over 2 years ago

  Greetings Victor Ebegbuna, Congratulations on completing this challenge!, the desktop version looks great, but you need to work more on mobile version, and also checked your code and i see that you're using box model to control layout which is fine for this page but things will get hard to maintain on large project, I will suggest to you is to use either Flexbox or Grid , to control The Layout wish will make your life easy.

  over all you did well Happy coding and keep up the good work 👍

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾Hello Victor, congratulations for you new solution, I can see that you're taking harder challenges and this is amazing. You're improving.

  Overall your solution its almost done, you need only to work a bit with the design elements.

  1.The colored bar inside each card isn't rounded, a quick way to do that is to use a <span> inside each card and give it a height around 8px and the specific color, this way the colored bar dont follow the border-radius of the card.

  2.Work the box-shadows, the shadow is a bit strong, you need to give it less opacity and more blur. This a good value for the shadow look box-shadow: 0 0.9375rem 1.875rem -0.6875rem rgb(131 166 210 / 50%);

  Use this only tool to manage your box-shadow and just drop the code, this way you can edit it without touch a line of code: https://www.cssmatic.com/box-shadow

  Hope it helps Victor, keep it up!

  0

  ---

  

  Victor Ebegbuna•170

  @victorebegbunaPosted over 2 years ago

  @correlucas I Am not too clear about no.1 suggestion, am I to use the <span> in the HTML or CSS and where am I to use height, is it possible to show me an example?

  As for no.2, I have tried it but the shadow seems too dark compared to the original design.

  0

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @victorebegbuna Hello Victor, I did that in my solution, the height should go in the css, look the code:

  span {
      display: flex;
      height: 0.3125rem;
      width: 100%;
      border-radius: 0.5rem 0.5rem 0 0;
      transition: .5s;
  }
  

  here's my solution if you want to see how I managed the <span>

  https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK/hub/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt

  For the box-shadow so try this value box-shadow: 0px 15px 30px -11px rgba(131, 166, 210, 0.5); is the exact same for the challenge.

  Then you say me if works Victor, ok?

  I hope it helps you and sorry If I wasn't so clear in my last comment.

  0