Scribd
Upload
5 views

week3code

The document consists of HTML and CSS files for a shopping cart website named ShopSmart, featuring a catalog of products, user login and registration forms, and a shopping cart page. Each HTML file includes a navigation menu and a footer, while the CSS file provides styling for the layout and design elements. The catalog showcases products with images, names, prices, and 'Add to Cart' buttons, while the cart page displays selected items and a total price with a checkout option.

Uploaded by

jaganmohan.csd
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

week3code

The document consists of HTML and CSS files for a shopping cart website named ShopSmart, featuring a catalog of products, user login and registration forms, and a shopping cart page. Each HTML file includes a navigation menu and a footer, while the CSS file provides styling for the layout and design elements. The catalog showcases products with images, names, prices, and 'Add to Cart' buttons, while the cart page displays selected items and a total price with a checkout option.

Uploaded by

jaganmohan.csd
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Index.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart - Catalog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html" class="logo">ShopSmart</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</header>

<section class="catalog">
<h1>Explore Our Catalog</h1>
<div class="product-grid">
<div class="product-card">
<img src="product1.jpg" alt="Product 1">
<h2>Stylish T-shirt</h2>
<p>$25.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card">
<img src="product2.jpg" alt="Product 2">
<h2>Modern Sneakers</h2>
<p>$40.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card">
<img src="product3.jpg" alt="Product 3">
<h2>Cozy Sweater</h2>
<p>$30.00</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</section>

<footer>
<p>&copy; 2025 ShopSmart</p>
</footer>
</body>
</html>

Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html" class="logo">ShopSmart</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</header>

<section class="form-section">
<h1>Login to Your Account</h1>
<form action="#" method="POST" class="login-form">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">

<label for="password">Password:</label>
<input type="password" id="password" name="password" required placeholder="Enter your
password">

<button type="submit" class="btn">Login</button>


</form>
</section>
<footer>
<p>&copy; 2025 ShopSmart</p>
</footer>
</body>
</html>

Register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html" class="logo">ShopSmart</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</header>

<section class="form-section">
<h1>Create an Account</h1>
<form action="#" method="POST" class="register-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter your full name">

<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">

<label for="password">Password:</label>
<input type="password" id="password" name="password" required placeholder="Create a
password">

<button type="submit" class="btn">Register</button>


</form>
</section>

<footer>
<p>&copy; 2025 ShopSmart</p>
</footer>
</body>
</html>

cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html" class="logo">ShopSmart</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</header>

<section class="cart">
<h1>Your Shopping Cart</h1>
<div class="cart-items">
<div class="cart-item">
<img src="product1.jpg" alt="Product 1">
<div class="cart-item-info">
<p>Stylish T-shirt</p>
<p>$25.00</p>
</div>
<button class="remove-item">Remove</button>
</div>
<div class="cart-item">
<img src="product2.jpg" alt="Product 2">
<div class="cart-item-info">
<p>Modern Sneakers</p>
<p>$40.00</p>
</div>
<button class="remove-item">Remove</button>
</div>
</div>

<div class="cart-total">
<p>Total: $65.00</p>
<button class="btn checkout-btn">Proceed to Checkout</button>
</div>
</section>

<footer>
<p>&copy; 2025 ShopSmart</p>
</footer>
</body>
</html>

styles.css
/* General reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background-color: #f4f4f9;
color: #333;
}

header {
background-color: #333;
color: white;
padding: 1rem 0;
}

nav ul {
display: flex;
justify-content: center;
list-style-type: none;
}

nav ul li {
margin: 0 1.5rem;
}

nav ul li a {
color: white;
text-decoration: none;
font-size: 1.2rem;
}

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

header .logo {
font-size: 2rem;
font-weight: bold;
color: #ff8a00;
}

footer {
text-align: center;
padding: 1rem;
background-color: #333;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}

.catalog, .form-section, .cart {


margin: 3rem auto;
max-width: 1200px;
}

h1 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: #333;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}

.product-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center;
padding: 1.5rem;
transition: transform 0.3s ease;
}

.product-card:hover {
transform: translateY(-10px);
}

.product-card img {
width: 100%;
height: auto;
border-radius: 8px;
}

.product-card h2 {
font-size: 1.2rem;
color: #333;
}

.product-card p {
font-size: 1.1rem;
margin: 1rem 0;
color: #555;
}

button {
background-color: #ff8a00;
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #e77600;
}

.form-section form {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: 0 auto;
}

.form-section input {
width: 100%;
padding: 0.8rem;
margin: 0.5rem 0;
border: 1px solid #ccc;
border-radius: 4px;
}

.form-section .btn {
width: 100%;
background-color: #ff8a00;
color: white;
padding: 1rem;
border-radius: 4px;
}

.cart-items {
margin-bottom: 2rem;
}

.cart-item {
display: flex;
align-items: center;
background-color: white;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cart-item img {
width: 80px;
height: 80px;
border-radius: 4px;
margin-right: 1rem;
}

.cart-item-info p {
margin: 0.3rem 0;
}

.cart-item button {
background-color: #ff8a00;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: auto;
}

.cart-item button:hover {
background-color: #e77600;
}

.cart-total {
display: flex;
justify-content: space-between;
font-size: 1.3rem;
font-weight: bold;
}

.checkout-btn {
padding: 1rem 2rem;
background-color: #ff8a00;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.2rem;
}
.checkout-btn:hover {
background-color: #e77600;
}

You might also like