Scribd
Upload
9 views

WEB[1]

The document is an assignment for a Bachelor of Engineering in Computer Science and Engineering at Visvesvaraya Technological University, where the student Shristi is tasked with creating a multi-page website featuring a resume and bio-data using HTML, CSS, and JavaScript. The assignment includes detailed HTML code for the website structure, styling with CSS, and sections such as Home, Portfolio, About, Services, and Contact. Additionally, it emphasizes the importance of hosting the website on a cloud platform.

Uploaded by

muskaanthakur081
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
9 views

WEB[1]

The document is an assignment for a Bachelor of Engineering in Computer Science and Engineering at Visvesvaraya Technological University, where the student Shristi is tasked with creating a multi-page website featuring a resume and bio-data using HTML, CSS, and JavaScript. The assignment includes detailed HTML code for the website structure, styling with CSS, and sections such as Home, Portfolio, About, Services, and Contact. Additionally, it emphasizes the importance of hosting the website on a cloud platform.

Uploaded by

muskaanthakur081
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/ 26

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

"Jnana Sangama", Belgavi-590 018, Karnataka, India

“Web Technology Assignment”


Submitted in Partial Fulfilment of the requirement for the 5th semester in

BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE AND ENGINEERING

Submitted By
SHRISTI (1MV22CS153)

Under the guidance of


Ms. Chandana K R
Asst. Professor
Dept. Of CSE, SIR MVIT

SIR M. VISVESVARAYA INSTITUTE OF TECHNOLOGY


DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
BENGALURU-562157
2024-2025
Assignment -1

Construct a Website (multiple Web pages) containing ‘Resume’ and Bio -


data by using relevant HTML elements and appropriate styling for
presentation with CSS/jQuery/JavaScript. Host the Website on a cloud
platform.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8"> <meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet"
href=
"styles.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>

<body>
<!-- Navbar header section -->
<header class="header">
<nav class="navbar">
<div class="logo">
<h2 class="logo-heading">Shristi</h2>
</div>
<div class="hamburger" id="hamburger">
<i class="fas fa-bars hamburger-icon"></i>
<i class="fas fa-times cross-icon"></i>
</div>
<div class="menu">
<ul class="menu-list">
<li class="menu-list-items">
<a class="links" href="#home">
Home
</a>
</li>
<li class="menu-list-items">

1|Page
<a class="links" href="#portfolio">
Portfolio
</a>
</li>
<li class="menu-list-items">
<a class="links" href="#about">
About
</a>
</li>
<li class="menu-list-items">
<a class="links" href="#services">
Services
</a>
</li>
<li class="menu-list-items">
<a class="links" href="#contact">
Contact Me
</a>
</li>
</ul>
</div>
</nav>
</header>

<!-- Main hero banner -->


<section id="home" class="hero">
<div class="intro">
<div class="headings">
<h3 class="greet-heading">Hello, I'm</h3>
<h1 class="my-heading">Shristi</h1>
<h4 class="sub-heading">
Computer Science Engineering Student At Sir M Visvesvaraya Institute of
Technology Banglore
</h4>
</div>
<div class="intro-buttons">
<a class="links" href="#contact"> <button class="btn common-btn">Hire
Me</button>

<a href="resume.html" <button class="btn ghost-btn">Get Resume</button></a>


</div>
</div>
</section>

2|Page
<!-- Portfolio Section -->
<section class="portfolio" id="portfolio">
<div class="portfolio-heading">
<h1 class="my-heading text-center">Featured Portfolio</h1>
</div>
<div class="portfolio-content">
<div class="my-row">
<div class="my-col">
<div class="my-card port-card">
<div class="image">
<img src="./Images/designImage2.avif"
alt="Web Design Image">
</div>
<h3 class="greet-heading blue-text">Web Design</h3>
<p class="small-para blue-text">Designing</p>
</div>
</div>
<div class="my-col">
<div class="my-card port-card">
<div class="image">
<img src="./Images/webDevelopment2.avif"
alt="Web Development Image">
</div>
<h3 class="greet-heading blue-text">
Web Development
</h3>
<p class="small-para blue-text">Development</p>
</div>
</div>
<div class="my-col">
<div class="my-card port-card">
<div class="image">

