Scribd
Upload
9 views39 pages

Timepiece

The document outlines the HTML and CSS structure for a watch website called 'Timepiece'. It includes sections for navigation, product displays, new arrivals, special offers, and a collection of watches, along with styling elements for a responsive design. The website features various watches with pricing and options to discover or add to cart.

Uploaded by

dhruvzack0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views39 pages

Timepiece

The document outlines the HTML and CSS structure for a watch website called 'Timepiece'. It includes sections for navigation, product displays, new arrivals, special offers, and a collection of watches, along with styling elements for a responsive design. The website features various watches with pricing and options to discover or add to cart.

Uploaded by

dhruvzack0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 39

Timepiece(watch website)

Frontend:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Timepiece Website</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<!-- ---Section One--- -->


<section class="section-one section" id="Home">
<nav>
<div class="logo">Timepiece.</div>
<ul class="navlinks" id="navlinks">
<li>
<a href="#Home" class="active">Home</a>
</li>
<li>
<a href="#Arivals">Arivals</a>
</li>
<li>
<a href="#Offers">Offers</a>
</li>
<li>
<a href="#Product">Product</a>
</li>
<li>
<a href="#Collection">Collection</a>
</li>
</ul>
<div class="hamburger" id="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<header>
<div class="image-container">
<img src="photos/omega blue.png"
class="header-image">
</div>
<div class="content">
<h1 class="header-heading">Pure Luxury</h1>
<h2 class="product-name">Blue Omega SA</h2>
<p class="header-pricing">$3,789</p>
<di class="btn-contanier">
<a href="cart.html"> <button class="primary-
btn">Discover</button></a>
<button class="secondary-btn">Add to
cart</button>
</div>
</div>
</header>
</section>

<!---Section Two--- -->


<section class="section-two section" id="Product">
<div class="section-two-container">
<div class="section-two-inner-container">
<div class="content">
<h1 class="section-two-heading">Quartz
Casio</h1>
<p class="section-two-part">Lorem ipsum
dolor sit amet consectetur adipisicing elit. Odio sequi
sint voluptatibus aut eligendi? Nostrum natus cum hic
sunt id impedit quidem quia atque explicabo.</p>
<p class="section-two-pricing">$ 3,899</p>
<button class="section-two-btn">Order
Now</button>
</div>
<div class="image-container">
<img src="photos/product watch.png"
class="section-two-image">
</div>
</div>

</div>

</section>

<!-- ---SEction Three--- -->


<section class="section-three section" id="Arivals">
<h1 class="section-heading">New Arivals</h1>
<div class="card-container">

<div class="card">
<img src="photos/Tissot.png" class="card-
image">
<h2>Tissot</h2>
<p class="card-pricing">$ 3,988</p>
<button
class="secondary-btn">Discover</button>
</div>
<div class="card">
<img src="photos/Klassc.png" class="card-
image">
<h2>Klassc</h2>
<p class="card-pricing">$ 3,988</p>
<button
class="secondary-btn">Discover</button>
</div>

<div class="card">
<img src="photos/citizen.png" class="card-
image">
<h2>Citizen</h2>
<p class="card-pricing">$ 3,988</p>
<button
class="secondary-btn">Discover</button>
</div>

</div>
</section>
<!-- ---Section Four--- -->
<section class="section-four section" id="Offers">
<div class="section-four-container">
<div class="content">
<h1 class="section-four-offers">50% Off</h1>
<h1 class="section-four-heading">Special
Collection</h1>
<button class="section-four-btn">Shop
Now</button>
</div>
</div>

</section>

<!-- ---section five--- -->


<section class="section-five section"
id="Collection">
<h1 class="section-heading">Collection</h1>
<div class="grid-card-container">
<div class="grid-card" Collection="Rado"></div>
<div class="grid-card"
Collection="Geneve"></div>
<div class="grid-card" Collection="Tissot"></div>
<div class="grid-card"
Collection="Cartier"></div>
<div class="grid-card"
Collection="Omega"></div>
<div class="grid-card"
Collection="Fitron"></div>
</div>
</section>

<!-- ---FOOTER--- -->


<footer>
<p class="footer-txt"> Designed by DG</p>
</footer>
<script src="main.js"></script>
</body>
</html>

Css

@import url('https://fonts.googleapis.com/css2?
family=Merriweather:ital,wght@0,300;0,400;0,700;0,9
00;1,300;1,400;1,700;1,900&family=PT+Serif:ital,wght
@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?
family=Grey+Qo&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Merriweather", serif;
}
:root{
--dark-blue: #0A1D3C;
--light-grey: #E5E5E5;
--white: #FFF;
--light-peach: #F9E3DC;
--dark-grey: #3E3F43;
--light-black: #1D1D1D;
}
html{
scroll-behavior: smooth;
}

