Create a Jewellery Website Landing Page using HTML, CSS, and JavaScript

By Faraz - Last Updated: August 11, 2024

Learn how to create a stunning jewellery website landing page with our step-by-step guide. Follow our detailed instructions on HTML, CSS, and JavaScript to build a beautiful, functional site.

Join us on Telegram

jewellery-website-landing-page-using-html-css-and-javascript.webp

Read Also using html and css to build an awesome nft landing page.jpg

Using HTML and CSS to Build an Awesome NFT Landing Page

Creating a captivating jewellery website landing page is essential for attracting customers and showcasing your products effectively. This guide will walk you through the process of building a stunning landing page using HTML, CSS, and JavaScript. By following these steps, you’ll be able to create a professional-looking site that highlights your jewellery collection and provides a seamless user experience.

Source Code

Step 1 (HTML Code):

The first thing we need to do is create our HTML File for Jewellery Website Landing Page. We'll start with well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Here’s a breakdown of its components:

<!DOCTYPE html>: Defines the document type and version of HTML being used.

<html lang="en">: Specifies the language of the document as English.

<head>: Contains meta-information about the HTML document, such as character set, viewport settings, and title.

<meta charset="UTF-8">: Sets the character encoding to UTF-8 for proper character display.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design.
<title>Jewellery Website Landing Page</title>: Sets the title of the webpage displayed in the browser tab.
<link rel="stylesheet" href="styles.css">: Links an external CSS file (styles.css) for styling the page.

<body>: Contains the visible content of the webpage.

