Responsive Headphones Landing Page using HTML, CSS, and JavaScript (Source Code)

Faraz

By Faraz -

Learn how to design an interactive headphones landing page using HTML, CSS, and JavaScript. Elevate user experience with engaging elements.

Join us on Telegram
Responsive Headphones Landing Page using HTML, CSS, JavaScript.jpg
Read AlsoCreate Your Own SVG Polygon Generator using HTML, CSS, and JavaScript.jpgSVG Polygon Generator: Coding Tutorial for Custom Shapes

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

In the modern digital landscape, where first impressions are everything, having an exceptional online presence is paramount for any product or service. When it comes to marketing headphones, a dedicated landing page can make all the difference. This guide will lead you through the intricate process of crafting a captivating headphones landing page using the dynamic trio of HTML, CSS, and JavaScript.

Imagine this landing page as a virtual showroom, where every pixel is meticulously arranged to highlight the finest features of your headphones. With the increasing trend of online shopping, your landing page is often the initial touchpoint for potential customers. A well-designed and responsive page not only showcases your product but also delivers an immersive experience that resonates with visitors.

Why does responsiveness matter? Today's consumers access websites on a multitude of devices, from large desktop screens to small mobile phones. Ensuring your landing page adapts seamlessly to these various screen sizes guarantees that your headphones are presented in their best light, no matter how they're viewed.

Through the power of HTML, you'll structure the foundation of your page. CSS will then breathe life into your design, allowing you to style every element precisely according to your brand's identity. JavaScript, the cherry on top, introduces interactivity that keeps users engaged and curious, turning a static page into an interactive journey.

Throughout this guide, you'll find step-by-step instructions, code snippets, and insightful tips to make the process fluid and enjoyable. By the end, you'll not only possess the technical knowledge to create a stunning headphones landing page, but you'll also grasp the art of user experience and persuasion.

So, whether you're a seasoned web developer looking to enhance your skill set or a business owner aiming to make a strong online statement, this guide is your pathway to success. Let's dive in and create a headphones landing page that not only meets the demands of the digital age but sets new standards for excellence.

Design by: Bedimcode

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our landing page.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break down the code section by section:

1. <!DOCTYPE html>: This declaration specifies that the document is written in HTML5.

2. <html lang="en">: This tag defines the root element of the HTML document and specifies the language as English.

3. <head>: This section contains metadata about the document and various external resources.

  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties to ensure proper rendering on various devices.
  • Favicon: A small icon that appears in the browser tab. The provided code links to a favicon image.
  • Remix Icons: A library of icons used in the project, linked using a CSS file.
  • CSS: The main styles for the page are linked from an external "styles.css" file.
  • <title>: Sets the title of the web page.

4. <body>: This section contains the main content of the webpage.

  • <header>: The header section of the webpage containing the navigation menu and logo.
  • <main>: The main content area of the webpage.
  • Sections: The page is divided into several sections, including "Home," "Sponsor," "Specs," "Case," "Discount," and "Products." Each section has its own content and styling.

5. <footer>: The footer section contains various content related to products, support, a subscription form, and social media links.

6. Scroll Up Button: An arrow icon that appears at the bottom of the page and allows users to scroll back to the top quickly.

7. External Scripts:

  • scrollreveal: A library for animating elements as they scroll into view.
  • script.js: A custom JavaScript file for additional interactivity and functionality.

This is the basic structure of our headphone landing page using HTML, and now we can move on to styling it using CSS.

Read Alsocreate your own chatbot with html, css, and javascript.jpgCreate Your Own Chatbot with HTML, CSS, and JavaScript (Source code)

Step 2 (CSS Code):

Once the basic HTML structure of the headphones landing page is in place, the next step is to add styling to the landing page using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our landing page.

Let's break down the code step by step to understand its structure and purpose:

1. Google Fonts Import: The code starts by importing the "Poppins" font from Google Fonts to be used in the website's typography.

2. CSS Variables: The :root selector defines a set of CSS variables that store various values like colors, font sizes, margins, and more. These variables are used throughout the stylesheet to maintain consistent styling and make it easier to update styles globally.

3. Media Queries: There are media queries that modify some of the variables and styles based on the screen width. For example, when the screen width is at least 968px, font sizes and other elements' sizes are adjusted for better readability and responsiveness.

4. Base Styles: Some base styles are applied to standard HTML elements using universal selectors (*). These styles ensure consistent sizing, padding, and margins across different elements.

5. HTML and Body Styles: The styles for the HTML and body elements set the default font family, font size, background color, and text color for the entire page.

