Pine Valley Furniture Website Report

Name: Afzaal Ahmad

Reg No: 03-3-1-003-2023

Lab No: Lab 01

1) Implemented Files

File Role in Website
index.html Home page
create_account.html Registration page
login.html User login page
products.html Product catalog/search page
cart.html Cart and payment page
CSS/home.css Home page styling
CSS/create_account.css Register page styling
CSS/login.css Login page styling
CSS/product.css Products page styling
CSS/cart.css Cart page styling

2) Code Implementation

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" href="CSS/home.css">
    </head>
    <body>

        <h1>Pine Valley Furniture</h1  >

        <ul>
            <li><a href="create_account.html">create new account</a></li>
            <li><a href="login.html">login</a></li>
            <li><a href="products.html">Search Product</a></li>
        </ul> 
        
        <div class="product-grid">
            <div class="product">
                <h3>Table</h3>
                <img src="images/table.jpg" alt="Tabel">
                <p><strong>$150.00</strong></p>
                <a href="cart.html"><button>Add to Order</button></a>
            </div>
            <div class="product">
                <h3>Office Chair</h3>
                <img src="images/office chair.jpg" alt="Office Chair">
                <p><strong>$80.00</strong></p>
                <a href="cart.html"><button>Add to Order</button></a>
            </div>
            <div class="product">
                <h3>Bookshelf</h3>
                <img src="images/book_shelf.jpg" alt="book shelf">
                <p><strong>$200.00</strong></p>
                <a href="cart.html"><button>Add to Order</button></a>
            </div>
        </div>       
    </body>
</html>

home.css

ul{
    list-style-type: none;
    overflow: hidden;
    background-color: aquamarine;
    margin: 0;
    padding: 0;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}

li{
    float: right;
    margin: 10px;
}

li a:hover {
  background-color: #FF0088;
}

.product{
    float: left;
    padding: 30px;
    margin: 30px;
}

img{
    width: 250px;
    height: 250px;
}

create_account.html

<!DOCTYPE html>

<html>
    <head>
        <title>Register Account</title>
        <link rel="stylesheet" href="CSS/create_account.css">
    </head>
    <body>
        <div>
            <form action="index.html">
                <label for="name"><b>Name:</b><br></label>
                <input type="Text" id="name" required>
            
                <br>
                <label for="email"><b>Email:</b><br></label>
                <input type="email" id="email" required>
                <br>
                <label for="password"><b>Password:</b><br></label>
                <input type="password" id="password" minlength="8" required>
                <br>
                <label for="address"><b>Address:</b><br></label>
                <input type="text" id="address">
                <br>
                <button type="submit">Register</button>
                <input type="reset">
            </form>
        </div>
    </body>
</html>

create_account.css

body{
    background-color: antiquewhite;
}

div{
    background-color: wheat;
    border: 2px solid black;
    float: left;
    padding: 20px;
    width: auto;
    margin-top: 15%;
    margin-left: 45%;
}

login.html

<!DOCTYPE html>

<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="CSS/login.css">
    </head>

    <body>
        <div>
            <form action="index.html">
                <label for="username"><b>Email</b><br></label>
                <input type="email" id="username" required>
                <label for="password"><br><b>Password</b><br></label>
                <input type="password" id="password" minlength="8" required>
            
                <br>
                <button type="submit">Login</a></button>
                <input type="reset">
            </form>
        </div>
    </body>
</html>

login.css

body{
    background-color: antiquewhite;
}

div{
    background-color: wheat;
    border: 2px solid black;
    float: left;
    padding: 20px;
    width: auto;
    margin-top: 15%;
    margin-left: 45%;
}

products.html

                <!DOCTYPE html>
<html>
<head>
    <title>Search Products</title>
    <link rel="stylesheet" href="CSS/product.css">
</head>
<body>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html">Search Product</a></li>
        <li><a href="cart.html">My Cart</a></li>
        <li><a href="admin.html">Admin</a></li>
        <li><a href="help.html">Help</a></li>
    </ul>

    <h1>Product Catalog</h1>

    <div style="text-align: center; padding: 20px; background-color: #ddd;">
        <label>Find Furniture: </label>
        <input type="text" placeholder="e.g. Table..." style="width: 50%;">
        <button style="width: auto;">Search</button>
    </div>

    <div class="product-grid">
        <div class="product">
            <h3>Table</h3>
            <img src="images/table.jpg" alt="Tabel">
            <p><strong>$150.00</strong></p>
            <a href="cart.html"><button>Add to Order</button></a>
        </div>
        <div class="product">
            <h3>Office Chair</h3>
            <img src="images/office chair.jpg" alt="Office Chair">
            <p><strong>$80.00</strong></p>
            <a href="cart.html"><button>Add to Order</button></a>
        </div>
        <div class="product">
            <h3>Bookshelf</h3>
            <img src="images/book_shelf.jpg" alt="book shelf">
            <p><strong>$200.00</strong></p>
            <a href="cart.html"><button>Add to Order</button></a>
        </div>
    </div>
</body>
</html>

products.css

ul{
    list-style-type: none;
    overflow: hidden;
    background-color: aquamarine;
    margin: 0;
    padding: 0;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}

li{
    float: right;
    margin: 10px;
}

li a:hover {
  background-color: #FF0088;
}

.product{
    float: left;
    padding: 30px;
    margin: 30px;
}

img{
    width: 250px;
    height: 250px;
}

cart.html

<!DOCTYPE html>
<html>
<head>
    <title>Cart & Payment</title>
    <link rel="stylesheet" href="CSS/cart.css">
</head>


<body>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html">Back to Shop</a></li>
    </ul>

    <h1>Your Order</h1>

    <table>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>Table</td>
            <td>1</td>
            <td>$150.00</td>
        </tr>
        <tr>
            <td>Office Chair</td>
            <td>2</td>
            <td>$160.00</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:right"><strong>Total:</strong></td>
            <td><strong>$310.00</strong></td>
        </tr>
    </table>

    <div class="payment">
        <h2>Payment Provision</h2>
        <form action="home.html">
            <label>Card Type:</label>
            <select>
                <option>Visa</option>
                <option>MasterCard</option>
                <option>Pay Pak</option>
            </select>
            
            <label>Card Number:</label>
            <input type="text" placeholder="XXXX-XXXX-XXXX-XXXX" required>
            
            <label>CVV:</label>
            <input type="password" placeholder="123" style="width: 80px;" required>
            
            <button type="submit">Pay & Place Order</button>
        </form>
    </div>
</body>
</html>

cart.css

ul{
    list-style-type: none;
    overflow: hidden;
    background-color: aquamarine;
    margin: 0;
    padding: 0;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}

li{
    float: right;
    margin: 10px;
}

li a:hover {
  background-color: #FF0088;
}

table{
    width: 80%; 
    margin: 20px auto; 
    background: white; 
}
th,td{ 
    border: 1px solid #ddd; 
    padding: 12px; 
    text-align: left; 
}
th{
    background-color: aquamarine; 
}
.payment{
    background-color: #ddd;
}
Web hosting by Somee.com