Task 3: New - HTML

TASK 3
new.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Rental Website</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="title icon.png">

<script src="./slider.js"></script>

</head>
<body>
<header id="home">
<h1>Book Rental</h1>
<nav id="Home">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#Books">Catalogue</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="Loginpage.html" target="_blank"><button>Login</button></a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to Book Rental</h2>
<p><b>Here you can rent a wide variety of books at affordable prices. Browse our catalogue and find
the perfect book for you.</b></p>
<center><div id="slideshow">
<img src="slider1.jpg" alt="Image 1" class="slideshow img">
</div></center><br>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="search-filter.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row searchFilter" >
<div class="col-sm-12" >
<div class="input-group" >
<input id="table_filter" type="text" class="form-control" aria-label="Text input with segmented
button dropdown" >
<div class="input-group-btn" >
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Category</span>
<span class="caret" > </span></button>
<div class="dropdown-menu dropdown-menu-right" >
<ul class="category_filters" >
<li >
<input class="cat_type category-input" data-label="All" id="all" value="" name="radios"
type="radio" ><label for="all" >All</label>
</li>
<li >
<input type="radio" name="radios" id="Design" value="Design" ><label class="category-
label" for="Design" >Self-help</label>
</li>
<li >
<input type="radio" name="radios" id="Marketing" value="Marketing" ><label
class="category-label" for="Marketing" >History</label>
</li>
<li >
<input type="radio" name="radios" id="Programming" value="Programming" ><label
class="category-label" for="Programming" >Programming</label>
</li>
<li >
<input type="radio" name="radios" id="Sales" value="Sales" ><label class="category-label"
for="Sales" >Sales</label>
</li>
<li >
<input type="radio" name="radios" id="Support" value="Support" ><label class="category-
label" for="Support" >Support</label>
</li>
</ul>
</div>
<button id="searchBtn" type="button" class="btn btn-secondary btn-search" ><span
class="glyphicon glyphicon-search" > </span> <span class="label-icon" >Search</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="books-container" id="Books">
<div class="book">
<img src="book10.jpg" alt="Book Title">
<h3>Inner Engineering</h3>
<p>Author: Sadhguru</p>
<p>Price: Rs 40</p>
<button>Rent Now</button><br>
<a href="./mainpage.html"> <button>Buy Now</button></a>
</div>
<div class="book">
<a href="Viewpage.html"><img src="book2.jpg" alt="Book Title"></a>
<h3>As a Man Thinketh</h3>
<p>Author: James Allen</p>
<p>Price: Rs 40 </p>
<button>Buy Now</button>
</div>
<div class="book">
<img src="book3.jpg" alt="Book Title"><br><br><br><br>
<h3>Wings Of Fire</h3>
<p>Author:A P J Abdul Kalam</p>
<p>Price: Rs 60</p>
</div>
<div class="book">
<h3>Mein Kamph</h3>
<p>Author: Adolph Hitler</p>
<p>Price: Rs 30</p>
</div>
<div class="book">
<img src="book5.jpg" alt="Book Title"><br><br><br>
<h3>India A History</h3>
<p>Author: John Keay</p>
<p>Price: Rs 30</p>
</div>
<div class="book">
<h3>1776</h3>
<p>Author: David McCullough</p>
<p>Price: Rs 40</p>
</div>
</div>
<pre><center> <div style="font-size: 20px;""><p>Previous <a
href="new2.html">Next</a></p></div></center></pre>
</main>
<footer id="contact">
<p>© 2023 Book Rental. All rights reserved.</p>
<p>Email: <a style="color:white;" href="mailto:sailokesh.182@gmail.com">sailokesh.182@gmail.com</a>
</p>
<p>Contact:8179935589</p>
</footer>
</body>
</html>
new2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Rental Website</title>
<link rel="stylesheet" href="style.css">

<script src="./slider.js"></script>

</head>
<body>
<header>
<h1>Book Rental</h1>
<nav id="Home">
<ul>
<li><a href="C:\Users\kishore\Desktop\WDD Mini Project\new.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#Books">Catalogue</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="Loginpage.html" target="_blank"><button>Login</button></a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to Book Rental</h2>
<p>Here you can rent a wide variety of books at affordable prices. Browse our catalogue and find the
perfect book for you.</p>
<center><div id="slideshow">
<img src="qotes.jpg" alt="Image 1" class="slideshow img" style="width: 400px;">