/* ---section one--- */
.section{
min-height: 100vh;
width: 100%;
}
nav{
width: 80%;
height: 13vh;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;

}
header{
width: 80%;
height: calc(100vh - 13vh);
display: flex;
align-items: center;
justify-content: space-evenly;
margin: auto;
}
.navlinks{
display: flex;
}
.header-image{
width: 40rem;
}
.logo{
font-size: 3.8rem;
color: var(--dark-blue);
font-family: "Grey Qo", cursive;
}
.navlinks li{
list-style: none;
}
.navlinks li a{
text-decoration: none;
margin-left: 2.5rem;
color: var(--dark-grey);
font-size: 1rem;
letter-spacing: .03rem;
position: relative;
}
.header-heading{
font-size: 5rem;
position: relative;
}
.header-heading::before{
content: "New";
position: absolute;
top: -64px;
color: var(--dark-blue);
font-family: "Grey Qo", cursive;

}
.product-name{
font-size: 1.7rem;
}
.header-pricing{
font-size: 1.5rem;
margin: 1rem 0;
}
.btn-container{
display: flex;
margin-top: 2rem;
}
.primary-btn, .secondary-btn{
font-size: 1.1rem;
border: none;
padding: 1rem 1.7rem;
transition: transform .5s ease-in-out;
}
.primary-btn{
background: var(--light-grey);
}
.secondary-btn{
background: var(--dark-blue);
color: var(--white);
transform: scale(1.1);
}
.primary-btn:hover, .section-two-btn:hover, .section-
four-btn:hover{
transform: scale(1.1);
cursor: pointer;
}
.secondary-btn:hover{
transform: scale(1);
}
.navlinks li a::after, .navlinks li .active::after{
content: "";
background: var(--dark-grey);
position: absolute;
height: .15rem;
width: 100%;
left: 0;
bottom: -5px;
transform: scaleX(0);
transition: transform .5s ease;
transform-origin: right;
}
.navlinks li a:hover::after, .naclinks li .active::after{
transform: scaleX(1);
transform-origin: left;
}
.link{
background: var(--dark-grey);
width: 2.5rem;
height: .2rem;
margin: .38rem;
}
.hamburger{
cursor: pointer;
display: none;
}

/* ---Section Two--- */
.section-two{
display: flex;
align-items: center;
}
.section-two-container{
background: var(--light-peach);
width: 100%;
height: 50vh;
transform: skewY(-6deg);
}
.section-two-image{
width: 28rem;

}
.section-two-inner-container{
transform: skewY(6deg);
width: 80%;

}
.section-two-container, .section-two-inner-container{
display: flex;
justify-content: center;
align-items: center;
}
.section-two-heading{
color: var(--dark-grey);
font-size: 4rem;
}
.section-two-part{
font-size: 1rem;
color: var(--dark-grey);
line-height: 1.8rem;
max-width: 80%;
margin: auto;

}
.section-two-pricing{
font-size: 1.6rem;
color: var(--dark-grey);
margin: .9rem 0;
}
.section-two-btn{
padding: .9rem 1.7rem;
border: .1rem solid var(--light-black);
font-size: 1.1rem;
background: transparent;
transition: transform .5s ease;

/* ---SEction Three--- */
.section-heading{
font-size: 2.5rem;
text-align: center;
margin-bottom: 1.2rem;

}
.card-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
gap: 3rem;

}
.card-image{
width: 20rem;
}
.card{
background: var(--light-grey);
padding: 2rem;
}
.card-pricing{
font-size: 1.2rem;
margin-top: .2rem;
margin-bottom: 1.2rem;
}

