PROJECT REPORT

DERA PARADISE INFRA LLP (REAL ESTATE )

Dr. A.P.J. Abdul Kalam Technical University Lucknow

in Fulfillment

For The Award of The Degree of

BACHELOR OF TECHNOLOGY

COMPUTER SCIENCE AND ENGINEERING

Supervisor: Submitted By:

Ms. Diksha Tiwari Sachin kumar (183511)

(Assistant Professor) sachin kamal (183511)

Department of COMPUTER SCIENCE & ENGINEERING

KRISHNA INSTITUTE OF TECHNOLOGY

KANPUR-209217

Uttar Pradesh

2021-22

Acknowledgement

The success of this project has been uncertain without the help of a dedicated band of people. Thus as token of appreciation of their effort in making this project a success, we would like to express our true and sincere acknowledgement to their contribution. Our special thanks goes to Ms. Diksha Tiwari, our project guide, CS department, K.I.O.T., for his able guidance and timely advice during the project work.

We would also like to thank our Head OF Department Mr.Manish Chaudhary, CS department, K.I.O.T., for her kind cooperation and extending us a very helpful hand in providing us the best facilities. We would also like to express our deep sense of gratitude to all the teachers for their kind and invaluable suggestions.

We would also like to thank our Director Admin (KGI), Mr. Saubhagya Mehrotra and Director (KIOT) Dr. Rashmi Dwivedi for her kind cooperation and extending us a very helpful hand in providing us the best facilities. We would also like to express our deep sense of gratitude to all the teachers for their kind and invaluable suggestions

Finally we express our heart filled thanks to all those who helped us in the accomplishment.

Sachin Kumar (183511

Sachin Kamal (183511

KRISHNA INSTITUTE OF TECHNOLOGY

KANPUR

CERTIFICATE

This is to certify that Mr. Sachin Kumar, Sachin Kamal students of B.Tech Final Year Computer Science and Engineering have submitted their project entitled “DERA PARADISE INFRA LLP (REAL ESTATE )” in partial fulfillment of the requirements for the award of Bachelor’s Degree in Computer Science & Engineering from A.K.T.U., Lucknow .

The project has been carried out under our supervision during academic session 2021-2022.

Project Guide: Head of Department:

Ms. Diksha Tiwari Mr.Manish Chaudhary

(Assistant Professor) (H.O.D.)

ABSTRACT

· Our project "online real estate business" is related to online applications of estate

· Real Estate measurement system is advance solutions for his/her estate problems

· users shows all the properties of buyer that are secure and verified and send them to the builder

· real system by the properties and verify them and the online service is provided by us free of charge

· Here registrations is also free of the cost. so user can registration by using real system then buy the property and verified them after few hour all day all guys put the Estate solutions.

· the software is so reliable to user our main concept is given best and quick result to user

TABLE OF CONTENTS

1) Introduction To The Project ............................................................................................ 7

2) System Analysis ................................................................................................................ 10

3) Requirement Analysis ......................................................................................... 13

4) Structured Analysis (Functional Modeling) ............................. ........................... 16

5) Project Design .......................................................................... .............................. 23

6) Coding .......................................................................... ................................................ 29

7) HTML ... ....................................................................................................................... 29

8) SLIDESHOW.CSS .......................................................................... ..................................... 41

9) COLOR.CSS .......................................................................... .......................................... 45

10) JQUERY.JS ................................................................................................................. 47

11) Testing And Implementation ........................................................................................... 96

12) Domain ..................................................................................................................... 100

13) Hosting .................................................................................................................... 101

14) Reference ...................................................................................................................... 103

LIST OF FIGURES

Figure 1: Symbols of DFD .................................................................................................. 18

Figure 2: Data Flow Diagram .................................................................................................. 22

Figure 3: home page .............................................................................................. 24

Figure 4: contact page ............................................................................................. 25

Figure 5: performane score ....................................................................................... 96

Figure 6: performane score mobile & desktop ............................................................. 98

Figure 7: Levels of testing ........................................................................................ 99

Figure 8: Domain .................................................................................................... 100

Figure 9: Hosting ................................................................................................... 101

Figure 10: Web Hosting Server ................................................................................ 102

CHAPTER 1

INTRODUCTION TO THE PROJECT

Real Estate System

Application Overview, Scope & Objectives:

DERA Paradise Infra LLP Real Estate web application will be useful tool for the general users who are interested in sale and purchase of real estate properties. The web application is intended to provide a platform for users to view a DERA Paradise Infra LLP Real Estate Properties for sale and purchase. It is a system for online handling all the commerce process likewise advertising, selling and buying.

Need for the Application:

The basic need for the application is to promote sales of real estate properties through the website. The agent/seller will also play a vital role for promotion and sale/purchase.

Purpose of the Document:

The purpose of this document is to layout in detail the functional and other requirements. This document contains the necessary information to meet the requirements set forth for the completion of this application. The target audience of this document is Project Sponsor, Project Managers, Developers, Designers, and QA Engineers. Now onwards, this document will act as a portal of information during the whole development cycle and any change in the functional or other requirements will be communicated.

DESCRIPTION OF TECHNOLOGY USED

There are many Real Estate tools and technologies required to build an e Real Estate operate a successful online business. Both software and hardware technologies must be included in your e-business plan.

1: Front End: HTML, CSS, JavaScript, Bootstrap, Jquery,

HTML:-The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

CSS:-Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

JavaScript:- JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client-side for web page behavior often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices. JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.^] It has dynamic typing, prototype-based object orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles

Bootstrap:-Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS, and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

As of April 2022, Bootstrap is the eleventh most starred project on GitHub, with over 156,000 stars.

Jquery:- jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least 3 to 4 times more usage than any other JavaScript library.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library.

programming language and first released it in 1991 as Python 0.9.0. Python 2.0 was released in 2000 and introduced new features such as list comprehensions, cycle-detecting garbage collection, reference counting, and Unicode support. Python 3.0, released in 2008, was a major

CHAPTER 2

SYSTEM ANALYSIS

The analysis is an important part of any project; if the analysis is not done properly then the

whole project moves in the wrong direction. It also provides a schedule for proper project work. The analysis task is divided into 2 areas:

✓ Feasibility Study.

✓ Requirement Analysis.

2.1 FEASIBILITY STUDY

Feasibility study of the system is a very important stage during system design. The feasibility study is a test of a system proposal according to its workability impact on the organization,

ability to meet user needs and effective use of resources. A feasibility study decides whether the system is properly developed or not.

There are five types of feasibility as mentioned below:

1. Technical Feasibility

2. Time Schedule feasibility

3. Operational feasibility

4. Implementation feasibility

5. Economic Feasibility

1. Technical Feasibility

Technical feasibility corresponds to the determination of whether it is technically feasible to develop the software. Here those tools are considered, which will be required for developing the project. The tools, which are available, and tools, which will be required, are taken into account. Considering all the above points and aspects it is observed that the cost incurred in developing this project from a technical perspective would not be too high. Thus, it is feasible for the company as well as for me to develop this system

2. Time Feasibility

Time feasibility corresponds to whether sufficient time is available to complete the project. Parameters considered:

▪ Schedule of the project.

▪ Time by which the project has to be completed.

Considering all the above factors it was decided that the allotted time which is 3 months was sufficient to complete the project.

3. Operational Feasibility

Operational feasibility corresponds to whether users are aware of the interface environment and whether sufficient resources are available or not.

Parameters considered:

▪ People with a basic knowledge of computers would be able to use our system very effectively and easily, as the system would have an intuitive GUI. The director and employees of Apna Bazar have a basic operating knowledge of computers, so 22 understanding the working of the system and using it would be easy from the decision maker’s point of view.

▪ All the relevant necessary resources for implementing and operating this system are already present in the office.

▪ Bearing in mind the above factor, it was observed that the cost incurred in developing this project from an operational standpoint would be low. Thus, it would be operationally feasible for the company.

4. Implementation Feasibility

Implementation Feasibility is about the basic infrastructure required to develop the system. Considering all the below points, it is feasible to develop the system.

Factors considered:

▪ All the minimum infrastructure facilities required like PC, books, and technical manuals are provided.

▪ Proper guidance is provided.

▪ All necessary data and files are provided.

5. Economic Feasibility

Economic Feasibility is about the total cost incurred for the system. The software resource requirement of the proposed system is HTML, CSS, and JS for the frontend UI

Return on Investment

There will be revenue in terms of more Customer Subscriptions.

i. There will be cost reduction in terms of maintaining huge amounts of paper records, stationary, humans.

ii. There will be tracking of the Subscribers from a centralized database.

iii. There will be awareness among not only the Subscribers ,but general public regarding the good points of the issue

Cost of No Change

The cost will be in terms of utilization of resources leading to the cost to the company. Since our cost of project is our efforts, which is obviously less than the long-term gain for the company, the project should be made.

COST- BENEFIT ANALYSIS

A cost-benefit analysis is necessary to determine economic feasibility. The primary objective of the cost benefit analysis is to find out whether it is economically worthwhile to invest in the project. If the returns on the investment are good, then the project is considered economically worthwhile. Cost benefit analysis is performed by first listing all the costs associated with the project cost which consists of both direct costs and indirect costs. Direct costs are those incurred by buying software, hiring people, cost of consumable items , rent for accommodation etc. Indirect costs include those involving time spent by user in discussing problems with system analysts