6. Typography Styles: Styles for headings (h1, h2, h3) are set to a specific color. Links (a) have no text decoration, and buttons and input fields have no borders or outlines.

7. Reusability and Layout Styles: The code defines a few reusable CSS classes such as .section, .section__title, .section__title-gradient, .container, and .grid which are later used to style different sections of the website.

8. Header and Navigation Styles: The header section is styled with a fixed position at the top of the page. The navigation bar (nav) is styled with specific heights, alignments, and background colors. Links in the navigation bar have a gradient text color that changes on hover.

9. Home Section Styles: Styles for the home section include positioning of elements like images and titles, and setting the background gradient on titles.

10. Button Styles: Buttons are styled with background colors, padding, and border-radius. Buttons also have hover styles that change the background color.

11. Sponsor and Specs Sections Styles: These sections include styling for images and grids, aligning and positioning elements within those sections.

12. Case and Discount Sections Styles: Similar to the previous sections, these sections include positioning, padding, and color styles.

13. Products Section Styles: Styles for product cards, images, content, and buttons within the products section.

14. Footer Styles: The footer is styled with a grid layout and different columns for different sections. Links and form inputs have specific styling.

15. Scroll Up Button Styles: Styles for a scroll-up button that appears when scrolling down. It has a positioning, background color, and hover effects.

16. Scrollbar Styles: Custom styling for the browser scrollbar, including the thumb color and its appearance on hover.

17. Media Queries: Additional media queries adjust styles for different screen sizes, making the design responsive.

This will give our headphones landing page an upgraded presentation. Create a CSS file with the name styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3rem;
  /*========== Colors ==========*/
  --hue-color: 206;
  --black-color: hsl(var(--hue-color), 4%, 4%);
  --black-color-alt: hsl(var(--hue-color), 4%, 8%);
  --title-color: hsl(var(--hue-color), 4%, 95%);
  --text-color: hsl(var(--hue-color), 4%, 75%);
  --text-color-light: hsl(var(--hue-color), 4%, 65%);
  --white-color: #FFF;
  --body-color: hsl(var(--hue-color), 4%, 6%);
  --container-color: hsl(var(--hue-color), 4%, 10%);
  --text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%));
  --scroll-thumb-color: hsl(var(--hue-color), 4%, 16%);
  --scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%);
  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 5rem;
  --bigger-font-size: 3.5rem;
  --big-font-size: 2.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --text-line-height: 2rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  /*========== Margenes Bottom ==========*/
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 7.5rem;
    --bigger-font-size: 4.5rem;
    --big-font-size: 4rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

h1, h2, h3 {
  color: var(--title-color);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button,
input {
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section {
  padding: 4rem 0 2rem;
}

.section__title {
  font-size: var(--bigger-font-size);
  text-align: center;
  margin-bottom: var(--mb-2-5);
}

.section__title-gradient {
  background: var(--text-gradient);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/*=============== LAYOUT ===============*/
.main {
  overflow: hidden;
}

.container {
  max-width: 968px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid {
  display: grid;
}

/*=============== HEADER ===============*/
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background: transparent;
}

/*=============== NAV ===============*/
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  display: flex;
  width: 1.5rem;
}

.nav__toggle {
  font-size: 1.2rem;
  color: var(--white-color);
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    background-color: var(--body-color);
    top: -100%;
    left: 0;
    width: 100%;
    padding: 4rem 0 3rem;
    transition: .4s;
  }
}

.nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
}

.nav__link {
  font-size: var(--h2-font-size);
  text-transform: uppercase;
  font-weight: var(--font-semi-bold);
  background: var(--text-gradient);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .4s;
}

