After seeing Puungs NFT website i wanted to clone it to practice my coding skills. The layout is simple but very fitting and eyecatching. Of couse, since i was trying to make an exact website using my own code i had a few issues, so it took me 4 hours 😭. I also added added a scroll animation using CSS and the javascript API called IntersectionObserver. You can see it Here, but you can also see ii embeded below. It's best to see fullscreen!

HTML and CSS

The top of the website is a nav, which i made by using an unordered list and paffing. To make the rest of the top iI first needed to understand the layout of all the NFT images. It seemed to me like they used grid but they didn't give every grid item an image. After i figured it out i put the top-part's information and the second picture-grid into one single element. In the element i gave it a grid making it 2 columns so the text could be right next to the pictures. Under it is a button that goes straight to the website i cloned.

The second section was a bit harder for me. I gave the secion a grid so each both the images and the text could be at the same level. For the images i gave them a grid with a gap, it didn't work for all of them since some were bigger that others, but it still looked good. Under it is an unordered list of milestones i've reached so far.

At the final section i added a background image and centered the text, in that text is just information of why i made it.

Before i finished made the nav lists inline-links that led to each section of the website. I made the font Poppins so it can look better

Scroll Animation

Using the IntersectionObsrver API i gave the second and third section a scroll animation. I did this by making each element that has the name "hidden" invisible and to the far left. Then i made a class called "show" that makes an element visible and back to it's original place. Inside the intersection Observer i made it so as soon as an element with the class "hidden" is being fully observed the "show" class will be added to it. When you give the hidden class a transition duration the style of the element will transition from invisible at the far right to visible at it's place.