</div>
</div>
</div>
</div>
</section>

<!-- About Section -->


<section id="about" class="about">
<div class="about-text">

3|Page
<h1 class="my-heading">About Me</h1>
<p class="lead-para">
I am a Computer Science undergraduate passionate about technology and
innovation. As a tech enthusiast, I enjoy exploring new tools, programming languages, and
emerging technologies to solve real-world problems. My journey in computer science has
been driven by a constant desire to learn, create, and contribute to impactful projects.
</p>
<p>

I am particularly interested in Web development and I thrive on collaborative environments


that foster creativity and knowledge sharing. Currently, I am honing my skills in HTML , CSS,
C, Javascript and Java while actively working on projects that challenge my technical and
problem-solving abilities.
</p>
</div>
<div class="about-image">
<img src="./Images/heroImg2.avif" alt="About Image">
</div>
</section>

<!-- Services Section -->


<section class="services" id="services">
<div class="services-heading">
<h1 class="my-heading text-center">My Services</h1>
</div>
<div class="services-content">
<div class="my-row">
<div class="my-col">
<div class="my-card">
<div class="icon">
<i class="fas fa-paint-brush"></i>
</div>
<h3 class="greet-heading blue-text">Web Design</h3>
<p class="small-para">
Web development refers to the creating,
building, and maintaining of websites. It includes
aspects such as web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet i.e.
websites.
</p>
</div>

4|Page
</div>
<div class="my-col">
<div class="my-card">
<div class="icon">
<i class="fa-solid fa-code"></i>
</div>
<h3 class="greet-heading blue-text">
Web Development
</h3>
<p class="small-para">
Web development refers to the creating,
building, and maintaining of websites. It includes
aspects such as web design, web publishing,
web programming, and database management.
It is the creation of an
application that works over the internet
i.e. websites.
</p>
</div>
<div class="my-col">
</div>
</div>

</section>

<!-- Contact me section -->


<section class="contact" id="contact">
<div class="contact-heading">
<h1 class="my-heading text-center">Contact Me</h1>
</div>
<div class="contact-content">
<div class="contact-form-container">
<h1 class="greet-heading">Get In Touch</h1>
<form class="contact-form">
<input class="form-controls" type="text"
placeholder="Your Name"> <input class="form-controls"
type="text" placeholder="Your Email">
<input class="form-controls" type="text"
placeholder="Your Phone"> <textarea
class="form-controls" placeholder="Write
your message" name="message" id=""
cols="30"
rows="10">

5|Page
</textarea>
<input class="form-btn btn common-btn" type="submit"
value="Send Message">
</form>
</div>
<div class="contact-details">
<h1 class="greet-heading">My Contact Details</h1>
<div class="details">
<h5 class="contact-heading">EMAIL</h5>
<p class="contact-text">[email protected]</p>
</div>
<div class="details">
<h5 class="contact-heading">PHONE</h5>
<p class="contact-text">+91 8722512749</p>
</div>

<div class="details">
<h5 class="contact-heading">ADDRESS</h5>
<p class="contact-text">Banglore, Karnataka</p>
<p>India</p>

</div>
</div>
</div>
</section>

<!-- Footer section -->


<footer class="footer">
<div class="footer-content text-center">
<h4>
Copyright © 2024 All rights reserved
</h4>
<div class="social-links">
<div class="footer-menu">
<ul class="footer-menu-list">
<li class="footer-list-items">
<a class="footer-links" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="footer-list-items">
<a class="footer-links" href="#">
<i class="fab fa-twitter"></i>

