Project (Assignment 09)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Personal Portfolio — Ranveer</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- WhatsApp / Facebook / LinkedIn Preview Meta Tags -->
<meta property="og:title" content="Ranveer Portfolio" />
<meta property="og:description" content="Welcome to my personal portfolio website." />
<meta property="og:image" content="https://hostelfinder.binakamke.com/pic.jpg" />
<meta property="og:url" content="https://hostelfinder.binakamke.com" />
<meta property="og:type" content="website" />
<!-- For Twitter Preview (Optional but recommended) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ranveer Portfolio">
<meta name="twitter:description" content="Welcome to my personal portfolio website.">
<meta name="twitter:image" content="https://hostelfinder.binakamke.com/pic.jpg">
</head>
<body>
<div class="container" role="main">
<header class="header">
<div class="avatar" aria-hidden="true">
<!-- Replace the src with your photo file or URL -->
<img src="pic.jpg" alt="Profile photo of Ranveer">
</div>
<div class="intro">
<h1>Ranveer</h1>
<a href="/text.html">hello</a>
<p class="role">B.Tech CSE Student • Web Developer (beginner)</p>
<p class="bio">I build small web projects and learning full-stack development. I enjoy creating
practical tools and clean interfaces. Currently focusing on HTML, CSS, JavaScript.</p>
</div>
</header>
<div class="grid">
<!-- Left column -->
<section>
<article class="card">
<h2 class="title">Education</h2>
<table class="education">
<thead>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.Tech (CSE)</td>
<td> SR Institute of Management & Technology, Lucknow</td>
<td>2024 - Present</td>
</tr>
<tr>
<td>Intermediate</td>
<td>BRD Inter College</td>
<td>2020-2022</td>
</tr>
<tr>
<td>High School</td>
<td>Janta Higher Secondary School</td>
<td>2018-2020</td>
</tr>
<tr>
<td>ADCA Certificate</td>
<td>Rama Computer Institute</td>
<td>2018-2020</td>
</tr>
</tbody>
</table>
</article>
<article class="card" style="margin-top:14px">
<h2 class="title">Hobbies</h2>
<ul class="hobbies">
<li>Web development and making Project</li>
<li>Reading technical blogs and documentation</li>
<li>Watching programming tutorials and making projects</li>
</ul>
</article>
<article class="card" style="margin-top:14px">
<h2 class="title">Contact</h2>
<div class="contact-list">
<a href="mailto:ranveerkumargond91@gmail.com">Ranveerkumargond91@gmail.com</a>
<a href="tel:+919151238931">+91 9151238931</a>
</div>
</article>
</section>
<!-- Right column -->
<aside class="card profile-card" aria-label="Profile summary">
<div>
<h2 class="title">Socile Contact</h2>
<div style="width:100%;">
<div class="socials">
<a href="https://www.instagram.com/iamranveerkumargond"><i class="fa fa-instagram"
target="_blank"></i></a>
<a href="https://www.facebook.com/Ranveerkumargond91"><i class="fa fa-facebook"
target="_blank"></i></a>
<a href="https://www.linkedin.com/in/ranveerkumargond"><i class="fa fa-linkedin"
target="_blank"></i></a>
</div>
</div>
<div class="assignments" style="margin-top: 20px;">
<h2 class="title">Projects</h2>
<div class="list"><a href="Assignment 10/index.html">Personal Portfolio (Project)</a></div>
<div class="list"><a href="https://binakamke.com">Hostel Finder</a></div>
</div>
</aside>
<aside class="card profile-card" aria-label="Profile summary">
<h2 class="title" style="margin-top: 10px;">Assignments</h2>
<div class="assignments">
<!-- assignment 01 -->
<div class="list">
<details>
<summary>
Assignment 01
</summary>
<details class="details">
<summary>Question 01</summary>
<img src="/img/1.png" alt="">
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web page</title>
</head>
<body>
Question.1: Create a simple webpage using HTML only.
Requirement:-
<!-- use <!doctype html>, <html></html>,<head>, <style>, <body> ,
show a heading paragraph and your name -->
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is a simple paragraph</p>
<p><b>Name:</b> Ranveer Kumar Gond</p>
</body>
</html>
</code></pre>
<a href="Assignment 01/1.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 02</summary>
<img src="/img/2.png" alt="">
<hr>
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order list and unorderlist</title>
</head>
<body>
<h1>My Favourite Foods</h1>
<ol>
<li>Pizza</li>
<li>Biryani</li>
<li>Paneer</li>
<li>Icecream</li>
</ol>
<h1>My Favourite Movies</h1>
<ul>
<li>3 Idiot</li>
<li>Bahubali</li>
<li>Robbenhood</li>
<li>KGF</li>
</ul>
</body>
</html>
</code></pre>
<a href="Assignment 01/2.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 03</summary>
<img src="/img/3.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a student marks table with CSS styling</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #875de2;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #ec16f4;
color: white;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ranveer Kumar Gond</td>
<td>2404850100134</td>
<td>Physics</td>
<td>90</td>
</tr>
<tr>
<td>Mukteshwar Vishwakarma</td>
<td>2404850100110</td>
<td>Mathematics</td>
<td>75</td>
</tr>
<tr>
<td>Ranveer Kapoor</td>
<td>2404850100133</td>
<td>Physics</td>
<td>80</td>
</tr>
<tr>
<td>Ranveer Kumar Gond</td>
<td>2404850100134</td>
<td>Physics</td>
<td>90</td>
</tr>
<tr>
<td>Mukteshwar Vishwakarma</td>
<td>2404850100110</td>
<td>Mathematics</td>
<td>75</td>
</tr>
<tr>
<td>Ranveer Kapoor</td>
<td>2404850100133</td>
<td>Physics</td>
<td>80</td>
</tr>
<tr>
<td>Ranveer Kumar Gond</td>
<td>2404850100134</td>
<td>Physics</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
</code></pre>
<a href="Assignment 01/3.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 04</summary>
<img src="/img/4.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Use <a> tag Add your 3 Favourite Website</title>
</head>
<body>
<h1>My Favourite Website</h1>
<ul>
<li><a> href="https://www.google.com">Google</a></li>
<li><a> href="https://www.youtube.com">Youtube</a></li>
<li><a> href="https://www.instagram.com">Instagram </a></li>
</ul>
</body>
</html> </code></pre>
<a href="Assignment 01/4.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 05</summary>
<img src="/img/5.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display A image on web page</title>
</head>
<body>
<h1>Image Example</h1>
<img src="https://static.vecteezy.com/system/resources/previews/001/416/705/original/html5-emblem-orange-shield-and-white-text-vector.jpg" alt="HTML logo" width="300" height="300" >
<p>HTML Logo</p>
</body>
</html>
</code></pre>
<a href="Assignment 01/5.html"><button class="view">Preview</button></a>
</details>
</details>
</div>
<!-- assignment 02 -->
<div class="list">
<details>
<summary>Assignment 02</summary>
<details class="details">
<summary>Question 01</summary>
<img src="/img/6.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web page</title>
<style>>
body {
background-color: #e6f7ff; /* light background */
}
h1 {
color: navy;
font-size: 36px;
}
p {
color: darkslategray;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<h1>Internal CSS Styling</h1>
<p>This paragraph is styled with internal CSS inside the <head>.</p>
<p>Name: Ranveer Kumar Gond<br> Roll No: 2404850100134</p>
</body>
</html>
</code></pre>
<a href="Assignment 02/1.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 02</summary>
<img src="/img/7.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use Inline CSS</title>
</head>
<body>
<h1 style="color: red; font-size: 40px;">This is a Heading</h1>
<p style="color: green; font-size: 20px;">This paragraph uses inline CSS.</p>
<p style="background-color: #e04c0d; font-size: 18px; padding:10px;">Another inline styled paragraph.</p>
<p style="background-color: #4916f1; font-size: 18px; padding:10px;">Ranveer Kumar Gond</p>
<p style="background-color: #f0184a; font-size: 18px; padding:10px;">Roll No: 2404850100134</p>
</body>
</html>
</code></pre>
<a href="Assignment 02/2.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 03</summary>
<img src="/img/8.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q3 - CSS Types Example</title>
<link rel="stylesheet" href="styles.css">
<style>>
.external {
color: darkgreen;
font-size: 20px;
background-color: #f0f0f0;
}
</style>
<!-- Internal CSS -->
<style>>
h2 {
color: darkblue;
font-size: 28px;
}
</style>
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> style="color: red; font-size: 36px;">This is Inline CSS</h1>
<h2>This is Internal CSS</h2>
<p> class="external">This is External CSS</p>
<p> style="color:gray; text-align:center;">@Ranveer Kumar Gond</p>
</body>
</html>
</code></pre>
<a href="Assignment 02/3.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 04</summary>
<img src="/img/9.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Create</title>
</head>
<body>
<h1>User Registration Form</h1>
<form>
<!-- Text input -->
<label>Username:</label>
<input type="text" name="username" placeholder="@Ranveerkumargond"><br><br>
<!-- Password input -->
<label>Password:</label>
<input type="password" name="password" placeholder="2404850100134"><br><br>
<!-- Radio buttons -->
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female <br><br>
<!-- Checkboxes -->
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="coding"> Coding
<input type="checkbox" name="hobby" value="music"> Music <br><br>
<!-- Submit -->
<input type="submit" value="Register">
</form>
<hr>
<p style="color:gray; text-align:center;">@Ranveer Kumar Gond</p>
</body>
</html>
</code></pre>
<a href="Assignment 02/4.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 05</summary>
<img src="/img/10.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display A image on web page</title>
</head>
<body>
<h1>Image Example</h1>
<img src="https://static.vecteezy.com/system/resources/previews/001/416/705/original/html5-emblem-orange-shield-and-white-text-vector.jpg" alt="HTML logo" width="300" height="300" >
<p>HTML Logo</p>
</body>
</html>
</code></pre>
<a href="Assignment 02/5.html"><button class="view">Preview</button></a>
</details>
</details>
</div>
<!-- assignment 03 -->
<div class="list">
<details>
<summary>Assignment 03</summary>
<details class="details">
<summary>Question 01</summary>
<img src="/img/11.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background: white;
width: 300px;
padding: 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transition: background 0.3s ease,
transform 0.3s ease;
}
.card:hover {
background: #e0e0ff;
transform: scale(1.03);
}
.card:hover img{
border: 3px solid #875de2;
}
.card img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 15px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.card h2 {
margin: 10px 0 5px;
color: #333;
}
.card p {
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="card">
<img src="pic.jpg" alt="Profile Photo">
<h2>Ranveer Kumar Gond</h2>
<p>💻 B.Tech CSE Student | Web Development</p>
</div>
</body>
</html> </code></pre>
<a href="Assignment 03/1st.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 02</summary>
<img src="/img/12.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a simple webpage with two-column layout using CSS float.</title>
<style>
body {
margin: 0;
}
nav {
position: fixed;
}
nav a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
border-bottom: 1px solid #ccc;
}
.left {
float: left;
width: 30%;
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
height: 100vh;
}
.right {
float: right;
width: 70%;
padding: 20px;
box-sizing: border-box;
height: 100vh;
background-color: #e0e0ff;
}
section {
height: 100vh;
}
footer {
clear: both;
text-align: center;
padding: 10px;
background-color: #085fbd;
color: white;
}
</style>
</head>
<body>
<div class="left">
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</div>
<div class="right" id="home">
<h1>I Am Ranveer Kumar Gond</h1>
<p>I become a Web Developer</p>
<p>I am passionate about coding and design.</p>
</div>
<div class="right" id="about">
<h1>About Me</h1>
<p>I am a B.Tech CSE student with a keen interest in web development. I love creating beautiful and functionalwebsites.</p>
</div>
<div class="right" id="contact">
<h1>Contact Me</h1>
<p>You can reach me at: <a href="mailto:ranveer@example.com">ranveer@example.com</a></p>
</div>
<footer>
<p>© 2023 Ranveer Kumar Gond. All rights reserved.</p>
</footer>
</body>
</html>
</code></pre>
<a href="Assignment 03/2.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 03</summary>
<img src="/img/13.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
h1 {
text-align: center;
margin: 20px 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery img {
margin: 10px;
border: 5px solid #fff;
border-radius: 10px;
width: 30%;
transition: transform 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div class="gallery">
<img src="https://images.unsplash.com/photo-1733169312700-a3dfad2d99f0?q=80&w=871&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 1">
<img src="https://images.unsplash.com/photo-1754147965582-edcb63324a81?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 2">
<img src="https://images.unsplash.com/photo-1753582252949-61393321d0e1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE1fDZzTVZqVExTa2VRfHxlbnwwfHx8fHw%3D" alt="Image 3">
<img src="https://images.unsplash.com/photo-1733169312700-a3dfad2d99f0?q=80&w=871&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 4">
<img src="https://images.unsplash.com/photo-1754147965582-edcb63324a81?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 5">
<img src="https://images.unsplash.com/photo-1753582252949-61393321d0e1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE1fDZzTVZqVExTa2VRfHxlbnwwfHx8fHw%3D" alt="Image 6">
</div>
</body>
</html>
</code></pre>
<a href="Assignment 03/3.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 04</summary>
<img src="/img/14.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a web page using CSS Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
header {
background-color: #085fbd;
color: white;
padding: 10px 0;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #085fbd;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
@media (max-width: 600px) {
header, footer {
font-size: 14px;
}
body{
background-color: gray;
}
main {
padding: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Web Page</h1>
</header>
<main>
<p>This is a simple responsive web page layout using CSS media queries.</p>
</main>
<footer>
<p>© 2023 Your Name. All rights reserved.</p>
</footer>
</body>
</html>
</code></pre>
<a href="Assignment 03/4.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 05</summary>
<img src="/img/15.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
form {
max-width: 400px;
margin: auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
label {
margin-bottom: 8px;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="radio"] {
margin-right: 10px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #28a745;
border: none;
border-radius: 4px;
color: white;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form action="#" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<label for="gender">Gender:</label><br><br>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
</code></pre>
<a href="Assignment 03/5.html"><button class="view">Preview</button></a>
</details>
</details>
</div>
<!-- assignment 04 -->
<div class="list">
<details>
<summary>Assignment 04</summary>
<details class="details">
<summary>Question 01</summary>
<img src="/img/16.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a styled navigation bar using CSS</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
nav {
background-color: #875de2;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar {
display: flex;
justify-content: center;
align-items: center;
padding: 14px 0;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.navbar a:hover {
background-color: #ec16f4;
}
.navbar a.active {
background-color: white;
color: #333;
font-weight: bold;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
.navbar a {
margin: 10px 0;
width: 80%;
text-align: center;
}
}
p{
text-align: center;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<nav>
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</nav>
<p>Name: Ranveer Kumar Gond</p>
<p>Roll No: 2404850100134</p>
</body>
</html>
</code></pre>
<a href="Assignment 04/1.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 02</summary>
<img src="/img/17.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a student marks table with CSS styling</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #875de2;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #ec16f4;
color: white;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ranveer Kumar Gond</td>
<td>2404850100134</td>
<td>Physics</td>
<td>90</td>
</tr>
<tr>
<td>Mukteshwar Vishwakarma</td>
<td>2404850100110</td>
<td>Mathematics</td>
<td>75</td>
</tr>
<tr>
<td>Ranveer Kapoor</td>
<td>2404850100133</td>
<td>Physics</td>
<td>80</td>
</tr>
<tr>
<td>Ranveer Kumar Gond</td>
<td>2404850100134</td>
<td>Physics</td>
<td>90</td>
</tr>
<tr>
<td>Mukteshwar Vishwakarma</td>
<td>2404850100110</td>
<td>Mathematics</td>
<td>75</td>
</tr>
<tr>
<td>Ranveer Kapoor</td>
<td>2404850100133</td>
<td>Physics</td>
<td>80</td>
</tr>
<tr>
<td>Ranveer Kumar Gond</td>
<td>2404850100134</td>
<td>Physics</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
</code></pre>
<a href="Assignment 04/2.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 03</summary>
<img src="/img/18.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a simple webpage with a fixed background image</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0JTIwYmFja2dyb3VuZHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80') no-repeat center center fixed;
background-size: cover;
color: white;
text-align: center;
height: 100vh;
justify-content: center;
align-items: center;
}
h1 {
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}
section {
background-color: rgba(0, 0, 0, 0.5);
margin: 20px;
padding: 20px;
border-radius: 10px;
}
section:hover {
border: rgb(241, 79, 10) 5px solid;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<section>
<p style="text-align: left;">Name: Ranveer Kumar Gond <br> Roll No: 2404850100134 <br> Branch: CSE</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, deleniti hic tempore unde quod voluptatem qui ducimus odit quisquam excepturi culpa perspiciatis corrupti nam dicta eos inventore expedita ut id!</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe dolores architecto numquam corrupti totam molestiae quae alias, perspiciatis voluptatibus, quod maiores cumque porro velit impedit mollitia accusamus. Quo, vero maiores.</p>
</section>
</body>
</html>
</code></pre>
<a href="Assignment 04/3.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 04</summary>
<img src="/img/19.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Date & Time</title>
<style>
body {
background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0JTIwYmFja2dyb3VuZHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80');
color: white;
background-size: cover;
text-align: center;
padding-top: 100px;
height: 100vh;
}
button {
background-color: #ffffff;
color: #2575fc;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border-radius: 8px;
transition: 0.3s;
}
button:hover {
background-color: #2575fc;
color: white;
}
p {
font-size: 20px;
margin-top: 20px;
background-color: orange;
padding: 10px;
display: inline-block;
}
</style>
</head>
<body>
<h1>JavaScript Button Click Event</h1>
<button onclick="showDateTime()">Show Date & Time</button><br>
<p id="datetime"></p>
<script>
function showDateTime() {
const now = new Date();
document.getElementById("datetime").innerText = now.toString();
setInterval(showDateTime,1000)
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 04/4.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 05</summary>
<img src="/img/20.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text Color</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
text-align: center;
margin-top: 100px;
}
p {
font-size: 24px;
color: black;
transition: color 0.4s ease;
}
button {
padding: 10px 20px;
font-size: 18px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>JavaScript Text Color Changer</h1>
<p id="text">This text will change its color when you click the button!</p>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
const colors = ["red", "blue", "green"];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.getElementById("text").style.color = randomColor;
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 04/5.html"><button class="view">Preview</button></a>
</details>
</details>
</div>
<!-- assignment 05 -->
<div class="list">
<details>
<summary>Assignment 05</summary>
<details class="details">
<summary>Question 01</summary>
<img src="/img/21.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Display a Message</title>
</head>
<body>
<script>
window.onload = function() {
alert("Hello, World!");
};
</script>
</body>
</html>
</code></pre>
<a href="Assignment 05/01.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 02</summary>
<img src="/img/22.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Change Text</title>
</head>
<body>
<p id="message">This is the original text.</p>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("message").innerHTML = "The text has been changed!";
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 05/02.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 03</summary>
<img src="/img/23.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Add Two Numbers</title>
</head>
<body>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<button onclick="addNumbers()">Add</button>
<p id="result"></p>
<script>
function addNumbers() {
let n1 = Number(document.getElementById("num1").value);
let n2 = Number(document.getElementById("num2").value);
let sum = n1 + n2;
document.getElementById("result").innerHTML = "Sum: " + sum;
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 05/03.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 04</summary>
<img src="/img/24.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Display Date and Time</title>
</head>
<body>
<button onclick="showDateTime()">Show Date & Time</button>
<p id="datetime"></p>
<script>
function showDateTime() {
let current = new Date();
document.getElementById("datetime").innerHTML = current;
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 05/04.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 05</summary>
<img src="/img/25.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Change Background on Hover</title>
</head>
<body>
<div id="box"
onmouseover="changeColor('lightblue')"
onmouseout="changeColor('lightgreen')"
style="width:200px; height:100px; background-color:lightgreen; text-align:center; line-height:100px; font-weight:bold;">
Hover over me!
</div>
<script>
function changeColor(color) {
document.getElementById("box").style.backgroundColor = color;
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 05/05.html"><button class="view">Preview</button></a>
</details>
</details>
</div>
<!-- assignment 06 -->
<div class="list">
<details>
<summary>Assignment 06</summary>
<details class="details">
<summary>Question 01</summary>
<img src="/img/26.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h2>Simple Calculator</h2>
<form>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<select id="operation">
<option value="add">Add</option>
<option value="sub">Subtract</option>
<option value="mul">Multiply</option>
<option value="div">Divide</option>
</select>
<button type="button" onclick="calculate()">Calculate</button>
</form>
<h3>Result: <span id="result"></span></h3>
<script>
function calculate() {
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
let op = document.getElementById("operation").value;
let res = 0;
if (op === "add") res = a + b;
else if (op === "sub") res = a - b;
else if (op === "mul") res = a * b;
else if (op === "div") res = a / b;
document.getElementById("result").textContent = res;
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 06/01.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 02</summary>
<img src="/img/27.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Toggle Visibility</title>
</head>
<body>
<h2>Toggle Paragraph Visibility</h2>
<p id="text">This is a sample paragraph that can be shown or hidden.</p>
<button onclick="toggleVisibility()">Show / Hide</button>
<script>
function toggleVisibility() {
let para = document.getElementById("text");
if (para.style.display === "none") {
para.style.display = "block";
} else {
para.style.display = "none";
}
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 06/02.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 03</summary>
<img src="/img/28.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title>
</head>
<body>
<h2>Change Paragraph Text Color</h2>
<p id="para">This is a colorful paragraph.</p>
<input type="text" id="colorInput" placeholder="Enter color name or hex code">
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
let color = document.getElementById("colorInput").value;
document.getElementById("para").style.color = color;
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 06/03.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 04</summary>
<img src="/img/29.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<h2>Simple Form Validation</h2>
<form onsubmit="return validateForm()">
<input type="text" id="name" placeholder="Name"><br><br>
<input type="email" id="email" placeholder="Email"><br><br>
<input type="text" id="phone" placeholder="Phone"><br><br>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let phone = document.getElementById("phone").value;
if (name.trim() === "") {
alert("Name cannot be empty");
return false;
}
if (!email.includes("@")) {
alert("Invalid email address");
return false;
}
if (phone.length !== 10 || isNaN(phone)) {
alert("Phone number must be 10 digits");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 06/04.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 05</summary>
<img src="/img/30.png" alt="">
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Interactive List</title>
</head>
<body>
<h2>Interactive List</h2>
<ul id="itemList">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<input type="text" id="newItem" placeholder="Enter new item">
<button onclick="addItem()">Add Item</button>
<script>
function addItem() {
let itemText = document.getElementById("newItem").value;
if (itemText.trim() === "") return;
let li = document.createElement("li");
li.textContent = itemText;
document.getElementById("itemList").appendChild(li);
document.getElementById("newItem").value = "";
}
</script>
</body>
</html>
</code></pre>
<a href="Assignment 06/05.html"><button class="view">Preview</button></a>
</details>
</details>
</div>
<!-- assignment 07 -->
<div class="list">
<details>
<summary>Assignment 07</summary>
<details class="details">
<summary>Question 01</summary>
<img src="/img/31.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Installation</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<h1 class="text-center">Using Bootstrap</h1>
<p class="text-center">Page create by using Bootstrap </p>
<div class="text-center">
<button class="btn btn-primary">Test Button</button>
</div>
<p class="text-center bg-secondary text-white mt-4">@Ranveer Kumar Gond</p>
<!-- Bootstrap JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</code></pre>
<a href="Assignment 07/01.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 02</summary>
<img src="/img/32.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Container</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h2>Responsive Container Example</h2>
<p>This text is inside a Bootstrap container. Resize the screen to see responsiveness.</p>
<p class="mt-4 border">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quis cumque harum, culpa maiores repellat ea, temporibus, itaque fuga corrupti aliquam aspernatur numquam molestiae eveniet rem assumenda. Ullam, tempora accusamus!</p>
<p class="text-center bg-secondary text-white mt-4">@Ranveer Kumar Gond</p>
</div>
</body>
</html>
</code></pre>
<a href="Assignment 07/02.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 03</summary>
<img src="/img/33.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Column Grid</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-md-6 col-sm-12 bg-light border p-3">
<h3>Column 1</h3>
<img src="/Assignment 07/img/image.png" alt="nature image" style="width: 500px;">
</div>
<div class="col-md-6 col-sm-12 border p-3">
<h3>Column 2</h3>
<img src="/Assignment 07/img/image copy.png" alt="" style="width: 500px;">
</div>
</div>
</div>
<p class="text-center bg-secondary text-white mt-4">@Ranveer Kumar Gond</p>
</body>
</html>
</code></pre>
<a href="Assignment 07/03.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 04</summary>
<img src="/img/34.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Column Grid: Imge gallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="row text-center">
<div class="col-md-4 col-sm-12 bg-primary text-white p-3">
<h3>Column 1</h3>
<img src="/Assignment 07/img/image copy.png" alt="">
</div>
<div class="col-md-4 col-sm-12 bg-warning p-3">
<h3>Column 2</h3>
<img src="/Assignment 07/img/image copy 2.png" alt="">
</div>
<div class="col-md-4 col-sm-12 bg-success text-white p-3">
<h3>Column 3</h3>
<img src="/Assignment 07/img/image copy 3.png" alt="">
</div>
</div>
</div>
<p class="text-center bg-secondary text-white mt-4">@Ranveer Kumar Gond</p>
</body>
</html>
</code></pre>
<a href="Assignment 07/04.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 05</summary>
<img src="/img/35.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Buttons</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h2>Bootstrap Buttons</h2>
<button class="btn btn-primary btn-lg">Primary Large</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning btn-sm">Warning Small</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-info">Info</button>
<p class="text-center bg-secondary text-white mt-4">@Ranveer Kumar Gond</p>
</div>
</body>
</html>
</code></pre>
<a href="Assignment 07/05.html"><button class="view">Preview</button></a>
</details>
</details>
</div>
<!-- assignment 08 -->
<div class="list">
<details>
<summary>Assignment 08</summary>
<details class="details">
<summary>Question 01</summary>
<img src="/img/36.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Navbar Page</a>
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menu -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<p class="bg-dark mt-4 text-white text-center">@Ranveer Kumar Gond</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</code></pre>
<a href="Assignment 08/01.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 02</summary>
<img src="/img/37.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Cards</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="row g-4">
<div class="col-md-4 col-sm-12">
<div class="card">
<img src="/Assignment 07/img/image.png" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Image 1</h5>
<p class="card-text">Nature Image</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card">
<img src="/Assignment 07/img/image copy.png" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Image 2</h5>
<p class="card-text">Nature image</p>
<a href="#" class="btn btn-success">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card">
<img src="/Assignment 07/img/image copy 3.png" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Image 3</h5>
<p class="card-text">Nature Image</p>
<a href="#" class="btn btn-warning">Read More</a>
</div>
</div>
</div>
</div>
</div>
<p class="bg-dark mt-4 text-white text-center">@Ranveer Kumar Gond</p>
</body>
</html>
</code></pre>
<a href="Assignment 08/02.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 03</summary>
<img src="/img/38.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
</div>
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/Assignment 07/img/image.png" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="/Assignment 07/img/image copy 2.png" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="/Assignment 07/img/image copy 3.png" class="d-block w-100">
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<p class="bg-dark mt-4 text-white text-center">@Ranveer Kumar Gond</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</code></pre>
<a href="Assignment 08/03.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 04</summary>
<img src="/img/39.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h3>Registration Form</h3>
<form>
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control">
</div>
<label class="form-label">Gender</label><br>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender">
<label class="form-check-label">Male</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender">
<label class="form-check-label">Female</label>
</div>
<br>
<label class="form-label">Languages</label><br>
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">English</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">Hindi</label>
</div>
<button class="btn btn-primary mt-3">Submit</button>
</form>
</div>
<p class="bg-dark mt-4 text-white text-center">@Ranveer Kumar Gond</p>
</body>
</html>
</code></pre>
<a href="Assignment 08/04.html"><button class="view">Preview</button></a>
</details>
<details class="details">
<summary>Question 05</summary>
<img src="/img/40.png" alt="">
<pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta-size="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Course</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ranveer Kumar Gond</td>
<td>134</td>
<td>B.Tech</td>
<td>87</td>
</tr>
<tr>
<td>Ranveer Kapoor</td>
<td>133</td>
<td>B.Tech</td>
<td>90</td>
</tr>
<tr>
<td>Mukteshwar</td>
<td>102</td>
<td>BCA</td>
<td>91</td>
</tr>
<tr>
<td>Manish Gond</td>
<td>102</td>
<td>BCA</td>
<td>85</td>
</tr>
<tr>
<td>Manish Yadav</td>
<td>102</td>
<td>BCA</td>
<td>91</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
</code></pre>
<a href="Assignment 08/05.html"><button class="view">Preview</button></a>
</details>
</details>
</div>
</div>
</aside>
</div>
<footer>
<small>© Designed by Ranveer Kumar Gond 🧡🤍💚
</small>
</footer>
</div>
</body>
</html>
Preview
