Scribd
Upload
26 views51 pages

CC8 ASSIGNMENT - Merged

Uploaded by

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

CC8 ASSIGNMENT - Merged

Uploaded by

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

CC8 ASSIGNMENT

NAME- ABHAY VERMA


CU ROLL NO - 223023-21-0046

PAGE 1-
<!DOCTYPE html>
<html>
<head>
<title>College Website</title>
</head>
<body>
<header class="header">
<div style="text-align:center"><img align="center" ;
style="width:15%"src="abc.jpg" alt="College Logo"></div>
<h1 style="font-size:60px;text-align:center">ABC
COLLEGE</h1>
</header>
<hr>
<nav>
<ul>
<div style="text-align:left"><li><a style="font-
size:30px;background-color:magenta;padding: 15px 35px;margin: 5px
0;display: inline-block;" href="index.html">Home</a></li>
<li><a style="font-size:30px;background-color:magenta;padding: 15px
35px;margin: 5px 0;display: inline-block;"
href="academics.html">Academics</a></li>
<li><a style="font-size:30px;background-color:magenta;padding: 15px
35px;margin: 5px 0;display: inline-block;"
href="admission.html">Admission</a></li>
<li><a style="font-size:30px;background-color:magenta;padding: 15px
35px;margin: 5px 0;display: inline-block;"
href="gallery.html">Gallery</a></li>
</div></ul>
</nav>
<main>
<hr>
<h2 style="font-size:40px;text-align:center;background-
color:blue">ABOUT US</h2>

<p>Welcome to ABC College, a vibrant community of scholars, learners, and


achievers. Nestled in a serene and picturesque campus, our college is dedicated
to providing a world-class education that empowers students to succeed in their
chosen paths. With a rich legacy of academic excellence, innovative research,
and extracurricular activities, ABC College is the perfect launchpad for your
future. Join us and become a part of our dynamic and inclusive community that
shapes leaders, thinkers, and change-makers.</p>

<p><a href="index.html">Read More</a></p>


</main>
</body>
</html>
OUTPUT-

PAGE 2-

<!DOCTYPE html>
<html>
<head>
<title>College Website</title>
</head>
<body>
<header class="header">
<div style="text-align:center;margin-top:30px" >
<img style="width:15%"src="abc.jpg" alt="College Logo">
</div>
<h1 style="font-size:60px;text-align:center">ABC
COLLEGE</h1>
</header>
</nav>
<main>
<hr>
<h2 style="font-size:40px;text-align:center;background-
color:grey">ABOUT US</h2>

<p>Welcome to ABCCollege
Founded in [year], XYZ College stands as a beacon of academic excellence and
holistic development. Located in the heart of [City], our institution is dedicated
to providing a nurturing environment where students can excel academically,
grow personally, and contribute to society meaningfully.</p>

<p>XYZ College is affiliated with [University Name] and is proud to offer a


wide range of undergraduate and postgraduate programs across the Arts,
Sciences, and Commerce. Our curriculum is designed to foster critical thinking,
creativity, and a passion for lifelong learning. We believe in equipping our
students with the knowledge and skills necessary to navigate and succeed in an
ever-changing world.</p>

<p>Our faculty comprises distinguished scholars, researchers, and professionals


who bring a wealth of knowledge and experience to the classroom. They are
committed to mentoring and guiding students, ensuring that each individual
receives personalized attention and support. Our small class sizes and student-
centric approach promote an engaging and interactive learning
environment.</p>

<p>At XYZ College, we emphasize the importance of co-curricular and


extracurricular activities. Our students are encouraged to participate in various
clubs, societies, and sports teams, which help in developing leadership skills,
teamwork, and a sense of community. We also host numerous cultural,
technical, and social events throughout the year, providing students with
opportunities to showcase their talents and engage with peers from diverse
backgrounds.</p>

<p>Our state-of-the-art campus facilities include modern classrooms, well-


equipped laboratories, a comprehensive library, and dedicated spaces for
recreation and relaxation. We are also committed to sustainability and have
implemented various green initiatives to reduce our environmental
footprint.</p>