6|Page
</a>
</li>
<li class="footer-list-items">
<a class="footer-links" href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="footer-list-items">
<a class="footer-links" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity=
"sha512-
uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHe
p+d/lrGqrbPIDQ=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="script.js"></script>
</body>

</html>

styles.css
/* Styles defined for the desktop or the bigger screen devices*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body { margin: 0;
padding: 0; box-sizing:
border-box;
font-family: 'Poppins', sans-serif;
}

/* Header Navbar Styles */

7|Page
.navbar { display: flex; alignitems:
center; justify-content:
space-between;
position: fixed;
top: 0;
width: 100%; background-image: linear-gradient(90deg, #74D7BB,
#53C8B6, #35A99C);
background-color: transparent;
}

.logo {
padding: 0 5rem;
}

.logo .logo-heading {
color: #fff;
}

.menu {
padding: 0 5rem;
}

.hamburger {
display: none;
color: #fff; font-size:
25px;
}

.cross-icon { display:
none;
}

.menu .menu-list { display:


flex; list-style:
none;
}

.menu-list .menu-list-items {
padding: 0.5rem 1rem;
}

@media screen and (min-width: 856px) and (max-width: 1024px) {


.menu-list .menu-list-items {

8|Page
padding: 0.5rem 0.3rem;
}
}

/* Main Hero Section Styles */


.hero { background-image:
url('./Images/heroImg3.avif'); background-
repeat: no-repeat; background-size:
100% 100%;
width: 100%;
height: 100vh; display:
flex; alignitems:
center; justifycontent:
start;
margin: 4.8rem 0;
}

.hero .intro { textalign:


center;
margin: 0 5rem;
}

.hero .intro-buttons { margin:


2rem 0; display: flex; alignitems:
center; justify-content:
space-evenly; }

/* About section styles */


.about { display:
flex;
align-items: center; background-image: linear-
gradient(45deg, #363D73, #2794B3);
justify-content: space-between;
width: 100%;
}

.about .about-text { width:


450px;
color: #fff;
padding: 5rem 1rem 5rem 5rem;
}

9|Page
.about .about-image img {
height: 400px; width: 450px;
padding: 5rem 5rem 5rem 1rem;
}

/* Portfolio section styles */


.portfolio {
margin: 4.8rem 0;
padding: 0 5rem;
}

.port-card { padding: 0
!important; background: none
!important; border: 2px solid
#000;
}

.port-card .image {
width: 100%;
}

.port-card .image img { height: 200px;


width: 100%; border-top-right-
radius: 20px;
border-top-left-radius: 20px;
}

/* Services section styles */


.services { display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 4.8rem 0;
padding: 0
5rem;
}

.my-row { display: flex;


align-items: center; justify-
content: spacebetween;
margin: 2rem 0;
}

10 | P a g e
.my-row .my-col { textalign:
center;
width: 30%;
}

.my-card { text-align: center; display: flex; flex-direction:


column; align-items: center; justify-content: center; border-
radius: 20px; background-image: linear-gradient(#74D7BB,
#53C8B6, #35A99C); padding: 1rem;
}

.icon { height:
100px; width: 100px;
borderradius: 50%;
background-color: #363D73;
display: flex; align-
items: center;
justify-content: center;
}

.icon svg { fontsize:


30px; color:
#fff;
}

/* Contact section styles */


.contact { padding: 0
5rem;
}

.contact-content { display:
flex; margin:
3rem 0; justify-content: space-
between;
}

.contact-form-container {
width: 50%;
}

.contact-form { display:
flex; flexdirection:
column;

11 | P a g e
}

.contact-form .form-controls {
width: 80%; padding: 10px
0; margin: 1.67rem 0;
}

.contact-form .form-btn {
width: 83%;
}

.contact-details {
width: 50%;
}

/* Footer Styles */ .footer {


background-color: #000;
color: #fff;
padding: 2rem;
}

.footer-list-items {
display: flex;
alignitems: center;
justifycontent: center;
height: 50px; width:
50px; margin: 1rem 1rem 0 1rem; border-
radius:
50%; background-color:
#53C8B6;
}

.footer-links { fontsize:
24px;
color: #fff; textdecoration:
none;
}

.social-links { display:
flex; alignitems:
center;
justify-content: center;
}

12 | P a g e
.footer-menu {
padding: 0 5rem;
}

.footer-menu .footer-menu-list {
display: flex; list-style: none;
}

/* utility classes */ .greetheading


{ font-size:
1.3rem; font-weight: lighter;
margin: 0;
letter-spacing: 1px;
}

.my-heading { fontsize:
2.5rem; margin:
0;
}

.sub-heading {
margin: 0; font-size:
0.8rem; color: #ccc;
font-weight: lighter;
}

.links:hover { border-bottom:
2px solid #fff;
}

.links {
border-bottom: 2px solid transparent; transition:
all 0.25s; padding: 5px;
text-decoration: none; color: #fff;
}

.btn { padding: 10px


20px; borderradius:
5px; cursor: pointer;
letterspacing: 1px;
border: none;
}

13 | P a g e
.common-btn { backgroundcolor:
#35A99C;
color: #fff; border: 2px
solid #35A99C;
transition: all 0.25s;
}

.common-btn:hover {
background-color: #fff;
color: #35A99C; border: 2px
solid #35A99C;
outline: none;
}

.ghost-btn { backgroundcolor:
#fff; color: #35A99C;
border: 2px solid #35A99C;
outline: none;
}

.ghost-btn:hover { background-color:
#35A99C; color: #fff; transition: all
0.25s; border: 2px solid
#35A99C;
}

.heading-span { fontweight:
bolder;
}

.text-center { textalign:
center;
}

.small-para { fontsize:
14px; color:
#fff;
}

.white-text { color:
#fff;
}

14 | P a g e
.blue-text {
color: #363D73;
}
const hamburger = document.getElementById('hamburger'); const
menu = document.querySelector('.menu');

hamburger.addEventListener('click', function () { const


hamIcon = this.querySelector('.hamburger-icon'); const
crossIcon = this.querySelector('.cross-icon'); if
(hamIcon.style.display === "none") {
hamIcon.style.display = "inline-block" menu.style.display
= "none"
crossIcon.style.display = "none"
} else { crossIcon.style.display =
"inline-block"
hamIcon.style.display = "none"
menu.style.display = "block"
}
});

script.js

const hamburger = document.getElementById('hamburger'); const menu =


document.querySelector('.menu');

hamburger.addEventListener('click', function () { const


hamIcon = this.querySelector('.hamburger-icon'); const crossIcon
= this.querySelector('.cross-icon'); if
(hamIcon.style.display === "none") {
hamIcon.style.display = "inline-block" menu.style.display
= "none"
crossIcon.style.display = "none"
}
else {
crossIcon.style.display = "inline-block"
hamIcon.style.display = "none"
menu.style.display = "block"
}
});

15 | P a g e
resume.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>

</head>
<body>

<h1><B>RESUME</B></h1>
<img src="PH.jpg" alt="Shristi" style="width: 80px;">
<h2> Shristi</h2>
<h3>Professional Summary
</h3>

<p>Seeking internship opportunity to get Updated myself and get Hired where I
can apply and <br>further Strengthened my skills in computer science while
contributing positively to the team.</p>
<p><b>Dedicated Computer Science Student with a Drive for Excellence</p>
<h2>Education</h2>
<table border="">
<tr>
<th>Course</th>
<th>Institution</th>
<th>University</th>
<th>Year</th>
<th>Result</th>
</tr>
<tr>
<th>BE</th>
<th>Sir M Visvesvaraya Institute Of Technology Banglore </th>
<th>VTU Belgavi</th>
<th>June 2026</th>
<th>8.5</th>

</tr>
<tr>
<th>12th</th>
<th>Holy Cross School Darbhanga</th>

16 | P a g e
<th>CBSE New Delhi </th>
<th>2022</th>
<th>89%</th>
</tr>
<tr>
<th>10th</th>
<th>Holy Cross School Darbhanga</th>
<th>CBSE , New Delhi</th>
<th>2020</th>
<th>90%</th> </tr>
</table>

<h2>Skills</h2>
* Time Management <BR>
* Problem Solving <br>
* Friendly, Positive Attitude <br>
* Teamwork and Collaboration <br> 0
<H2> Projects</H2>
<p> Implemented a Program for Enhancing Banking Profitability and Customer
Satisfaction through Credit Card Distribution Strategy. <br>
</p>

<p>Website Designed using Canva Advise of Scholarship for Students. <br>

</p>
<h2>Contact Details</h2>
<p>LinkedIn URL: https://www.linkedin.com/in/shristi-u7-34t </p>
<p>Email [email protected]</p>
<p>Phone Number : +91 8722512848</p>
</body>
</html>

17 | P a g e
Output :

18 | P a g e
19 | P a g e
20 | P a g e
Assignment-2

Build a Web application with HTML, CSS, JavaScript, jQuery and PHP for
online application/registration form. Form should accept the information
and print/display on a browser with formatting/styling upon submission
(Button click) on success. Host the application on a cloud platform.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Registration Form</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="form-container">
<h2>Online Registration Form</h2>
<form id="registrationForm" method="POST" action="process.php">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br>

<label for="email">Email Address:</label>


<input type="email" id="email" name="email" required><br>

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


<input type="text" id="phone" name="phone" required><br>

<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea><br>

<button type="submit">Submit</button>
</form>

<div id="result"></div>
</div>

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

21 | P a g e
</body>
</html>

styles.css

/* styles.css */

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4; display:
flex; justify-content: center;
align-items: center;
height: 100vh; margin: 0;
}

.form-container { background: #fff;


padding: 20px; border-radius: 8px;
boxshadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
width: 300px; text-align: center;
}

h2 {
margin-bottom: 20px;
}

form {
display: flex;
flex-direction: column;
}

input, textarea {
margin: 10px 0;
padding: 10px; border:
1px solid #ccc;
border-radius: 4px;
}

button { background-color:
#4CAF50; color: white;
padding: 10px; border: none;
border-radius: 4px;
cursor: pointer;
}

22 | P a g e
button:hover { background-
color: #45a049; }

#result { margin-top: 20px;


padding: 10px; background-color:
#f1f1f1;
border: 1px solid #ddd;
}

script.js

// script.js

$(document).ready(function() {
$('#registrationForm').on('submit', function(event) {
event.preventDefault(); // Prevent the default form submission

// Collect form data var


formData = $(this).serialize();

// Send form data to process.php using AJAX


$.ajax({ url:
'process.php', type:
'POST', data: formData,
success: function(response) {
$('#result').html(response); // Display the result from process.php
$('#registrationForm')[0].reset(); // Reset the form
},
error: function() {
$('#result').html('There was an error processing the form.');
}
});
});
});

23 | P a g e
process.php

<?php
// process.php

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Collect form data
$name = htmlspecialchars($_POST['name']); $email =
htmlspecialchars($_POST['email']);
$phone = htmlspecialchars($_POST['phone']);
$message = htmlspecialchars($_POST['message']);

// Display the submitted data echo "<h3>Registration


Successful!</h3>"; echo "<p><strong>Name:</strong>
$name</p>"; echo "<p><strong>Email:</strong> $email</p>";
echo "<p><strong>Phone:</strong> $phone</p>"; echo
"<p><strong>Message:</strong> $message</p>";
} else {
echo "Invalid request.";
}
?>

24 | P a g e
Output:

25 | P a g e

You might also like