/* ---Setion Four--- */
.section-four{
display: flex;
align-items: center;
}
.section-four-container{

width: 100%;
height: 70vh;
background-image: url("photos/watch.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.section-four-offers{
font-size: 4rem;
color: var(--light-peach);
font-family: "Grey Qo", cursive;
text-transform: uppercase;
}
.section-four-heading{

font-size: 4rem;
color: var(--white);
margin-bottom: 1rem;

}
.section-four-btn{
font-size: 1.1rem;
padding: 1rem 1.7rem;
background: var(--light-peach);
border: none;
transition: transform .5s ease;
}
.section-four-container::before{
content: "";
background: rgba(0, 0, 0, 0.544);
position: absolute;
inset: 0;
}
.section-four-container .content{
z-index: 5;
}

/* ---section five--- */
.grid-card-container{
width: 60%;
height: 80vh;
margin: auto;
display: grid;
grid-template-columns: repeat(3 , 1fr);
grid-template-rows: repeat(2 , 1fr);
gap: 1.2rem;
grid-auto-rows: 15rem;
}
.grid-card{
background: var(--light-grey);
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.grid-card:nth-child(1){
grid-row: 1/4;
background-image: url("photos/rado\ watch.jpg");

}
.grid-card:nth-child(2){
grid-row: 1/3;
background-image: url("photos/geneve\ watch.jpg");
}
.grid-card:nth-child(3){
grid-row: 3/4;
background-image: url("photos/tissot\ watch.jpg");
}
.grid-card:nth-child(4){
background-image: url("photos/cartier\ watch.jpg");

}
.grid-card:nth-child(5){
background-image: url("photos/omega\ watch.jpg");

.grid-card:nth-child(6){
background-image: url("photos/fitron\ watch.jpg");

.grid-card::before{
content: "";
position: absolute;
background: rgba(0, 0, 0, 0.544);
inset: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 1s ease-in-out;
}
.grid-card:hover::before{
transform: scaleX(1);
transform-origin: left;
}
.grid-card::after{
content: attr(collection);
position: absolute;
text-transform: uppercase;
background: var(--light-peach);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1rem 1.7rem;
font-size: 1.1rem;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in-out;
}
.grid-card:hover::after{
opacity: 1;
visibility: visible;
}

/* ---FOOTER--- */
footer{
background: var(--light-black);
height: 20vh;
width: 100%;
margin-top: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
.footer-txt{
color: white;
font-size: 1.5rem;

/* ---Media Queries--- */
@media screen and (max-width: 500px){

/* ---Section One--- */
.header-image{
display: none;
}
.navlinks{
flex-direction: column;
position: absolute;
top: 0;
background: var(--light-grey);
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
right: 100%;
z-index: 2;
gap: 2rem;
}
.navlinks-active{
right: 0;
}
.navlinks li a{
font-size: 1.3rem;
margin-left: 0;
}
.hamburger{
display: block;
z-index: 5;
}
.section .logo{
z-index: 5;
}
.header-heading{
font-size: 4rem;
}
header{
justify-content: flex-start;
}

/* ---Section Two--- */
.section-two-image{
display: none;

}
.section-two-heading{
font-size: 2.9rem;
}
.section-two-part{
font-size: .93rem;
max-width: 100%;
}
.section-two-pricing{
font-size: 1.4rem;
}
.section-two-btn{
font-size: 1rem;
padding: .7rem 1rem;
}
.section-two-container{
height: 60vh;
}
.section-two-inner-container{
width: 90%;
}

/* ---Section Three--- */
.card-image{
width: 17rem;
}

/* ---section four-- */
.section-four-heading{
font-size: 2.8rem;
}
.section-four-offers{
font-size: 3.3rem;
}
.section-four-btn{
font-size: 1rem;
}

/* ---section five--- */
.grid-card-container{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 90%;
}
.grid-card:nth-child(1), .grid-card:nth-child(3){
grid-row: 1/2;
}
}
Javascript

const hamburger =
document.getElementById("hamburger");
const navlinks = document.getElementById("navlinks");

hamburger.addEventListener("click", ()=>{

navlinks.classList.toggle("navlinks-active");
})

Cart html:
<html>
<head>
<link rel="stylesheet" href="style2.css">
<script
src="https://kit.fontawesome.com/d12fc831d2.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<p class="logo">Timepiece </p>
<div class="cart"><i class="fa-solid fa-cart-
shopping"></i><p id="count">0</div>

</div>
<div class="continer">
<div id="root"></div>
<div class="head"><p>MY cart</p></div>
<div class="foot">
<h3>Total</h3>
<h2 id="total">$ 0.00</h2>

<script src="style.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppons' ,sans-serif;
font-size: 18px;

}
body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header{
height: 80px;
width: 100px;
background-color: dimgrey;
border-radius: 3px;
margin: 100px 0px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}
.header .logo{
font-size: 30px;
font-weight: bold;
color: white;
}
.cart{
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
padding: 7px 10px;
border-radius: 3px;
width: 80px;
}
.fa-solid{
color: dimgray;
}
.cart p{
height: 22px;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background-color: dimgray;
color: white;
}
.container{
display: flex;
width: 70%;
margin-bottom: 30px;
}
#root{
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20ox;

}
.sidebar{
width: 40%;
border-radius: 5px;
background-color: white;
margin-left: 20px;
padding: 15px;
text-align: center;
}

// scripts.js
document.addEventListener('DOMContentLoaded',
function() {
const unitPrice = 299.99; // The price of one unit
const quantityInput =
document.getElementById('quantity');
const totalPriceSpan =
document.getElementById('total-price');

function updateTotal() {
const quantity = parseInt(quantityInput.value, 10);
const totalPrice = (unitPrice * quantity).toFixed(2);
totalPriceSpan.textContent = `$${totalPrice}`;
}

quantityInput.addEventListener('input', updateTotal);

// Initialize the total on page load


updateTotal();
});

You might also like