</div></center><br>

<div class="books-container" id="Books">
<div class="book">
<h3>Harry Potter And the Deathly Hallows</h3>
<p>Author: J.K. Rowling</p>
<p>Price: Rs 90</p>
</div>
<div class="book">
<img src="book8.jpg" alt="Book Title"><br><br><br><br>
<h3>Atomic Habits</h3>
<p>Author: James Clear</p>
<p>Price: Rs 60 </p>
</div>
<div class="book">
<h3>Rich Dad Poor Dad</h3>
<p>Author:Robert T. Kiyosaki</p>
<p>Price: Rs80</p>
</div>
<div class="book">
<img src="book1.png" alt="Book Title">
<h3>The Magic of Thinking Big</h3>
<p>Author: David Schwartz</p>
<p>Price: Rs 30</p>
</div>
<div class="book">
<h3>Think Like a Monk</h3>
<p>Author: Jay Shetty</p>
<p>Price: Rs 70</p>
</div>
<div class="book">
<img src="book12.jpg" style="width: 200px;" alt="Book Title">
<h3>The Real Yogi</h3>
<p>Author: Gana</p>
<p>Price: Rs 50</p>
</div>
</div>
<pre><center> <div style="font-size: 20px;"><p><a href="new.html">Previous</a>
Next</a></p></div></center></pre>
</main>
<footer id="contact">
<p>© 2023 Book Rental. All rights reserved.</p>
<p>Email: <a style="color:white;" href="mailto:sailokesh.182@gmail.com">sailokesh.182@gmail.com</a>
</p>
<p>Contact:8179935589</p>
</footer>
</body>
</html>

Viewpage.html
<!DOCTYPE html>
<html>
<head>
<title>Product Name - E-commerce Store</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>E-commerce Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="product">
<h2>Product Name</h2>
<div class="product-images">
<center><img src="book2.jpg" alt="Product Image 1" style="width: 250px;"></center>
</div>
<div class="product-details" >
<p class="product-price" style="font-size: x-large; text-align: center;"><b>Rs
250</b></p>
<p class="product-description" style="font-size:20px ; font-family: 'Times New Roman',
Times, serif;"><b>Description:</b><br><br>
As a Man Thinketh is a self-help book by James Allen, published in
1903. It was described by Allen as "... [dealing] with the power of thought, and
particularly with
the use and application of thought to happy and beautiful issues. I have tried to
make the book
simple, so that all can easily grasp and follow its teaching, and put into practice
the methods
which it advises. It shows how, in his own thought-world, each man holds the key to
every condition,
good or bad, that enters into his life, and that, by working patiently and
intelligently upon his
thoughts, he may remake his life, and transform his circumstances. The price of the
book is only one
shilling, and it can be carried in the pocket."</p>
<p class="Details" style="font-size:20px ; font-family: 'Times New Roman', Times,
serif;">
<pre> Product details
Publisher : Fingerprint! Publishing (6 November 2017); Prakash Books India Pvt Ltd,
113A, Ansari Road, Daryaganj, New Delhi-110002, +9111-23265358
Language : English
Paperback : 96 pages
ISBN-10 : 9386538172
ISBN-13 : 978-9386538178
Item Weight : 80 g
Dimensions : 20.6 x 0.9 x 13 cm
Country of Origin: India
Net Quantity : 1 count
Importer : Prakash Books India Pvt Ltd
Packer : Prakash Books India Pvt Ltd
Best Sellers Rank: #41 in Books (See Top 100 in Books)
#1 in Essays (Books)
#1 in Development & Growth
#1 in Comparative</p>
</pre>

