Intro section with dropdown nav

Community feedback

• 

  P

  Aditya Chakraborty•100

  @aditya-chakrabortyPosted over 2 years ago

  Hi @murray122,

  Your CSS code looks pretty neat. But it is usually considered best practices to handle the responsiveness and put all the media queries at the end of the CSS file.

  Also, instead of using a different svg for each open and closed dropdown menu, you can consider using transform: rotate(180deg) to rotate it by 180 degrees.

  Good job!

  1

  ---

  

  MURRAY122•280

  @MURRAY122Posted over 2 years ago

  Hi, @aditya-chakraborty Thanks for taking the time to give feedback, I used the 'transform: rotate(180deg)' mentioned and works perfect. Thanks again

  0
• 

  Alejandro25A•220

  @Alejandro25ARPosted over 2 years ago

  Hi @murray122,

  • The svg is filled with black on the outside, since you must apply the property to the stroke instead of fill.
  • It is better to embed the svg directly in the html than to place it as an image, since being in svg it can be resized without losing quality and its properties can be modified with css.
  • I advise you not to change the font-weing property when hovering the menu, as this increases the size of the box, causing a slight displacement of the other elements, which is not very pleasant visually.

  Good work, keep it up

  0

  ---

  

  MURRAY122•280

  @MURRAY122Posted over 2 years ago

  Hi, @Alejandro25AR I liked the suggestion on the 'font-weight', much cleaner. The 'stroke' was also fixed, so thanks for the advice. Thanks for taking the time to give feedback and for the suggestion.

  0
• 

  Riccardo•240

  @riccardofanoPosted over 2 years ago

  Hello Murray, good job on the challenge!

  Regarding your question about svgs: I personally use <img src="picture.svg" /> whenever I don't need to modify their color but I want them to take up space in the document so I can position them as you would with any other element in the dom. background-image is used when I don't want it to occupy physical space, it just needs to be in the background.

  You can look at this blue Slack banner under the comments for reference, the first line is an img tag, while the dark blue logo in the bottom right corner is in a background-image. One takes up physical space, the other does not.

  An inline svg is for when you want to take up space and modify its properties with CSS, like your dropdown arrow. Depending on how the svg was made you'll want to modify either the fill or the stroke, you can look at the actual file to know for sure.

  <svg class="icon" width="10" height="6" xmlns="http://www.w3.org/2000/svg">
      <path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"></path>
  </svg>
  

  As you can see the stroke is a color while the fill is none so in this case you'll want to modify the stroke.

  0

  ---

  

  MURRAY122•280

  @MURRAY122Posted over 2 years ago

  Hi @riccardofano, I was able to fix it by changing the 'stroke' properties. Thanks for taking the time to give feedback and for the knowledge.

  0