.nav__link:hover {
  background: var(--white-color);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.nav__close {
  position: absolute;
  font-size: 1.5rem;
  top: 1rem;
  right: 1rem;
  color: var(--white-color);
  cursor: pointer;
}

/* show menu */
.show-menu {
  top: 0;
}

/* Change background header */
.scroll-header {
  background-color: var(--body-color);
}

/* Active link */
.active-link {
  background: var(--white-color);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/*=============== HOME ===============*/
.home__img {
  width: 250px;
  position: absolute;
  top: -16rem;
  right: 1.5rem;
}

.home__data {
  padding-top: 5rem;
}

.home__header {
  position: relative;
}

.home__title {
  position: absolute;
  top: -4rem;
  left: 1rem;
  line-height: 6rem;
  font-size: var(--biggest-font-size);
  background: var(--text-gradient);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.home__subtitle {
  font-size: var(--big-font-size);
  margin-bottom: var(--mb-2-5);
}

.home__title-description {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1);
}

.home__description {
  margin-bottom: var(--mb-2-5);
  line-height: var(--text-line-height);
}

.home__price {
  font-size: var(--h3-font-size);
  font-weight: var(--font-semi-bold);
  margin-left: var(--mb-0-75);
}

/*=============== BUTTONS ===============*/
.button {
  display: inline-block;
  background-color: var(--black-color);
  color: var(--white-color);
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  transition: .3s;
}

.button:hover {
  background-color: var(--black-color-alt);
}

.button__icon {
  font-size: 1.2rem;
}

.button--flex {
  display: inline-flex;
  align-items: center;
  column-gap: .75rem;
}

/*=============== SPONSOR ===============*/
.sponsor__img {
  width: 90px;
}

.sponsor__container {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  row-gap: 5rem;
  justify-items: center;
  align-items: center;
}

/*=============== SPECS ===============*/
.specs__container {
  position: relative;
}

.specs__content {
  row-gap: 1.5rem;
}

.specs__data {
  display: grid;
  row-gap: .25rem;
}

.specs__icon {
  font-size: 1.2rem;
  color: var(--white-color);
}

.specs__title {
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}

.specs__subtitle {
  font-size: var(--smaller-font-size);
}

.specs__data:nth-child(1), .specs__data:nth-child(4) {
  margin-left: 1.5rem;
}

.specs__img {
  width: 250px;
  position: absolute;
  top: 2rem;
  right: -4rem;
}

/*=============== CASE ===============*/
.case__container {
  position: relative;
  grid-template-columns: repeat(2, 1fr);
}

.case__data {
  padding: 5rem 0 3rem;
}

.case__img {
  width: 250px;
  position: absolute;
  left: -7rem;
}

.case__description {
  margin-bottom: var(--mb-1-5);
  line-height: var(--text-line-height);
}

/*=============== DISCOUNT ===============*/
.discount__container {
  position: relative;
  background-color: var(--container-color);
  padding: 2rem 1.5rem;
  border-radius: .75rem;
}

.discount__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-75);
}

.discount__description {
  margin-bottom: var(--mb-1);
}

.discount__img {
  width: 300px;
  position: absolute;
  top: 4rem;
  right: -11rem;
}

/*=============== PRODUCTS ===============*/
.products__line {
  line-height: 4rem;
}

.products__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem 1.5rem;
  padding-top: 3rem;
}

.products__card {
  position: relative;
  height: 132px;
  background-color: var(--container-color);
  padding: .75rem;
  border-radius: .5rem;
  display: grid;
}

.products__img {
  width: 80px;
  position: absolute;
  inset: 0;
  margin-right: auto;
  margin-left: auto;
  top: -3rem;
}

.products__content {
  align-self: flex-end;
}

.products__title, .products__price {
  font-size: var(--small-font-size);
}

.products__price {
  font-weight: var(--font-semi-bold);
}

.products__button {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .5rem;
  border-radius: .35rem;
}

/*=============== FOOTER ===============*/
.footer__container {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  row-gap: 2rem;
}

.footer__logo {
  width: 2rem;
}

.footer__title {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1);
}

.footer__links {
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
}

.footer__link {
  color: var(--text-color);
}

.footer__link:hover {
  color: var(--white-color);
}

.footer__form {
  display: flex;
  column-gap: .5rem;
  background-color: var(--container-color);
  padding: .5rem .75rem;
  border-radius: .5rem;
  margin-bottom: var(--mb-2);
}

.footer__input {
  background-color: var(--container-color);
  width: 90%;
  color: var(--white-color);
}

.footer__input::placeholder {
  color: var(--text-color);
  font-size: var(--normal-font-size);
  font-family: var(--body-font);
}

.footer__social {
  display: flex;
  column-gap: 1.25rem;
}

.footer__social-link {
  display: inline-flex;
  color: var(--white-color);
  background-color: var(--container-color);
  padding: .5rem;
  border-radius: .25rem;
  font-size: 1rem;
}

.footer__social-link:hover {
  background-color: var(--black-color);
}

.footer__copy {
  margin-top: 5rem;
  text-align: center;
}

.footer__copy-link {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

/*=============== SCROLL UP ===============*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  display: flex;
  background-color: var(--container-color);
  border-radius: .25rem;
  padding: .45rem;
  opacity: 9;
  z-index: var(--z-tooltip);
  transition: .4s;
}

.scrollup:hover {
  background-color: var(--black-color);
  opacity: 1;
}

.scrollup__icon {
  color: var(--white-color);
  font-size: 1.35rem;
}

/* Show Scroll Up*/
.show-scroll {
  bottom: 5rem;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
  width: .60rem;
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color);
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-color-alt);
}