<form action="#" method="post">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" value="1" min="1">
<button type="submit">Add to Cart</button>
</form>
</div>
</section>
</main>
<footer>
<p>© E-commerce Store 2023</p>
</footer>
search-filter.html:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<link href="search-filter.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row searchFilter" >
<div class="col-sm-12" >
<div class="input-group" >
<input id="table_filter" type="text" class="form-control" aria-label="Text input with segmented
button dropdown" >
<div class="input-group-btn" >
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Category</span>
<span class="caret" > </span></button>
<div class="dropdown-menu dropdown-menu-right" >
<ul class="category_filters" >
<li >
<input class="cat_type category-input" data-label="All" id="all" value="" name="radios"
type="radio" ><label for="all" >All</label>
</li>
<li >
<input type="radio" name="radios" id="Design" value="Design" ><label class="category-
label" for="Design" >Self-help</label>
</li>
<li >
<input type="radio" name="radios" id="Marketing" value="Marketing" ><label
class="category-label" for="Marketing" >History</label>
</li>
<li >
<input type="radio" name="radios" id="Programming" value="Programming" ><label
class="category-label" for="Programming" >Programming</label>
</li>
<li >
<input type="radio" name="radios" id="Sales" value="Sales" ><label class="category-label"
for="Sales" >Sales</label>
</li>
<li >
<input type="radio" name="radios" id="Support" value="Support" ><label class="category-
label" for="Support" >Support</label>
</li>
</ul>
</div>
<button id="searchBtn" type="button" class="btn btn-secondary btn-search" ><span
class="glyphicon glyphicon-search" > </span> <span class="label-icon" >Search</span></button>
</div>
</div>
</div>
</div>
</div>
mainpage.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="./style_main.css" />
<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=Kumbh+Sans:wght@400;700&display=swap"
rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<script defer src="script.js"></script>
<title>Inner Engineering</title>

</head>
<body>
<div class="body-wrapper"></div>


<div class="overlay-container">
<div class="item-overlay">
<button class="item-overlay__btn">
<img src="images/icon-close.svg" alt="close image" class="item-overlay__btn-img" />
</button>
<div class="item-overlay__mainImg">
<img src="images/image-product-1.jpg" alt="" class="item-overlay__img" />
<button class="item-overlay__btnlft overlay-btn">
<img src="images/icon-next.svg" alt="next symbol image"
class="item-overlay__btnlft-img overlay-btn__img" />
</button>
<button class="item-overlay__btnrgt overlay-btn">
<img src="images/icon-next.svg" alt="next symbol image"
class="item-overlay__btnrgt-img overlay-btn__img" />
</button>
</div>
<div class="overlay-img__btns">
<button class="overlay-img__btn" data-img="0">
<img src="images/image-product-1-thumbnail.jpg" alt="shoe product image"
class="overlay-img__btn-img" />
</button>
</button>
</button>
</button>
</div>
</div>
</div>


<div class="head-cart">
<h3 class="head-cart__heading">Cart</h3>
<div class="head-cart__txt">Your cart is empty.</div>
<div class="head-cart__item">
<div class="head-cart__item-wrapper">
<img src="images/image-product-1-thumbnail.jpg" alt="cart product image" class="head-
cart__item-img" />
<div class="head-cart__des">
<p class="head-cart__des-txt"> Inner Engineering</p>
<div class="head-cart__price">
<span class="head-cart__price-single">RS 40.00*3</span>
<span class="head-cart__price-total">RS 120.00</span>
</div>
</div>
<button class="head-cart__item-btn">
<img src="images/icon-delete.svg" alt="delete image" class="head-cart__btn-img" />
</button>
</div>
<button class="head-cart__btn btn--orange">Checkout</button>

</div>
</div>


<header class="head">
<div class="head-lft">
<button class="head-lft__btn">
<img style="width: 20px;" src="./menu.png" alt="menu image" class="head-lft__btn-img" />
</button>
<img style="width: 50px;" src="./title icon.png" alt="logo" class="head-logo" />
<ul class="head-nav">
<li class="head-nav__item">Collections</li>
<li class="head-nav__item">For Rent</li>
<li class="head-nav__item">Buy</li>
<li class="head-nav__item">About</li>
<li class="head-nav__item">Contact</li>
</ul>
</div>
<div class="head-rgt">
<button class="head-rgt__btn">
<img style="width: 20px;" src="cart.png" alt="cart image" class="head-cart__btn-img" />
</button>
<img src="user.png" alt="person image" class="head-rgt__img" />

</div>
</header>


