Scribd
Upload
14 views12 pages

RWPD 1to4

Uploaded by

hasit666
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views12 pages

RWPD 1to4

Uploaded by

hasit666
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

2(1)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>College Department</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<div class="container vh-100 d-flex justify-content-center align-items-center">

<div class="text-center">

<h1>Department of Computer Science</h1>

<h3>XYZ College</h3>

</div>

</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></
script>

</body>

</html>

3(1)
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student Information</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<!-- Header Section (Fluid Container for full-width background) -->

<div class="container-fluid bg-primary text-white text-center py-4">

<h1>Student Information</h1>

</div>

<!-- Main Content Section (Normal Container for responsive layout) -->

<div class="container my-5">

<div class="row">

<!-- Left Column: Student Profile Picture -->

<div class="col-md-4 text-center">

<img src="https://via.placeholder.com/150" class="img-fluid rounded-circle" alt="Student Photo">

<h3 class="mt-3">John Doe</h3>

</div>

<!-- Right Column: Student Details -->

<div class="col-md-8">

<h4>Personal Information</h4>

<p><strong>Age:</strong> 21</p>

<p><strong>Department:</strong> Computer Science</p>

<p><strong>Email:</strong> johndoe@example.com</p>

<h4 class="mt-4">Education</h4>

<ul>

<li>Bachelor's Degree in Computer Science - XYZ College (2022-2024)</li>

<li>High School Diploma - ABC School (2020)</li>

</ul>

<h4 class="mt-4">Skills</h4>

<p>HTML, CSS, JavaScript, Python, Java</p>

</div>

</div>

</div>

<!-- Footer Section (Fluid Container for full-width footer) -->

<div class="container-fluid bg-secondary text-white text-center py-3">

<p>&copy; 2024 XYZ College. All rights reserved.</p>

4(1)
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Faculty Profile</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<!-- Header Section (Full-width) -->

<div class="container-fluid bg-info text-white text-center py-4">

<h1>Faculty Information</h1>

</div>

<!-- Main Content Section -->

<div class="container my-5">

<div class="row">

<!-- Left Column: Profile Picture -->

<div class="col-md-4 order-md-2 text-center">

<img src="https://via.placeholder.com/150" class="img-fluid rounded-circle mb-3"


alt="Faculty Photo">

<h3>Dr. Jane Smith</h3>

<p>Professor of Computer Science</p>

</div>

<!-- Right Column: Personal Information -->

<div class="col-md-8 order-md-1">

<h4>Biography</h4>

<p>Dr. Jane Smith has over 15 years of experience in teaching and research in computer
science. She specializes in artificial intelligence, machine learning, and data science.

<!-- Nested Columns for Skills and Courses -->

<div class="row">

<div class="col-md-6">

<h5>Skills</h5>

<ul>

<li>Artificial Intelligence</li>

<li>Machine Learning</li>

<li>Data Science</li>

<li>Python, R, Java</li>

</ul>
</div>

<div class="col-md-6">

<h5>Courses Taught</h5>

<ul>

<li>Introduction to AI</li>

<li>Machine Learning Basics</li>

<li>Data Science with Python</li>

</ul>

</div>

</div>

</div>

</div>

<!-- Nested Column with Offset (Optional spacing control) -->

<div class="row mt-5">

<div class="col-md-8 offset-md-2">

<h4>Research Interests</h4>

<p>Dr. Smith's research focuses on the application of AI in healthcare, developing intelligent


systems for predictive analysis, and the ethical implications of machine learning models.</p>

</div>

</div>

</div>

<!-- Footer Section (Full-width) -->

<div class="container-fluid bg-dark text-white text-center py-3">

<p>&copy; 2024 XYZ University. All rights reserved.</p>

</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></
script>

</body>

</html>

5(1)
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Class Timetable</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">

<style>