/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .container {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }
  .section__title {
    font-size: var(--big-font-size);
  }
  .home__img {
    width: 200px;
    top: -13rem;
  }
  .home__title {
    top: -4rem;
    font-size: var(--bigger-font-size);
  }
  .home__data {
    padding-top: 1rem;
  }
  .home__description {
    font-size: var(--small-font-size);
  }
  .specs__img {
    width: 200px;
  }
  .case__container {
    grid-template-columns: .6fr 1fr;
  }
  .case__img {
    width: 220px;
    top: -2rem;
    left: -9rem;
  }
  .case__data {
    padding: 0;
  }
  .products__container {
    grid-template-columns: 142px;
    justify-content: center;
  }
}

/* For medium devices */
@media screen and (min-width: 576px) {
  .home__container {
    grid-template-columns: .8fr 1fr;
  }
  .home__data {
    padding-top: 2rem;
  }
  .home__img {
    top: -7rem;
    left: 0;
  }
  .specs__img {
    position: initial;
  }
  .specs__container {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
  }
  .case__img {
    position: initial;
  }
  .case__data {
    padding: 0;
  }
  .case__container {
    grid-template-columns: max-content 250px;
    justify-content: center;
    align-items: center;
    column-gap: 2rem;
  }
  .discount__img {
    position: initial;
  }
  .discount__container {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
  }
  .products__container {
    grid-template-columns: repeat(3, 142px);
    justify-content: center;
  }
}

@media screen and (min-width: 767px) {
  body {
    margin: 0;
  }
  .section {
    padding: 6rem 0 2rem;
  }
  .nav {
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav__logo {
    width: 2rem;
  }
  .nav__list {
    flex-direction: row;
    column-gap: 3.5rem;
  }
  .nav__link {
    font-size: var(--normal-font-size);
    text-transform: initial;
  }
  .nav__toggle, .nav__close {
    display: none;
  }
  .home__container {
    position: relative;
    grid-template-columns: repeat(2, 1fr);
  }
  .home__img {
    top: -9rem;
    left: 4rem;
  }
  .home__data {
    padding-top: 8rem;
  }
  .specs__img {
    width: 300px;
  }
  .case__container {
    column-gap: 5rem;
  }
  .case__img {
    width: 300px;
  }
  .case__description {
    margin-bottom: var(--mb-2);
  }
  .discount__container {
    grid-template-columns: 250px max-content;
    justify-content: center;
    column-gap: 5rem;
    padding: 3rem 0;
  }
  .discount__title {
    font-size: var(--h2-font-size);
    margin-bottom: var(--mb-1);
  }
  .discount__description {
    margin-bottom: var(--mb-2);
  }
  .products__container {
    grid-template-columns: repeat(3, 162px);
    gap: 6rem 3rem;
    padding-top: 5rem;
  }
  .products__card {
    height: 152px;
    padding: .85rem;
  }
  .products__img {
    width: 95px;
  }
  .footer__container {
    grid-template-columns: .4fr .7fr .7fr 1fr;
  }
}

/* For large devices */
@media screen and (min-width: 1024px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  .home__img {
    width: 300px;
    top: -15rem;
  }
  .home__title {
    top: -5rem;
    left: 3.5rem;
  }
  .home__description {
    padding-right: 5rem;
  }
  .sponsor__img {
    width: 100px;
  }
  .discount__img {
    width: 350px;
  }
  .footer__container {
    padding-top: 3rem;
  }
  .footer__copy {
    margin-top: 9rem;
  }
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. This JavaScript code is responsible for adding interactivity and animations to a webpage. It focuses on several aspects such as showing/hiding a navigation menu, changing the header appearance on scrolling, revealing elements on scrolling, highlighting active navigation links based on the scrolled section, and revealing animations for various page elements. Let's break down the code step by step:

1. Navigation Menu Interaction:

  • The code defines constants navMenu, navToggle, and navClose to represent the navigation menu, the toggle button to open the menu, and the close button to hide the menu, respectively.
  • Event listeners are added to the toggle and close buttons.
  • When the toggle button is clicked, it adds the class show-menu to the navigation menu, making it visible.
  • When the close button is clicked, it removes the show-menu class from the navigation menu, hiding it.

2. Removing Menu on Link Click:

  • The code selects all elements with the class nav__link and attaches a click event listener to each.
  • When a navigation link is clicked, the function linkAction is called.
  • Inside linkAction, the show-menu class is removed from the navigation menu, effectively hiding it.

3. Changing Header Background on Scroll:

  • The function scrollHeader is defined.
  • An event listener is added to the window object to listen for scroll events.
  • When the user scrolls, the function checks the vertical scroll position (scrollY).
  • If the scroll position is greater than or equal to 50 pixels, the class scroll-header is added to the header element. Otherwise, the class is removed.

4. Displaying Scroll-to-Top Button:

  • The function scrollUp is defined.
  • An event listener is added to the window object to listen for scroll events.
  • If the user's scroll position is greater than or equal to 200 pixels, the class show-scroll is added to an element with the ID scroll-up (presumably a button to scroll back to the top). Otherwise, the class is removed.

5. Highlighting Active Section Links:

  • The code selects all sections with an id attribute and assigns them to the sections constant.
  • The function scrollActive is defined.
  • An event listener is added to the window object to listen for scroll events.
  • For each section, the function checks if the user's scroll position is within a certain range of the section's position. If it is, the corresponding navigation link is given the class active-link, highlighting it. Otherwise, the class is removed.

6. Scroll Reveal Animations:

  • The code initializes the ScrollReveal library with specific animation settings.
  • The code defines various reveal animations for different elements on the page.
  • The animations include specifying the origin, delay, and interval for revealing elements as the user scrolls down the page.

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}

/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    // When we click on each nav__link, we remove the show-menu class
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader(){
    const header = document.getElementById('header')
    // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
    if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)

/*=============== SHOW SCROLL UP ===============*/ 
function scrollUp(){
    const scrollUp = document.getElementById('scroll-up');
    // When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class
    if(this.scrollY >= 200) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll('section[id]')

function scrollActive(){
    const scrollY = window.pageYOffset

    sections.forEach(current =>{
        const sectionHeight = current.offsetHeight
        const sectionTop = current.offsetTop - 50;
        sectionId = current.getAttribute('id')

        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
        }else{
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
        }
    })
}
window.addEventListener('scroll', scrollActive)

/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
    distance: '60px',
    duration: 2500,
    delay: 400,
    // reset: true
})

