Professional Documents
Culture Documents
Cvready Document
Cvready Document
By
Joshi Anikrutha (16RA1A0513)
Diddiga Harivamshi(16RA1A0512)
The satisfaction that accompanies the successful completion of this project would be
in complete without the mention of the people who made it possible, without whose
constant guidance and encouragement would have made efforts go in vain. I consider
myself privileged to express gratitude and respect towards all those who guided us
through the completion of this project.
Last but not the least, we wish to thank our parents for financing our studies in this
college as well as for constantly encouraging us to learn engineering. Their personal
sacrifice in providing this opportunity to learn engineering is gratefully
acknowledged.
Abstract
Nowadays students are not having enough knowledge about making their own
Curriculum Vitae and confusing about the proper format of their CV and
companies will not choose the person because of their improper format of CV.
Companies through CV without proper format into the dustbins and rejects the
application of job opportunity because of their improper CV.
Keeping that in mind, we are developing a web application called “CV
READY” which makes students to create their CV in an easy way. All they need
to do is that just input the details of the fields they want to include in their CV in
our application. Our application generates several formats of Curriculum Vitae,
user need to choose one format among them and his/her CV gets generated and
can save into their local memory in PDF format. By this, every student can make
their CV in an easy way and free of cost.
We provide users with several formats and will include the CV
sharing through mail and other sharing media. From this project, we hope to make
a student to make his/her CV in an easy and comfortable way. The main aim of
this project is that CV should not be reason for rejection of one’s job application.
List of Figures
Page.no
1. Introduction
Figure 1. DFD Modelling of Problem .................................................2
2. Function Oriented Design for procedural approach
Figure 2. DFD of Application............................................................. 5
3. GUI Design
Figure 3. Screenshot of Home Page ...................................................... 6
Figure 4. Screenshot of About Page ...................................................... 7
Figure 5. Screenshot of Contact Page................................................... 7
Figure 6. Screenshot of Form ............................................................... 8
Figure 7.Screenshot of Results ............................................................. 8
Table of Contents
Page.no
1. INTRODUCTION ..................................................................................... 1
1.1. Purpose ............................................................................................ 1
1.2. System Overview ............................................................................1
1.3. Problem Statement ..........................................................................1
1.4. DFD Modelling of Problem ............................................................2
1.5. Goal & Vision .................................................................................2
2. REQUIREMENTS SPECIFICATIONS ...................................................3
2.1. User Characteristics ........................................................................ 3
2.2. Functional Requirements ................................................................ 3
2.3. Dependencies.................................................................................. 3
2.4. Performance Requirements .............................................................4
2.5. Hardware Requirements .................................................................. 4
3. DESIGN .....................................................................................................5
3.1. Function Oriented Design for procedural approach ........................ 5
3.2. GUI Design for front-end ............................................................... 6
4. CODING ................................................................................................... 10
5. TESTING .................................................................................................. 41
5.1. Test Plan ......................................................................................... 41
5.2. Test Results .................................................................................... 41
6. END-USER INSTRUCTIONS..................................................................42
7. FUTURE WORK...................................................................................... 43
8. SUMMARY .............................................................................................. 44
9. REFERENCE ............................................................................................ 45
1. Introduction
This section gives a scope description and overview of everything included in
this Project Report. Also, the purpose for this document is described and
system overview along with goal and vision are listed.
1.1. Purpose
The purpose of this document is to give a detailed description of
Curriculum Vitae Project. It will illustrate the purpose and complete
declaration for the development of CV’s of a company. It will also
explain system constraints, interface and interactions with Wikipedia
API. This document is primarily intended to anyone who wants to get
an overview of how our project works its outcomes and possible usages
in future.
1|Page
1.4. DFD Modelling of Problem
As apparent from the DFD model of problem given on next page, CV
Ready takes the users details in a form. As per the user details, it
generates the CV of the user. User can print it using the print option
provided.
USE
RRR
R Save it locally
2|Page
2. Requirements Specification
The web application users interact with this application through a web
browser. This web portal of this application presents a form for a user
and form has several fields: user needs to fill all the required fields
which can be included in CV. On submit the form, application takes
input values, generates the CV on next page.
CV is a web portal for a user interaction for front end. There are
many modern frameworks and languages for developing for
frontend. There we used following for developing
1.HTML: HTML stands for Hypertext Markup Language and CSS
stands for Cascading Style Sheets are the crucial technologies for
creating web pages. HTML supplies the structure of the page, and CSS
the layout, for diversity of devices. Together with scripting and
graphics, HTML and CSS are the fundamental of building Web
Applications and Web pages.
HTML provides designers and developers the following facilities,
● To design forms for directing transactions with remote services,
for use in making reservation, searching for information,
ordering products, and others
● Retrieving online information through hypertext links.
● To include video and sound clips, spread sheets, and other
applications straight in their documents
● Designer can publish online documents with text, headings,
tables, photos and others.
3|Page
2. CSS: CSS describes the Web pages presentation, involving
layout, colors, and fonts. It enables the designer to adjust the
presentation to various types of devices, like a small screens, large
screens, or printers.
CSS is separate from HTML, and their separation makes it
easy to preserve and maintain sites, share style sheets across pages,
and accommodate pages to various environment.
4|Page
5
3. Design
USER
Takes information as
input
FORM
PHP file for CV
Generates CV
5|Page
6
6|Page
7
7|Page
8
8|Page
9
9|Page
10
4. Coding
HTML:
<!DOCTYPE html>
<html lang="zxx">
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<title>CV Ready | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="keywords" content="Accrue a Responsive web template, Bootstrap Web
Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG,
SonyEricsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
10 | P a g e
11
}
</script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.theme.css" type="text/css" media="all">
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/fontawesome-all.css" rel="stylesheet">
<link
href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,50
0,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext"
rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
</head>
<body>
<!--/banner-->
<div class="banner" id="home">
<!-- header -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light top-header">
<h1 class="logo">
<a class="navbar-brand" href="index.html">
<i class="fab fa-accusoft"></i>
<span>CV Ready</span>
</a>
</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link ml-lg-0" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
11 | P a g e
12
</li>
<li class="search">
<a class="play-icon popup-with-zoom-anim" href="#small-dialog">
<i class="fas fa-search"></i>
</a>
<div id="small-dialog" class="mfp-hide">
<div class="search-top">
<div class="search-inn">
<form action="#" method="post" class="disply-flex">
<input class="form-control" type="search" name="search" value="Type something..."
onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
<button class="btn2">
<i class="fas fa-search"></i>
</button>
</form>
</div>
<p>CV Ready</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- //header -->
<!-- banner-text -->
<div class="slider-content">
<div class="wrapper-slider text-left">
<!-- Slideshow 1 -->
<div class="rslides_container">
<ul class="rslides" id="slider1">
<li>
<div class="banner-info">
<h3>Create Your CV</h3>
<p>Easy and standard CV generator, click on the button to create your CV</p>
</div>
</li>
</ul>
</div>
</div>
<div class="ban-form text-left">
<h5>CV Ready</h5>
<a href="form.html" class="button">Create Now</a>
</div>
<div class="clearfix"></div>
12 | P a g e
13
</div>
</div>
<!-- //banner -->
<!--/bottom-banner-w3layouts-->
<section class="bottom-banner">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 about-img">
</div>
<div class="col-lg-6 about-info text-left">
<div class="ab-info-text">
<h3 class="tittle-wthree text-left">
<span>Some Info</span>About Us</h3>
<div class="service-in text-left mt-5">
<div class="card">
<div class="card-body">
<i class="far fa-clock"></i>
<h5 class="card-title">Easy and Fast</h5>
<p class="card-text">Create your CV just by filling the form and it generates very fastly
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//bottom-banner-w3layouts-->
<!--/choose-->
<section class="bottom-banner-w3layouts bg-light py-md-5 py-3">
<div class="container">
<div class="row choose-main py-md-5 py-3">
<div class="col-lg-6 feature text-right">
<h3>
<span>Some Info</span>Why choose us</h3>
<p>We provide standard formats of curriculum vitae, which are accepted by most of the
companies and
our website is very easy to access. </p>
<div class="read inner mt-4">
<!--<a href="single.html" class="btn btn-sm animated-button victoria-two">Read
More</a>-->
</div>
13 | P a g e
14
</div>
<div class="col-lg-6 feature fea-slider text-right">
<img src="images/2.jpg" class="img-fluid rounded" alt="">
</div>
</div>
</div>
</section>
<!--footer -->
<footer>
<div class="container">
<div class="row footer-top">
<div class="col-lg-3 footer-grid-w3ls">
<div class="footer-title">
<h3>About Us</h3>
</div>
<div class="footer-text">
<p>we provide different standard formats of CV and it includes the CV sharing through
mail and other sharing media and it also reduces the confusion about the sequence of details
that you are going to include in your CV.</p>
<div class="social-icon footer text-left mt-4">
<div class="icon-social">
<a href="#" class="button-footr">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="button-footr">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="button-footr">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 footer-grid-w3ls">
<div class="footer-title">
<h3>Get in touch</h3>
</div>
<div class="contact-info">
<h4>Location :</h4>
<p>Ghatkesar,Hyderabad.</p>
<div class="phone">
<h4>Contact :</h4>
<p>Phone : +917671083299</p>
14 | P a g e
15
<p>Email :
<a href="mailto:info@cvready.com">info@cvready.com</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 footer-grid-w3ls">
<div class="footer-title">
<h3>Useful Links</h3>
</div>
<ul class="links">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3 footer-grid-w3ls">
<div class="footer-title">
<h3>Subscribe</h3>
</div>
<div class="footer-text">
<p>By subscribing to our mailing list you will always get latest news and updates from
us.</p>
<form action="#" method="post">
<input class="form-control" type="email" name="Email" placeholder="Enter your email..."
required="">
<button class="btn1">
<i class="far fa-envelope" aria-hidden="true"></i>
</button>
<div class="clearfix"> </div>
</form>
</div>
</div>
</div>
<div class="copyright mt-4">
<p class="copy-right text-center ">© 2018 Accrue. All Rights Reserved.
<!--<a href="http://w3layouts.com/"> W3layouts </a>-->
</p>
15 | P a g e
16
</div>
</div>
</footer>
<!-- //footer -->
<a href="#home" class="scroll" id="toTop" style="display: block;">
<span id="toTopHover" style="opacity: 1;"> </span>
</a>
<!-- //Custom-JavaScript-File-Links -->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>
<!--slider-->
<script src="js/responsiveslides.min.js"></script>
<script>
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
auto: false,
pager: true,
nav: false,
speed: 500,
namespace: "centered-btns"
});
});
</script>
<!--//slider-->
<!--pop-up-box-->
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.magnific-popup.js"></script>
<!--//pop-up-box-->
<script>
$(document).ready(function () {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
16 | P a g e
17
});
</script>
<!--//search-bar-->
}
}
})
})
</script>
<!-- //carousel -->
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 900);
});
});
</script>
<script>
$(document).ready(function () {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({
easingType: 'easeOutQuart'
});
});
</script>
<!--// end-smoth-scrolling -->
<!-- jQuery-Photo-filter-lightbox-Gallery-plugin -->
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<!-- //jQuery-Photo-filter-lightbox-Gallery-plugin -->
</body>
</html>
CSS:
html,
body {
margin: 0;
font-size: 100%;
font-family: 'Varela Round', sans-serif;
18 | P a g e
19
background: #fff;
}
body a {
text-decoration: none;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
font-family: 'Varela Round', sans-serif;
}
body img {
width: 100%;
}
a:hover {
text-decoration: none;
}
input[type="button"],
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="search"] {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
font-family: 'Varela Round', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: 'Raleway', sans-serif;
letter-spacing: 1px;
}
19 | P a g e
20
p{
margin: 0;
font-size: 0.9em;
color: #8c9398;
line-height: 2em;
letter-spacing: 1px;
}
ul {
margin: 0;
padding: 0;
}
/*--/header --*/
.top-bar_sub .btn-primary {
color: #000;
background-color: #00bce400;
border: 2px solid #00bce4;
font-size: 15px;
letter-spacing: 1px;
}
.top-bar_sub .btn-primary:hover {
color: #fff;
background-color: #00bce4;
border: 2px solid #00bce4;
}
.btn-primary:focus,
.btn-primary.focus,
.btn:focus,
.btn.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: none;
}
span.sub {
font-size: 10px;
vertical-align: top;
background: #fff;
color: #555;
padding: 4px 12px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.14);
20 | P a g e
21
.top-header {
background: none !important;
}
h1.logo a.navbar-brand {
font-size: 1em;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.36);
color: #fff;
margin: 0;
font-weight: 700;
text-transform: uppercase;
text-align: center;
font-family: 'Raleway', sans-serif;
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
color: rgb(255, 255, 255);
}
a.navbar-brand i {
color: #fff;
}
h1.logo span {
display: block;
font-size: 0.3em;
text-align: center;
letter-spacing: 4px;
font-family: 'Raleway', sans-serif;
}
nav.navbar.navbar-expand-lg.navbar-light {
padding: 2em 3em;
}
.dropdown-item {
margin: 0 !important;
color: #777;
text-transform: capitalize;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.12);
letter-spacing: 1px;
border-bottom: 1px solid #f3f4f5;
}
.dropdown-menu {
background-color: rgb(255, 255, 255);
}
.dropdown-item.active,
.dropdown-item:active {
color: #000;
text-decoration: none;
background-color: #ffffff;
}
.dropdown-item:hover,
.dropdown-item:focus {
color: #16181b;
text-decoration: none;
background-color: #eef0f3;
}
.dropdown-menu {
padding: 0;
}
22 | P a g e
23
.search i {
color: #fff;
margin: 0.8em 1em;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
width: 100%;
border: 0;
}
23 | P a g e
24
.
.rslides {
margin: 0 auto;
}
.rslides_container {
position: relative;
width: 100%;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 68%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url(../images/arrows.png) no-repeat left 50%;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 0;
left: 0;
display: block;
background: #fff;
/* Fix for IE6-9 */
24 | P a g e
25
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: url(../images/arrows.png) no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
25 | P a g e
26
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
text-align: center;
position: absolute;
left: 0%;
bottom: -8%;
z-index: 9;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
float: left;
margin-right: 15px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #fff;
display: inline-block;
_display: block;
width: 12px;
height: 12px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: rgb(235, 41, 65);
}
.banner {
background: url(../images/banner1.jpg) no-repeat 0px 0px;
26 | P a g e
27
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
min-height: 800px;
position: relative;
}
.banner-info h3 {
font-size: 5em;
color: #fff;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
}
.banner-info p {
letter-spacing: 2px;
line-height: 1.9em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
font-size: 1.6em;
font-weight: 100;
margin: 1em 0;
color: #fff;
font-family: 'Raleway', sans-serif;
}
/*---*/
.slider-content {
margin: 9% auto 0;
width: 80%;
}
.ban-form {
background: #fff;
padding: 3em;
float: right;
width: 40%;
.ban-form h5 {
color: #636669;
font-size: 1.2em;
letter-spacing: 1px;
27 | P a g e
28
font-weight: 300;
}
.wrapper-slider {
float: left;
width: 55%;
padding: 1em;
}
.ban-form input[type="text"],
.ban-form input[type="email"],
.ban-form input[type="password"] {
width: 100%;
color: #555;
outline: none;
font-size: 0.9em;
padding: 0.9em 1em;
border: 1px solid #e6eae8;
-webkit-appearance: none;
margin-bottom: 0.8em;
letter-spacing: 1px;
background: #f3f4f5;
}
.ban-form input[type=submit] {
color: #FFFFFF;
padding: .8em 1em;
font-size: 1em;
cursor: pointer;
border: 2px solid #EB2941;
outline: none;
background: #EB2941;
width: 100%;
letter-spacing: 2px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.ban-form input[type=submit]:hover {
background: #99D9F3;
28 | P a g e
29
/*--*/
a.animated-button:link,
a.animated-button:visited {
position: relative;
padding: 12px 30px;
color: #fff;
font-size: 13px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
z-index: 9;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after,
a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
29 | P a g e
30
a.animated-button:link:hover,
a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after,
a.animated-button:visited:hover:after {
height: 450%;
}
/* Victoria Buttons */
a.animated-button.victoria-two {
border: 2px solid #EB2941;
}
a.animated-button.victoria-two:after {
background: #EB2941;
-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
/*--//banner --*/
/*--team-- */
.team-grid {
width: 100%;
cursor: pointer;
overflow: hidden;
position: relative;
margin-bottom: 2em;
}
.team-img {
position: relative;
}
30 | P a g e
31
.team-img:after {
bottom: 0;
left: 0;
width: 100%;
height: 50%;
content: " ";
position: absolute;
background: rgba(0, 0, 0, 0);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-img img {
display: block;
margin: 0 auto;
text-align: center;
}
.team-info {
left: auto;
bottom: 0;
width: 100%;
padding: 0 20px;
position: absolute;
opacity: 0;
color: #fff;
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.team-info h4 {
font-size: 22px;
font-weight: 600;
margin: 0 0 10px;
color: #fff;
31 | P a g e
32
.team-info span {
display: block;
font-size: 0.9em;
color: #fff;
letter-spacing: 2px;
}
.team-grid:hover .team-img:after {
background: #EB2941;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
.team-grid:hover .team-info {
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
-webkit-transform: translate3d(0, -10%, 0);
transform: translate3d(0, -10%, 0);
}
.team-grid:hover .team-info {
opacity: 1;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
ul.social-icons li {
list-style-type: none;
}
ul.social-icons li a i {
color: #fff;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
32 | P a g e
33
.team-grid i.fab.fa-facebook-f:hover {
background: #3b5998;
border: 1px solid #3b5998;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
.team-grid i.fab.fa-twitter:hover {
background: #1da1f2;
border: 1px solid #1da1f2;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.team-grid i.fab.fa-google-plus-g:hover {
background: #dd4b39;
border: 1px solid #dd4b39;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
33 | P a g e
34
div
{
border-radius: 5px;
}
#header
{
position: fixed;
z-index: 1;
height:40px;
width: 98%;
background-color: #668284;
margin-bottom: 10px
}
#name {
float:left;
margin-left: 20px;
padding-bottom: 10px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 20px;
padding-bottom: 10px;
font-size: 16px;
#contact
{
margin-left:45%;
34 | P a g e
35
padding-bottom: 10px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
a:hover {
font-weight: bold;
}
.right
{
float: left;
margin-top: 50px;
padding-left:5px;
/*margin-right: -10px;
margin-left: 14%;*/
height: auto;
width: 99%;
background-color: #E3EDD8;
}
/*.left
{
float: left;
margin-top: 50px;
/*margin-right: -90px;
height: relative;
width: 10%;
background-color: #4160E8;
}*/
#footer
{
height:40px;
clear:both;
position: relative;
background-color: #C1E3E1;
}
h3
{
text-decoration: underline;
}
35 | P a g e
36
#job-responsibilities
{
padding: 1px;
}
.job-title
{
font-weight: bold;
}
table
{
border: 1px dashed black;
}
td
{
padding: 2px;
border: 1px solid #E88741;
}
#course-name
{
font-weight:bold;
}
#company-name
{
height:2px;
text-decoration:underline;
}
#job-title
{
height: 5px;
}
.job-duration
{
float:right;
}
#heading
{
font-weight:bold;
}
36 | P a g e
37
<?php
if(!isset($_POST['name'])||!isset($_POST['email'])||!isset($_POST['hl1'])||!isset($_POST['hl
2'])||!isset($_POST['hl3'])||!isset($_POST['hl4']))
header("Location: index.html");
else{
$name=$_POST['name'];
$email=$_POST['email'];
$hl1 = $_POST['hl1'];
$hl2 = $_POST['hl2'];
$hl3 = $_POST['hl3'];
$hl4 = $_POST['hl4'];
$cname = $_POST['cname'];
$jtitle = $_POST['jtitle'];
$jres = $_POST['jres'];
}
?>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="CSS Template.css">
<title></title>
</head>
<body>
<div id="header">
<p id="name"><?php
echo $name;
?>
</p>
echo $email;
?></p></a>
</div>
<div class="left">
37 | P a g e
38
</div>
<div class="right">
<h3>CV Highlights</h3>
<p>
<ul>
<li><?php
echo $hl1;
?></li>
<li><?php
echo $hl2;
?></li>
<li><?php
echo $hl3;
?></li>
<li><?php
echo $hl4;
?></li>
</p>
<h3>Professional Experience</h3>
<h4 id="company-name"><?php
echo $cname;
?></h4>
<p id="job-title"><strong><?php
echo $jtitle;
?></strong></p>
<p id="job-responsibilities"><?
echo $jres;
?></p>
</div>
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
<div id="footer"></div>
</body>
</html>
38 | P a g e
39
5. Testing
5.1. Test Plan
Unit Testing: Unit testing is a software development process in which
the smallest testable parts of an application, called units, are individually
and independently scrutinized for proper operation. Unit testing is often
automated but it can also be done manually. A unit test is an automated
piece of code that invokes a unit of work in the system and then checks
a single assumption about the behavior of that unit of work.
In this application, a manually written unit test script method is used for
testing function those perform unit amount of work and provides
functionality.
39 | P a g e
40
40 | P a g e
41
6. End-user Instructions
CV Ready provides web Url to users for generating the CV.
2. After opening the website click on create now button in homepage to get started.
3. It redirects to the form page where user need to input his information in the
corresponding fields.
5. Now it generates the CV which can be directly printed using the print option
available there.
41 | P a g e
42
7. Future Work
Some of the possible amendments and improvements in this system are:
● Adding more formats for CV.
Adding more format can make users to choose any one format from many
formats and user can generate their CV in their desired format.
By giving the option of share to other social media user can share their CV
to a social media website and showcase his CV.
42 | P a g e
43
8. Summary
CV Ready aims to drop the method of typing CV for hours and hours and
improve the speed of creating the CV. CV Ready always aims to make its
users get benefited by using the tool.
43 | P a g e
44
9. References
1. www.w3schools.com
2. www.codepen.io
3. www.youtube.com
6. https://www.cv-library.co.uk/career-advice/cv/how-to-write-a-cv-tips-for-2018/
44 | P a g e