Continuous Assessment Test 2 CAP756: Web Technology: Explain What Ah

Explain what ah
-------------------------------------------------------------------------------------
Continuous Assessment Test 2

CAP756: Web technology
-------------------------------------------------------------------------
Submitted by:- Submitted to:-

Name :- KUMARI SHIVANI Syed aafaq aalam
Reg no :- 12103495 (27362)
Roll no :- RD2111A35
Design a webpage to create a web CV using bootstrap and JavaScript
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHIVANI CV</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href="css/aos.css?ver=1.1.0" rel="stylesheet">
<link href="css/bootstrap.min.css?ver=1.1.0" rel="stylesheet">
<link href="css/main.css?ver=1.1.0" rel="stylesheet">
<noscript>
<style type="text/css">
[data-aos] {
opacity: 1 !important;
transform: translate(0) scale(1) !important;
}
</style>
</noscript>
</head>
<body id="top">
<header>
<div class="profile-page sidebar-collapse">
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent bg-primary" color-on-scroll="400">
<div class="container">
<div class="navbar-translate"><a class="navbar-brand" href="#" rel="tooltip"><h3>SHIVANI CV</h3></a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-
controls="navigation" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-bar bar1"></span><span
class="navbar-toggler-bar bar2"></span><span class="navbar-toggler-bar bar3"></span></button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link smooth-scroll" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link smooth-scroll" href="#skill">Skills</a></li>
<li class="nav-item"><a class="nav-link smooth-scroll" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link smooth-scroll" href="#experience">Experience</a></li>
<li class="nav-item"><a class="nav-link smooth-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div class="page-content">
<div>
<div class="profile-page">
<div class="wrapper">
<div class="page-header page-header-small" filter-color="green">
<div class="page-header-image" data-parallax="true" style="background-image: url('images/cc-bg-1.jpg')"></div>
<div class="content-center">
<div class="cc-profile-image"><a href="#"><img src="images/Shivani.JPG" alt="Image"/></a></div>
<div class="h2 title">KUMARI SHIVANI</div>
<p class="category text-white">Web Developer, Graphic Designer, Photographer</p><a class="btn btn-primary smooth-
scroll mr-2" href="#contact" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">Hire Me</a><a class="btn btn-primary" href="#"
data-aos="zoom-in" data-aos-anchor="data-aos-anchor">Download CV</a>
</div>
</div>
<div class="section">
<div class="button-container"><a class="btn btn-default btn-round btn-lg btn-icon" href="#" rel="tooltip"
title="Follow me on Facebook"><i class="fa fa-facebook"></i></a><a class="btn btn-default btn-round btn-lg btn-icon" href="#"
rel="tooltip" title="Follow me on Twitter"><i class="fa fa-twitter"></i></a><a class="btn btn-default btn-round btn-lg btn-icon"
href="#" rel="tooltip" title="Follow me on Google+"><i class="fa fa-google-plus"></i></a><a class="btn btn-default btn-round
btn-lg btn-icon" href="#" rel="tooltip" title="Follow me on Instagram"><i class="fa fa-instagram"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="about">
<div class="card" data-aos="fade-up" data-aos-offset="10">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="card-body">
<div class="h4 mt-0 title">About</div>
<p>Hello! I am KUMARI SHIVANI. Web Developer, Graphic Designer and Photographer.</p>
<p>SARVESH CV is a HTML resume template for professionals. Built with Bootstrap 4, Now UI Kit and FontAwesome, this
modern and responsive design template is perfect to showcase your portfolio, skills and experience. <a
href="https://templateflip.com/templates/creative-cv/" target="_blank">Learn More</a></p>
</div>
</div>
<div class="h4 mt-0 title">Basic Information</div>
<div class="row">
<div class="col-sm-4"><strong class="text-uppercase">Age:</strong></div>
<div class="col-sm-8">23</div>
</div>
<div class="row mt-3">
<div class="col-sm-4"><strong class="text-uppercase">Email:</strong></div>
<div class="col-sm-8">shivaniyadav4972@gmail.com</div>
</div>
<div class="col-sm-4"><strong class="text-uppercase">Phone:</strong></div>
<div class="col-sm-8">+91-6287389750</div>
</div>
<div class="col-sm-4"><strong class="text-uppercase">Address:</strong></div>
<div class="col-sm-8">jalandhar punjab(144401) INDIA</div>
</div>
<div class="col-sm-4"><strong class="text-uppercase">Language:</strong></div>
<div class="col-sm-8">English, HINDI</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="skill">
<div class="h4 text-center mb-4 title">Professional Skills</div>
<div class="card" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<div class="row">
<div class="col-md-6">
<div class="progress-container progress-primary"><span class="progress-badge">HTML5</span>
<div class="progress">
<div class="progress-bar progress-bar-primary" data-aos="progress-full" data-aos-offset="10" data-aos-
duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div><span
class="progress-value">100%</span>
</div>
</div>
</div>
<div class="progress-container progress-primary"><span class="progress-badge">CSS</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="progress-container progress-primary"><span class="progress-badge">JavaScript</span>
</div>
</div>
</div>
<div class="progress-container progress-primary"><span class="progress-badge">Python</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="progress-container progress-primary"><span class="progress-badge">Bootstrap</span>
</div>
</div>
</div>
<div class="progress-container progress-primary"><span class="progress-badge">Photoshop</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="portfolio">
<div class="row">
<div class="col-md-6 ml-auto mr-auto">
<div class="h4 text-center mb-4 title">Portfolio</div>
<div class="nav-align-center">
<ul class="nav nav-pills nav-pills-primary" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#web-development" role="tablist"><i
class="fa fa-laptop" aria-hidden="true"></i></a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#graphic-design" role="tablist"><i class="fa fa-
picture-o" aria-hidden="true"></i></a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#Photography" role="tablist"><i class="fa fa-
camera" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content gallery mt-5">
<div class="tab-pane active" id="web-development">
<div class="ml-auto mr-auto">
<div class="row">
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a href="#web-
development">
<figure class="cc-effect"><img src="images/project-1.jpg" alt="Image"/>
<figcaption>
<div class="h4">Recent Project</div>
<p>Web Development</p>
</figcaption>
</figure></a></div>
development">
<figcaption>
<div class="h4">Startup Project</div>
</figcaption>
</figure></a></div>
</div>
development">
<figcaption>
<div class="h4">Food Order Project</div>
</figcaption>
</figure></a></div>
development">
<figcaption>
<div class="h4">Web Advertising Project</div>
</figcaption>
</figure></a></div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="graphic-design" role="tabpanel">
<div class="row">
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a
href="#graphic-design">
<figure class="cc-effect"><img src="images/graphic-design-1.jpg" alt="Image"/>
<figcaption>
<div class="h4">Triangle Pattern</div>
<p>Graphic Design</p>
</figcaption>
</figure></a></div>
<figcaption>
<div class="h4">Abstract Umbrella</div>
</figcaption>
</figure></a></div>
</div>
<figcaption>
<div class="h4">Cube Surface Texture</div>
</figcaption>
</figure></a></div>
<figcaption>
<div class="h4">Abstract Line</div>
</figcaption>
</figure></a></div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Photography" role="tabpanel">
<div class="row">
href="#Photography">
<figure class="cc-effect"><img src="images/photography-1.jpg" alt="Image"/>
<figcaption>
<div class="h4">Photoshoot</div>
<p>Photography</p>
</figcaption>
</figure></a></div>
<figcaption>
<div class="h4">Wedding Photoshoot</div>
<p>Photography</p>
</figcaption>
</figure></a></div>
</div>
<figcaption>
<div class="h4">Beach Photoshoot</div>
<p>Photography</p>
</figcaption>
</figure></a></div>
<figcaption>
<div class="h4">Nature Photoshoot</div>
<p>Photography</p>
</figcaption>
</figure></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="experience">
<div class="container cc-experience">
<div class="h4 text-center mb-4 title">Work Experience</div>
<div class="card">
<div class="row">
<div class="col-md-3 bg-primary" data-aos="fade-right" data-aos-offset="50" data-aos-duration="500">
<div class="card-body cc-experience-header">
<p>March 2016 - Present</p>
<div class="h5">CreativeM</div>
</div>
</div>
<div class="col-md-9" data-aos="fade-left" data-aos-offset="50" data-aos-duration="500">
<div class="h5">Front End Developer</div>
<p>Euismod massa scelerisque suspendisse fermentum habitant vitae ullamcorper magna quam iaculis, tristique sapien
taciti mollis interdum sagittis libero nunc inceptos tellus, hendrerit vel eleifend primis lectus quisque cubilia sed mauris.
Lacinia porta vestibulum diam integer quisque eros pulvinar curae, curabitur feugiat arcu vivamus parturient aliquet laoreet at,
eu etiam pretium molestie ultricies sollicitudin dui.</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<p>April 2019 - March 2020</p>
<div class="h5">WebNote</div>
</div>
</div>
<div class="h5">Web Developer</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<p>April 2018 - February 2019</p>
<div class="h5">WEBM</div>
</div>
</div>
<div class="h5">Intern</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container cc-education">
<div class="h4 text-center mb-4 title">Education</div>
<div class="card">
<div class="row">
<div class="card-body cc-education-header">
<p>2021 - Present</p>
<div class="h5">Master's Degree</div>
</div>
</div>
<div class="h5">Master of Information Technology</div>
<p class="category">LOVELY PROFESSINOAL UNIVERSITY</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<p>2018 - 2021</p>
<div class="h5">Bachelor's Degree</div>
</div>
</div>
<div class="h5">Bachelor of Computer Science</div>
<p class="category">LOVELY PROFESSINOAL UNIVERSITY</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row">
<p>2013 - 2015</p>
<div class="h5">High School</div>
</div>
</div>
<div class="h5">Science and Mathematics</div>
<p class="category">School of Secondary board</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="reference">
<div class="container cc-reference">
<div class="h4 mb-4 text-center title">References</div>
<div class="card" data-aos="zoom-in">
<div class="carousel slide" id="cc-Indicators" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#cc-Indicators" data-slide-to="0"></li>
<li data-target="#cc-Indicators" data-slide-to="1"></li>
<li data-target="#cc-Indicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-2 col-md-3 cc-reference-header"><img src="images/reference-image-1.jpg" alt="Image"/>
<div class="h5 pt-2">Aiyana</div>
<p class="category">CEO / WEBM</p>
</div>
<p> Habitasse venenatis commodo tempor eleifend arcu sociis sollicitudin ante pulvinar ad, est porta cras erat
ullamcorper volutpat metus duis platea convallis, tortor primis ac quisque etiam luctus nisl nullam fames. Ligula purus suscipit
tempus nascetur curabitur donec nam ullamcorper, laoreet nullam mauris dui aptent facilisis neque elementum ac, risus semper
felis parturient fringilla rhoncus eleifend.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="h5 pt-2">Braiden</div>
<p class="category">CEO / Creativem</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="h5 pt-2">Alexander</div>
<p class="category">CEO / Webnote</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="contact">
<div class="cc-contact-information" style="background-image: url('images/staticmap.png')">
<div class="cc-contact">
<div class="row">
<div class="card mb-0" data-aos="zoom-in">
<div class="h4 text-center title">Contact Me</div>
<div class="row">
<form action="https://formspree.io/your@email.com" method="POST">
<div class="p pb-3"><strong>Feel free to contact me </strong></div>
<div class="row mb-3">
<div class="col">
<div class="input-group"><span class="input-group-addon"><i class="fa fa-user-circle"></i></span>
<input class="form-control" type="text" name="name" placeholder="Name" required="required"/>
</div>
</div>
</div>
<div class="col">
<div class="input-group"><span class="input-group-addon"><i class="fa fa-file-text"></i></span>
<input class="form-control" type="text" name="Subject" placeholder="Subject" required="required"/>
</div>
</div>
</div>
<div class="col">
<div class="input-group"><span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input class="form-control" type="email" name="_replyto" placeholder="E-mail" required="required"/>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Your Message"
required="required"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary" type="submit">Send</button>
</div>
</div>
</form>
</div>
</div>
<p class="mb-0"><strong>Address </strong></p>
<p class="pb-2">jalandhar, punjab(144401) INDIA</p>
<p class="mb-0"><strong>Phone</strong></p>
<p class="pb-2">+91-6287389750</p>
<p class="mb-0"><strong>Email</strong></p>
<p>shivaniyadav4972@gmail.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</div>
<footer class="footer">
<div class="container text-center"><a class="cc-facebook btn btn-link" href="#"><i class="fa fa-facebook fa-2x " aria-
hidden="true"></i></a><a class="cc-twitter btn btn-link " href="#"><i class="fa fa-twitter fa-2x " aria-hidden="true"></i></a><a
class="cc-google-plus btn btn-link" href="#"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i></a><a class="cc-
instagram btn btn-link" href="#"><i class="fa fa-instagram fa-2x " aria-hidden="true"></i></a></div>
<div class="h4 title text-center">KUMARI SHIVANI</div>
<div class="text-center text-muted">
<p>© SHIVANI CV. All rights reserved.<br>Design - <a class="credit" href="https://templateflip.com"
target="_blank">TemplateFlip</a></p>
</div>
</footer>
<script src="js/core/jquery.3.2.1.min.js?ver=1.1.0"></script>
<script src="js/core/popper.min.js?ver=1.1.0"></script>
<script src="js/core/bootstrap.min.js?ver=1.1.0"></script>
<script src="js/now-ui-kit.js?ver=1.1.0"></script>
<script src="js/aos.js?ver=1.1.0"></script>
<script src="scripts/main.js?ver=1.1.0"></script>
</body>
</html>
e steps for creating basic or vertical forms? what is Modal plugin used for in
Bootstrap.
Example 1: In this example, we will see how to create a vertical form using Bootstrap 4.
Step 1: Include the following CDN links in the code in order to use Bootstrap 4.
<!– Bootstrap CSS –>

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css”
rel=”stylesheet” integrity=”sha384-
F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU”
crossorigin=”anonymous”>
<!– Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js”
integrity=
“sha384-
/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ”
crossorigin=”ano
nymous”></script>
Step 2: Now we will use bootstrap 4 forms with the input fields we want in the forms
inside the body tag.
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-
F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">