.time-slot {

background-color: #f8f9fa;

border: 1px solid #ddd;

text-align: center;

padding: 15px;

margin-bottom: 10px;

.time-slot h5 {

margin: 0;

</style>

</head>

<body>

<!-- Header Section -->

<div class="container-fluid bg-primary text-white text-center py-4">

<h1>Class Timetable</h1>

</div>

<!-- Timetable Grid -->

<div class="container my-5">

<div class="row text-center fw-bold">

<div class="col-sm-2">Time</div>

<div class="col-sm-2">Monday</div>

<div class="col-sm-2">Tuesday</div>

<div class="col-sm-2">Wednesday</div>

<div class="col-sm-2">Thursday</div>

<div class="col-sm-2">Friday</div>

</div>
<!-- First Row: 9:00 AM - 10:00 AM -->

<div class="row">

<div class="col-sm-2 time-slot">

<h5>9:00 AM - 10:00 AM</h5>

</div>

<div class="col-sm-2 time-slot">Math</div>

<div class="col-sm-2 time-slot">English</div>

<div class="col-sm-2 time-slot">Physics</div>

<div class="col-sm-2 time-slot">Math</div>

<div class="col-sm-2 time-slot">Chemistry</div>

</div>

<!-- Second Row: 10:00 AM - 11:00 AM -->

<div class="row">

<div class="col-sm-2 time-slot">

<h5>10:00 AM - 11:00 AM</h5>

</div>

<div class="col-sm-2 time-slot">Computer Science</div>

<div class="col-sm-2 time-slot">Math</div>

<div class="col-sm-2 time-slot">Chemistry</div>

<div class="col-sm-2 time-slot">English</div>

<div class="col-sm-2 time-slot">Physics</div>

</div>

<!-- Third Row: 11:00 AM - 12:00 PM -->

<div class="row">

<div class="col-sm-2 time-slot">

<h5>11:00 AM - 12:00 PM</h5>

</div>

<div class="col-sm-2 time-slot">Physics</div>

<div class="col-sm-2 time-slot">Chemistry</div>

<div class="col-sm-2 time-slot">Computer Science</div>

<div class="col-sm-2 time-slot">Math</div>

<div class="col-sm-2 time-slot">English</div>

</div>

<!-- Fourth Row: 12:00 PM - 1:00 PM -->


<div class="row">

<div class="col-sm-2 time-slot">

<h5>12:00 PM - 1:00 PM</h5>

</div>

<div class="col-sm-2 time-slot">Chemistry</div>

<div class="col-sm-2 time-slot">Physics</div>

<div class="col-sm-2 time-slot">English</div>

<div class="col-sm-2 time-slot">Computer Science</div>

<div class="col-sm-2 time-slot">Math</div>

</div>

</div>

<!-- Footer Section -->

<div class="container-fluid bg-dark text-white text-center py-3">

<p>&copy; 2024 XYZ University. All rights reserved.</p>

</div>

<!-- Bootstrap JS -->

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></
script>

</body>

</html>

6(1)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Student Co-curricular Activities</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">

<style>

.activity-section {

margin-bottom: 50px;

.activity-image {

max-width: 100%;

height: auto;

</style>

</head>

<body>

<!-- Header Section -->

<div class="container-fluid bg-info text-white text-center py-4">

<h1>Co-curricular and Extra-curricular Activities</h1>

<p>Explore various activities that our students are involved in!</p>

</div>

<!-- Activities Section -->

<div class="container my-5">

<div class="row activity-section">

<!-- First Activity -->

<div class="col-md-4">

<img src="https://via.placeholder.com/300" class="img-fluid rounded mb-3" alt="Debate


Club">

</div>

<div class="col-md-8">

<h4>Debate Club</h4>

<p>Our debate club focuses on enhancing students' critical thinking and public speaking
skills. Students participate in various competitions and learn to structure arguments logically.</p>

</div>

</div>

<div class="row activity-section">

<!-- Second Activity -->


<div class="col-md-4">

<img src="https://via.placeholder.com/300" class="img-thumbnail mb-3" alt="Science Fair">

</div>

<div class="col-md-8">

<h4>Science Fair</h4>

<p>The annual Science Fair encourages students to apply their scientific knowledge in
practical projects. This activity is aimed at fostering innovation and creativity in science and
technology.</p>

</div>

</div>

<div class="row activity-section">

<!-- Third Activity -->

<div class="col-md-4">

<img src="https://via.placeholder.com/300" class="img-fluid rounded-circle mb-3" alt="Sports


Event">

</div>

<div class="col-md-8">

<h4>Sports Event</h4>

<p>Sports events promote physical health and teamwork. Students participate in various
sporting events like football, basketball, athletics, and more.</p>

</div>

</div>

<div class="row activity-section">

<!-- Fourth Activity -->

<div class="col-md-4">

<img src="https://via.placeholder.com/300" class="img-fluid img-thumbnail mb-3" alt="Art


Exhibition">

</div>

<div class="col-md-8">

<h4>Art Exhibition</h4>

<p>Our annual art exhibition allows students to showcase their artistic talents through
paintings, sculptures, and digital art, encouraging creativity and expression.</p>

</div>

</div>

<div class="row activity-section">

<!-- Fifth Activity -->

<div class="col-md-4">

<img src="https://via.placeholder.com/300" class="img-fluid rounded mb-3" alt="Music Club">

</div>
<div class="col-md-8">

<h4>Music Club</h4>

<p>The music club brings together students passionate about music. Whether it's classical or
modern, students get a platform to practice and perform their music talents.</p>

</div>

</div>

</div>

<!-- Responsive Tables Section -->

<div class="container my-5">

<h3 class="text-center mb-4">Achievements in Extra-curricular Activities</h3>

<!-- Striped Table -->

<h5>Science Fair Achievements</h5>

<table class="table table-striped mb-4">

<thead class="table-dark">

<tr>

<th>Year</th>

<th>Project Title</th>

<th>Position</th>

</tr>

</thead>

<tbody>

<tr>

<td>2023</td>

<td>AI-Powered Healthcare System</td>

<td>1st</td>

</tr>

<tr>

<td>2022</td>

<td>Eco-friendly Energy Solutions</td>

<td>2nd</td>

</tr>

</tbody>

</table>

<!-- Hover Table -->

<h5>Debate Competition Wins</h5>

<table class="table table-hover mb-4">


<thead class="table-primary">

<tr>

<th>Year</th>

<th>Topic</th>

<th>Position</th>

</tr>

</thead>

<tbody>

<tr>

<td>2024</td>

<td>The Impact of AI on Society</td>

<td>1st</td>

</tr>

<tr>

<td>2023</td>

<td>Global Climate Change Policies</td>

<td>2nd</td>

</tr>

</tbody>

</table>

<!-- Bordered Table -->

<h5>Sports Event Achievements</h5>

<table class="table table-bordered">

<thead class="table-success">

<tr>

<th>Year</th>

<th>Event</th>

<th>Position</th>

</tr>

</thead>

<tbody>

<tr>

<td>2024</td>

<td>Football Tournament</td>

<td>Winners</td>

</tr>

<tr>
<td>2023</td>

<td>Basketball Championship</td>

<td>Runners-up</td>

</tr>

</tbody>

</table>

</div>

<!-- Footer Section -->

<div class="container-fluid bg-dark text-white text-center py-3">

<p>&copy; 2024 XYZ College. All rights reserved.</p>

</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></
script>

</body>

</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy