Project Inspiration

My passion for streetwear and skating led me to create a supreme landing page clone. I want to refine my web development skills by learning other brands' website layouts and implementing them in my future projects. I encountered some challenges while searching for a website, as many didn't quite align with my preferences. To address this, I decided to explore the websites of clothing brands I genuinely appreciate. While exploring websites for inspiration, I stumbled upon the Supreme landing page. It captivated me right from the entrance having a fading-out effect and a live clock. The elements integrated into the website encompassed everything I needed to enhance my skills in HTML, CSS, and JavaScript, contributing to my growth as a proficient web developer.

Components used:

-Hover: When hovering over menu options, the background turns red, and the social icons display a white hover effect, indicating that the menu is ready to be clicked.

-Background Refresh: Refreshing the page introduces a new background, refreshing the visual ambiance

-Live Clock: Upon entry, a live Eastern Standard Time clock assists users in timing, ensuring they're prepared to purchase at the designated time.

-fade out: When users arrive on the page, they encounter a sleek black screen that gracefully fades away, revealing the content within.

What I learn from making a supreme landing page:

Inspect element and view page source :

-The background had interchangeable images when the user entered or refreshed the page. To save time I used the view page source and inspect element to extract the background, Favicon, and content image. Although I wasn't able to extract the social media icon image, I was able to have a grasp of using Inspect element and view page sources in my project.

syntax: Before learning that icons have their distinct elements, my icon representations lacked proper structure

Javascript: I created 3 different functions

In JavaScript, I employed arrays to house various background URLs. To ensure a seamless website experience, I introduced an event listener that triggers a cohesive transaction upon the page's load. Utilizing the Date object, I captured the current time and date. For further customization, I manipulated the Document Object Model (DOM) by implementing an element with the ID "span" to display the real-time of the current time and date.

What I Need to improve:

Positioning/responsive: The positioning of my website seems well-aligned on my screen. However, when viewed on a larger screen, the content appears to be positioned higher than intended. View page source/Inspect: Although I was able to extract the favicon, image, the background image, I had a difficult time looking for the social icons.

Conditional Statements: I'm currently encountering an issue with the time display on my Supreme website in JavaScript, particularly with the AM and PM functionalities at times not consistent with the am or pm.