sr.reveal(`.home__header, .section__title`,{delay: 600})
sr.reveal(`.home__footer`,{delay: 700})
sr.reveal(`.home__img`,{delay: 900, origin: 'top'})

sr.reveal(`.sponsor__img, .products__card, .footer__logo, .footer__content, .footer__copy`,{origin: 'top', interval: 100})
sr.reveal(`.specs__data, .discount__animate`,{origin: 'left', interval: 100})
sr.reveal(`.specs__img, .discount__img`,{origin: 'right'})
sr.reveal(`.case__img`,{origin: 'top'})
sr.reveal(`.case__data`)

Final Output:

Responsive Headphones Landing Page using HTML, CSS, JavaScript.gif

See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.

Read Alsocreating a button in pure css with border animation.pngHow to Create a Pure CSS Button with Border Animation

Conclusion:

In the ever-evolving realm of digital marketing, a well-crafted headphones landing page is your secret weapon for captivating audiences and driving sales. By embarking on this journey through HTML, CSS, and JavaScript, you've unlocked the potential to transform a simple webpage into an immersive experience that resonates with visitors.

Remember, your landing page is more than just code and visuals; it's a gateway to showcasing your headphones' unique features and benefits. The synergy of responsive design, elegant styling, and interactive elements creates an online presence that stands out in the crowded virtual marketplace.

As you wrap up your headphones landing page project, reflect on the skills you've acquired. From structuring the HTML skeleton to fine-tuning CSS details, and from implementing engaging JavaScript features to optimizing for various devices – each step contributes to a holistic understanding of modern web development.

Your commitment to refining user experience, down to the last pixel and interaction, sets you apart. Your landing page becomes a testament to your dedication to excellence and your willingness to adapt to the ever-changing digital landscape.

Whether your headphones are aimed at music enthusiasts, gamers, or professionals seeking premium audio experiences, your landing page can now effectively convey the essence of your product and brand. As you launch your headphones into the digital stratosphere, fueled by your creativity and newfound expertise, remember that your journey as a web developer and digital entrepreneur is only beginning.

So, with your headphones landing page ready to make its mark, embrace the excitement of sharing your innovation with the world. Thank you for joining us on this adventure of crafting an exceptional online presence. Here's to your success, and to the lasting impression your headphones will leave on each and every visitor.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: headphones landing page, responsive design, html, css, javascript, source code, web development, best wireless headphones landing page design, step-by-step html css javascript headphones page, source code included headphones webpage tutorial
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post