/consensys.net

Primary LanguageHTML

Consensys Website Clone

Clone website of consensys.net

https://consensysnet.kkang60298.repl.co/

Summary

I tried my best to make as same as possible with all layouts and sections that I can implement. from 2021.10.24 - 11.06

Tech

I used..

  • HTML
  • CSS
  • Javascript
  • Replit

with Github.

What it looks like

ezgif com-gif-maker

Key Features

  • Navbar scroll interaction

    • add scroll event listner function to window object

    • Using scrollY API, if scrollY is false, make the background transparent, and if not, make it colored.

      ezgif com-gif-maker (1)

  • Button Interaction

    • add event listner function to navbarBtns element, using event delegation

    • add visible class to relevant element if the buttons are clicked

      ezgif com-gif-maker (2)

Limitation

What I missed

The first great plan to cloning this website was literally cloning everything; all of interaction, animation, and responsive display. However, As I make, it was kind of impossible for me to do it. As you see, I only attached the desktop version of my website, because it's not responsive enough for mobile, etc. Also, I was unable to implement many different interactions that was in the reference website except what I stated above.

Why did I missed

The key reason why I failed my initial plan is that it was the biggest size of code that I've made in my own. It's embarrassing but, I was not expecting these size of code and I was overwhelmed enough by doing HTML & basic CSS.

Another reason was that my code structure was not well structured that it was quite stressful to add or modify the elements after the inital markup of HTML & CSS was over.