News homepage

Community feedback

• 

  szam•800

  @k-stopczynskaPosted almost 2 years ago

  Hi! Great job on finishing the challenge!

  Since you feel pretty good in CSS and HTML I have suggestions for you.

  Firstly: try adding transitions on active elements like navbars/ hamburger buttons (it can be simple like opacity and scale, or moving from one side using translate X or Y with transitions ease-in/ ease-in-out).

  When you feel comfortable with it, try some cubic-bezier effects: here is a playground for it: https://cubic-bezier.com.

  After that try animations (like rotating some elements when clicked or sth like that).

  When you do that and your projects will become more dynamic- it will be time for some preprocessor like Sass.

  Hope this helps, happy codind!

  Marked as helpful

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @k-stopczynska Thank you so much. I wanted to add some transition but wasn't sure what type of transition to add because when I tried something it looked buggy so decided to put it off. 😃 I will try these suggestions, thank you 😊

  0

  

  szam•800

  @k-stopczynskaPosted almost 2 years ago

  @catherineisonline here you have some pretty examples: https://themewagon.com/responsive-navbar-collection/

  Try some of them to know how this works, break them, then restore:)

  Enjoy!

  Marked as helpful

  0
• 

  hebrerillo•350

  @hebrerilloPosted almost 2 years ago

  Hello Catherine!

  For a portrait screen size mobile like 710 x 375, when you open the navigation menu, the links are not displayed properly. To fix that, just decrease the 'margin-top' in this rule:

  .nav.active .menu { gap: 1rem; margin-top: 50%; }

  A better approach would be to statically position both the '.amburger' and the '.menu' elements.

  Marked as helpful

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @hebrerillo Thanks for the feedback! 😊

  1
• 

  Aijalon Bode•70

  @capitolcomputersPosted over 1 year ago

  A good job right there!

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 1 year ago

  @capitolcomputers Thank you!

  1
• 

  P

  Aleksander Tysklind•860

  @outerpreneurPosted almost 2 years ago

  Great work! Almost nailing the original. Looking forward to following your steps one day! :)

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @outerpreneur Thank you. Good luck with your journey!

  0
• 

  JoshuaWBlick•270

  @JoshuaBlick94Posted almost 2 years ago

  Hello Catherine, This project was well done and executed. I would like to know how you were able to put the background blur when the navigation menu is active.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @JoshuaBlick94 Thank you! I added pseudo-element ::after to the navigation bar and set the following style for it:

  .nav::after {
     display: inline-block;
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background-color: hsla(0, 0%, 24%, 0.46);
      backdrop-filter: blur(2px);
      top: 0;
      left: -100%;
  }
  

  0

  

  JoshuaWBlick•270

  @JoshuaBlick94Posted almost 2 years ago

  @catherineisonline Does it only appear when the navbar is active? If so how did you achieve that too. Thank you

  0
• 

  Nabil Wasir•680

  @NabilWasirPosted almost 2 years ago

  Great work as usual

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @NabilWasir Thanks 🙌🏻 Still a lot to improve

  0
• 

  faizan•2,420

  @afaiz-spacePosted almost 2 years ago

  @catherineisonline

  • add box-sizing: border-box; in the ** * universal** selector;
  • replace height:100vh; with the min-height:100vh; in the body element.
  • remove margin-top: -0.6rem; from the .featured a element.
  • replace align-items: top; with align-items: flex-start; in the .post class.(Content is overflowing by giving height of post class)

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @afaiz-space Thanks and I already had border-box in * and don't even have 100vh anywhere :D I tried to change everything else and it totally messed up my whole website. I will just leave it as it is

  0
• 

  POTB•330

  @PeteonthebeatPosted almost 2 years ago

  Great work as usual!

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @Peteonthebeat Thank you 🙌🏻

  0
• 

  Jahongir Murodboev•180

  @jahongirdevPosted almost 2 years ago

  Nice work Catherine! 👍👏

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @jahongirdev Thank you!

  1