<p>XYZ College has a strong alumni network, with graduates who have
excelled in various fields, including academia, industry, public service, and the
arts. Our alumni continue to contribute to the college community, offering
mentorship and career guidance to current students.</p>

<p>We invite you to explore our website to learn more about our programs,
faculty, and campus life. Discover how XYZ College can be the catalyst for
your academic and personal growth. Join us in our mission to create a brighter,
more inclusive future.</p>
</main>
</body>
</html>
OUTPUT-

PAGE 3-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Academic Programs</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
}
.course-section {
display: flex;
justify-content: space-around;
margin: 20px;
}
.course-category {
flex: 1;
margin: 10px;
padding: 20px;
border-radius: 8px;
}
.course-category h3 {
text-align: center;
}
.course-category ul {
list-style: none;
padding: 0;
}
.course-category li {
margin: 10px 0;
font-size: 1.2em;
}
.course-category a {
text-decoration: none;
color: #fff;
display: block;
padding: 10px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.arts {
background-color: #FF5733;
font-family: 'Times New Roman', Times, serif;
}
.arts a:hover {
background-color: #E14D2A;
}
.commerce {
background-color: #28A745;
font-family: 'Courier New', Courier, monospace;
}
.commerce a:hover {
background-color: #218838;
}
.science {
background-color: #007BFF;
font-family: 'Verdana', Geneva, sans-serif;
}
.science a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<header>
<h1>Available Courses</h1>
</header>
<main class="course-section">
<div class="course-category arts">
<h3>Arts</h3>
<ul>
<li><a href="courses.html">Polytechnics</a></li>
<li><a href="courses.html">Journalism</a></li>
<li><a href="courses.html">Economics</a></li>
<li><a href="courses.html">English</a></li>
</ul>
</div>
<div class="course-category commerce">
<h3>Commerce</h3>
<ul>
<li><a href="courses.html">Business Administration</a></li>
<li><a href="courses.html">Marketing</a></li>
<li><a href="courses.html">Accounting</a></li>
<li><a href="courses.html">Finance</a></li>
</ul>
</div>
<div class="course-category science">
<h3>Science</h3>
<ul>
<li><a href="coursesCOMP.html">Computer Science</a></li>
<li><a href="courses.html">Mathematics</a></li>
<li><a href="courses.html">Physics</a></li>
<li><a href="courses.html">Chemistry</a></li>
</ul>
</div>
</main>
</body>
</html>

OUTPUT-
PAGE 4-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Course - Arts - 1</title>
<style>
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: #333;
}

body {
width: 80%;
margin: auto;
text-align: center;
justify-content: center;
background-color: #f9f9f9;
}

h2 {
padding: 30px;
font-size: 36px;
color: #2d2d2d;
}

p{
font-size: 18px;
margin-bottom: 20px;
}

a{
text-decoration: none;
color: #337ab7;
}

