Watch Shop Website Using HTML CSS & JS With Source Code
Introduction
Welcome to the digital forefront of innovation with our newly crafted website for the Honor Element Series Smartwatch. This sleek, modern site was built using the power trio for web development: HTML, CSS, and JavaScript. Let us delve into what makes this website not only visually appealing but highly functional as well.
It is in HTML that the backbone of our website is located. This gives a robust structure to the content and organizes it effectively. HTML forms the base, which guarantees that everything, from the navigation menu to product description, images, and links, are well laid out in their proper positions. CSS brings our website alive with style and elegance. Beautifully crafted stylesheets add grace to the site by providing smooth layouts, engaging color schemes, and responsive designs. JavaScript embeds interactivity and dynamism in our website. From responsive navigation menus to interactive product displays, JavaScript ensures smoothness and engagement in user experience.
By using HTML, CSS, and JavaScript together, the Honor Element Series Smartwatch has been developed into a quite complete and extremely engaging digital experience. This site not only means to express the grace and novelty of the product but will also make sure users experience the smoothness and pleasure of browsing.
index.html
This HTML template constructs a modern web page, including the most significant sections. At the very top is the head section with meta tags for setup: character set, settings for its viewport and browser compatibility, page title, links to some external resources: CSS stylesheet for styling, Boxicons for iconography, and Google Fonts for custom typography.
The header section introduces a logo, navigation bar links to sections such as Home, About, Smartphone, Store, Contact Us, and interactive elements like the “Buy Now” button, menu icon, and dark mode toggle.
The hero section engages the user with its bold headline, sub-headline, and a minute promotional paragraph regarding smartwatches. This section contains the highlighting of products, mentioning their variants with the names, descriptions, and respective images. All this makes this section very engaging and interactive, influencing users to click on the products to view them further.
An arrow icon below the hero section would, therefore, encourage users to scroll down for more content, hence indicating the availability of more information. At the very end, this template links to some external JavaScript files that add interactivity and functionality, which in turn provide things like animations and other dynamic elements to enhance the user experience.
This HTML template balances appeal with functionality, maintaining a well-structured layout—the perfect setup for any modern responsive page. It provides a sound framework on top of which a truly interactive and engaging user interface can be built.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>honor</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/07/post5-768x381.png 768w, https://developergoutam.com/wp-content/uploads/2024/07/post5-300x149.png 300w, https://developergoutam.com/wp-content/uploads/2024/07/post5-1024x508.png 1024w, https://developergoutam.com/wp-content/uploads/2024/07/post5-1536x762.png 1536w, https://developergoutam.com/wp-content/uploads/2024/07/post5-150x74.png 150w, https://developergoutam.com/wp-content/uploads/2024/07/post5-450x223.png 450w, https://developergoutam.com/wp-content/uploads/2024/07/post5-1200x595.png 1200w, https://developergoutam.com/wp-content/uploads/2024/07/post5-600x297.png 600w, https://developergoutam.com/wp-content/uploads/2024/07/post5.png 1791w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css" />
<!-- box icons -->
<link
rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"
/>
<!-- link google font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,200;0,400;0,500;0,600;1,800;1,900&family=Silkscreen&family=Unbounded&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- header -->
<header>
<a href="#" class="logo"><i class='bx bx-stopwatch' ></i>Honor</a>
<ul class="navlist">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Smartphone</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="h-main">
<a href="#" class="h-btn">Buy Now</a>
<div class=" bx bx-menu" id="menu-icon"></div>
<div class="bx bx-moon" id="darkmode"></div>
</div>
</header>
<!-- hero section -->
<section class="hero">
<div class="hero-text">
<h1>Smartwacth</h1>
<h4>Element series</h4>
<p>Stay connected and in control with just a flick of your wrist - all thanks to the power of a smartwatch. </p>
<div class="hero-in">
<div class="box">
<h3>Gold</h3>
<h5>Element</h5>
<img decoding="async" src="https://i.ibb.co/rQc72TL/hero.png" alt="hero" border="0">
</div>
<div class="box">
<h3>White</h3>
<h5>Element</h5>
<img decoding="async" src="https://i.ibb.co/PQ7LWkB/main1.png" alt="main1" border="0 alt="">
</div>
<div class="box">
<h3>Black</h3>
<h5>Element</h5>
<img<a href="https://imgbb.com/" target="_blank" rel="noopener"><img decoding="async" src="data:image/jpeg;base64,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1c4+VTFMalhztpzvbWQrv3v3V2k4Wxp4dGulC9yTyeoRoW8ANF68YFpvjvI+0MW1dgVW2SlSJ+RTB0vyzHieptcgCYOebz6DAuMPWy03QJTvUYFqpW9TKLEIrH5C31OUAngSRpPtClma3LnKKC5sOM3XcTdRsXWCaiklmrVPAfMB+c3DoLnoQ33sk2D6Ok2Lca1Rkp9KYPeb6zAeSg85Ic8UaSooRQAqqFVRoAALAAeFp7gIiICIiAiIgIiICIiAiIgIiICIiBSxOHSojU6iK6OpVkYBlZTxBU6ESJd7OxsEmpgKgW5v8Fqk5f8Ax1dSPU1+PECS/EDk3bGxMThGy4mhUpG9gWHcJ8FqC6N5EyyVp15VpqylWAZSLFSAQR1B4zUtq9mWzK5v8GFJvnUWNIf1a9z92BzwCGFjx+dzlGpQZeVx4iTJjexKkf0ONqr/AN2mlT8BSY49jWKX5OLoH1pUX3awIpUnwMuqGEZugkrYbser37+MpKOeWizn3ss2zYnZpgqBDVA+Icc6pBQeqkoCn6wMCNdy9yKuLIZRko372JYaHxFMfrnrwGuvIzhsbZVLC0Vo0VyqvmzMeLMebGXqiwsNAOU+wEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERA//2Q==" alt="main2" border="0" /></a>
</div>
</div>
</div>
<div class="hero-img">
<img decoding="async" src="https://i.ibb.co/rQc72TL/hero.png" alt="hero" border="0">
</div>
</section>
<div class="down-arrow">
<i class='bx bx-down-arrow-alt'></i>
</div>
<!-- js file -->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</body>
</html>
styles.css
This is the CSS code that goes to the styling of a web page and puts much emphasis on a beautiful, responsive layout. It begins with a universal reset, which removes the default margins and padding, list styles, and applies a font with border-box sizing to all elements. The root variables declare the centralization of colors, font sizes, and other design constants for the management of the theme.
It styles the body with a background color and text color inherited from the root variables. The header is positioned fixed at the top, and it’s full-width and uses flexbox to center its content. Interactions are going to transition smoothly. The logo has a large, bold font and an icon with a striking color.
Navigation links are styled for visual consistency with interactive feedback of color change on their hover and active states. The setup for the hero area is prepared with a grid to lay out the content responsively with large images and text elements, adjusting accordingly to screen size. Text in the hero section is styled for emphasis; it has large bold headlines, smaller subheadings, and descriptive paragraphs that support them.
It adds dedicated styles to the background color, padding, and hover effects of buttons and icons respectively to make them interactive. Padding, shadowing, and transitions are added to several sections and elements, such as boxes and down-arrow icons, detail them out.
It makes use of media queries to change the layout on different screen sizes using padding, font size, image dimensions, and grid layout. The navigation menu changes to a vertical list on small screens. This would improve the mobile user experience. Further styles are added for dark mode, where it changes background and text colors so that the user has the exact same experience on themes.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "MuseoModerno", cursive;
list-style: none;
text-decoration: none;
}
:root {
--text-color: #000000;
--bg-color: #e5e5e5;
--main-color: #f29494;
--secound-color: #fff;
--big-font: 5.5rem;
--other-color: #868686
--p-font: 1rem;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
header {
position: fixed;
top: 0;
right: 0;
z-index: 1000;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 27px 9%;
transition: all ease .55s;
}
.logo{
display: flex;
color: var(--text-color);
font-size: 40px;
align-items: center;
font-weight: bold;
}
.logo i{
vertical-align: middle;
font-size: 35px;
color: var(--main-color);
margin-right:5px ;
}
.navlist{
display: flex;
}
.navlist a{
font-size: var(--p-font);
color: var(--text-color);
font-weight:600 ;
margin: 0 35px;
transition: all ease .55s;
}
.navlist a:hover{
color: var(--main-color);
}
.navlist a:active{
color: var(--main-color);
}
.h-main{
display: flex;
align-items: center;
}
.h-btn{
background: var(--main-color);
display: inline-block;
padding: 10 25px;
font-size: 14px;
color: var(--bg-color);
font-weight: 500;
border-radius: 5px;
border: 2px solid var(--main-color);
margin-right: 20px;
transition: all ease .55s;
}
.h-btn:hover{
background: transparent;
border: 2px solid black;
color: var(--text-color);
}
#menu-icon{
font-size: 40px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display:none ;
}
#darkmode{
font-size:30px;
cursor: pointer;
color: var(--text-color);
margin-left: 10px;
}
section{
padding: 0 12%;
}
.hero{
width: 100%;
height: 100vh;
display: grid;
gap: 1rem;
grid-template-columns:repeat(2, 1fr) ;
align-items: center;
}
.hero-img{
width: 800px;
height: 800px;
}
.hero-img img{
width: 100%;
height: 100%;
object-fit: contain ;
/* 21:57 */
}
.hero-in{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(100px, auto));
align-items: center;
text-align: center;
gap: 30px;
}
.hero-text h1{
line-height: 1.3;
font-weight: 800;
font-size: var(--big-font);
}
.hero-text h4{
margin:0 10px 25px ;
font-weight: 400;
font-size: 22px;
color: var(--main-color);
text-transform: uppercase;
letter-spacing: 10px;
}
.hero-text p{
color: var(--other-color);
font-size: var(--p-font);
font-weight: 500;
line-height: 26px;
max-width: 550px;
margin-bottom: 5rem;
}
.box{
background: var(--secound-color);
padding: 25px 40px;
box-shadow: rgba(33,35,38,0.1) 0px 10px 10px -10px;
transition: all ease .55s;
border-radius: 1rem;
}
.box img{
height: auto;
max-width: 100%;
}
.box h3{
font-size: 30px;
font-weight: 700;
margin-bottom:7px ;
}
.box h5{
color: var(--main-color);
font-size: 15px;
letter-spacing: 4px;
font-weight: 400;
}
.box:hover{
transform: translateY(-5px) scale(1.1);
}
.down-arrow{
position: absolute;
bottom: 3.5rem;
right: 9%;
}
.down-arrow i{
padding:14px ;
color: var(--bg-color);
transition: all ease .55s;
font-size: 25px;
border-radius: 3rem;
cursor: pointer;
background:var(--text-color);
}
.down-arrow i:hover{
background: var(--main-color);
transform: translateY(5px);
}
body.color{
--text-color:#000;
--bg-color:#08162a;
--secound-color:#2b3544;
}
@media (max-width: 1600px){
header{
padding: 13px 3%;
}
section{
padding: 0 5%;
}
}
@media (max-width: 1470px){
.hero-img{
height: 700px;
width: 700px;
}
}
@media (max-width: 1400px){
:root{
--big-font: 4rem;
--p-font: 15px;
}
.box h3{
font-size: 20px;
margin-bottom: 2px;
}
.hero-img{
width: 600px ;
height: 600px;
}
}
@media (max-width: 1230px){
.hero{
grid-template-columns: 1fr;
height: auto;
}
.hero-text{
order: 2;
}
section{padding: 50px 5%;}
.hero-img{
margin: auto;
height: auto;
width: auto;
}
.hero-img img{
width: 100%;
height: auto;
max-width: 650px;
}
.down-arrow{display: none;}
}
@media (max-width: 1070px){
header{
padding: 10px 3%;
background: var(--secound-color);
}
#menu-icon{
display: initial;
}
.navlist{
position: absolute;
top: -700px;
left: 0;
right: 0;
display: flex;
flex-direction:column ;
background: #000;
transition: all ease .55s;
text-align: left;
}
.navlist a{
display: block;
font-size: 23px;
font-weight: 400;
margin: 0.8rem 1.8rem;
color:var(--secound-color) ;
}
.navlist.open{
top: 100%;
}
}
@media (max-width:600px) {
.hero-in{
grid-template-columns: repeat(auto-fit,minmax(190px, auto));
gap: 18px;
}
.box{padding: 10px 30px;}
.h-btn{
padding: 6px 14px;
margin-right: 8px;
}
:root{
--big-font:4rem;
--p-font: 15px;
}
.logo{
font-size:32px;
}
#menu-icon{
margin-right:5px ;
}
}
script.js
This is a JavaScript code that will handle the toggling for dark mode, opening and closing a nav menu, and does the reveal animations on elements within the webpage.
First is the selection of the dark mode toggle button. Later, it attaches an event listener to the button. Every time the button is clicked, it checks whether the button currently has a certain class. If so, it toggles an icon to a sun and applies a class to the body element to toggle into dark mode. If it is currently a sun, it toggles back to the moon icon and removes the dark mode class from the body, toggling back to light mode.
The second part selects the menu icon and the navigation list. A click event listener is added to the menu icon to toggle its class and the class of the navigation list. This will open or close the navigation menu; this is part of responsive design, for smaller screens where the menu needs to be toggled.
The last part initializes ScrollReveal, a library used to create scroll animations. It just simply sets up the animation parameters—distance, duration, whether it should reset—and then applies the reveal animations to specific elements on a page to make them appear with a delay and from different directions as scrolling down the page. The animations would add a dynamic visual effect, animating the hero text, hero image, and hero arrow when they come into view.
const darkmode = document.querySelector('#darkmode');
darkmode.onclick = () => {
if(darkmode.classList.contains('bx-moon')){
darkmode.classList.replace('bx-moon', 'bx-sun');
document.body.classList.add('color');
}else{
darkmode.classList.replace('bx-sun','bx-moon');
document.body.classList.remove('color');
}
};
let menu = document.querySelector('#menu-icon');
let navlist = document.querySelector('.navlist');
menu.onclick = () => {
menu.classList.toggle('bx-x');
navlist.classList.toggle('open');
}
const sr = scrollReveal ({
distance: '70px',
duration: 2700,
reset: true
});
sr.reveal('.hero-text',{delay:200, origin: 'bottom'});
sr.reveal('.hero-img',{delay:350, origin: 'top'});
sr.reveal('.hero-arrow',{delay:400, origin: 'right'});