<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-
/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>


<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
integrity=
"sha384-
W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
integrity=
"sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
<title>gfg</title>
</head>
<body>

<form>
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">
We'll never share your email with anyone else.</small>
</div>
<label for="exampleInputPassword1">
Password
</label>
<input type="password"
class="form-control"
id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox"
class="form-check-input"
id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
Modal
How it works
Before getting started with Bootstrap’s modal component, be sure to read the following as our menu
options have recently changed.
 Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document
and remove scroll from the <body> so that modal content scrolls instead.
 Clicking on the modal “backdrop” will automatically close the modal.
 Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them
to be poor user experiences.
 Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever
possible, place your modal HTML in a top-level position to avoid potential interference from other elements.
You’ll likely run into issues when nesting a .modal within another fixed element.
 Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See our
browser support docs for details.
 Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals.
To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})

Continuous Assessment Test 2 CAP756: Web Technology: Explain What Ah

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Continuous Assessment Test 2 CAP756: Web Technology: Explain What Ah

Uploaded by

Copyright:

Available Formats

Explain what ah

Continuous Assessment Test 2

Submitted by:- Submitted to:-

Reg no :- 12103495 (27362)

<!– Bootstrap CSS –>

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

<label for="exampleInputEmail1">Email address</label>

<small id="emailHelp" class="form-text text-muted">

We'll never share your email with anyone else.</small>

<div class="form-group form-check">

<label class="form-check-label" for="exampleCheck1">

<button type="submit" class="btn btn-primary">Submit</button>

You might also like