2.2 REQUIREMENT ANALYSIS

A complete understanding of software requirements is essential to the success of a web development effort. No matter how well designed or well coded, a poorly analyzed and specific program will disappoint users and bring grief to the developers. The requirement analysis task is the process of discovery, refinement, modification, and specification. The software scope, initially established by the system engineer and refined during project planning, is refined in detail. Models of the required data, information and control flow, and operational behavior are created. This website should be developed with the aim to simplify thes ping process and keep transparency and flexibility in performing each operation.

2.2.1Requirements Gathering

Also known as data collection. Data Collection is an important aspect of any type of research study. Inaccurate data collection can impact the results of a study and ultimately lead to invalid results. The methods used to gather the requirements of the project involve Quantitative research to review the existing systems in the market.

2.2.2Data Collection Methods

This study used quantitative techniques like online surveys and questionnaires. Qualitative data collection methods play an important role in impact evaluation by providing information useful to understand the processes behind observed results and assess changes in people’s perceptions of their well-being. Furthermore, qualitative methods can be used to improve the quality of survey-based quantitative evaluations by helping generate evaluation hypotheses; strengthening the design of survey questionnaires, and expanding or clarifying quantitative evaluation findings.

2.2.3Requirements

The requirements from the proposed system were categorized into functional and non-functional requirements.

Functional Requirements:- The following is the desired functionality of the new system. The proposed project would cover:

2.2.5 System Specifications

This section describes the hardware components and software requirements needed for the effective and efficient running of the system

Table: 1 Hardware Requirements

SL	Hardware	Minimum System Requirement
01	Processor	2.4 GHz Processor speed
02	Memory	2 GB RAM
03	Disk	500 GB

Table: 2 Software Requirements

SL	Software	Minimum System Requirement
01	Operating System	Windows 8, Windows 10 or MAC Ox 10.8,10.9, or 10.11, LINUX
02	Database Management System	MySQL
03	Runtime Environment	PyCharm or Visual Studio Code

Ø Requirement Analysis

This is the first phase of waterfall model which includes a meeting with the customer to understand his requirements. It is very important to understand the customer requirements and expectations so that the end product meets his specifications. All the requirements related to system to be developed are analyze in this place.

Ø System Design

System Design helps in specifying hardware and system requirements and also helps in defining overall system architecture.

Ø Implementation

First of all designed the system in small units and implemented for testing its functionality.

Ø Testing

In this stage, both individual components and the integrated whole are methodically verified to ensure that they are error free and fully meet the requirements. All the units developed in the implementation phase are integrated into a system after testing of each unit. Post integration the entire system is tested for any faults and failures.

Ø Deployment

Once the functional and non functional testing is done, the product is deployed.

Ø Maintenance

This is the final phase of the waterfall model, in which the completed software product is handed over to the client after alpha, beta testing.

Spiral model is a combination of iterative development process model and sequential linear development model. The spiral model has four phases like as

Ø Identification:

The business requirements in the baseline spiral. This also includes understanding the system requirements by continuous communication between the customer and the system analyst. At the end of the spiral the product is deployed in the identified market.

Ø Design

It involves architectural design, logical design of modules, physical product design and final design in the subsequent spirals.

CHAPTER 3

STRUCTURED ANALYSIS (FUNCTIONAL MODELING)

3.1 Data Flow Diagram

A Data Flow Diagram (DFD) is a traditional visual representation of the information flows within a system. A neat and clear DFD can depict the right amount of the system requirement graphically. It can be manual, automated, or a combination of both.

It shows how data enters and leaves the system, what changes the information, and where data is stored.

The objective of a DFD is to show the scope and boundaries of a system as a whole. It may be used as a communication tool between a system analyst and any person who plays a part in the order that acts as a starting point for redesigning a system. The DFD is also called a data flow graph or bubble chart.

The following observations about DFDs are essential:

1. All names should be unique. This makes it easier to refer to elements in the DFD.

2. Remember that DFD is not a flowchart. An arrow is a flowchart that represents the order of events; arrows in DFD represent flowing data. A DFD does not involve any order of events.

3. Suppress logical decisions. If we ever have the urge to draw a diamond-shaped box in a DFD, suppress that urge! A diamond-shaped box is used in flow charts to represent decision points with multiple existing paths of which only one is taken. This implies an ordering of events, which makes no sense in a DFD.

4. Do not become bogged down with details. Defer error conditions and error handling until the end of the analysis.

DFDs became popular in the 1970s and have maintained their widespread use by being easy to understand. Visually displaying how a process or system works can hold people’s attention and explain complex concepts better than blocks of text can, so DFDs are able to help almost anyone grasp a system’s or process’ logic and functions.

There are two types of DFDs — logical and physical. Logical diagrams display the theoretical process of moving information through a system, like where the data comes from, where it goes, how it changes, and where it ends up.

Physical diagrams show you the practical process of moving information through a system, like how your system’s specific software, hardware, files, employees, and customers influences its flow of information.

You can either use logical or physical diagrams to describe the same flow of information or you can use them in conjunction to understand a process or system on a more granular level. But, before you can use a DFD to understand your system or process’ flow of information, you need to know the standard notations or symbols used to describe it.

3.1.1 Data Flow Diagram Symbols

Data Flow Diagram symbols are standardized notations, like rectangles, circles, arrows, and short-text labels, that describe a system or process’ data flow direction, data inputs, data outputs, data storage points, and its various sub-processes.

There are four common methods of notation used in DFDs: Yourdon & De Marco, Gene & Sarson, SSADM, and Unified. All use the same labels and similar shapes to represent the four main elements of a DFD — external entity, process, data store, and data flow.

Figure 1: Symbols of DFD

External Entity

An external entity, which are also known as terminators, sources, sinks, or actors, are an outside system or process that sends or receives data to and from the diagrammed system. They’re either the sources or destinations of information, so they’re usually placed on the diagram’s edges. External entity symbols are similar across models except for Unified, which uses a stick-figure drawing instead of a rectangle, circle, or square.

The process is a procedure that manipulates the data and its flow by taking incoming data, changing it, and producing an output with it. A process can do this by performing computations and using logic to

sort the data or change its flow of direction. Processes usually start from the top left of the DFD and finish on the bottom right of the diagram

Data Store

Data stores hold information for later use, like a file of documents that’s waiting to be processed. Data inputs flow through a process and then through a data store while data outputs flow out of a data store and then through a process.

Data Flow

Data flow is the path the system’s information takes from external entities through processes and data stores. With arrows and succinct labels, the DFD can show you the direction of the data flow.

Before you start mapping out data flow diagrams you need to follow four best practices to create a valid DFD.

· Each process should have at least one input and one output.

· Each data store should have at least one data flow in and data flow out.

· A system’s stored data must go through a process.

· All processes in a DFD must link to another process or data store.

3.1.2 Levels of Data Flow Diagrams

DFDs can range from simple overviews to complex, granular representations of a system or process with multiple levels, starting with level 0. The most common and intuitive DFDs are level 0 DFDs, also called context diagrams. They’re digestible, high-level overviews of the flow of information through a system or process, so almost anyone can understand it.

3.2 DATA (OBJECT) MODELING

Data modeling is the process of analyzing and defining all the different data your business collects and produces, as well as the relationships between those bits of data. It is used to analyze the data requirements that are required for the business processes. The data models are created for the data to be stored in a database. The Data Model's main focus is on what data is needed and how we have to organize data rather than on what operations we have to perform.

A Data Model is basically an architect's building plan. It is a process of documenting complex software system design as in a diagram that can be easily understood. The diagram will be created using text and symbols to represent how the data will flow. It is also known as the blueprint for constructing new software or re-engineering any application.

Uses of Data Modeling Tools

Data Modeling is a process to formulate data in an information system in a structured format. Listed below are certain practical uses of the related tools in any sector or industry.

● Data Modeling helps create a robust design with a data model that can show an organization's entire data on the same platform.

● The data model makes sure that all the data objects required by the database are represented or not.

● The database at the logical, physical, and conceptual levels can be designed with the help data model.

● The relation tables, foreign keys, and primary keys can be defined with the data model's help.

● Data Modeling Tools help in the improvement of data quality.

● The Data Model gives a clear picture of business requirements.

● Redundant data and missing data can be identified with the help of data models.

● In data models, all the important data is accurately represented. The chances of incorrect results and faulty reports decreased as the data model reduces data omission.

● The data models create a visual representation of the data. With the help of it, the data analysis gets improved. We get the data picture, which can then be used by developers to create a physical database.

Three Perspectives of a Data Model

Data Modeling helps to create a conceptual model and create the relationship between the items. The basic data modeling techniques involve dealing with three perspectives of a data model.

1. Conceptual Model

The conceptual data model is a view of the data that is required to help business processes. It also keeps track of business events and keeps related performance measures. The conceptual model defines what the system contains. This type of Data Modeling focuses on finding the data used in a business rather than processing flow. The main purpose of this data model is to organize and define business rules and concepts. For example, it helps business people to view any data like market data, customer data, and purchase data.

2. Logical Model

