All comments

• 

  manish• 50

  @manish465

  Submitted over 2 years ago

  how do you align the three buttons as given in design in desktop view

  

  html,css,scss,netlify,vs code

  1

  1

  0

  

  Mike Ekkel• 25

  @Murkrage

  Posted over 2 years ago

  I like the use of variables for your colors. They would be a ton more useful if the naming was more generic. Right now the variable $bright-orange is just that: bright orange. An alternative approach could be to go with $color-primary or $color-car-1. If you decide that the second car needs to be bright orange instead of dark cyan, you don't have to change the variable usage for those class names but just the value of the variable.

  I've notived you are nesting all of your styles in your .SCSS file. Ideally you would try to nest as little as possible.

  To answer your question about the button alignment: Flexbox! We have amazing tools to help us lay out our components and one of them is flexbox. The best guide for flexbox is over at CSS-Tricks. There are a few things that will need fixing using this approach, but by adding the following styles you've already achieved what you're looking for:

  .card {
    padding: 3rem;
    display: flex; // Added style
    flex-direction: column; // Added style
  }
  
  .subtitle {
    font-size: 1rem;
    font-family: "Lexend Deca";
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 3rem;
    flex: 1; // Added style
  } 
  

  0
• 

  Richard Verweij• 25

  @Shatango

  Submitted over 2 years ago

  I tried to use as less code as possible to not clutter it or use more lines then needed. Are there any ways i could have made my code cleaner?

  Thanks in advance

  

  HTML/CSS

  2

  1

  0

  

  Mike Ekkel• 25

  @Murkrage

  Posted over 2 years ago

  Looks like a solid solution that matches the design! Here's a few pointers to help you next time:

  • Media queries can override styling while keeping other parts of the styles which means you only have to define things like display: flex once and change the flex-direction when you want to. Read more on the use of media queries here: https://css-tricks.com/a-complete-guide-to-css-media-queries/
  • While it's perfectly valid according to the spec to use more than one <h1> it's considered bad practice. Ideally you would only use a single <h1> and your current ones would be <h2>. Remember that semantics are separated from styling in HTML and CSS!
  • Like @shashilo mentioned: using div.cars makes your CSS more specific and that can hurt possible overrides you want to do later. Read more on CSS Specificity here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
  • CSS Custom Properties (or variables) will allow you to easily set a color for each column. I do think, however, that it might be a little too much for a simple beginner project so perhaps that could be a nice improvement in the future :)

  Marked as helpful

  2
• 

  Victoria Cheng• 320

  @victoriacheng15

  Submitted about 3 years ago

  I would like some feedback on CSS. I feel that my css is a bit messy(?). Probably should work on organize and name the class in readable/clear way.

  

  Used flexbox to make the layout

  1

  1

  0

  

  Mike Ekkel• 25

  @Murkrage

  Posted about 3 years ago

  I like that you've used CSS variables! Naming wise you could simplify things for yourself by renaming bg-pattern-card to profile-pic. They are both used on that element and it'll make more sense when reading the stylesheet. First you'll have .profile-pic, which has the background image, and then you'll have .profile-pic img which targets the actual image.

  .profile-pic {
      background-image: url("./images/bg-pattern-card.svg");
  }
  
  .profile-pic img {
      border: 6px solid white;
      border-radius: 50%;
      transform: translateY(50%);
  }
  

  0