<header id="home">: Defines the header section containing the logo, navigation menu, and main background content.
- <div class="container">: Wraps content to control layout and spacing.
- <nav>: Navigation menu with links to different sections (#home, #custom-sec, etc.).
- <div class="main-background">: Main section with a large background image and primary content.
<section>: Divided into sections (#custom-sec, #new-sec, #designer-sec, etc.) each focusing on different content such as custom jewelry, new collections, designer jewelry, etc.
<form>: Contact form allowing users to input their details and messages.
<div class="bottom-links">: Additional navigation links at the bottom of the page.
<footer>: Footer section displaying copyright information and credits.

<script>: Includes JavaScript files (jquery.min.js and script.js) for dynamic behavior and interactivity.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jewellery Website Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="home">
        <div class="container">
            <div class="brand">
              <img src="https://vignette4.wikia.nocookie.net/joke-battles/images/4/41/Infinity_Logo_Gold.png/revision/latest?cb=20151230235753" style="width: 40px"/>
              <p>Infinity Golden Jewelry</p>
            </div>
         </div><!-- / container -->
          
            <nav>
              <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#custom-sec">Custom Jewelry</a></li>
                <li><a href="#designer-sec">Designer Jewelry</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </nav>
          
          <div class="main-background">
            <div class="container">
              <div class="main-content">
                <h1>Infinity Golden Jewelry</h1>
                <h2>24 Caratage Yellow Gold Bracelet</h2>
                <p>Shope the latest designs from new brands</p>
                <a href="#custom-sec">- View Products</a>
              </div>
            </div>
          </div>
        </header>
        
        <section class="section" id="custom-sec">
          <div class="container">
            <div class="section-head">
              <h2>Custom Jewelry</h2>
              <p>Latest Design</p>
            </div>
            
            <div class="collection-list">
              <ul>
                <li><img src="http://www.thomassabo.com/dw/image/v2/AAQY_PRD/on/demandware.static/-/Sites-ts-master-catalog/default/dwbb260100/productimages/LBA0102-415-12.png?sw=310&sfrm=png" style="width: 180px"/>
                  <div class="list-head">
                    <h3>Bracelets</h3>
                    <span>The description of the item.</span>
                  </div>
                </li>
            
        
                <li><img src="https://s-media-cache-ak0.pinimg.com/originals/27/41/69/274169b4444ccf7448d4133c13dd05c1.png" style="width: 180px"/>
                  <div class="list-head">
                    <h3>Rings</h3>
                    <span>The description of the item.</span>
                  </div>
                </li>
        
                
                <li><img src="https://s-media-cache-ak0.pinimg.com/originals/c9/89/55/c98955bbb6331b4aa98cf33bdc84a84a.png" style="width: 180px"/>
                  <div class="list-head">
                    <h3>Earrings</h3>
                    <span>The description of the item.</span>
                  </div>
               </li>
                
                <li><img src="https://images.unsplash.com/photo-1588444837495-c6cfeb53f32d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" style="width: 180px"/>
                  <div class="list-head">
                    <h3>Pendants</h3>
                    <span>The description of the item.</span>
                  </div>
               </li>
              </ul>
            </div>
          </div>
        </section>

        <section class="section" id="new-sec">
            <div class="new-collection">
            
                <div class="left"></div>
        
                <div class="right"></div>
        
                <div class="middle">
                  <div class="mid-title">
                    <h2>New <br/>Collection</h2>
                    <a href="#home">View products</a>
                  </div>
                </div>
            </div>
        </section>
        
        <section class="section designer-collection clearfix" id="designer-sec">
          <div class="container">
            <div class="section-head">
                <h2>Designer JEWELRY</h2>
                <p>Explore Design</p>
            </div>
            
            <div class="collection-list clearfix">
              <ul>
                <li><img src="https://cdn0.rubylane.com/shops/2heartsjewelry/TRI369.1L.jpg" style="width: 180px"/>
                  <div class="list-head">
                    <h3>Bracelets</h3>
                    <span>The description of the item.</span>
                  </div>
                </li>
            
        
                <li><img src="http://www.pngmart.com/files/1/Jewellery-Ring-PNG-Clipart.png" style="width: 180px"/>
                  <div class="list-head">
                    <h3>Rings</h3>
                    <span>The description of the item.</span>
                  </div>
                </li>
        
                
                <li><img src="https://s-media-cache-ak0.pinimg.com/originals/c9/89/55/c98955bbb6331b4aa98cf33bdc84a84a.png" style="width: 180px"/>
                  <div class="list-head">
                    <h3>Earrings</h3>
                    <span>The description of the item.</span>
                  </div>
               </li>
        
              </ul>
              
            </div>
                
          </div>
        </section>
        
        <section class="section card-wrapper">
          
          <section class="card-one">
          </section>
          
          <section class="card-two">
            <div class="card-title">
              <h3>Designer Name</h3>
              <p>Details about the product goes here.</p>
              <a href="#home">View more</a>
            </div>
          </section>
        
          <section class="card-three">
             <div class="card-title">
              <h3>Designer Name</h3>
              <p>Details about the product goes here.</p>
              <a href="#home">View more</a>
            </div>
          </section>
          
          <section class="card-four">
          </section>
          
        </section>
          
        <section class="section gallery cleafix">
          
          <div class="container">
              <div class="section-head">
                  <h2>Designer Gallery</h2>
                  <p>Explore Design</p>
              </div>
              <ul class="gallery-showcase">
        
                <li>
                  <figure>
                    <img src="https://static.pexels.com/photos/265856/pexels-photo-265856.jpeg" alt=""/>
                  </figure>
                </li>
        
                <li>
                  <figure>
                    <img src="https://static.pexels.com/photos/230290/pexels-photo-230290.jpeg" alt=""/>
                  </figure>
                </li>
        
                <li>
                  <figure>
                    <img src="https://static.pexels.com/photos/248077/pexels-photo-248077.jpeg" alt=""/>
                  </figure>
                </li>
        
              </ul>
          </div>
          
        </section>
        
        <section class="section about" id="about">
            <div class="section-head">
                <h2>About Us</h2>
                <p>Learn more about us and quality of our products</p>
            </div>
          
          
              <div class="wrapper clearfix">
        
                <div class="left">
                </div>
        
                <div class="right">
                  <div class="text">
                    <h3>Who we are</h3>
                    <br/>
                    <p>
                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <br/> <br/> The point of using Lorem Ipsum is that it has a more-or-less normal distribution.
                    </p>
                  </div>
                </div>
              </div>
        </section>
    
        <section class="section contact" id="contact">
          <div class="container">
            <div class="section-head">
                <h2>Contact Us</h2>
                <p>Contact Us for More Details</p>
            </div>  
            
            <form>
              <input type='text' name="firstname" placeholder="Your First Name">
              
              <input type="text" name="lastname" placeholder="Your Last Name">
              
              <input type="text" name="phone" placeholder="Your Phone Number">
              
              <input type="text" name="email" placeholder="Your Email Address">
              
              <textarea name="message" rows="8" placeholder="Your Message"></textarea>
              <br/>
              <input type="button" value="Send">
            </form>
          </div>
        </section>
        
        <div class="bottom-links">
          <div class="container">
            <ul>
                <li><a href="#home">Support</a></li>
                <li><a href="#home">FAQ</a></li>
                <li><a href="#home">Designers</a></li>
                <li><a href="#home">About</a></li>
                <li><a href="#home">Contact</a></li>
              </ul>
          </div>
        </div>
        
        <footer>
          <div class="container">
            <small>© 2017 Infitinity Golden Jewelry | Coded By Jak Ashuraliev</small>
          </div>
        </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Read Also Creating a Responsive Pet Store Landing Page using HTML & CSS.jpg

Creating a Responsive Pet Store Landing Page using HTML and CSS (Source Code)

Step 2 (CSS Code):

Next, we need to style our jewelry landing page by adding our CSS. This will give our jewelry landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Here's a breakdown of its key parts:

@import: Imports the Montserrat font from Google Fonts with weights 300, 400, and 500.

*: Applies styles to all elements:

margin: 0; padding: 0;: Resets margin and padding.
box-sizing: border-box;: Ensures padding and border are included in the element's total width and height.

body: Styles for the entire page:

font-family: 'Montserrat', sans-serif;: Sets the default font for the page.
overflow-y: scroll; overflow-x: hidden;: Enables vertical scrolling and hides horizontal overflow.

Headings (h1, h2, h3):

letter-spacing: 2px;: Adds spacing between letters.

header: Styles for the header:

background: #000; color: #fff;: Sets background and text color.

.container: Styles for a container class:

max-width: 960px; margin: 0 auto;: Sets maximum width and centers the container horizontally.

.brand: Styles for a brand class:

text-align: center; text-transform: uppercase; letter-spacing: 1px; padding: 40px;: Centers text, transforms to uppercase, adds letter spacing, and provides padding.

nav.nav-sticky: Styles for a sticky navigation bar:

width: 100%; position: fixed; top: 0;: Makes it full-width, fixed at the top.
background: #222; padding-top: 8px; padding-bottom: 8px;: Sets background color and padding.
z-index: 10; transition: all 1s;: Ensures it stays above other content and transitions smoothly.

nav ul: Styles for navigation unordered lists:

list-style: none; text-align: center; padding: 10px; border: 1px solid #222;: Removes list bullets, centers text, adds padding and border.

nav ul li a.active: Styles for active navigation links:

color: #fcbe32;: Changes text color.

nav ul li a: Styles for navigation links:

text-decoration: none; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; color: #999;: Removes underline, transforms text to uppercase, adjusts font size and spacing, sets color.

.section: Styles for sections:

padding-top: 80px; text-align: center; overflow: hidden;: Adds padding, centers text, and hides overflow.

.section-head h2: Styles for section headings:

font-weight: 400; padding-bottom: 5px; text-transform: uppercase;: Adjusts font weight, padding, and transforms text to uppercase.

.main-background: Styles for a background image:

background: url('http://www.gol.../images/Three_bracelets.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh;: Sets a background image with specific properties.

.main-content: Styles for main content:

text-align: right;: Aligns text to the right.

.main-content h1, .main-content h2, .main-content p: Styles for headings and paragraphs within main content:

Adjusts font size, margins, and colors.

.main-content a: Styles for links within main content:

color: #fcbe32; text-decoration: none;: Sets link color and removes underline.

.main-content a:hover: Styles for links on hover:

color: #eee;: Changes text color.

Collection List

.collection-list ul:

list-style: none;: Removes bullets from the list.

.collection-list ul li:

display: inline-block;: Displays list items in a row.
padding: 14px;: Adds padding around each list item.

New Collection

.new-collection:

position: absolute; width: 100%;: Makes the section take the full width of its container and positions it absolutely.

.new-collection .left:

float: left;: Floats the element to the left.
background: url(...);: Sets the background image.
background-repeat: no-repeat; background-position: right; background-size: cover;: Specifies background properties.
height: 350px; width: 50%;: Sets the height and width.

.new-collection .right:

Similar to .new-collection .left but with a different background image and background-position: left;.

.new-collection .middle:

position: absolute; background-color: #fcbe32;: Positions the element absolutely and sets background color.
height: 250px; width: 350px;: Sets the size.
left: 50%; top: 50%; margin-left: -175px; margin-top: -125px;: Centers the element within its container.
text-align: center;: Centers text inside the element.

.new-collection .mid-title:

text-transform: uppercase; position: absolute;: Transforms text to uppercase and positions it absolutely.
left: 50%; top: 50%; margin-left: -80px; margin-top: -60px;: Centers the title within the .middle element.

.new-collection .mid-title h2:

font-weight: 400; padding-bottom: 20px; color: #eee;: Sets font weight, padding, and color for the title.

.new-collection .mid-title a:

text-decoration: none; letter-spacing: 1px; color: #555;: Removes underline, adds letter spacing, and sets color.
border: 1px solid #555; padding: 10px 20px; font-size: 14px;: Sets border, padding, and font size.

.new-collection .mid-title a:hover, .new-collection .mid-title a:focus:

color: #fff; border: 1px solid #fff;: Changes color and border on hover/focus.

Designer Collection

.designer-collection .section-head:

padding-top: 340px;: Adds padding to the top of the section head.

Section Cards

.card-wrapper section:

float: left; background: #985d8d;: Floats sections to the left and sets background color.
width: 50%; height: auto; text-align: center;: Sets width, automatic height, and centers text.

.card-wrapper section .card-title:

position: relative; top: 50%; left: 50%;: Positions the title within the section.
transform: translate(-50%, -50%);: Centers the title using transformation.
text-transform: uppercase; line-height: 2em;: Transforms text to uppercase and sets line height.

.card-wrapper section .card-title a:

color: #fff; text-decoration: none;: Sets link color and removes underline.

.card-wrapper section .card-title a:hover, .card-wrapper section .card-title a:focus:

color: #333;: Changes link color on hover/focus.

.card-wrapper .card-one:

background: url(...);: Sets the background image.
background-repeat: no-repeat; background-position: center; background-size: cover;: Specifies background properties.
height: 350px;: Sets height.

.card-wrapper .card-two:

background: #985d8d; height: 350px; color: #eee;: Sets background color, height, and text color.

.card-wrapper .card-three:

background: #fcbe32; height: 350px;: Sets background color and height.

.card-wrapper .card-four:

background: url(...);: Sets the background image.
background-repeat: no-repeat; background-position: center; background-size: cover;: Specifies background properties.
height: 350px;: Sets height.

Gallery

.gallery .section-head:

text-align: center;: Centers the text.
padding-bottom: 40px; padding-top: -50px;: Adds padding at the bottom and removes padding at the top (the negative padding value might not be applied as expected).

.gallery-showcase:

list-style: none;: Removes bullets from the list.

.gallery-showcase li:

display: block; width: 33.33%; float: left; padding: 4px;: Sets list items to block display, divides them into thirds, floats them left, and adds padding.

.gallery-showcase figure:

overflow: hidden;: Hides overflow content.

.gallery-showcase img:

width: 100%; height: auto; transform: scale(1.15); transition: all 0.5s; cursor: pointer;: Sets image size, scales it up, adds transition for smooth scaling, and changes cursor to pointer on hover.

.gallery-showcase img:hover:

transform: scale(1.05);: Slightly scales down the image on hover.

About Us

.about .wrapper:

padding-top: 80px;: Adds padding to the top.

.about .left:

width:50%; height: 300px; float: left;: Sets width, height, and floats element to the left.
background: url('...'); background-size: cover; background-position: center top; background-repeat: no-repeat;: Sets background image and properties.

.about .right:

width: 50%; height: 300px; float: left; background: #fcbe32;: Sets width, height, floats element to the left, and sets background color.

.about .right .text:

max-height: 300px; color: #555; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);: Sets maximum height, text color, positions text in the center.
padding: 10px 80px; line-height: 1.5;: Adds padding and sets line height.

Contact Us

form:

padding-top: 40px; padding-bottom: 40px;: Adds padding to the top and bottom.

input[type=text], input[type=button], textarea:

width: 50%; padding: 10px; border: 1px solid #985d8d; border-radius: 4px; margin: 6px; resize: vertical;: Sets width, padding, border, border-radius, margin, and allows vertical resizing for text areas.

input[type=button]:

background: #bb8eb3; color: #fff; text-transform: uppercase; border: none; cursor: pointer;: Sets background color, text color, transforms text to uppercase, removes border, and changes cursor to pointer.

input[type=button]:hover:

background: #985d8d;: Changes background color on hover.

Footer

.bottom-links ul:

list-style: none; text-align: center; padding: 40px;: Removes bullets from the list, centers text, and adds padding.

.bottom-links li:

display: inline; padding: 12px;: Displays list items inline and adds padding.

.bottom-links ul li a:

text-decoration: none; color: #888; font-size: 12px;: Removes underline, sets text color, and font size.

.bottom-links ul li a:hover, .bottom-links ul li a:focus:

color: #985d8d;: Changes text color on hover and focus.

footer:

padding: 20px; background: #222; color: #fcbe32; text-align: center;: Adds padding, sets background and text color, and centers text.

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500');

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

body{
  font-family: 'Montserrat', sans-serif;
  overflow-y: scroll;
  overflow-x: hidden;
}

h1, h2, h3{
  letter-spacing: 2px;
}

header{
  background: #000;
  color: #fff;
}

.container{
  max-width: 960px;
  margin: 0 auto;
}

.brand{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 40px;
}

.brand img{
  margin-bottom: 20px;
}

nav.nav-sticky{
  width: 100%;
  position: fixed;
  top: 0;
  background: #222;
  padding-top: 8px;
  padding-bottom: 8px;
  z-index: 10;
  transition: all 1s;
}

nav ul{
  list-style: none;
  text-align: center;
  padding: 10px;
  border: 1px solid #222;
}

nav ul li a.active{
  color: #fcbe32;
}

nav ul li{
  display: inline;
  padding: 20px;
}

nav ul li a{
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  color: #999;
}

nav ul li a:hover{
  color: #fcbe32;
}

/*========== GENERAL ==========*/

.section{
  padding-top: 80px;
  text-align: center;
  overflow: hidden;
}

.section-head h2{
  font-weight: 400;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.section-head p{
  color: #fcbe32;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.list-head h3{
  padding-bottom: 14px;
  text-transform: uppercase;
  font-weight: 400;
}

.list-head span{
  color: #999;
  font-weight: 100;
  font-size: 14px;
  word-wrap: break-word;
}

/*========== MAIN CONTENT ==========*/

.main-background{
  background: url('http://www.gold.org/sites/default/files/images/Three_bracelets.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
}

.main-content{
  text-align: right;
}

.main-content h1{
  font-size: 4vw;
  margin-bottom: 20px;
  font-weight: 300;
  padding-bottom: 20px;
}

.main-content h2{
  font-size: 3vw;
  color: #fcbe32;
  padding-bottom: 5px;
  font-weight: 400;
}

.main-content p{
  font-size: 2.5vw;
  margin-bottom: 40px;
}

.main-content a{
  color: #fcbe32;
  text-decoration: none;
}

.main-content a:hover{
  color: #eee;
}

/*==========  CUSTOM COLLECTION ==========*/

.collection-list ul{
  list-style: none;
}

.collection-list ul li{
  display: inline-block;
  padding: 14px;
}

/*==========  NEW COLLECTION ==========*/

.new-collection{
  position: absolute;
  width: 100%;
}

.new-collection .left{
  float: left;
  background: url('https://media.angieslist.com/s3fs-public/styles/widescreen_large/public/jewelry.jpeg?itok=ymeE9NXz');
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  height: 350px;
  width: 50%;
}

.new-collection .right{
  float: left;
  background: url('http://static.boredpanda.com/blog/wp-content/uploads/2016/03/terrarium-jewelry-microcosm-ruby-robin-boutique-10.jpg');
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  height: 350px;
  width: 50%;
}

.new-collection .middle{
  position: absolute;
  background-color: #fcbe32;
  height: 250px;
  width: 350px;
  left: 50%;
  top: 50%;
  margin-left: -175px;
  margin-top: -125px;
  text-align: center;
}

.new-collection .mid-title{
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -80px;
  margin-top: -60px; 
}

.new-collection .mid-title h2{
  font-weight: 400;
  padding-bottom: 20px;
  color: #eee;
}

.new-collection .mid-title a{
  text-decoration: none;
  letter-spacing: 1px;
  color: #555;
  border: 1px solid #555;
  padding: 10px 20px;
  font-size: 14px;
}

.new-collection .mid-title a:hover, 
.new-collection .mid-title a:focus{
  color: #fff;
  border: 1px solid #fff;
}

/*==========  DESIGNER COLLECTION ==========*/

.designer-collection .section-head {
  padding-top: 340px;
}

/*==========  SECTION CARDS ==========*/

.card-wrapper section{
  float: left;
  background: #985d8d;
  width: 50%;
  height: auto;
  text-align: center;
}

.card-wrapper section .card-title{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  line-height: 2em;
}

.card-wrapper section .card-title a{
  color: #fff;
  text-decoration: none;
}

.card-wrapper section .card-title a:hover,
.card-wrapper section .card-title a:focus{
  color: #333;
}


.card-wrapper .card-one{
  background: url('https://static.pexels.com/photos/356148/pexels-photo-356148.jpeg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 350px;
}

.card-wrapper .card-two{
  background: #985d8d;
  height: 350px;
  color: #eee;
}

.card-wrapper .card-three{
  background: #fcbe32;
  height: 350px;
}

.card-wrapper .card-four{
  background: url('http://findmyrock.com/wp-content/uploads/2013/04/best-photography-6.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 350px;
}

/*==========  DESIGNER GALLERY ==========*/


.gallery .section-head{
  text-align: center;
  padding-bottom: 40px;
  padding-top: -50px;
}

.gallery-showcase{
  list-style: none;
}

.gallery-showcase li{
  display: block;
  width: 33.33%;
  float: left;
  padding: 4px;
}

.gallery-showcase figure{
  overflow: hidden;
}

.gallery-showcase img{
  width: 100%;
  height: auto;
  transform: scale(1.15);
  transition: all 0.5s;
  cursor: pointer;
}

.gallery-showcase img:hover{
  transform: scale(1.05);
}

/*==========  ABOUT US ==========*/

.about .wrapper{
  padding-top: 80px;
}

.about .left{
  width:50%;
  height: 300px;
  background: url('http://maxpixel.freegreatpicture.com/static/photo/1x/Diamond-Luxury-Jewelry-Gold-Shiny-Precious-888286.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  float: left;
}

.about .right{
  width: 50%;
  height: 300px;  
  float: left;
  background: #fcbe32;
}

.about .right .text{
  max-height: 300px;
  color: #555;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 80px 10px 80px;
  line-height: 1.5;
}

/*==========  CONTACT US ==========*/

form{
  padding-top: 40px;
  padding-bottom: 40px;
}

input[type=text], input[type=button], textarea{
  width: 50%;
  padding: 10px;
  border: 1px solid #985d8d;
  border-radius: 4px;
  margin: 6px;
  resize: vertical;
}

input[type=button]{
  background: #bb8eb3;
  color: #fff;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

input[type=button]:hover{
  background: #985d8d;
}

/*==========  FOOTER ==========*/

.bottom-links ul{
  list-style: none;
  text-align: center;
  padding: 40px;
}

.bottom-links li{
  display: inline;
  padding: 12px;
}

.bottom-links ul li a{
  text-decoration: none;
  color: #888;
  font-size: 12px;
}

.bottom-links ul li a:hover,
.buttom-links ul li a:focus{
  color: #985d8d;
}

footer{
  padding: 20px;
  background: #222;
  color: #fcbe32;
  text-align: center;
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript.

Document Ready Function:

$(function(){

This ensures that the code inside the function runs only after the DOM is fully loaded.

Smooth Scroll:

var $root = $('html, body');
$('a').click(function(){
    $root.animate({
       scrollTop: $($.attr(this, 'href')).offset().top
    }, 800);
    return false;
});

var $root = $('html, body');: Stores the html and body elements in the $root variable.
$('a').click(function(){ ... }): Adds a click event listener to all anchor (<a>) elements.
scrollTop: $($.attr(this, 'href')).offset().top: Animates the scroll to the position of the element that the clicked link's href attribute points to.
800: The duration of the animation in milliseconds (800 ms).
return false;: Prevents the default action of the click event (which would normally cause a page jump).

Sticky Navigation on Scroll:

$(document).on('scroll', function(){
    if($(this).scrollTop() > 185){
        $('nav').addClass('nav-sticky');
    }else{
        $('nav').removeClass('nav-sticky');
    }
});

$(document).on('scroll', function(){ ... }): Adds a scroll event listener to the document.
if($(this).scrollTop() > 185): Checks if the vertical scroll position is greater than 185 pixels.
$('nav').addClass('nav-sticky'): Adds the class nav-sticky to the nav element if the condition is met.
$('nav').removeClass('nav-sticky'): Removes the class nav-sticky from the nav element if the condition is not met.

Add Active Class to the Navigation on Click:

$('nav li a').click(function(){
    $('nav li a').removeClass('active');
    $(this).addClass('active');
});

$('nav li a').click(function(){ ... }): Adds a click event listener to all anchor (<a>) elements inside list items (<li>) within the nav element.
$('nav li a').removeClass('active'): Removes the active class from all anchor elements within the nav.
$(this).addClass('active'): Adds the active class to the clicked anchor element.

Add Active Class to the Navigation on Scroll:

$('nav li a').scroll(function(){
    $('nav li a').removeClass('active');
    $(this).addClass('active');
});

$('nav li a').scroll(function(){ ... }): Adds a scroll event listener to all anchor (<a>) elements inside list items (<li>) within the nav element.
$('nav li a').removeClass('active'): Removes the active class from all anchor elements within the nav.
$(this).addClass('active'): Adds the active class to the anchor element that is currently being scrolled.

Create a JavaScript file with the name 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.

$(function(){
    //Smooth scroll
    var $root = $('html, body');
    $('a').click(function(){
       $root.animate({
          scrollTop: $($.attr(this, 'href')).offset().top
       }, 800);
      return false;
    });

   //Sticky navigation on scroll.
      $(document).on('scroll', function(){
        if($(this).scrollTop() > 185){
            $('nav').addClass('nav-sticky');
        }else{
            $('nav').removeClass('nav-sticky');
        }
    });
    //Add active class to the nav on click.
    $('nav li a').click(function(){
    $('nav li a').removeClass('active');
    $(this).addClass('active');
    });

    $('nav li a').scroll(function(){
    $('nav li a').removeClass('active');
    $(this).addClass('active');
    });
  
});

Final Output:

jewellery-website-landing-page-using-html-css-and-javascript.gif

Read Also Blog post layout using HTML and CSS.jpg

Designing a Responsive Blog Post Layout with HTML and CSS

Conclusion:

Creating a stunning jewelry website landing page involves a careful balance of design, functionality, and user experience. By setting up a solid HTML structure, enhancing it with CSS for visual appeal, and adding JavaScript for interactivity, you can build a website that not only looks great but also engages visitors and encourages them to explore your products.

Remember to focus on key elements like a captivating hero section, clear and attractive product displays, and a responsive navigation menu. Pay attention to details in the header and footer to ensure a cohesive design throughout your site. Incorporate SEO best practices to improve your site's visibility and perform thorough testing to guarantee a smooth user experience.

Finally, once everything is in place, deploy your site with a reliable hosting provider and keep it updated as needed. With these steps, you'll have a professional and effective jewellery website landing page that can help boost your online presence and drive sales.

Code by: Jak Ashuraliev

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: jewellery website, jewellery landing page, jewellery site design, source code, jewellery website templates, jewellery website using html;css;and javascript, how to create a jewellery website, jewellery website design tips, best jewellery website examples

End of the article