In the logical data model, the map of rules and data structures includes the data required, such as tables, columns, etc. Data architects and Business Analysts create the Logical Model. We can use the logical model to transform it into a database. This type of Data Modeling is always present in the root package object. This data model helps to form the base for the physical model. In this model, there is no secondary or primary key defined.

3. Physical Data Model

In a physical data model, the implementation is described using a specific database system. It defines all the components and services that are required to build a database. It is created by using the database language and queries. The physical data model represents each table, column, constraints like primary key, foreign key, NOT NULL, etc. The main work of the physical data model is to create a database. This model is created by the Database Administrator (DBA) and developers. This type of Data Modeling gives us the abstraction of the databases and helps to create the schema. This model describes the particular implementation of the data model. The physical data model helps us to have database column keys, constraints, and RDBMS features.

Data Flow Diagram

Level 0

Home page

Project image

Level 1

Home page

All users

Search property

Home page

City

Project image

Location

Project

BHK

Project details

Level 2

Figure 2: Data Flow Diagram

CHAPTER 4

PROJECT DESIGN

One of the effective ways to persuade a client is to impress them with a wonderfully-built website. In like manner, the real estate industry has embraced this scheme for more apparent exposure and wider reach. Here’s The Coloradan a practical real estate website design that will serve as a guide.

The homepage has a simple design but contains the essential elements, including clear CTAs, logo, social icons, and more. Specifically, it uses huge square photos with short details on its side.

Hence, the building, residences and the neighborhood menu are easily accessible on the homepage.

a good website can leverage the brand’s credibility and unlock more opportunities. Hence, this marketing strategy is a demand. Property Club has an awe-inspiring real estate website design that promises to provide a better home search.

Specifically, this firm offers total transparency and direct access to landlords, listing brokers, and property managers.

Finding the best apartment, house for rent, or sale is perfectly quick and easy with this website. The hero header bears the advanced search with bright and vivid colors as the background image.

Typically, magazines and brands that feature your product or services will help escalate your business. Hence, this website ensures that such a feature will look aesthetically pleasing. So, don’t miss checking the features on this website.

HOME PAGE

https://deraparadiseinfrallp.com/index.html

Figure 3: home page

Requirement

Figure 4: contact page

Contact Us

https://deraparadiseinfrallp.com/contact.html

Figure 5: contact request page

Property Detail

Figure 6: Property Detail

CHAPTER 5 Coding

File Structure

.HTML

<!DOCTYPE html>

<title> DERA Paradise infra LLP</title>

</head>

</div>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li><a href="about.html">About us </a></li>

<li><a href="service.html">Service</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="properties.html">Properties</a></li>

<li><a href="contact.html">Contact</a></li>

<h3><i class="fa fa-envelope-o grd1 global-radius"></i> QUICK APPOINTMENT</h3>

</div>

</div>

</div>

</div>

<label class="sr-only">Select Time</label>

<option value="selecttime">Select Time</option>

<option value="Weekdays">Weekdays</option>

<option value="Weekend">Weekend</option>

</select>

</div>

<label class="sr-only">What is max price?</label>

</select>

</div>

<button type="submit" value="SEND" id="submit1" class="btn btn-light btn-radius btn-brd grd1 btn-block">Get an Appointment</button>

</div>

</fieldset>

</form>

</div>

<h2>Sell Your Property with DERA Paradise infra LLP</h2>

<p class="lead">With DERA Paradise infra LLP . </p>

<a data-scroll href="#gallery" class="btn btn-light btn-radius grd1 btn-brd">View Gallery</a>

</div>

</div>

</div>

</div>

<h4><a href="#">Full Furnished</a></h4>

</div>

</div>

<a href="#contact" data-scroll class="btn btn-light global-radius btn-brd grd1 effect-1">Contact Me</a>

</div>

</div>

</div>

</div>

<span><i class="fa fa-envelope "></i> <a href="mailto:support@sitename.com">support@sitename.com</a></span>

<span><i class="fa fa-link "></i> <a href="www.teachask.com">www.teachask.com</a></span>

<span><i class="fa fa-facebook-square "></i> <a href="#">facebook.com/teachask</a></span>

<span><i class="fa fa-twitter-square "></i> <a href="twitter.com/teachask1">twitter.com/teachask1</a></span>

<span><i class="fa fa-linkedin-square "></i> <a href="#">linkedin.com/sachin.kumar.singh.sagar</a></span>

</div>

</div>

</div>

</div>

<h3>Happy Customers</h3>

<p class="lead">DERA Paradise infra LLP.</p>

</div>

</div>

<h3>

</i> Wonderful Support! <i class="fa fa-quote-right">

</i>

</h3>

</div>

<h4>sachin kumar <small>- teachask.com</small></h4>

</div>

</div>

<h3>

</i> Awesome Services! <i class="fa fa-quote-right">

</i>

</h3>

<h4>saurabh singh <small>- alighar </small>

</h4>

</div>

</div>

</i> Great & Talented Team! <i class="fa fa-quote-right">

</i>

</h3>

<h4>vipin sagar <small>- kalyanpur</small>

</h4>

</div>

</div>

</i> Awesome Services! <i class="fa fa-quote-right">

</i>

</h3>

</div>

<h4>hitesh kumar singh <small>- unnao </small>

</h4>

</div>

</div>

<h3>

</i> Great & Talented Team! <i class="fa fa-quote-right">

</i>

</h3>

<li><a href="#"> Properties</a></li>

<li><a href="#"> Contact</a></li>

</ul>

</div>

</div>

<h3>Contact Details</h3>

</div>

<li><a href="mailto:#">info@yoursite.com</a></li>

<li><a href="#">www.teachask.com.com</a></li>

<li>kalyanpur kanpur</li>

</ul>

</div>

</div>

<h3>Social</h3>

</div>

</i> Facebook</a></li>

</div>

</form>

</div>

</script>

</script>

</script>

</script>

</body>

</html>

SLIDESHOW.CSS

html {

min-height: 100%;

}

body, html {

height: 100%;

}

.slideshow {

list-style: none;

z-index: 1;

}

.slideshow li span {

width: 100%;

height: 100%;

position: absolute;

top: 0px;

left: 0px;

color: transparent;

background-size: cover;

background-position: 50% 50%;

background-repeat: none;

opacity: 0;

z-index: 0;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-animation: imageAnimation 24s linear infinite 0s;

-moz-animation: imageAnimation 24s linear infinite 0s;

animation: imageAnimation 24s linear infinite 0s;

}

.slideshow li h3 {

position: absolute;

text-align: center;

z-index: 2;

bottom: 150px;

left: 0;

right: 0;

opacity: 0;

font-size: 4.0625em;

font-family: 'Josefin Sans', sans-serif;

text-transform: uppercase;

color: #fff;

-webkit-animation: titleAnimation 24s linear 1 0s;

-moz-animation: titleAnimation 24s linear 1 0s;

animation: titleAnimation 24s linear 1 0s;

}

@media only screen and (min-width: 768px) {

.slideshow li h3 {

bottom: 30px;

font-size: 8.125em;

}

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

.slideshow li h3 {

font-size: 10.9375em;

}

.slideshow li:nth-child(1) span {

}

.slideshow li:nth-child(2) span {

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

animation-delay: 6s;

}

.slideshow li:nth-child(3) span {

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

animation-delay: 12s;

}

.slideshow li:nth-child(4) span {

background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/spring-slide.jpg);

-webkit-animation-delay: 18s;

-moz-animation-delay: 18s;

animation-delay: 18s;

}

