index.html(note:every time you have to run index.html only)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>College Web Project</title> <link rel="stylesheet" href="styles.css"> </head> <frameset rows="30%,*"> <frame src="top_frame.html" noresize scrolling="NO" name="topframe" style="height: 30px;"> <frameset cols="15%,*"> <frame src="left_frame.html" noresize scrolling="NO" name="leftframe"> <frame src="right_frame.html" noresize scrolling="auto" name="rightframe"> </frameset> </frameset> </html>
top_frame.html
<!DOCTYPE html> <html> <head> <title>Top Frame</title> <style> body { background: linear-gradient(135deg, #40D8AB,#35A8E1); margin: 0; padding: 0; font-family: 'Pacifico', cursive; } #logo { float: left; margin-right: 10px; } #header { background: linear-gradient(135deg, #40D8AB,#35A8E1); color: white; text-align: center; padding: 10px; } #header h1 { font-size: 40px; margin: 0; } #navigation { width: 100%; height: 50%; margin: 20px 0; } #navigation table { width: 100%; height: 100%; border-spacing: 10px; } #navigation td { text-align: center; } #navigation a { text-decoration: none; font-size: 24px; color: navy; } #navigation a:hover { text-decoration: underline; } </style> </head> <body> <img id="logo" src="images/JSS_Logo.png" width="125" height="115"> <div id="header"> <h1>JSS Academy of Technical Education</h1> </div> <div id="navigation"> <table> <tr> <td><a href="right_frame.html" target="rightframe">HOME</a></td> <td><a href="login.html" target="rightframe">LOGIN</a></td> <td><a href="registration.html" target="rightframe">REGISTER</a></td> <td><a href="catalogue.html" target="rightframe">CATALOGUE</a></td> <td><a href="cart.html" target="rightframe">CART</a></td> </tr> </table> </div> </body> </html>
left_frame.html
<!DOCTYPE html> <html lang="en"> <head> <style> body { text-align: center; background-color: #DF585A; font-family: 'Pacifico', cursive; margin: 0; padding: 20px; } a { text-decoration: none; color: white; font-size: 30px; /* Adjust the font size as needed */ } a:hover { color: lightgray; } </style> </head> <body> <a href="catalogue.html" target="rightframe">CSE</a><br><br> <a href="ece_catalogue.html" target="rightframe">ECE</a><br><br> <a href="eee_catalogue.html" target="rightframe">EEE</a><br><br> <a href="civil_catalogue.html" target="rightframe">CIVIL</a><br> </body> </html>
right_frame.html
<!DOCTYPE html> <html lang="en"> <head> <style> body { background: linear-gradient(135deg, #DBD5ED, #F3E7EA); text-align: center; margin: 0; padding: 20px; font-family: 'Pacifico', cursive; } img { height: 170px; } h1 { font-size: 32px; color: #3498db; } h2 { font-size: 24px; color: #FF6347; } </style> </head> <body> <center> <img src="https://www.pngkey.com/png/full/443-4432695_school-library-online-book-store.png" alt="Books" height="170"><br> <h1><b>Discover the World of Books at JSS Online Store</b></h1> <h2><b>"Unlock a Universe of Engineering E-Books Just for You"</b></h2> </center> </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 Page</title> <style> body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #DBD5ED, #F3E7EA); margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 100vh; } form { background: linear-gradient(135deg, #DBD5ED, #F3E7EA); padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; text-align: center; } label { display: block; margin-bottom: 8px; text-align: left; /* Align label text to the left */ } input { width: 100%; padding: 8px; margin-bottom: 16px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; } .button-group { display: flex; justify-content: space-between; } button { width: 48%; padding: 10px; border-radius: 4px; cursor: pointer; } button.submit { background-color: #4caf50; color: #fff; border: none; } button.reset { background-color: #f44336; color: #fff; border: none; } </style> </head> <body> <form id="loginForm"> <h1>Login Page</h1> <label for="username">User Name:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <div class="button-group"> <button type="button" class="submit" onclick="validateLogin()">Submit</button> <button type="reset" class="reset">Reset</button> </div> </form> <script> var userCredentials = [ { username: 'shashank', password: 'jss2026' }, { username: 'user2', password: 'pass2' }, { username: 'user3', password: 'pass3' } ]; function validateLogin() { var enteredUsername = document.getElementById('username').value; var enteredPassword = document.getElementById('password').value; var validCredentials = userCredentials.find(function (cred) { return cred.username === enteredUsername && cred.password === enteredPassword; }); if (validCredentials) { alert('Login successful!'); window.location.href = 'catalogue.html'; } else { alert('Invalid username or password. Please try again.'); } } </script> </body> </html>