<main class="item">
<section class="img">
<button class="img-main__btnlft img-main__btn">
<img src="./next.png" style="width: 20px;" alt="next symbol image"
class="img-main__btnlft-img img-main__btn-img" />
</button>
<button class="img-main__btnrgt img-main__btn">
<img style="width: 20px;" src="next.png" alt="next symbol image"
class="img-main__btnrgt-img img-main__btn-img" />
</button>
<img style="width: 500px ;" src="./book10.jpg" alt="" class="img-main" />
</section>
<section class="price">
<h2 class="price-sub__heading">Isha Foundation's</h2>
<h1 class="price-main__heading">Inner Engineering</h1>
<p class="price-txt">
Inner Engineering is a guide to creating a life of happiness by exploring your internal
landscape of
thoughts and feelings and learning to align them with what the universe tells you. <br>
</p>
<div class="price-box">
<div class="price-box__main">
<span class="price-box__main-new">Rs 40.00</span>
<span class="price-box__main-discount"> 50%</span>
</div>
<span class="price-box__old">$250.00</span>
</div>
<div class="price-btnbox">
<div class="price-btns">
<button class="price-btn__remove price-btn">
<img style="width: 15px;" src="./minus.png" alt="plus sign"
class="price-btn__remove-img price-btn__img" />
</button>
<span class="price-btn__txt">1</span>
<button class="price-btn__add price-btn">
<img style="width:12px ;" src="./plus.png" alt="minus sign"
class="price-btn__add-img price-btn__img" />
</button>
</div>
<button class="price-cart__btn btn--orange">
<img style="width: 20px;" src="./cart.png" alt="cart image" class="price-cart__btn-
img" />
Add to cart
</button>
</div>
</section>
</main>


<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded
by <a
href="#">venkatesh.b</a>.
</div>
</body>
</html>
Loginpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
background-image: url("bg\ login.jpg");
}
#login-form {
background-color: mediumaquamarine;
border-radius: 5px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
margin: 100px auto;
padding: 20px;
max-width: 400px;

}
#login-form label {
display: block;
margin-bottom: 10px;
}
#login-form input[type="text"],
#login-form input[type="password"] {
border-radius: 3px;
border: none;
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.1);
padding: 10px;
width: 100%;
}
#login-form input[type="submit"] {
background-color: #4CAF50;
border: none;
border-radius: 3px;
color: #ffffff;
cursor: pointer;
margin-top: 10px;
padding: 10px;
width: 100%;
}
#login-form input[type="submit"]:hover {
background-color: #3e8e41;
}
#login-form p {
margin-top: 10px;
text-align: center;
}
.total{
background-image: url("bg\ login.jpg");
}
</style>
</head>

<body>

<form id="login-form" action="connect.php" method="post" >
<label for="username">Username or Email</label>
<input type="text" id="username" name="email" required />
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Log In" />
<p>Don't have an account? <a href="SIGNUP PAGE.html">Sign Up</a></p><br>

<center> <p> <a href=""> Forgot Password</a></p></center>
</form>
</body>
</html>
SIGNUP PAGE.HTML:
<!DOCTYPE html>
<html>
<head>
<title>Advanced Signup Page</title>
<link rel="stylesheet" type="text/css" href="signup.css">

</head>
<body>
<div class="total">
<div class="signup-form">
<h2>Signup</h2>
<form action="connect.php" method="post">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first_name" required>
<label for="last-name">Last Name:</label>

<input type="text" id="last-name" name="last_name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>
<label for="confirm-password">Confirm Password:</label>

<input type="password" id="confirm-password" name="confirm_password" minlength="8" required>
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="country">Country:</label>
<input type="text" id="country" name="country" required>
<button type="submit" id="submit-btn">Submit</button>

<center> <a href="Loginpage.html">Login</a></center>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Task 3: New - HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Task 3: New - HTML

Uploaded by

Copyright:

Available Formats

TASK 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />

<script defer src="script.js"></script>

<button class="head-cart__btn btn--orange">Checkout</button>

<img src="user.png" alt="person image" class="head-rgt__img" />

<input type="submit" value="Log In" />

<p>Don't have an account? <a href="SIGNUP PAGE.html">Sign Up</a></p><br>

<label for="last-name">Last Name:</label>

<label for="confirm-password">Confirm Password:</label>

<button type="submit" id="submit-btn">Submit</button>

You might also like