Scribd
Upload
36 views10 pages

221FJ01010 WAD T-5 Assignment

wad

Uploaded by

kalyanipenumudi70
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
36 views10 pages

221FJ01010 WAD T-5 Assignment

wad

Uploaded by

kalyanipenumudi70
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/ 10

Web Application Development

T-5 Assignment
Name : Suraj Kumar Singh Registration No –
221FJ01071
Question 1

Create your own portfolio with the help of html CSS and Js

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

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<script

src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js"
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>

<style>
.img{
width: 20rem;
height: 20rem;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#"
><strong
><span class="text-primary">Su</span
><span class="text-danger">raj</span></strong
></a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Intro</a
>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Education</a
>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Skills</a
>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>About Me</a
>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container d-flex m-5 justify-content-around align-items-
center">
<div class="part1">
<div class="h1"><strong>Hey Everyone !!</strong></div>
<div class="h3 text-primary">
<strong>
My Name is Suraj Singh<br />
I am Pursuing BCA <br />
for Vignan University
</strong>
</div>
</div>
<div class="part2">
<img

src="suraj.jpg"
alt=""
class="rounded-circle img"
/>
</div>
</div>
<div class="container pt-5 mb-5">
<div class="h1 text-center text-danger font-weight-bold pb-4 mt-5 mb-5">
<strong>My Education</strong>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Course</th>
<th scope="col">College</th>
<th scope="col">Year</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">High School</th>
<td>R.S.High School Mahdalichak</td>
<td>2019</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Intermediate</th>
<td>P.R. Collage Sonpur</td>
<td>2022</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Graduation</th>
<td>Vignan University</td>
<td>2025</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>

<div class="container mt-5">


<div class="h1 text-center text-danger mt-5">
<strong>My Skills</strong>
</div>
<div
class="container d-flex justify-content-around align-items-center m-5"
>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-2 col-lg-1">
<span class="d-block-inline p-4 h4 fw-bold">C</span>
</div>

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


<div class="progress">
<div
class="progress-bar progress-bar-striped"
role="progressbar"
style="width: 50%"
aria-valuenow="10"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>

<div class="row p-2">


<div class="col-md-2 col-lg-1">
<span class="d-block-inline p-4 h5 fw-bold">Js</span>
</div>

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


<div class="progress">
<div
class="progress-bar progress-bar-striped bg-success"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-2 col-lg-1">
<span class="d-block-inline p-1 h5 fw-bold">DSA</span>
</div>

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


<div class="progress">
<div
class="progress-bar progress-bar-striped bg-warning"
role="progressbar"
style="width: 75%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>
</div>

<div class="container mt-5 mb-5">


<div class="row">
<div class="col-md-2 col-lg-1">
<span class="d-block-inline h4 fw-bold">C++</span>
</div>

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


<div class="progress">
<div
class="progress-bar progress-bar-striped"
role="progressbar"
style="width: 10%"
aria-valuenow="10"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>

<div class="row p-2">


<div class="col-md-2 col-lg-1 p-1">
<span class="d-block-inline h5 fw-bold">Node</span>
</div>

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


<div class="progress">
<div
class="progress-bar progress-bar-striped bg-success"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-2 col-lg-1">
<span class="d-block-inline p-1 h5 fw-bold">Java</span>
</div>

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


<div class="progress">
<div
class="progress-bar progress-bar-striped bg-warning"
role="progressbar"
style="width: 75%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</div>
</div>
</div>

<div class="h1 text-center text-danger m-5">


<strong>About Me</strong>
</div>

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


<div style="margin-left: 12rem" class="part2">
<img

src="suraj.jpg"
alt=""
class="rounded-circle img"
/>
</div>

<div class="part1 p-5 ml-5">


<div class="h6 w-75">
Hello Everyone! <br> This is Suraj Kumar Singh currently pursuing
a Bachelor of
Computer Applications (BCA) degree BCA from VFSTR . I am looking
for an opportunity to utilize and expand my experience and
education. I have has strong academic qualifications, including a
Grade A+
in 10th standard examination and a Grade A in 12th standard
examination. I am proficient in MS Office suite (Excel,
PowerPoint,
Word) and has participated in various technical and sports events
during my academic career.I have possesses a range of computer
skills, including
programming languages (Python, C), operating systems (Windows XP,
Linux), and web designing (HTML, CSS, JavaScript). I also
developed a music player website using these skills. In addition
to
my technical skills, highlights his strong personal
qualities, including leadership, problem-solving and decision-
making
abilities, initiative, hard work, positivity, and dependability. I
am fluent in Hindi, English, and Bhojpuri.
</div>
</div>
</div>

<div class="container w-50 shadow-lg mt-5 p-4">


<div class="h1 text-center text-danger">
<strong>Connect With Me</strong>
</div>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Your Name</label>
<input
type="email"
class="form-control"
id="exampleFormControlInput1"
placeholder="Enter your name"
/>
</div>

<div class="form-group">
<label for="exampleFormControlInput1">Your Email</label>
<input
type="email"
class="form-control"
id="exampleFormControlInput1"
placeholder="Enter your email"
/>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1"></label>
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
>
Ask your question</textarea
>
</div>
<div class="text-center">
<button class="btn btn-danger m-4" type="submit">Submit</button>
</div>
</form>
</div>
</div>

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


<div class="h5 text-center p-2">About Me | Contact</div>
<div class="5 text-center p-1">© 2024 www.Suraj.in</div>
</div>
</body>
</html>

Output :-

You might also like