Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
PROJECT REPORT
Submitted to ARYABHATTA KNOWLEDGE UNIVERSITY
Contents
Acknowledgement
Since it was our first software project. It wasn’t possible for us to develop it all alone. If
we say that it was a result of only our effort, then it would be completely wrong. Thankfully, we
are fortunate that we are surrounded by those people who are expert in their respective fields and
thus shared their best of knowledge with us and made the task much easier for us.
First of all we would like to thank the almighty god. We are so busy in our daily lives that
we fail to notice that the almighty is always there to shower its blessings upon us. All these
things would not have been possible without his will.
I would like to thank the principal of St. Xavier’s college of Management and
technology, Prof. Fr. Dr. T. Nishant S.J. He considered our project development as his own and
was very kind when he saw us running out of time during the development phase and he
provided us extra time when he needed.
Lastly, I would like to thank our project guide Prof. Prakash Upadhyay for his never
ending support which made us easier to develop the project.
Certificate
This is to certify that the project entitled “AVN Repair and Services”
submitted to Aryabhatta Knowledge University in fulfilment of the requirement for the
award of Degree of Bachelors in computer applications [BCA]; the matter embodied in
this project is a genuine work done by Kumar Ankit
……………..…………………..
Signature of the Guide
Prakash Upadhyay
Assistant Professor of Dept. of Computer Science,
St. Xavier’s College of Management and Technology, Patna – 11
……………..…………………..
Signature of the Guide
Aryabhatta Knowledge University
……………..…………………..
Signature of the Principal
Prof. Father Dr. T Nishant S.J
St. Xavier’s College of Management and Technology, Patna – 11
Student profile
About college
Both colleges are managed by the Jesuits of Bihar. Jesuits are the members of a
Christian religious Order called the Society of Jesus. Jesuit education is inspired by the
life and teachings of Jesus Christ and on the principles of pedagogy elaborated by St.
Ignatius of Loyola, the founder of the Society of Jesus.
It further aims at promoting values such as respect for common Indian cultural
heritage, egalitarianism, democracy, secularism, equality of sexes, protection of
environment, removal of social barriers, responsible use of cybernetics and mass media,
transparency and probity in private and public life, national unity and respect for
religious and moral values.
The College Emblem contains the motto of the College: Pravahito Gyanganga
Pravah:- Let the streams of Gyan Ganga keep on flowing. The College is situated near
the river Ganga. Like the flowing river, the College is to ensure that the streams of
Gyan keep on flowing and liberating people. The Sun with the letters, IHS (first three
The emblem within the emblem, containing crown, crescent moon etc. is the
coat of arms of the noble family of our patron, St. Francis Xavier.
Our College is St. Xavier’s college, And St. Xavier’s College of Management &
Technology, Digha Ghat Patna. It is situated at Digha Aashiyana Road, Patna 800011. Jesuits
fathers who run St. Xavier’s College Kolkata, Ranchi, Mumbai and St. Michel’s School and St.
Xavier’s School Patna run this College. The Courses that our College provides are - B. Com, B.
A, BBA, BCA, B. Com (P), BMC, BBE.
Email: -sxcpatna@gmail.com
Website: -www.xaviercollegepatan.org
About university
The Aryabhatta Knowledge University Act 2008 provides for the establishment of
University at Patna to conduct and facilitate affiliation of institutions in the conventional as well
new frontiers of professional education. All colleges and institutions imparting professional
education for example Engineering and Technology including information Technology, Nano
technology & Biotechnology, Management, Medicine, Health technology, Public Health
Pharmacy, Optometry, Nursing, Education, Law etc. is to be affiliated to this university.
Technical Education had been a key priority in the state of Bihar, and it had established
several prestigious Technical institutes in the State. The most prestigious institutes of the State,
Bihar College of Engineering established in 1900, has been converted as centrally Funded
Institute, namely National institute of Technology, Patna in February 2004. Other old &
prestigious Institutions are Bhagalpur college of Engineering under Tilka Manjhi University,
Bhagalpur and Muzaffarpur institute of Technology under BRBA Bihar University, Muzaffarpur.
BIT Sindri, which is now is state of Jharkhand, was also established by state of Bihar.
These institutes offered high quality Technical Education, and their alumni today have achieved
National and International Recognition.
Our vision is to mould the character, shape the career, and bring perfection in behavior
and excellence in educating the younger generation of today for future. In addition, to bring up a
vibrant knowledge university resonating with the mission of all round development of students in
particular and the nation and humanity in general by providing value- based creative, innovative
quality education.
Patna 800001.
Related Enquiry: -
Ph: 0612-2351919(office)
Ph: 0612-2362270(exam)
Email: -akuniv10@gmail.com(General)
Introduction
This project is aimed at developing a repair and service providing software system that is
of importance in day-to-day life. The AVN repair and services is a local software system. This
system can be used to provide repair and service facilities in various fields such as vehicle
mechanic, electrician, electronic gadgets, carpenter, plumber, painter.
The Home page contains several links and information about user registration, user login,
city and location. The next few pages display the rest of the services, with this website the user
will be able to call the resource person or even walk into their respective shops or the service
centers.
The administrator has the responsibility of displaying the required data asked by each
user according to the place where he belongs or the location s/he enters.
Objective
In these days the technology is rapidly increasing, almost every service can be found on
the internet these days. However, there are still certain services that we usually don’t find on the
internet, one of such services includes the repairing of our gadgets or automobiles etc. at our
home. Suppose, the situation when there comes a severe damage to your gadgets or your
automobile when you are out somewhere in an area where there are no shops for the repairing of
your tools, well in that case we have come up with this website. This project AVN repair and
services is aimed at developing a website that is of importance for the individuals these days.
It is a cost-effective technology
Easy to use
Removes chances of error
Accessing from anywhere
Reduces wastage of time
Reduces manpower requirements
Improve functional relationships
Increase flexibility to respond to future needs
To provide an interface through which we can choose our service from home
To provide username and password to user and credentials should be checked properly at
the time of login for user and Admin
To provide an interface from where faculty can generate the service from home
Design a website which is easy for the user to select their problem and choose their
services from home.
With the help of this website, one can use any of the given services from home.
Platform
Processor: Pentium 4 & above RAM: 128 MB or more.
Tools required
Front End- ASP.Net tools
Compatibility
Windows
Any web browser
HTML5- It is the latest Hypertext Mark-up Language (HTML), the standard programming
language for describing the contents and appearance of web pages. These days all major
browsers (Chrome, Safari, Firefox, Opera, and IE) offer HTML5 support, which makes it the
newest HTML technology used today. It offers some amazing benefits like cross browser
compatibility, new DOCTYPE declaration, improvements in usability and user experience.
Bootstrap- Its framework provides cross-browser compatibility and CSS- Less functionality.
It provides easy way to create responsive website, i.e., mobile first responsive web design. Its
fluid grid layout dynamically adjusts to proper screen resolution. Bootstrap easily and
efficiently scales our websites and applications with a single code base, from phones to
tablets to desktop with CSS media queries.
ASP.NET- It is open source and is compatible with all famous operating systems and web
servers used in market. ASP.NET is a simple technology that utilizes its own memory space
on server rather than putting an extension that is why it helps to reduce the working load of
server. ASP.NET provides better security for malicious attacks. ASP.NET embeds the static
code into dynamic very easily.
SQL Server- It is the most popular Open Source Relational SQL Database Management
System. SQL Server is one of the best RDBMS being used for developing various web-based
software applications. Microsoft makes SQL Server available in multiple editions, with
different feature sets and targeting different users.
SRS is the final output of the requirements analysis and specification phase. It deals with
the functional requirements, non-functional requirements and constraints of the system.
Environment required
The hardware must be Pentium 4 & above RAM: 128 MB or more.
The common peripherals are used (mouse, keyboard, etc).
Interface required
The interface has so far only peripheral device required i.e. printer.
The application is being developed in SQL server.
The application assumes its users to be new to this application so the interface is extremely
simple and user friendly.
SQL Server is database connectivity tool which will be used by us as back-end due to
these reasons:-
In today’s world, an organization wants a comprehensive, secure, reliable, and productive data
platform for its business applications. Therefore, we chose SQL Server for database connectivity.
SQL Server provides all these facilities:-
SQL Server 2014 combines data analysis, reporting, integration, data manipulation, etc.
The SQL Server database Engine provides a platform that allows managing data application
very easily.
High evaluation processing
Large database and space management
Client/server (Distributed processing) environment
Portability and connectivity
Back and recovery facilities
Full proof security management
Easy to use
Visual Studio includes a code editor supporting IntelliSense (the code completion
component) as well as code refactoring. The integrated debugger works both as a source-level
debugger and a machine-level debugger. Other built-in tools include a code profiler, forms
designer for building GUI applications, web designer, class designer, and database schema
designer. It accepts plug-ins that enhance the functionality at almost every level—including
adding support for source control systems (like Subversion and Git) and adding new toolsets
like editors and visual designers for domain-specific languages or toolsets for other aspects of the
software development lifecycle (like the Team Foundation Server client: Team Explorer).
Visual Studio supports 36 different programming languages and allows the code editor
and debugger to support (to varying degrees) nearly any programming language, provided a
language-specific service exists. Built-in languages include C++, C++/CLI, Visual Basic .NET,
C#, F#, JavaScript, TypeScript, XML, XSLT, HTML, and CSS. Support for other languages
such as Python, Ruby, Node.js, and M among others is available via plug-ins. Java (and J#) were
supported in the past.
Like other RDBMS technologies, SQL Server is primarily built around a row-based table
structure that connects related data elements in different tables to one another, avoiding the need
to redundantly store data in multiple places within a database. The relational model also provides
referential integrity and other integrity constraints to maintain data accuracy.
The core component of Microsoft SQL Server is the SQL Server Database Engine, which
controls data storage, processing and security. It includes a relational engine that processes
commands and queries, and a storage engine that manages database files, tables, pages, indexes
and transactions.
Why we have chosen Microsoft SQL Server for developing our project?
We chose Microsoft SQL Server because it gives a very good platform for making
databases. With the help of Microsoft SQL Server one can easily create tables, indexes, database
files and then easily use it in their application. MS SQL Server gives more extensive security
options for protecting the integrity of data and preventing file corruption. Administrators can
limit the amount of access certain users have to data, as well as determine whether they can add
to, modify, or retrieve the data, which helps stop unauthorized access.
Feasibility study
Technical feasibility
The system is proposed to be developed on a website. Therefore, we have chosen
Microsoft Visual Studio as our front-end and Microsoft SQL Server as our back-end. Since, we
have learned about C# in our summer training, so we thought to use this programming language.
C# is a programming language which is used for database connectivity as well as applying some
task which can be done on the website. We chose ASP.Net for creating our website because we
learned about in our summer training so we used it because we had gained a good knowledge
about it.
Economical feasibility
Since this project is a partial fulfillment of our degree course Bachelor in Computer
Application. So money related concerns has not come and the project has been developed by our
team members without charging any cost.
Schedule feasibility
We have given 3 months of time to develop the system and since we are 3 in group
member, so each one of us has been assigned a specific module to develop. Preliminary
investigation is done by the entire group member. Since we have divided the work load so, it has
become possible to develop it within expected time frame.
First of all we know that what system analysis is. It is a process of collecting and
interpreting facts, identifying the problems, and decomposition of a system into its components.
System analysis is conducted for the purpose of studying a system or its parts in order to identify
its objectives. It is a problem-solving technique that improves the system and ensures that all the
components of the system work efficiently to accomplish their purpose. Requirement analysis is
the most important and fundamental stage in SDLC. Here, the admin first gathered the details
about the whole system of internal marks system. Then, the admin makes a design according to
the information gathered. That design will be user-friendly and will be very easy to use. With the
help of this project, one can easily enter the marks of a student and get the calculation at one go.
Design
After planning and requirement analysis, we have decided to design our website to feel
what we think for our site. As a part of the design phase, it is very important to incorporate
elements such as login page, list of streams, and list of semesters. And according to the selected
stream and semester, the subject list appears.
So, first of all we designed a home page in which we have a menu bar which consists of
links which leads us to home page, login page, team page, etc. For using the internal marks
system, the user must login with the registered username and password.
After logging in, the user will get an interface in which he/she can select stream and
semester. According to the stream and semester selected, the user will get list of only those
subjects whose stream and semester is being selected.
After filling the marks, they can find total marks and then submit it. The marks will be
stored in the database in the name of that student whose roll number has been written.
The user can also update and delete the marks of any student by using their roll number.
They can also it to display a student marks by using the roll number.
System design is the solution for the creation of a new system. This phase focuses on the
detailed implementation of the feasible system. It emphasis on translating design. Specifications
to performance specification.
Logical design
Physical design
During logical design phase the analyst describes inputs (sources), output (destinations),
databases (data sores) and procedures (data flows) all in a format that meets the user
requirements. The analyst also specifies the needs of the user at a level that virtually determines
the information flow in and out of the system and the data resources. Here the logical design is
done through data flow diagrams and database design. The physical design is followed by
physical design or coding. Physical design produces the working system by defining the design
specifications, which specify
Exactly what the user system must do. The programmers write the necessary programs that
accept input from the user, perform necessary processing on accepted data and produce the
required report on a hard copy or display it on the screen.
Output design
Computer output is the most important and direct source of information to the user. Output
design is a very important phase since the output needs to be in an efficient manner. Efficient and
intelligible output design improves the system relationship with the user and helps in decision
making. Allowing the user to view the sample screen is important because the user is the
ultimate judge of the quality of output. The output module of this system is the selected
notifications.
1. Admin module
2. User module
1. Admin module
Admin login– This page basically deals with signing in of the admins who monitor the functions
happening in the website. All the updation, validation, deletion etc. of the users that will come
under the user log in will be monitored by the admin after when s/he log ins.
Update database– If the user adds other information about himself/herself or changes anything
from his/her information or deletes the account from the website the user will update the
database with the added or changed information.
Logout– The admin will finally log himself/herself out of the page.
2.User Module
User login – The user login is the page where the user signs in to avail our different services
provided in the website. It contains the name of the user, phone number, email id and address
from where the user belongs.
Select service – After clicking on the select service, the user ill come across the different
services given for its help. It can be an electronic or non-electronic service.
Select type of service – This option allows the user to select between the two services whether
the electronic or the non-electronic services.
Select product – After the select service page, if the user selects the select product option then
s/he will be provided with several electronic options which includes gadgets or any electronic
item.
Select service provider – As stated earlier we have added information of service providers as
per the areas of the cities. As the user selects this function it will allow the user to search
between several service providers
Explain service – Here the user will explain his/her needs and requirements for the service
required, according to which the relevant data and suggestions will be shown to the user.
Log out– The final option of the user module, in this the user will log his/her account out and
leave the page.
Sub modules
Carpenter
This module provides the information (i.e, name, phone, address) of the carpenter.
Electrician
This module provides the information (i.e, name, phone, address) of the
electrician.
Painter
This module provides the information (i.e, name, phone, address) of the painter.
Electronic Gadget
This module provides the information (i.e, name, phone, address) of the electronic
gadgets mechanics.
Plumber
This module provides the information (i.e, name, phone, address) of the plumber.
Vehicle Mechanic
This module provides the information (i.e, name, phone, address) of the vehicle
mechanic.
Flow chart
DFD at 0 levels
DFD at 1 level
ER diagram
Database design
Login table
Joinin table
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AVN — REPAIR AND SERVICES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Template by GetTemplates.co" />
<meta name="keywords" content="free website templates, free html5, free template, free
bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="GetTemplates.co" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<!-- Animate.css -->
<div id="page">
<!-- <div class="page-inner"> -->
<nav class="gtco-nav" role="navigation">
<div class="gtco-container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div id="gtco-logo"><a href="index.aspx">AVN Repair and Services
<em>.</em></a></div><img src="logo2.jpg.jpeg" height="75px" width="300px" alt="">
</div>
<div class="col-xs-8 text-right menu-1">
<ul>
<li>About Us</li>
<li class="has-dropdown">
<a href="#">Services</a>
<ul class="dropdown">
<li><a href="#">Mobile</a></li>
<li><a href="#">Vehicle Mechanics</a></li>
<li><a href="#">Carpenter</a></li>
<li><a href="#">Plumber</a></li>
<li><a href="#">Painter</a></li>
<li><a href="#">Electrical Appliances</a></li>
</ul>
</li>
<li><a href="login.aspx">LogOut</a></li>
<li>Join Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</asp:ContentPlaceHolder>
<br />
<br />
<br />
<br />
<footer id="gtco-footer" role="contentinfo" style="background-image:
url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row row-pb-md">
</div>
</div>
</footer>
</div>
<script src="js/moment.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
</div>
</div>
</form>
</body>
</html>
HOMEPAGE (login.aspx)
function callindex() {
window.location.href = "index.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<h3 class="cursive-font">LOGIN</h3>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Email Id</label>
<asp:TextBox ID="txtemail1" runat="server" class="form-control" ></asp:TextBox>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Password</label>
</div>
</div>
</div>
</header>
</asp:Content>
Login.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
if (dt.Rows.Count ==1 )
{
Response.Redirect("Index.aspx");
}
else
{
}
con.Close();
}
}
Signin.aspx
function myFunction() {
var email;
alert("hello ");
email = document.getElementById("txtemail").value;
if (reg.test(txtemail.value) == false)
{
alert('Invalid Email Address ->'+email);
return false;
}
else
{
document.getElementById("demo").innerHTML ="Valid Email ->"+email;
}
return true;
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<h3 >SIGNUP</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
Signin.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
SqlCommand cmd = new SqlCommand("insert into signin values ('" + txtname.Text + "','" +
txtemail.Text + "','" + txtphone.Text + "','" + txtaddress.Text + "','" + txtpassword.Text + "')",
con);
cmd.ExecuteNonQuery();
txtname.Text = "";
txtemail.Text = "";
txtphone.Text ="";
txtaddress.Text = "";
Index.axpx
function check_select_value() {
var ddl = document.getElementById("Select1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "notchoosen") {
alert("Please select a product type");
}
else if (selectedValue == "carpenter") {
window.location.href="carpenter.aspx";
}
else if (selectedValue == "electrician") {
window.location.href = "electrician.aspx";
}
else if (selectedValue == "electronic") {
window.location = "electronic.aspx";
}
else if (selectedValue == "painter") {
window.location.href = "painter.aspx";
}
else if (selectedValue == "plumber") {
window.location.href = "plumber.aspx";
}
else if (selectedValue == "vehicle") {
window.location.href = "vehicle.aspx";
}
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<h3 class="cursive-font">Book Your Service</h3>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Select City</label><br />
<select name="#1" id="activities"><%--onclick="return activities_onclick()">
<option value="notselected">city</option>
<option value="">Agartala</option>
<option value="">Aizawl</option>
<option value="">Bengaluru</option>
<option value="">Bhopal</option>
<option value="">Bhubneswar</option>
<option value="">Chandigarh</option>
<option value="">Chennai</option>
<option value="">Dehradun</option>
<option value="">Dispur</option>
<option value="">Gandhinagar</option>
<option value="">Gangtok</option>
<option value="">Hyderabad</option>
<option value="">Imphal</option>
<option value="">Itanagar</option>
<option value="">Jaipur</option>
<option value="">Jammu</option>
<option value="">Kohima</option>
<option value="">Kolkata</option>
<option value="">Lucknow</option>
<option value="">Mumbai</option>
<option value="">Panji</option>
<option value="">Patna</option>
<option value="">Raipur</option>
<option value="">Ranchi</option>
<option value="">Shillong</option>
<option value="">Shimla</option>
<option value="">Srinagar</option>
<option value="">Thiruvanantpuram</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
carpenter.aspx
function callconfirm() {
if (document.getElementById("c1").value.length == 0)
alert("textbox must be filled");
else
window.location.href = "confirmation.aspx";
}
</script>
</asp:Content>
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<%--<h3 class="cursive-font">LOGIN</h3>--%>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Select Product</label>
<select name="#" id="Select1" ><%--onclick="return Select1_onclick()">--%><%--
class="form-control">--%>
<option value="notchoosen">product</option>
<option value="wardrobe">wardrobe</option>
<option value="chair">chair</option>
<option value="table">table</option>
<option value="bed">bed</option>
<option value="window">window</option>
<option value="door">door</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Enter your problem</label>
<input type="text" id="c1" class="form-control" required="">
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
electrician.aspx
function callconfirm() {
if (document.getElementById("c1").value.length == 0)
alert("textbox must be filled");
else
window.location.href = "confirmation.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<%--<h3 class="cursive-font">LOGIN</h3>--%>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Select Product</label>
<select name="#" id="Select1" ><%--onclick="return Select1_onclick()">--%><%--
class="form-control">--%>
<option value="notchoosen">product</option>
<option value="wiring">wiring</option>
<option value="fuse">fuse</option>
<option value="fluctuation">fluctuation</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Enter your problem</label>
<input type="text" id="c1" class="form-control" required="">
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
electronics.aspx
function callconfirm() {
if (document.getElementById("c1").value.length == 0)
alert("textbox must be filled");
else
window.location.href = "confirmation.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<%--<h3 class="cursive-font">LOGIN</h3>--%>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Select Product</label>
<select name="#" id="Select1" ><%--onclick="return Select1_onclick()">--%><%--
class="form-control">--%>
<option value="notchoosen">product</option>
<option value="mobile">mobile</option>
<option value="tab">tab</option>
<option value="pc">pc</option>
<option value="laptop">laptop</option>
<option value="amplifier">amplifier</option>
<option value="tv">tv</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Enter your problem</label>
<input type="text" id="c1" class="form-control" required="">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
painter.aspx
function callconfirm() {
if (document.getElementById("c1").value.length == 0)
alert("textbox must be filled");
else
window.location.href = "confirmation.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<%--<h3 class="cursive-font">LOGIN</h3>--%>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Select Product</label>
<select name="#" id="Select1" ><%--onclick="return Select1_onclick()">--%><%--
class="form-control">--%>
<option value="notchoosen">product</option>
<option value="room">room</option>
<option value="office">office</option>
<option value="full house">full house</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Enter your problem</label>
</div>
</div>
</div>
</header>
</asp:Content>
plumber.aspx
function callconfirm() {
if (document.getElementById("c1").value.length == 0)
alert("textbox must be filled");
else
window.location.href = "confirmation.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<%--<h3 class="cursive-font">LOGIN</h3>--%>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Select Product</label>
<select name="#" id="Select1" ><%--onclick="return Select1_onclick()">--%><%--
class="form-control">--%>
<option value="notchoosen">product</option>
<option value="sink">sink</option>
<option value="gutter">gutter</option>
<option value="manhole">manhole</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Enter your problem</label>
<input type="text" id="c1" class="form-control" required="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
vehicle.aspx
function callconfirm() {
if (document.getElementById("c1").value.length == 0)
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<%--<h3 class="cursive-font">LOGIN</h3>--%>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Select Product</label>
<select name="#" id="Select1" ><%--onclick="return Select1_onclick()">--%><%--
class="form-control">--%>
<option value="notchoosen">product</option>
<option value="cycle">cycle</option>
<option value="motorcycle">motorcycle</option>
<option value="scooty">scooty</option>
<option value="car">car</option>
<option value="auto">auto</option>
<option value="bus">bus</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Enter your problem</label>
<input type="text" id="c1" class="form-control" required="">
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
confirmation.aspx
function callonok() {
window.location.href = "delivery.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
</div>
<div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
<div class="form-wrap">
<div class="tab">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<h3 >CONFIRM</h3>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Name</label>
<input type="text" id="Select1" class="form-control" required="">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>City</label>
<input type="text" id="Text1" class="form-control" required="">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Service</label>
<input type="text" id="Text2" class="form-control" required="">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>Product</label>
<input type="text" id="Text3" class="form-control" required="">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label>phone number of mechanic</label>
<input type="text" id="Text4" class="form-control" required="">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
confirmation.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{}
}
delivery.aspx
function callservice() {
window.location.href = "address.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<h3 class="cursive-font">SELECT ANY ONE</h3>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<input type="button" class="btn btn-primary btn-block" value="HOME SERVICE"
onclick="callservice();" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
address.aspx
function calllast() {
if (document.getElementById("Select1").value.length == 0)
alert("textbox must be filled");
else
window.location.href = "index.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<h3 class="cursive-font">Enter Address</h3>
<form action="#">
<div class="row form-group">
<div class="col-md-12">
<label>Address</label>
<input type="text" id="Select1" class="form-control" required="">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</asp:Content>
joinus.aspx
function joinindetail() {
// window.location.href = "joinindetail.aspx";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-
image: url(images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<h3 class="cursive-font">JOIN US</h3>
<form action="#">
</div>
</div>
</div>
</header>
</asp:Content>
joinus.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
cmd.ExecuteNonQuery();
txtname.Text = "";
txtphone.Text = "";
txtaddress.Text = "";
txtcity.Text = "";
txtservice.Text = "";
}
}
about.aspx
<h3 class="cursive-font" style="color:white";>We find almost every kind of sites on the world
wide web these days, but there are still some of the human needs to be focused
Thus this project is aimed to provide repair and service facilities to the users
</h3>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</header>
</asp:Content>
animate.css
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated-fast {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
@-webkit-keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
@-webkit-keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
-ms-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
to {
opacity: 1;
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
-ms-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
to {
opacity: 1;
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
/*-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);*/
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
/*-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);*/
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
/*-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);*/
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
/*-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);*/
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
/*-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);*/
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
/*-webkit-transform: translate3d(100%, 0, 0);
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
visibility: hidden;
/*-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);*/
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
to {
opacity: 1;
/*visibility: visible;*/
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
visibility: hidden;
/*-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);*/
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
to {
visibility: visible;
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpMenu {
from {
opacity: 0;
visibility: hidden;
/*-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);*/
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
visibility: visible;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpMenu {
from {
opacity: 0;
visibility: hidden;
/*-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);*/
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
visibility: visible;
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpMenu {
-webkit-animation-name: fadeInUpMenu;
animation-name: fadeInUpMenu;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
@-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
Testing
System testing
Running website in web browser and testing all of its functionalities of each module.
During developing of any kind of software or website testing is most important phase.
Testing is an activity to check whether the actual results match the expected results and to
ensure that the software system is defect free.
Unit testing
We have used unit testing so we can check whether there is any problem in any
specific page of the website. It helped us in increase in confidence that we can change or
maintain code after writing it once. Codes are more reusable and because of unit testing
development is faster.
Integration testing
Integration testing is a level of software testing where individual units are combined
and tested as a group. The purpose of this level of testing is to expose faults in the interaction
between integrated units. Test drivers and test stubs are used to assist in Integration Testing.
Integration Testing is the second level of testing performed after Unit Testing and before
System Testing.
We have used integration also because it helps in using the whole system as one. It is
performed after Unit Testing where all the modules where tested alone. Big bang is an
approach to Integration testing where all or most of the units are combined together and
tested at one goes. This approach is taken when the testing team receives the entire software
in a bundle.
Top Down is an approach to Integration Testing where top-level units are tested first
and lower level units are tested step by step after that. This approach is taken when top-down
development approach is followed. Test Stubs are needed to simulate lower level units which
may not be available during the initial phases.
Bottom Up is an approach to Integration Testing where bottom level units are tested
first and upper-level units step by step after that. This approach is taken when bottom-up
development approach is followed. Test Drivers are needed to simulate higher level units
which may not be available during the initial phases.
System testing
System testing is a level of software testing where a complete and integrated
software is tested. The purpose of this test is to evaluate the system’s compliance with the
specified requirements.
During the process of manufacturing a ballpoint pen, the cap, the body, the tail, the
ink cartridge and the ballpoint are produced separately and unit tested separately. When two
or more units are ready, they are assembled and Integration Testing is performed. When the
complete pen is integrated, System Testing is performed. System Testing is the third level of
software testing performed after Integration Testing and before Acceptance Testing.
We have used system testing so we can check whether each module is working well
or not. It is just like black box testing, also known as Behavioral Testing, is a software
testing method in which the internal structure/design/implementation of the item being tested
is not known to the tester. These tests can be functional or non-functional, though usually
functional.
Web testing
Web Testing in simple terms is checking your website for potential bugs before it’s
made live or before code is moved into the production environment.
Since we have made a website, therefore web testing will be very helpful for us to
use it in our testing phase.
Database testing
Database is one critical component of your web application and stress must be laid
to test it thoroughly. Testing activities will include-
Compatibility testing
Compatibility tests ensure that your web application displays correctly across different
devices. This would include-
Browser Compatibility Test: Same website in different browsers will display differently. You
need to test if your web application is being displayed correctly across browsers, JavaScript,
AJAX and authentication is working fine. You may also check for Mobile Browser
Compatibility.
The rendering of web elements like buttons, text fields etc. changes with change in Operating
System. Make sure your website works fine for various combinations of Operating systems such
as Windows, Linux, Mac and Browsers such as Firefox, Internet Explorer, Safari etc.
Expected output
Actual output
Limitations
This application uses the database for saving and retrieve information of the users and
merchents. If the database has less security then there can be a problem raised that is
information theft.
The server of this application can handle limited amount of users at a time. If the users are
more than the given amount of users, then can be a problem raised of server crash.
Future scope
AVN Repair and Services is a web-based project which is made for providing
various types of services. Thus in future we can add more functionalities to
this website.
Like computers, tablets, and smart phone devices have different types of
screens but there will be no effect on the visualization of the application.
The future of such websites will be better as this website will raise competition to grow in
the market
Bibliography
www.google.com
www.w3schools.com
www.stackoverflow.com
www.quora.com
www.wikipedia.com
www.youtube.com