@-webkit-keyframes imageAnimation {

0% {

opacity: 0;

-webkit-animation-timing-function: ease-in;

}

12.5% {

opacity: 1;

-webkit-animation-timing-function: ease-out;

}

25% {

opacity: 1;

}

37.5% {

opacity: 0;

}

100% {

opacity: 0;

}

@-moz-keyframes imageAnimation {

0% {

opacity: 0;

-moz-animation-timing-function: ease-in;

}

12.5% {

opacity: 1;

-moz-animation-timing-function: ease-out;

}

25% {

opacity: 1;

}

37.5% {

opacity: 0;

}

100% {

opacity: 0;

}

@keyframes imageAnimation {

0% {

opacity: 0;

-webkit-animation-timing-function: ease-in;

-moz-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

12.5% {

opacity: 1;

-webkit-animation-timing-function: ease-out;

-moz-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

25% {

opacity: 1;

}

37.5% {

opacity: 0;

}

100% {

opacity: 0;

}

@-webkit-keyframes titleAnimation {

0% {

opacity: 0;

}

12.5% {

opacity: 1;

}

25% {

opacity: 1;

}

37.5% {

opacity: 0;

}

100% {

opacity: 0;

}

@-moz-keyframes titleAnimation {

0% {

opacity: 0;

}

12.5% {

opacity: 1;

}

25% {

opacity: 1;

}

37.5% {

opacity: 0;

}

100% {

opacity: 0;

}

@keyframes titleAnimation {

0% {

opacity: 0;

}

12.5% {

opacity: 1;

}

25% {

opacity: 1;

}

37.5% {

opacity: 0;

COLOR.CSS

.customwidget li i,

.navbar-nav span {

color: #db00ce !important;

}

.lead strong,

.icon-wrapper:hover a,

a:hover,

a:focus {

color: #2750ff

}

.grd1-trans {

background: rgb(219, 0, 206);

background: -moz-linear-gradient(top, rgba(219, 0, 206, 0.6) 0%, rgba(39, 80, 255, 0.6) 100%);

background: -webkit-linear-gradient(top, rgba(219, 0, 206, 0.6) 0%, rgba(39, 80, 255, 0.6) 100%);

background: linear-gradient(to bottom, rgba(219, 0, 206, 0.6) 0%, rgba(39, 80, 255, 0.6) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#db00ce', endColorstr='#2750ff', GradientType=0);

}

.icon_wrap:hover,

.nav-pills > li.active > a,

.nav-pills > li.active > a:focus,

.nav-pills > li.active > a:hover,

.icon-wrapper:hover i,

.grd1 {

color: #ffffff;

background: #db00ce;

background: -moz-linear-gradient(left, #db00ce 0%, #2750ff 100%);

background: -webkit-linear-gradient(left, #db00ce 0%, #2750ff 100%);

background: linear-gradient(to right, #db00ce 0%, #2750ff 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#db00ce', endColorstr='#2750ff', GradientType=1);

}

.icon_wrap,

.dmtop:hover,

.cac:hover,

.features-right li:hover i,

.features-left li:hover i,

.nav-pills > li:hover > a,

.nav-pills > li:focus > a,

.nav-pills > li.active > a,

.nav-pills > li.active > a:focus,

.nav-pills > li.active > a:hover,

.divider-bar,

.owl-next:hover i,

.owl-prev:hover i,

.icon-wrapper:hover i:hover,

.grd1:hover,

.grd1:focus {

background-position: 100px;

color: #ffffff;

background: #2750ff;

background: -moz-linear-gradient(left, #2750ff 0%, #db00ce 100%);

background: -webkit-linear-gradient(left, #2750ff 0%, #db00ce 100%);

background: linear-gradient(to right, #2750ff 0%, #db00ce 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2750ff', endColorstr='#db00ce', GradientType=1);

JQUERY.JS

!(function(root, factory) {

if (typeof define === 'function' && define.amd) {

define(['jquery'], factory);

} else if (typeof exports === 'object') {

factory(require('jquery'));

} else {

factory(root.jQuery);

}

})(this, function($) {

'use strict';

var PLUGIN_NAME = 'vide';

var DEFAULTS = {

volume: 1,

playbackRate: 1,

muted: true,

loop: true,

autoplay: true,

position: '50% 50%',

posterType: 'detect',

resizing: true,

bgColor: 'transparent',

className: ''

};

function parseOptions(str) {

var obj = {};

var delimiterIndex;

var option;

var prop;

var val;

var arr;

var len;

var i;

arr = str.replace(/\s*:\s*/g, ':').replace(/\s*,\s*/g, ',').split(',');

for (i = 0, len = arr.length; i < len; i++) {

option = arr[i];

// Ignore urls and a string without colon delimiters

if (

option.search(/^(http|https|ftp):\/\//) !== -1 ||

option.search(':') === -1

) {

break;

}

delimiterIndex = option.indexOf(':');

prop = option.substring(0, delimiterIndex);

val = option.substring(delimiterIndex + 1);

// If val is an empty string, make it undefined

if (!val) {

val = undefined;

}

// Convert a string value if it is like a boolean

if (typeof val === 'string') {

val = val === 'true' || (val === 'false' ? false : val);

}

// Convert a string value if it is like a number

if (typeof val === 'string') {

val = !isNaN(val) ? +val : val;

}

obj[prop] = val;

}

// If nothing is parsed

if (prop == null && val == null) {

return str;

}

return obj;

}

/**

* Parse a position option

* @private

* @param {String} str

* @returns {Object}

function parsePosition(str) {

str = '' + str;

// Default value is a center

var args = str.split(/\s+/);

var x = '50%';

var y = '50%';

var len;

var arg;

var i;

for (i = 0, len = args.length; i < len; i++) {

arg = args[i];

// Convert values

if (arg === 'left') {

x = '0%';

} else if (arg === 'right') {

x = '100%';

} else if (arg === 'top') {

y = '0%';

} else if (arg === 'bottom') {

y = '100%';

} else if (arg === 'center') {

if (i === 0) {

x = '50%';

} else {

y = '50%';

}

} else {

if (i === 0) {

x = arg;

} else {

y = arg;

}

return { x: x, y: y };

}

/**

* Search a poster

* @private

* @param {String} path

* @param {Function} callback

function findPoster(path, callback) {

var onLoad = function() {

callback(this.src);

};

$('<img src="' + path + '.gif">').load(onLoad);

$('<img src="' + path + '.jpg">').load(onLoad);

$('<img src="' + path + '.jpeg">').load(onLoad);

$('<img src="' + path + '.png">').load(onLoad);

}

/**

* Vide constructor

* @param {HTMLElement} element

* @param {Object|String} path

* @param {Object|String} options

* @constructor

function Vide(element, path, options) {

this.$element = $(element);

// Parse path

if (typeof path === 'string') {

path = parseOptions(path);

}

// Parse options

if (!options) {

options = {};

} else if (typeof options === 'string') {

options = parseOptions(options);

}

// Remove an extension

if (typeof path === 'string') {

path = path.replace(/\.\w*$/, '');

} else if (typeof path === 'object') {

for (var i in path) {

if (path.hasOwnProperty(i)) {

path[i] = path[i].replace(/\.\w*$/, '');

}

this.settings = $.extend({}, DEFAULTS, options);

this.path = path;

// https://github.com/VodkaBears/Vide/issues/110

try {

this.init();

} catch (e) {

if (e.message !== NOT_IMPLEMENTED_MSG) {

throw e;

}

/**

* Initialization

* @public

Vide.prototype.init = function() {

var vide = this;

var path = vide.path;

var poster = path;

var sources = '';

var $element = vide.$element;

var settings = vide.settings;

var position = parsePosition(settings.position);

var posterType = settings.posterType;

var $video;

var $wrapper;

// Set styles of a video wrapper

$wrapper = vide.$wrapper = $('<div>')

.addClass(settings.className)

.css({

position: 'absolute',

'z-index': -1,

top: 0,

left: 0,

bottom: 0,

right: 0,

overflow: 'hidden',

'-webkit-background-size': 'cover',

'-moz-background-size': 'cover',

'-o-background-size': 'cover',

'background-size': 'cover',

'background-color': settings.bgColor,

'background-repeat': 'no-repeat',

'background-position': position.x + ' ' + position.y

});

// Get a poster path

{

max-width: 1080px

}

a {

color: #1f1f1f;

text-decoration: none !important;

outline: none !important;

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}

h1,

h2,

h3,

h4,

h5,

h6 {

letter-spacing: 0;

font-weight: normal;

position: relative;

padding: 0 0 10px 0;

font-weight: normal;

line-height: 120% !important;

color: #1f1f1f;

margin: 0

}

h1 {

font-size: 24px

}

h2 {

font-size: 22px

}

h3 {

font-size: 18px

}

h4 {

font-size: 16px

}

h5 {

font-size: 14px

}

h6 {

font-size: 13px

}

h1 a,

h2 a,

h3 a,

h4 a,

h5 a,

h6 a {

color: #212121;

text-decoration: none!important;

opacity: 1

}

h1 a:hover,

h2 a:hover,

h3 a:hover,

h4 a:hover,

h5 a:hover,

h6 a:hover {

opacity: .8

}

a {

color: #1f1f1f;

text-decoration: none;

outline: none;

}

.btn {

text-decoration: none !important;

outline: none !important;

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}

.btn-custom {

margin-top: 20px;

background-color: transparent !important;

border: 2px solid #ddd;

padding: 12px 40px;

font-size: 16px;

}

.lead {

font-size: 18px;

line-height: 30px;

color: #767676;

margin: 0;

padding: 0;

}

blockquote {

margin: 20px 0 20px;

padding: 30px;

}

ul, li, ol{

margin: 0px;

padding: 0px;

list-style: none;

}

input, textarea {

outline: none;

box-shadow: none;

transition: all 0.3s ease-in-out;

}

::-webkit-input-placeholder {

color: #000000;

}

:-moz-placeholder {

/* Firefox 18- */

color: #000000;

}

::-moz-placeholder {

/* Firefox 19+ */

color: #000000;

}

:-ms-input-placeholder {

/* IE 10+ */

color: #000000;

}

::-ms-input-placeholder {

/* Edge */

color: #000000;

}

:placeholder-shown {

/* Standard one last! */

color: #000000;

}

/*------------------------------------------------------------------

WP CORE

-------------------------------------------------------------------*/

.first {

clear: both

}

.last {

margin-right: 0

}

.alignnone {

margin: 5px 20px 20px 0;

}

.aligncenter,

div.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

.alignright {

float: right;

margin: 10px 0 20px 20px;

}

.alignleft {

float: left;

margin: 10px 20px 20px 0;

}

a img.alignright {

float: right;

margin: 10px 0 20px 20px;

}

a img.alignnone {

margin: 10px 20px 20px 0;

}

a img.alignleft {

float: left;

margin: 10px 20px 20px 0;

}

a img.aligncenter {

display: block;

margin-left: auto;

margin-right: auto

}

.wp-caption {

background: #fff;

border: 1px solid #f0f0f0;

max-width: 96%;

/* Image does not overflow the content area */

padding: 5px 3px 10px;

text-align: center;

}

.wp-caption.alignnone {

margin: 5px 20px 20px 0;

}

.wp-caption.alignleft {

margin: 5px 20px 20px 0;

}

.wp-caption.alignright {

margin: 5px 0 20px 20px;

}

.wp-caption img {

border: 0 none;

height: auto;

margin: 0;

max-width: 98.5%;

padding: 0;

.header_style_01 .navbar-brand {

padding: 2px 15px 0 15px;

}

.header_style_01 .navbar-default .navbar-nav > li > a {

border-radius: 0;

color: #222222;

font-size: 15px;

font-style: normal;

font-weight: 400;

text-transform: capitalize;

background-color: transparent;

}

.header_style_01 .navbar-default .navbar-nav > li a {

background-color: transparent;

border-radius: 2px;

}

.header_style_01 .navbar-default .navbar-nav > li:hover a,

.header_style_01 .navbar-default .navbar-nav > li:focus a {

background-color: #076799;

color: #ffffff;

}

body.realestate_version .social-links:hover a{

background-color: transparent !important;

color: #333333 !important;

}

.header_style_01 .navbar-default .navbar-nav > li a.active {

background-color: #a8cf45;

color: #ffffff;

border-radius: 2px;

}

.header_style_01 .navbar-right > li {

margin-top: 2px;

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}

.header_style_01 .navbar-right > li > a {

padding-bottom: 10px;

padding-top: 10px;

}

li.social-links {

margin: 0 8px;

}

li.social-links a {

padding: 13px 0 !important;

}

.affix-top {

overflow: hidden;

visibility: visible;

opacity: 1;

top: -100%;

}

.affix {

top: 0;

left: 0;

right: 0;

width: 100%;

padding: 20px 40px;

background-color: #1f1f1f !important;

-webkit-transition: visibility 0.95s ease-in-out, opacity 0.95s ease-in-out, bottom 0.95s ease-in-out, top 0.95s ease-in-out, left 0.95s ease-in-out, right 0.95s ease-in-out;

-moz-transition: visibility 0.95s ease-in-out, opacity 0.95s ease-in-out, bottom 0.95s ease-in-out, top 0.95s ease-in-out, left 0.95s ease-in-out, right 0.95s ease-in-out;

-o-transition: visibility 0.95s ease-in-out, opacity 0.95s ease-in-out, bottom 0.95s ease-in-out, top 0.95s ease-in-out, left 0.95s ease-in-out, right 0.95s ease-in-out;

transition: visibility 0.95s ease-in-out, opacity 0.95s ease-in-out, top 0.95s ease-in-out, bottom 0.95s ease-in-out, left 0.95s ease-in-out, right 0.95s ease-in-out;

}

.navbar-nav li {

position: relative;

}

.navbar-nav span {

font-size: 24px;

position: absolute;

right: 2px;

top: 13px;

}

.fixed-menu .navbar-default {

position: fixed;

visibility: hidden;

left: 0px;

top: 0px;

width: 100%;

padding: 0px 0px;

background: #ffffff;

z-index: 0;

transition: all 500ms ease;

-moz-transition: all 500ms ease;

-webkit-transition: all 500ms ease;

-ms-transition: all 500ms ease;

-o-transition: all 500ms ease;

z-index: 999;

opacity: 1;

visibility: visible;

-ms-animation-name: fadeInDown;

-moz-animation-name: fadeInDown;

-op-animation-name: fadeInDown;

-webkit-animation-name: fadeInDown;

animation-name: fadeInDown;

-ms-animation-duration: 500ms;

-moz-animation-duration: 500ms;

-op-animation-duration: 500ms;

-webkit-animation-duration: 500ms;

animation-duration: 500ms;

-ms-animation-timing-function: linear;

-moz-animation-timing-function: linear;

-op-animation-timing-function: linear;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-ms-animation-iteration-count: 1;

-moz-animation-iteration-count: 1;

-op-animation-iteration-count: 1;

-webkit-animation-iteration-count: 1;

animation-iteration-count: 1;

}

.fixed-menu .navbar-default {

padding: 15px 30px;

box-shadow: 0 0 8px 0 rgba(0,0,0,.12);

}

body.realestate_version .header_style_01 .navbar-right > li.search-option{

position: relative;

}

body.realestate_version .header_style_01 .navbar-right > li.search-option button.search{

line-height: 43px;

width: 45px;

color: #fff;

background: #a8cf45;

border: none;

transition: all .3s ease-in-out;

border-radius: 2px;

}

body.realestate_version .header_style_01 .navbar-right > li.search-option button.search:hover{

background: #076799;

}

body.realestate_version .header_style_01 .navbar-right > li.search-option form.dropdown-menu{

position: absolute;

height: 50px;

width: 280px;

padding: 5px;

border-radius: 0;

right: 0;

left: auto;

top: 100%;

box-shadow: none;

border: none;

float: none;

margin: 0;

background: #fff;

box-shadow: 0 0px 5px 2px rgba(0,0,0,.175);

}

body.realestate_version .header_style_01 .navbar-right > li.search-option form input{

width: 100%;

height: 100%;

background: transparent;

border: 1px solid #ececec;

padding: 0 49px 0 10px;

}

body.realestate_version .header_style_01 .navbar-right > li.search-option form button{

display: block;

width: 48px;

color: #fff;

background: #a8cf45;

border: 1px solid #fff;

border-left: none;

line-height: 40px;

text-align: center;

position: absolute;

top: 4px;

right: 5px;

bottom: 4px;

border-radius: 2px;

}

/*------------------------------------------------------------------

SECTIONS

-------------------------------------------------------------------*/

.parallax {

background-attachment: fixed;

background-size: cover;

height: 100%;

padding: 120px 0;

position: relative;

width: 100%;

}

.parallax.parallax-off {

background-attachment: scroll !important;

display: block;

height: auto;

min-height: 100%;

overflow: hidden;

position: relative;

background-position: center center;

vertical-align: sub;

width: 100%;

z-index: 2;

}

.no-scroll-xy {

overflow: hidden !important;

-webkit-transition: all .4s ease-in-out;

-moz-transition: all .4s ease-in-out;

-ms-transition: all .4s ease-in-out;

-o-transition: all .4s ease-in-out;

transition: all .4s ease-in-out;

}

.section {

display: block;

position: relative;

overflow: hidden;

padding: 70px 0;

}

.noover {

overflow: visible;

}

.noover .btn-dark {

border: 0 !important;

}

.nopad {

padding: 0;

}

.nopadtop {

padding-top: 0;

}

.section.wb {

background-color: #ffffff;

}

.section.lb {

background-color: #f2f3f5;

}

.section.db {

background-color: #1f1f1f;

}

.section.color1 {

background-color: #448AFF;

}

.first-section {

display: block;

position: relative;

overflow: hidden;

}

.first-section::before{

content: "";

position: absolute;

width: 100%;

height: 100%;

top: 0px;

left: 0px;

background: rgba(0,0,0,0.5);

}

.first-section h2 {

color: #ffffff;

font-size: 52px;

font-weight: 300;

text-transform: capitalize;

display: block;

margin: 0;

padding: 30px 0 30px;

position: relative;

}

.first-section .lead {

font-size: 21px;

font-weight: 300;

padding: 0 0 40px;

margin: 0;

line-height: inherit;

color: #ffffff;

}

.macbookright {

width: 980px;

position: absolute;

right: -15%;

bottom: -6%;

}

.section-title {

display: block;

position: relative;

margin-bottom: 60px;

}

.section-title p {

color: #999;

font-weight: 400;

font-size: 18px;

line-height: 33px;

margin: 0;

}

.section-title h3 {

font-size: 42px;

font-weight: 300;

line-height: 62px;

margin: 0 0 25px;

padding: 0;

text-transform: none;

}

.section.colorsection p,

.section.colorsection h3,

.section.db h3 {

color: #ffffff;

}

.owl-carousel .owl-item img{

width: auto;

display: block;

margin: 0 auto;

}

/*------------------------------------------------------------------

PORTFOLIO

-------------------------------------------------------------------*/

.item-h2,

.item-h1 {

height: 100% !important;

height: auto !important;

}

.isotope-item {

z-index: 2;

padding: 0;

}

.isotope-hidden.isotope-item {

pointer-events: none;

z-index: 1;

}

.isotope,

.isotope .isotope-item {

/* change duration value to whatever you like */

-webkit-transition-duration: 0.8s;

-moz-transition-duration: 0.8s;

transition-duration: 0.8s;

}

.isotope {

-webkit-transition-property: height, width;

-moz-transition-property: height, width;

transition-property: height, width;

}

.isotope .isotope-item {

-webkit-transition-property: -webkit-transform, opacity;

-moz-transition-property: -moz-transform, opacity;

transition-property: transform, opacity;

}

.portfolio-filter ul {

padding: 0;

z-index: 2;

display: block;

position: relative;

margin: 0;

}

.portfolio-filter ul li {

border-radius: 0;

display: inline-block;

margin: 0 5px 0 0;

text-decoration: none;

text-transform: uppercase;

vertical-align: middle;

}

.portfolio-filter ul li:last-child:after {

content: "";

}

.portfolio-filter ul li .btn-dark {

box-shadow: none;

background-color: transparent;

border: 1px solid #e6e7e6 !important;

color: #1f1f1f;

font-weight: 400;

font-size: 13px;

padding: 10px 30px;

}

.da-thumbs {

list-style: none;

position: relative;

padding: 0;

}

.da-thumbs .pitem {

margin: 0;

padding: 15px;

position: relative;

}

.da-thumbs .pitem a,

.da-thumbs .pitem a img {

display: block;

position: relative;

}

.da-thumbs .pitem a {

overflow: hidden;

}

.da-thumbs .pitem a div {

position: absolute;

background-color: rgba(0, 0, 0, 0.8);

width: 100%;

height: 100%;

}

.da-thumbs .pitem a div h3 {

display: block;

color: #ffffff;

font-size: 20px;

padding: 30px 15px;

text-transform: capitalize;

font-weight: normal;

}

.da-thumbs .pitem a div h3 small {

display: block;

color: #ffffff;

margin-top: 5px;

font-size: 13px;

font-weight: 300;

}

.da-thumbs .pitem a div i {

background-color: #1f1f1f;

position: absolute;

color: #ffffff !important;

bottom: 0;

font-size: 15px;

z-index: 12;

right: 0;

width: 40px;

height: 40px;

line-height: 40px;

text-align: center;

}

/*------------------------------------------------------------------

TESTIMONIALS

-------------------------------------------------------------------*/

.logos img {

margin: auto;

display: block;

text-align: center;

width: 100%;

opacity: 0.3;

}

.logos img:hover {

opacity: 0.5;

}

.desc h3 i {

color: #2f2f2f;

font-size: 24px;

vertical-align: middle;

margin-right: 12px;

}

.desc h3 i+i {

margin-right: 0px;

margin-left: 12px;

}

.desc {

padding: 0px;

position: relative;

background: #000;

border: 1px solid #111111;

}

.testi-meta {

display: block;

margin-top: 20px;

}

.testimonial h4 {

font-size: 18px;

color: #ffffff;

padding: 13px 0 0;

}

.testimonial img {

max-width: 55px;

}

.testimonial small {

margin-top: 7px;

font-size: 16px;

display: block;

}

.testimonial {

background-color: #fff;

display: inline-block;

width: 100%;

text-align: center;

border: 1px solid #eee;

padding: 30px 20px;

}

.testimonial h3 {

padding: 0 0 10px;

font-size: 20px;

font-weight: 600;

}

.testimonial small,

.testimonial .lead {

background-color: transparent;

color: #aaa;

display: block;

font-size: 14px;

font-style: italic;

line-height: 30px;

margin: 0;

padding: 0;

position: relative;

}

.testimonial p:after {

display: none;

}

/*------------------------------------------------------------------

PRICING TABLES

-------------------------------------------------------------------*/

.pricing-table {

margin: 50px 0 0 0;

background: #fff;

box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);

}

.pricing-table i {

width: 30px;

color: #c2c2c2;

display: inline-block;

margin-right: 10px;

padding-right: 5px;

border-right: 1px solid #ececec;

}

.pricing-table .btn-dark {

padding: 10px 24px;

font-size: 15px;

}

.pricing-table strong {

font-weight: 600;

margin-right: 6px;

color: #1f1f1f;

}

.pricing-table-header {

padding: 30px 0 25px 0;

background: #ffffff;

}

.pricing-table-header h2 {

font-size: 31px;

margin: 0;

padding: 0;

font-weight: 300;

}

.pricing-table-header h3 {

font-size: 15px;

font-weight: 600;

color: #aaaaaa;

margin-top: 10px;

text-transform: uppercase;

}

.pricing-table-space {

height: 10px;

}

.pricing-table-text {

margin: 15px 30px 0 30px;

padding: 0 10px 15px 10px;

border-bottom: 1px solid #ececec;

font-weight: 300;

line-height: 30px;

color: #c2c2c2;

font-size: 16px;

}

.pricing-table-text p {

font-weight: 400;

}

.pricing-table-features {

margin: 15px 30px 0 30px;

padding: 0 10px 15px 30px;

border-bottom: 1px solid #ececec;

text-align: left;

line-height: 30px;

font-size: 16px;

color: #c2c2c2;

}

.pricing-table-highlighted h3,

.pricing-table-highlighted h2 {

color: #ffffff !important;

}

.pricing-table-sign-up {

margin-top: 25px;

padding-bottom: 30px;

}

/* Highlighted table */

.pricing-table-highlighted {

margin-top: 0;

}

.m130 {

margin-top: 130px;

}

.nav-pills {

border: 1px solid #e1e1e1;

}

.nav-pills > li {

width: 50%;

padding: 10px;

float: left;

margin: 0 !important;

}

.nav-pills > li > a {

margin: 0!important;

text-align: center;

background-color: #f4f4f4;

}

/*------------------------------------------------------------------

About box

-------------------------------------------------------------------*/

.about-box{

padding: 70px 0px;

}

.single-feature {

background: #f7f4f4;

border-bottom: 10px solid transparent;

text-align: center;

padding: 30px 25px 45px 25px;

}

.single-feature h4 {

margin: 35px 0 25px 0;

padding: 0px;

font-size: 22px;

}

.top-feature .center .single-feature, .top-feature .single-feature:hover {

border-bottom-color: #a8cf45;

}

/*------------------------------------------------------------------

ICON BOXES

-------------------------------------------------------------------*/

.icon-wrapper {

position: relative;

cursor: pointer;

display: block;

z-index: 1;

}

.icon-wrapper i {

width: 75px;

height: 75px;

text-align: center;

line-height: 75px;

font-size: 28px;

background-color: #f2f3f5;

color: #1f1f1f;

margin-top: 0;

}

.small-icons.icon-wrapper:hover i,

.small-icons.icon-wrapper:hover i:hover,

.small-icons.icon-wrapper i {

width: auto !important;

height: auto !important;

line-height: 1 !important;

padding: 0 !important;

color: #e3e3e3 !important;

background-color: transparent !important;

background: none !important;

margin-right: 10px !important;

vertical-align: middle;

font-size: 24px !important;

}

.small-icons.icon-wrapper h3 {

font-size: 18px;

padding-bottom: 5px;

}

.small-icons.icon-wrapper p {

padding: 0;

margin: 0;

}

.icon-wrapper h3 {

font-size: 21px;

padding: 0 0 15px;

margin: 0;

}

.icon-wrapper p {

margin-bottom: 0;

padding-left: 95px;

}

.icon-wrapper p small {

display: block;

color: #999;

margin-top: 10px;

text-transform: none;

font-weight: 600;

font-size: 16px;

}

.icon-wrapper p small:after {

content: "\f105";

font-family: FontAwesome;

margin-left: 5px;

font-size: 11px;

}

.effect-1 {

display: inline-block;

cursor: pointer;

text-align: center;

position: relative;

text-decoration: none;

z-index: 1;

}

.effect-1:after {

pointer-events: none;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

content: '';

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

.effect-1 {

-webkit-transition: background 0.2s, color 0.2s;

-moz-transition: background 0.2s, color 0.2s;

transition: background 0.2s, color 0.2s;

}

.effect-1:after {

top: -7px;

left: -7px;

padding: 7px;

box-shadow: 0 0 0 2px #2750ff;

-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

-webkit-transform: scale(.8);

-moz-transition: -moz-transform 0.2s, opacity 0.2s;

-moz-transform: scale(.8);

-ms-transform: scale(.8);

transition: transform 0.2s, opacity 0.2s;

transform: scale(.8);

opacity: 0;

}

.effect-1:hover:after {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

opacity: 1;

}

.effect-1:after {

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-ms-transform: scale(1.2);

transform: scale(1.2);

}

.effect-1:hover:after {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

opacity: 1;

}

.property-main{

background: #fff;

position: relative;

box-shadow: 0 2px 0 0 #e3e4e7;

border: 1px solid #f1f1f1;

border-radius: 2px;

-webkit-transition: all .15s ease;

-moz-transition: all .15s ease;

-o-transition: all .15s ease;

transition: all .15s ease;

height: 100%;

}

.property-wrap{

width: 100%;

padding: 8px;

}

.item-body {

padding: 15px 12px 7px;

width: 100%;

}

.label-inner {

position: absolute;

.divider-wrapper:hover {

cursor: none;

}

.divider-bar {

position: absolute;

width: 10px;

left: 50%;

top: -10px;

bottom: -15px;

}

.code-wrapper {

border: 1px solid #ffffff;

display: block;

overflow: hidden;

width: 100%;

height: 100%;

position: relative;

background: url("uploads/code.jpg") no-repeat;

}

.design-wrapper {

overflow: hidden;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

-webkit-transform: translateX(50%);

transform: translateX(50%);

}

.design-image {

display: block;

width: 100%;

height: 100%;

position: relative;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

background: url("uploads/design.jpg") no-repeat;

}

.single-services{

}

.single-services-img{

padding: 15px 0px;

}

.single-services-desc h4{

font-size: 22px;

font-weight: 600;

}

.single-services-desc p{

margin: 0px;

padding-bottom: 20px;

}

/*------------------------------------------------------------------

FEATURES

-------------------------------------------------------------------*/

.customwidget h1 {

font-size: 44px;

color: #ffffff;

padding: 15px 0 25px;

margin: 0;

line-height: 1 !important;

font-weight: 300;

}

.customwidget ul {

padding: 0;

display: block;

margin-bottom: 30px;

}

.customwidget li i {

margin-right: 5px;

}

.customwidget li {

color: #ffffff;

margin-right: 10px;

}

.image-center img {

position: relative;

margin: 0 0 -208px;

z-index: 10;

padding-right: 30px;

text-align: center;

}

.customwidget p {

font-style: italic;

font-size: 18px;

padding: 0 0 10px;

}

.img-center img {

width: 100%;

box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);

}

.img-center {

margin: auto;

}

#features li p {

margin-bottom: 0;

padding-bottom: 0;

}

#features li {

display: table;

width: 100%;

margin: 35px 0;

cursor: pointer;

}

.features-left,

.features-right {

padding: 0 10px;

}

.features-right li:last-child,

.features-left li:last-child {

margin-bottom: 0px;

padding-bottom: 0 !important;

}

.features-right li i,

.features-left li i {

width: 68px;

height: 68px;

line-height: 68px;

display: table;

border-radius: 50%;

font-size: 26px;

background-color: #f2f3f5;

margin: 0 auto 22px;

position: relative;

text-align: center;

z-index: 55;

transition: .4s;

padding: 0;

}

#features i img {

display: table;

margin: 0 auto;

}

.features-left li i:before,

.features-right li i:before {

text-align: center;

}

.features-right li i .ico-current,

.features-left li i .ico-current {

opacity: 1;

transition: .4s;

visibility: visible;

}

.features-right li i .ico-hover,

.features-left li i .ico-hover {

opacity: 0;

transition: .4s;

visibility: hidden;

top: 19px;

}

.features-right li:hover .ico-current,

.features-left li:hover .ico-current {

opacity: 0;

transition: .4s;

visibility: hidden;

}

.features-right li:hover .ico-hover,

.features-left li:hover .ico-hover {

opacity: 1;

transition: .4s;

visibility: visible;

}

.features-right i {

float: left;

}

.fr-inner {

margin-left: 90px;

}

.features-left i {

float: right;

}

.fl-inner {

text-align: right;

margin-right: 90px;

}

#features h4 {

text-transform: capitalize;

margin: 0;

font-size: 19px;

}

/*------------------------------------------------------------------

CONTACT

-------------------------------------------------------------------*/

.bootstrap-select {

width: 100% \0;

/*IE9 and below*/

}

.bootstrap-select > .dropdown-toggle {

width: 100%;

padding-right: 25px;

}

.has-error .bootstrap-select .dropdown-toggle,

.error .bootstrap-select .dropdown-toggle {

border-color: #b94a48;

}

.bootstrap-select.fit-width {

width: auto !important;

}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {

width: 100%;

}

.bootstrap-select .dropdown-toggle:focus {

outline: thin dotted #333333 !important;

outline: 5px auto -webkit-focus-ring-color !important;

outline-offset: -2px;

}

.bootstrap-select.form-control {

margin-bottom: 0;

padding: 0;

border: none;

}

.bootstrap-select.form-control:not([class*="col-"]) {

width: 100%;

}

.bootstrap-select.form-control.input-group-btn {

z-index: auto;

}

.bootstrap-select.btn-group:not(.input-group-btn),

.bootstrap-select.btn-group[class*="col-"] {

float: none;

display: inline-block;

margin-left: 0;

}

.bootstrap-select.btn-group.dropdown-menu-right,

.bootstrap-select.btn-group[class*="col-"].dropdown-menu-right,

.row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right {

float: right;

}

.form-inline .bootstrap-select.btn-group,

.form-horizontal .bootstrap-select.btn-group,

.form-group .bootstrap-select.btn-group {

margin-bottom: 0;

}

.form-group-lg .bootstrap-select.btn-group.form-control,

.form-group-sm .bootstrap-select.btn-group.form-control {

padding: 0;

}

.form-inline .bootstrap-select.btn-group .form-control {

width: 100%;

}

.bootstrap-select.btn-group.disabled,

.bootstrap-select.btn-group > .disabled {

cursor: not-allowed;

}

.bootstrap-select.btn-group.disabled:focus,

.bootstrap-select.btn-group > .disabled:focus {

outline: none !important;

}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {

display: inline-block;

overflow: hidden;

width: 100%;

text-align: left;

}

.bootstrap-select.btn-group .dropdown-toggle .fa-angle-down {

position: absolute;

top: 30% !important;

right: -5px;

vertical-align: middle;

}

.bootstrap-select.btn-group[class*="col-"] .dropdown-toggle {

width: 100%;

}

.bootstrap-select.btn-group .dropdown-menu {

border: 1px solid #ededed;

box-shadow: none;

box-sizing: border-box;

min-width: 100%;

padding: 20px 10px;

z-index: 1035;

}

.dropdown-menu > li > a {

background-color: transparent !important;

color: #bcbcbc !important;

font-size: 15px;

padding: 10px 20px;

}

.bootstrap-select.btn-group .dropdown-menu.inner {

position: static;

float: none;

border: 0;

padding: 0;

margin: 0;

border-radius: 0;

-webkit-box-shadow: none;

box-shadow: none;

}

.bootstrap-select.btn-group .dropdown-menu li {

position: relative;

}

.bootstrap-select.btn-group .dropdown-menu li.active small {

color: #fff;

}

.bootstrap-select.btn-group .dropdown-menu li.disabled a {

cursor: not-allowed;

}

.bootstrap-select.btn-group .dropdown-menu li a {

cursor: pointer;

}

.bootstrap-select.btn-group .dropdown-menu li a.opt {

position: relative;

padding-left: 2.25em;

}

.bootstrap-select.btn-group .dropdown-menu li a span.check-mark {

display: none;

}

.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {

margin-right: 34px;

}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle {

z-index: 1036;

}

.bootstrap-select.show-menu-arrow .dropdown-toggle:before {

content: '';

border-left: 7px solid transparent;

border-right: 7px solid transparent;

border-bottom: 7px solid rgba(204, 204, 204, 0.2);

position: absolute;

bottom: -4px;

left: 9px;

display: none;

}

.bootstrap-select.show-menu-arrow .dropdown-toggle:after {

content: '';

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid white;

position: absolute;

bottom: -4px;

left: 10px;

display: none;

}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {

bottom: auto;

top: -3px;

border-top: 7px solid rgba(204, 204, 204, 0.2);

border-bottom: 0;

}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {

bottom: auto;

top: -3px;

border-top: 6px solid white;

border-bottom: 0;

}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {

right: 12px;

left: auto;

}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {

right: 13px;

left: auto;

}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before,

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {

display: block;

}

.bs-searchbox,

.bs-actionsbox,

.bs-donebutton {

padding: 4px 8px;

}

.bs-actionsbox {

float: left;

width: 100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.bs-actionsbox .btn-group button {

width: 50%;

}

.bs-donebutton {

float: left;

width: 100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.bs-donebutton .btn-group button {

width: 100%;

}

.bs-searchbox + .bs-actionsbox {

padding: 0 8px 4px;

}

.bs-searchbox .form-control {

margin-bottom: 0;

width: 100%;

}

select.bs-select-hidden,

select.selectpicker {

display: none !important;

}

select.mobile-device {

position: absolute !important;

top: 0;

left: 0;

display: block !important;

width: 100%;

height: 100% !important;

opacity: 0;

}

/*# sourceMappingURL=bootstrap-select.css.map */

.bootstrap-select > .btn {

background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

font-size: 15px;

height: 33px;

box-shadow: none !important;

border: 0 !important;

padding: 0;

width: 100%;

color: #bcbcbc !important;

}

.contact_form {

border: 1px solid #ededed;

box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);

background-color: #f2f3f5;

padding: 40px 30px;

border-radius: 2px;

}

.contact_form .form-control {

background-color: #fff;

margin-bottom: 30px;

border: 1px solid #ebebeb;

box-sizing: border-box;

color: #000000;

font-size: 16px;

outline: 0 none;

padding: 10px 25px;

height: 55px;

resize: none;

box-shadow: none !important;

width: 100%;

}

.contact_form textarea {

color: #bcbcbc;

padding: 20px 25px !important;

height: 160px !important;

}

.contact_form .form-control::-webkit-input-placeholder {

color: #bcbcbc;

}

.contact_form .form-control::-moz-placeholder {

opacity: 1;

color: #bcbcbc;

}

.contact_form .form-control::-ms-input-placeholder {

color: #bcbcbc;

}

#contact {

background: url(images/bg.png) no-repeat center center #fff;

}

/*------------------------------------------------------------------

FOOTER

-------------------------------------------------------------------*/

.cac {

background-color: #232323;

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out;

-o-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

}

.cac:hover a h3 {

color: #fff !important;

}

.cac a h3 {

color: #999;

}

.cac h3 {

padding: 60px 0;

margin: 0;

font-weight: 400;

font-size: 20px;

text-transform: capitalize;

line-height: important;

}

.footer {

padding: 90px 0 80px !important;

color: #999;

background-color: #333333;

}

.footer .widget-title {

position: relative;

display: block;

margin-bottom: 30px;

}

.footer .widget-title small {

color: #999;

display: block;

padding: 0 58px;

text-transform: uppercase;

}

.footer .widget-title h3 {

color: #fff;

font-weight: 300;

font-size: 21px;

padding: 0;

margin: 0;

line-height: 1 !important;

}

.footer-links {

list-style: none;

padding: 0;

}

.footer-links a {

color: #999;

display: block;

}

.footer-links a:hover,

.footer a:hover {

color: #a8cf45;

}

.footer-links li {

margin-bottom: 10px;

display: block;

width: 100%;

border-bottom: 1px dashed rgba(255, 255, 255, 0.1);

padding-bottom: 10px;

}

.twitter-widget li {

margin-bottom: 0;

border: 0 !important;

}

.twitter-widget li i {

border-right: 0 !important;

margin-right: 0;

}

.footer-links li:last-child {

margin-bottom: 0;

padding-bottom: 0;

border: 0;

}

.footer-links i {

display: inline-block;

width: 25px;

margin-right: 10px;

border-right: 1px dashed rgba(255, 255, 255, 0.1);

}

.copyrights {

border-top: 1px dashed rgba(255, 255, 255, 0.1);

background-color: #393939;

box-sizing: border-box;

width: 100%;

text-align: left;

padding: 30px 0px;

overflow: hidden;

}

.dmtop.show {

bottom: 20px;

}

/* Footer left */

.footer-distributed .footer-left {

float: left;

}

.footer-distributed .footer-links {

margin: 0 0 10px;

text-transform: uppercase;

padding: 0;

}

.footer-distributed .footer-links a {

display: inline-block;

line-height: 1.8;

margin: 0 10px 0 10px;

text-decoration: none;

}

.footer-distributed .footer-company-name {

font-weight: 300;

margin: 0 10px;

color: #666;

padding: 20px 0px;}

/* Footer right */

.footer-distributed .footer-right {

float: right;

}

/* The search form */

.footer-distributed form {

position: relative;

}

.footer-distributed form input {

display: block;

border-radius: 3px;

box-sizing: border-box;

background-color: #181818;

border: none;

font: inherit;

font-size: 15px;

font-weight: normal;

color: #999;

width: 400px;

padding: 18px 50px 18px 18px;

}

.footer-distributed form input:focus {

outline: none;

}

/* Changing the placeholder color */

.footer-distributed form input::-webkit-input-placeholder {

color: #999;

}

.footer-distributed form input::-moz-placeholder {

opacity: 1;

color: #999;

}

.footer-distributed form input:-ms-input-placeholder {

color: #999;

}

/* The magnify glass icon */

.footer-distributed form i {

width: 18px;

height: 18px;

position: absolute;

top: 16px;

right: 18px;

color: #999;

font-size: 18px;

margin-top: 6px;

}

.footer-distributed .footer-company-name a{

color: #ffffff;

}

.footer-distributed .footer-company-name a:hover{

color: #a8cf45;

}

/*------------------------------------------------------------------

MISC

-------------------------------------------------------------------*/

.progress {

background-color: #f2f3f5;

border-radius: 0;

box-shadow: none;

height: 5px;

margin-bottom: 20px;

overflow: hidden;

}

.skills h3 {

color: #999999;

font-size: 15px;

}

.dmtop {

background-color: #a8cf45;

z-index: 100;

width: 50px;

height: 50px;

line-height: 47px;

position: fixed;

bottom: -100px;

border-radius: 3px;

right: 20px;

text-align: center;

font-size: 28px;

color: #ffffff !important;

cursor: pointer;

-webkit-transition: all .7s ease-in-out;

-moz-transition: all .7s ease-in-out;

-o-transition: all .7s ease-in-out;

-ms-transition: all .7s ease-in-out;

transition: all .7s ease-in-out;

}

.icon_wrap {

background-color: #1f1f1f;

width: 100px;

height: 100px;

display: block;

line-height: 100px;

font-size: 34px;

color: #ffffff;

margin: 0 auto;

text-align: center;

padding: 0 !important;

border: 0 !important;

}

.stat-wrap h3 {

font-size: 18px;

font-weight: 400;

color: #999 !important;

margin: 0 !important;

padding: 0 !important;

line-height: 1 !important;

}

.stat-wrap p {

font-size: 38px;

color: #ffffff;

margin: 0;

font-weight: 300;

padding: 4px 0 0;

line-height: 1 !important;

}

#preloader {

width: 100%;

height: 100%;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: #a8cf45;

z-index: 11000;

position: fixed;

display: block;

text-align: center;

}

.preloader {

position: absolute;

margin: 0 auto;

left: 1%;

right: 1%;

top: 45%;

width: 95px;

height: 95px;

background: center center no-repeat none;

background-size: 95px 95px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%

}

.loader {

display: inline-block;

width: 30px;

height: 30px;

position: relative;

border: 4px solid #Fff;

top: 50%;

animation: loader 2s infinite ease;

}

.loader-inner {

vertical-align: top;

display: inline-block;

width: 100%;

background-color: #fff;

animation: loader-inner 2s infinite ease-in;

}

@keyframes loader {

0% {

transform: rotate(0deg);

}

25% {

transform: rotate(180deg);

}

50% {

transform: rotate(180deg);

}

75% {

transform: rotate(360deg);

}

100% {

transform: rotate(360deg);

}

@keyframes loader-inner {

0% {

height: 0%;

}

25% {

height: 0%;

}

50% {

height: 100%;

}

75% {

height: 100%;

}

100% {

height: 0%;

}

/*------------------------------------------------------------------

BUTTONS

-------------------------------------------------------------------*/

.navbar-default .btn-light {

padding: 0 20px;

margin-left: 15px;

}

.btn {

border: 0 !important;

}

.nav-pills,

.effect-1:after,

.nav-pills > li > a,

.global-radius,

.btn-brd {

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

.btn-light {

padding: 10px 30px;

font-size: 18px;

color: #ffffff;

background-color: transparent;

}

.btn-dark {

padding: 13px 40px;

font-size: 18px;

border: 1px solid #ececec !important;

color: #1f1f1f;

background-color: transparent;

}

.btn-light:hover,

.btn-light:focus {

border-color: rgba(255, 255, 255, 0.6);

color: rgba(255, 255, 255, 0.6);

}

/*------------------------------------------------------------------

Inner Page CSS

-------------------------------------------------------------------*/

.all-title-box{

background: url(uploads/inner-bg.jpg);

position: relative;

padding: 200px 0 70px 0px;

margin-bottom: 0px;

}

.all-title-box::before{

content: "";

position: absolute;

background: rgba(0,0,0,0.5);

width: 100%;

height: 100%; 0.

top: 0px;

left: 0px;

}

.all-title-box .container{

position: relative;

}

.all-title-box h2{

color: #ffffff;

padding: 0px;

font-size: 40px;

font-weight: 600;

}

#breadcrumbs {

background: #a8cf45;

padding: 10px 20px;

position: absolute;

right: 0px;

display: inline-block;

font-size: 15px;

font-weight: 500;

color: #888;

top: 50%;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

#breadcrumbs:hover{

background: #076799;

}

#breadcrumbs ul {

margin: 0;

}

margin-top: 10px;

background: #f5f5f5;

}

.support-info .info-title i{

display: block;

font-size: 28px;

color: #ffffff;

background: #a8cf45;

width: 48px;

height: 48px;

line-height: 48px;

text-align: center;

}

.support-info .info-title{

color: #333;

font-size: 15px;

font-weight: 700;

}

.support-info .info-title span{

display: block;

font-size: 13px;

text-transform: capitalize;

color: #aaa;

font-weight: 400;

}

CHAPTER 6

Testing And Implementation

Objectives of Testing:

This section introduces the concept of testing and how important is, for the successful implementation of the project. Different phases of testing are described along with the level of testing incorporated in this particular project.

Testing is vital to the success of any system. Testing is done at different stages within the phase. System testing makes a logical assumption that if all phases of the system are correct, the goals will be achieved successfully. Inadequate testing at all leads to errors that may come up after a long time when correction would be extremely difficult. Another objective of testing is its utility as a user-oriented vehicle before implementation. The testing of the system was done on both artificial and live data.

Testing involves operation of a system or application under controlled conditions and evaluating the results (e.g., “if the user is in interface A of the application while using hardware B and does C, then D should not happen”). The controlled conditions should include both normal and abnormal conditions.

Typically, the project team includes a mix of testers and developers who work closely together, with the overall QA processes being monitored by the project managers.

Testing principles

1) All tests should be traceable to the customer requirements.

2) Test should be planned long before testing begins.

3) Testing should begin in small and progressed towards testing in the large.

4) Exhaustive testing is not possible.

5) For effective results, testing should be conducted by an independent third party

Attributes of a good test

A good test should have the following characteristics: -

1) A good test must have a high probability of finding an error.

2) A good test is non redundant.

3) A good test should be best of breed, i.e. testing should be in time and according t6o resource limitation.

4) A good test should be neither too simple nor too complex. Sometimes it is possible to combine a series of tests into one test.

5) Testing is usually relied on to detect the faults introduced during the coding phase. Due to this different level of testing are used in the testing process and each level of testing aims to test different aspects of the system.