clipboard landing page using html and SCSS

Community feedback

• 

  Minh Khang Tran•510

  @MinhKhangTranPosted over 2 years ago

  Hi Syahrizal Ardana, nice solution :)!

  • I see in your code that you use scss. With scss you can use partials to assign smaller css snippets to specific html sections.

  p.e. you can scope all your section-one css in a partical called _section-one.scss.

  Maybe for maintain reason using descriptive names is better. Instead of "section-one" you can name it "features" or similar.

  • If you want to change the color of the svg icons on hover you should use the svg tag instead of img tag. You can find the svg "code" if you open the .svg file in your text editor.

  For example the Facebook icon:

  <a href="">
        <svg width="20" height="20"       
  xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
  </a>
  

  with css you can hover it:

  a:hover svg path{
    fill:red;
  }
  

  • I think if you can scope your css with partials then setting media-queries is easier and more maintable. Maybe you can use mixins and/or sass variables to make your code less repetitive. I don't use sass but I found a helpful article on geeksforgeeks. Maybe this can help you.

  keep doing and having fun doing it. 🥰

  Marked as helpful

  1

  ---

  

  Syahrizal Ardana•330

  @GombengPosted over 2 years ago

  @MinhKhangTran this help a lot, thanks for commenting

  0