img {
width: 25%;
border-radius: 50%;
border: solid #ddd;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

h1 {
margin: 20px 0;
color: #444;
}

table {
width: 80%;
border-collapse: collapse;
margin: 0px auto 50px auto;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

thead {
background-color: #337ab7;
color: white;
}

thead th {
padding: 15px;
text-align: center;
}

tbody tr:hover {
background-color: #f5f5f5;
}
tbody td {
padding: 15px;
text-align: center;
border: 1px solid #ddd;
}

.border {
border: solid #ccc;
border-width: 5px;
padding: 30px;
margin-bottom: 20px;
background-color: #fff;
}

.name h3 {
font-size: 22px;
color: #333;
padding: 5px;
}

.name h4 {
font-size: 18px;
padding: 5px;
}

.links a {
color: #337ab7;
padding: 5px;
}

.short-bio {
padding: 5px;
}

.arts {
font-family: 'Times New Roman', Times, serif;
background-color: #FF5733;
}

.commerce {
font-family: 'Courier New', Courier, monospace;
background-color: #28A745;
}

.science {
font-family: 'Verdana', Geneva, sans-serif;
background-color: #007BFF;
}
</style>
</head>
<body>
<section class="course-description">
<h2>Course Description</h2>
<p>
"Explore the fascinating world of Computer Science and discover the
fundamentals of programming, algorithms, and computer systems. This
comprehensive course covers the basics of software development, data
structures, computer architecture, and software engineering. Through hands-on
coding exercises and real-world projects, you'll learn to analyze problems,
design solutions, and develop cutting-edge software applications. Whether
you're a beginner or an experienced programmer, this course will help you build
a strong foundation in computer science and prepare you for a career in this
exciting and rapidly evolving field."
</p>
</section>

<section class="teacher-info">
<h2>Teachers</h2>

<div class="border arts">


<img src="images/profile.jpg" alt="img">
<div class="name">
<h3>Dr. AC</h3>
<h3>Assistant Professor & HOD</h3>
<h4>Computer Science Department</h4>
<h4>MCA, M.Tech, PhD</h4>
<h4>Date of joining the college: 01-04-2014</h4>
</div>
<div class="links">
<a
href="mailto:abc.xyz.cs@gmail.com">abc.xyz.cs@gmail.com</a><br>
<a href="tel:+919876543210">+91-9876543210</a>
</div>
<div class="short-bio">
<p>
"Dr. AC is the Head of Department for Computer Science at
[College/University Name]. With a Ph.D. in Artificial Intelligence from a
prestigious university, Dr. AC has over a decade of experience in teaching and
research. Their expertise lies in machine learning, data science, and algorithm
design. They are passionate about fostering a supportive and inclusive learning
environment, promoting innovation, and guiding students to become industry-
ready professionals. Under their leadership, the Computer Science department
has flourished, with cutting-edge research initiatives and a strong industry
network."
</p>
</div>
</div>

<div class="border commerce">


<img src="images/profile.jpg" alt="img">
<div class="name">
<h3>PRQ</h3>
<h3>Assistant Professor</h3>
<h4>Computer Science Department</h4>
<h4>MCA, M.Tech, Pursuing PhD</h4>
<h4>Date of joining the college: 28-11-2016</h4>
</div>
<div class="links">
<a
href="mailto:abc.xyz.cs@gmail.com">abc.xyz.cs@gmail.com</a><br>
<a href="tel:+919876543210">+91-9876543210</a>
</div>
<div class="short-bio">
<p>
"Dr. PRQ is a lecturer in the Computer Science department at
[College/University Name], specializing in Data Analysis and Programming.
With a Ph.D. in Computer Science, Dr. PRQ has a strong background in
software development, data structures, and algorithm design. They are
renowned for their exceptional teaching skills, making complex concepts
accessible and engaging for students. Dr. PRQ's classes are always in high
demand, and their students praise their patience, guidance, and ability to inspire
growth. When not teaching, Dr. PRQ enjoys exploring new programming
languages and contributing to open-source projects."
</p>
</div>
</div>

<div class="border science">


<img src="images/profile.jpg" alt="img">
<div class="name">
<h3>Dr. SPC</h3>
<h3>Assistant Professor</h3>
<h4>Computer Science Department</h4>
<h4>B.Tech, ME, PhD</h4>
<h4>Date of joining the college: 12-08-2020</h4>
</div>
<div class="links">
<a
href="mailto:abc.xyz.cs@gmail.com">abc.xyz.cs@gmail.com</a><br>
<a href="tel:+919876543210">+91-9876543210</a>
</div>
<div class="short-bio">
<p>
"Dr. SPC is a renowned academic and researcher in the field of
Computer Science and Engineering. He holds a Bachelor's degree from West
Bengal University of Technology (WBUT), a Master's degree from Jadavpur
University, and a Ph.D. from Jadavpur University, India, obtained in 2008,
2011, and 2021, respectively. Dr. SPC has a distinguished teaching and research
background, having served as an Assistant Professor at the National Institute of
Science and Technology, India (2011-2014), and as a Junior Research Fellow at
Jadavpur University, India (2014-2015). His research expertise spans thermal
image processing, computational medical imaging, active contour, and texture
feature extraction."
</p>
</div>
</div>

<div class="border arts">


<img src="images/profile.jpg" alt="img">
<div class="name">
<h3>ABD</h3>
<h3>SACT</h3>
<h4>Computer Science Department</h4>
<h4>M.Sc., M.Tech, Pursuing PhD</h4>
<h4>Date of joining the college: 20-04-2001</h4>
</div>
<div class="links">
<a
href="mailto:abc.xyz.cs@gmail.com">abc.xyz.cs@gmail.com</a><br>
<a href="tel:+919876543210">+91-9876543210</a>
</div>
<div class="short-bio">
<p>
"Dr. ABD is a distinguished academic and researcher in the field of
Computer Science and Engineering. He holds a Bachelor's degree from XYZ
University, a Master's degree from ABC University, and a Ph.D. from DEF
University, obtained in 2005, 2009, and 2015, respectively. Dr. ABD has an
impressive teaching and research background, having served as a Lecturer at
GHI College (2009-2012), and as a Senior Research Fellow at JKL University
(2012-2015). His research interests include artificial intelligence, machine
learning, data mining, and computer vision. As a prolific author and co-author,
Dr. ABD has published numerous papers in top-tier international journals

and conferences, and has contributed to several book chapters in the areas of
Computer Science and Engineering. He is also a regular reviewer for several
high-impact journals and conferences, and has received multiple awards for his
contributions to the field."
</p>
</div>
</div>

<div class="border commerce">


<img src="images/profile.jpg" alt="img">
<div class="name">
<h3>BNT</h3>
<h3>SACT</h3>
<h4>Computer Science Department</h4>
<h4>M.Sc., M.Tech</h4>
<h4>Date of joining the college: 20-09-2014</h4>
</div>
<div class="links">
<a
href="mailto:abc.xyz.cs@gmail.com">abc.xyz.cs@gmail.com</a><br>
<a href="tel:+919876543210">+91-9876543210</a>
</div>
<div class="short-bio">
<p>
"Dr. BNT is a highly respected academic and researcher in the field
of Computer Science and Engineering. With a strong educational background
and a passion for innovation, Dr. BNT has made significant contributions to the
field of artificial intelligence and machine learning. Their research has been
published in top-tier international journals and conferences, and they have
supervised numerous student projects. Dr. BNT is dedicated to mentoring the
next generation of computer scientists and engineers, and is a beloved teacher
and mentor among their students."
</p>
</div>
</div>
</section>

<section class="time-table">
<h1>College Department Timetable</h1>
<table>
<thead>
<tr>
<th>Time</th>
<th>10:00 - 11:00 AM</th>
<th>11:00 - 12:00 AM</th>
<th>12:00 - 1:00 AM</th>
<th>1:00 - 2:00 PM</th>
<th>2:30 - 3:30 PM</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Data Structures</td>
<td>Networking</td>
<td>Microprocessor</td>
<td>Java</td>
<td>General</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Java</td>
<td>Algorithms</td>
<td>Info. Security</td>
<td>Data Structures</td>
<td>General</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Algorithms</td>
<td>Graphics</td>
<td>C++</td>
<td>Microprocessor</td>
<td>General</td>
</tr>
<tr>
<td>Thursday</td>
<td>Networking</td>
<td>Info. Security</td>
<td>Algorithms</td>
<td>Electronics</td>
<td>General</td>
</tr>
<tr>
<td>Friday</td>
<td>Data Structures</td>
<td>Java</td>
<td>Graphics</td>
<td>C++</td>
<td>General</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
OUTPUT-
PAGE 5-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admission Form</title>
<style>
body {
background-color: #f7f7f7;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
main {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 700px;
padding: 20px;
}
h2 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
fieldset {
border: none;
margin-bottom: 20px;
}
legend {
font-size: 1.2em;
margin-bottom: 10px;
color: #444;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input, select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
color: #333;
}
button {
width: 100%;
padding: 15px;
background-color: #337ab7;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #285e8e;
}
</style>
</head>
<body>
<main>
<h2>Admission Form</h2>
<form action="submit_admission.php" method="POST">
<!-- Personal Information -->
<fieldset>
<legend>Personal Information</legend>
<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="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone" required>
</fieldset>

<!-- Address Information -->


<fieldset>
<legend>Address Information</legend>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"
required></textarea>
<label for="city">City:</label>
<input type="text" id="city" name="city" required>

<label for="state">State:</label>
<input type="text" id="state" name="state" required>

<label for="zip">Zip Code:</label>


<input type="text" id="zip" name="zip" required>
</fieldset>

<!-- Academic Information -->


<fieldset>
<legend>Academic Information</legend>
<label for="last-school">Last School Attended:</label>
<input type="text" id="last-school" name="last_school" required>

<label for="board">Board of Education:</label>


<input type="text" id="board" name="board" required>

<label for="marks">Marks Obtained (%):</label>


<input type="number" id="marks" name="marks" step="0.01"
required>

<label for="department">Department:</label>
<select id="department" name="department" required>
<option value="arts">Arts</option>
<option value="science">Science</option>
<option value="commerce">Commerce</option>
</select>

<label for="course">Course:</label>
<input type="text" id="course" name="course" required>
</fieldset>

<!-- Submit Button -->


<button type="submit">Submit</button>
</form>
</main>
</body>
</html>

OUTPUT-
PAGE 6-
<!DOCTYPE html>
<html>
<head>
<title>College Gallery</title>
<style>
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
text-align: center;
margin: 20px 0;
}
.header img {
width: 100px;
border-radius: 50%;
}
.header h1 {
font-size: 50px;
color: #333;
}
h2 {
font-size: 40px;
text-align: center;
color: #555;
margin-bottom: 30px;
}
.gallery {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.gallery img {
width: 30%;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.gallery img:hover {
transform: scale(1.1);
box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<header class="header">
<img src="abc.jpg" alt="College Logo">
<h1>ABC COLLEGE</h1>
</header>
<h2>College Gallery</h2>
<div class="gallery">
<img src="college1.jpg" alt="College 1">
<img src="college2.jpg" alt="College 2">
<img src="college3.jpg" alt="College 3">
<img src="college4.jpg" alt="College 4">
<img src="college5.jpg" alt="College 5">
</div>
</body>
</html>
OUTPUT-
ASSIGNMENTS CC-8

ASSIGNMENT 2: Print the squares of the numbers 1 20. Each number should be on a
separate line, next to it the number 2 superscripted, an equal sign and the result. (Example:
102
= 100)

SOURCE CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 2</title>
<style>
*{
font-family: Arial, sans-serif;
font-size: 25px;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 90vh;
background: linear-gradient(to bottom, #ffc300, #000000);
box-shadow: 0 0 15px #000000;
border-radius: 15px;
color: #ffffff;
padding: 20px;
text-align: center;
}
.numbers {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="numbers">
<?php
for ($i = 1; $i <= 20; $i++) {
echo $i . "<sup>2</sup> = " . ($i * $i) . "<br>";
}
?>
</div>
</div>
</body>
</html>
OUTPUT-
ASSIGNMENT 3:

Write a script to store the above data into an array. Now display the content of that array.
Sort the list by the capital of the country

SOURCE CODE-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 3</title>
<style>
*{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 60vh;
height: 60vh;
background: linear-gradient(45deg, #34abcc, #000000);
border-radius: 15px;
box-shadow: 0 0 15px #000000;
color: #ffffff;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
th, td {
padding: 10px;
}
th {
border-bottom: 2px solid #ffffff;
}
</style>
</head>
<body>
<div class="container">
<?php
$arr = array(
'Italy' => 'Rome',
'Belgium' => 'Brussels',
'Denmark' => 'Copenhagen',
'Finland' => 'Helsinki',
'France' => 'Paris',
'Germany' => 'Berlin',
'Greece' => 'Athens',
'Netherlands' => 'Amsterdam',
'Portugal' => 'Lisbon',
'Spain' => 'Madrid'
);
asort($arr);
?>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<?php
foreach ($arr as $country => $capital) {
echo "<tr>";
echo "<td>$country</td>";
echo "<td>$capital</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>

OUTPUT-
ASSIGNMENT 4:

Write a script to store the elements given above into an array. Perform the following
operations:
• Get the first element of the above array.
• Insert a new item in any position.
• Delete last item.

SOURCE CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 4</title>
<style>
*{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100vh;
background-color: #f0f0f0;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 200px;
height: 90vh;
background: linear-gradient(#ff6a00, #ffffff, #039d41);
box-shadow: 0 0 15px #000000;
border-radius: 15px;
padding: 10px;
color: #2d2d2d;
text-align: center;
}
.array {
margin-bottom: 20px;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
}
.form input[type="number"],
.form input[type="text"] {
margin-bottom: 10px;
padding: 5px;
width: 80%;
border-radius: 5px;
border: 1px solid #000000;
}
.form input[type="submit"] {
padding: 5px 10px;
border-radius: 5px;
border: none;
background-color: #039d41;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box array">
<?php
$arr = array('5' => 'yellow', '14' => 'blue', '3' => 'green', '22' => 'white');
foreach ($arr as $key => $value) {
echo "$key => $value<br>";
}
?>
</div>
<div class="box first">
<?php
echo "The first element of the above array:<br>";
foreach ($arr as $key => $value) {
echo "$key => $value<br>";
break;
}
?>
</div>
<div class="box second">
<form class="form" action="" method="post">
<label for="a">Enter the position:</label>
<input type="number" id="a" name="pos" required>
<label for="b">Enter the key:</label>
<input type="number" id="b" name="key" required>
<label for="c">Enter the value:</label>
<input type="text" id="c" name="value" required>
<input type="submit" value="Submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$pos = $_POST['pos'];
$key = $_POST['key'];
$value = $_POST['value'];

$start = array_slice($arr, 0, $pos, true);


$end = array_slice($arr, $pos, null, true);

$arr = $start + array($key => $value) + $end;

foreach ($arr as $key => $value) {


echo "<br>$key => $value<br>";
}
}
?>
</div>
<div class="box third">
<?php
$lastKey = array_key_last($arr);
unset($arr[$lastKey]);
foreach ($arr as $key => $value) {
echo "<br>$key => $value<br>";
}
?>
</div>
</body>
</html>

OUTPUT-
A.

B.
C.

D.
ASSIGNMENT 5: Create a login form using HTML. On clicking submit the login page will
redirected to another page that will check if the user is valid or not. If valid then print a
welcome message
and current date.

SOURCE CODE-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 5</title>
<style>
*{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #2c2c2c;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 360px;
height: 300px;
background: linear-gradient(#ff6a00, #ffffff, #039d41);
font-size: 24px;
padding: 20px;
box-shadow: 0 0 30px #000000;
border-radius: 15px;
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #ffffff;
}
.form-group {
margin-bottom: 20px;
text-align: center;
}
.form-group label {
display: inline-block;
width: 100px;
}
.form-group input {
padding: 5px;
border-radius: 5px;
border: 1px solid #2c2c2c;
width: 200px;
}
.form-group input:hover {
background-color: #dddddd;
transition: 0.3s;
}
.button {
text-align: center;
}
.button input {
padding: 10px 20px;
margin-top: 20px;
background: #ffffff;
border: solid #2c2c2c;
cursor: pointer;
}
.button input:hover {
background-color: #dddddd;
transition: 0.3s;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="ass5.php" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" required>
</div>
<div class="button">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
<?php

$user=$_POST["name"];
$password = $_POST["pass"];
if($user == "Abhay" && $password == "123"){
valid($user,$password);
}
else{
echo "Invalid Username or Password";
}

function valid($user,$password){

echo "<center><b>-WELCOME- </b></center>";


echo "<center>".$user."<br></center>";
$date= date('d/m/Y');
echo "<center>".$date."</center>";
}
?>

OUTPUT-
A.

B.

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