Project Report Whole

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 67

CHAPTER -1

INTRODUCTION

1|Page
CHAPTER-1
1. INTRODUCTION

This “MeriRecognition Web-Application” refers to the recognition of


skills of highly skilled workers, of integrating new workers, and developing and
retaining current workers to meet current and future business objectives. Talent
Recognition in this context does not refer to the management of entertainers.
Companies engaging in a talent management strategy shift the responsibility of
employees from the human resources department to all managers throughout the
organization. The process of attracting and retaining profitable employees, as it is
increasingly more competitive between firms and of strategic importance, has come
to be known as "the war for talent." Talent management is also known as HCM
(Human Capital Management).

The term "talent management" means different things to different organizations. To


some it is about the management of high-worth individuals or "the talented" whilst to
others it is about how talent is managed generally - i.e. on the assumption that all
people have talent which should be identified and liberated.

Talent signals an ability to learn and develop in the face of new challenges. Talent is
about future potential rather than past track record. So talent tends to be measured in
terms of having certain attributes, such as a willingness to take risks and learn from
mistakes, a reasonable (but not too high) level of ambition and competitiveness, the
ability to focus on ‘big picture’ issues, and an awareness of their own strengths,
limitations and impact on others.

1.1 Problem Definition


“MeriRecognition” is a talent aggregation website that provides a unique
platform for budding & back-stage staff /artists to showcase their talents.
Designed with the aim to help skilled individuals follow their passion our
website acts as the perfect stage for individuals who wish to exhibit their prowess in
a certain field. So if you know how to shake a leg perfectly, enrich some music with
your voice, bring a blank canvas to life, or have a talent you want to show to the
world, we are here to get you the limelight you deserve. Register today and let the
world view your talents and get recognized by everybody. Back Stage-staff are
one of us who have so many talents but still they did not have any recognition.
Let’s give them chance to show their talents and understand their views.

2|Page
Fig.1.1 Back Stage staff /Workers are one of us ,contain hidden talents

At MeriRecognition Web-application, we’re passionate about connecting people to


great careers. Our powerful platform helps you optimize every step of your work &
life cycle so that everyone can reach their full potential by making their profile with
us, interacting with different people & share their expertise to others.

1.2 MOTIVATION

Every artist needs a helping hand. Think about it, a big star wouldn’t have been big
had he not been discovered by a casting director, a pop-star wouldn’t be a sensation if
the music company hadn’t invested in him, a famous script writer wouldn’t be getting
lakhs of rupees if not for the producer who placed faith in him.

If you are an aspiring artist looking to make it big in the film industry, then you need
that shining light, that mentor figure, or maybe a talent platform to showcase your
skills. While there are always film making festivals, short film competitions, and star-
hunts, talented aspirants can also join online platforms like ‘MeriRecognition’ which
post some of the best art competitions from around the globe.This project motivates
me to give a small satisfaction to people who are the back-supporters of any task &
not a chance to recognize well.

1.3 OBJECTIVE

We, the “MeriRecognition” team firmly committed to deliver the value to the
market place by identifying unique strength with people. Not only we bring out talent
to the limelight but also provide special opportunity to use people’s unique ability to
the need of market. If a talent is ignored , It is not loss of ours but of entire world
.Let’s together uproot this barrier forever and give a hope with ample of opportunity
for everyone .Let them shine like a diamond , achieve like leader. One talent can
change entire course of history , be it science , arts or anything.

3|Page
It can take us to different world which may be better than this , what many leaders
may not have thought .We are here to give that platform to make you ebullient. Our
vigorous and dedicated team will search across the globe physically , on internet or
with a reference to give right value to the unique talent .once you get registered with
our company , everything will be taken care by our team. We value you and your
uniqueness. We ask for zero money to promote you. Our team welcome you for your
first take off to the world market. In return we want your cheering smile and thanks
because If you can see your dream comes true with us ,that’s our achievement . That’s
our motto. We call for volunteer across the world to join us to give a opportunity to a
opportunity seeker. At anytime you can contact us for volunteer on our website:
www.MeriRecognition.com or email us at join@MeriRecognition.com or you can
call us too.
Our Motto is to-

fig.1.3 Motto of “MeriRecognition”

1.4 NEED OF THE STUDY

"Hide not your talents, they for use were made, what’s a
sundial in the shade ?" - Benjamin Franklin

The Success of any productive work is not only depend on a single person’s effort
but the workforce as a whole – is productive and successful depends upon many
factors. Skills, work histories, formal training, and educational backgrounds all play a
major role. But, so do personalities, work ethics, and other traits that determine
whether or not a staff member will fit well into a corporate culture. Talent
management solutions can make it easier for a business to understand what makes

4|Page
each employee unique, including their specific strengths and weaknesses. This allows
them to fully leverage the potential of each individual worker, applying their talents
and characteristics in the most effective way towards the achievement of corporate
goals. Some of the other key benefits that can be realized through the deployment and
use of “MeriRecognition”.

1.5 HOW IT WORKS?


The battle for talent is as fierce as it has been in nearly a decade, prompting business
leaders to re-examine people strategies and practices in order to be competitive. It’s
also underscoring the importance of employee recognition – and for good reason.
According to the 2017 Trendicators Report, recognition plays an important role in
recruiting, onboarding, engaging, and retaining employees. The report is based on a
survey of 1,500 job seekers, including 940 active and 507 passive job seekers.

Best-in-class organizations create recognition programs that combine diverse


elements while also bringing their unique brand, values and goals to life. There are
many types of employee recognition and rewards programs, including:

 Service-based recognition to celebrate service anniversaries, successful


onboarding, retirement and other career milestones;
 Performance-based recognition to encourage specific behaviors, achievements, or
demonstration of company values;
 And social recognition, such as peer-to-peer recognition, often enabled by
technology to amplify the social experience company-wide.

“MeriRecognition” works as-

 It allow users to create Profile with us & edit profile to time.


 It help it’s registered users to effectively login,share,connect & interact with
others and allow them to showcase their skills in a better way.
 It help users to connect with these type of people & gain a chance to understand
them & their work.
 It gives a platform where one can also gain popularity by sharing their knowledge
,ideas,views to others.
 It is an web-application like project so here you can also post your blogs,edit
them and connect to other users using chat service.

5|Page
1.6 LIMITATIONS OF STUDY

1.6.1 SCOPE OF THE STUDY:

The scope of the study helps to understand the necessary of “MeriRecognition”.


It also helps to study the perseverance of hidden talent. The study helps whether
talent appeals it’s in terms of back-supporters’ satisfaction and also suggesting the
possible improvement in misuse of talents of such persons.

PROBLEM STATEMENT-

It takes talent to spot talent! A tone deaf will never be able to appreciate the music of
maestros. Talent is doing easily what other find difficult.
In an organization, there is nothing more crucial than fitting the right employees in
the right position. Or else you would be trying to fit a square peg in a round hold.
When people do jobs that just don’t suit their liking, inclination and temperament, the
results or rather the lack of them will be oblivious. Low productivity, dissatisfaction,
low morale absenteeism another negative behaviour will become typical in the
employees is shown the door. Or perhaps, there is another option –
“MeriRecognition”.
Besides this Social Networking Sites like –Facebook,Whatsapp allow users to
connect to our beloved ones. These sites time to time organizes some competitions,
events,quizzes by which one can participate & become polpular.
These existing web-applications do a great job in their fields and trying to day by day
improve their qualities and technologies.

6|Page
CHAPTER -2
LITERATURE
SURVEY

7|Page
CHAPTER-2
LITERATURE SURVEY
to great
2.1 EXISTING SYSTEM
Today there are so many websites and web-applications which organizes so many
Talent Hunt Programs, Talents Manangement Systems which help users to
participate, win & gain popularity.

2.2 PROPOSED SYSTEM

“MeriRecognition” web-application is a good platform where one who plays a very


important role in doing a particular task or one who perform tasks in back-stage
anybody does not seen them,everyone sees only who work as front –stage & consider
work as their whole efforts.
But we generally ignore the work of those without them successful completion of
work is not possible.
For eg. In the present scenario, reality shows are gaining huge public response and
created a money source for talented persons and TV program organizers. There is a
need for back ground work before the program is started. Basically what organizers
do is show ads on programs or news papers and gather participants and test their
skills.

There are few disadvantages in this procedure. It is time-consuming, requires a lot of


money, requires patience.

In Propose System, we are going to overcome the problems of the existing system.

2.3 ADVANTAGES OVER EXISTING SYSTEM


 Artist can upload his/her works as photos or videos personally.
 The user can access the System from anywhere in the world through internet.

8|Page
 The expense for publicity of events is reduced, as the website is the easy and less
expensive to canvas the Events.
 Fiscal problems are resolved mostly when compared with existing system.

2.4 KEY PEOPLE OF PROPOSED SYSTEM


 Back-stage Workers/Artists
 In movies Back–Stage Artists as- Cameramen, Makeup artists, Photographers etc,
 Electricians,Labours,Plumbers etc.
 Writers,Painters ,Sculptures etc.
 Also Ordinary people

fig. 2.4 Back-Stage staff work so hard,even if their work is recognized or not.

9|Page
2.5 FEASIBILITY STUDY

2.5.1 TECHNICAL
“MeriRecognition” has been tested at ASP.NET framework Visual Studio 2017 in
Windows Machine. It properly renders the content of various HTML,CSS, & ASP
codes.

2.5.2 ECONOMICAL

The system is implemented in Windows 8.1 Pro Platform. Since Microsoft Visual
Studio 2017, is used as developing tool, it can be run in any platform like different
versions of Visual Studio like 2010,2012 etc.

2.5.3 OPERATIONAL

A rich Graphical User Interface is provided in this application So the novice user
need not require extra knowledge to use the web application.. However a new user
may find difficult in understanding of use of “MeriRecognition”. To find this
problem a suitable desired guide is given.

10 | P a g e
CHAPTER-3
SYSTEM
ANALYSIS
&
DESIGN

11 | P a g e
CHAPTER-3
SYSTEM ANALYSIS & DESIGN

3.1 REQUIREMENT SPECIFICATION


In order to make web-application user-friendly & easy to handle all related content
and data is placed in separate files and database file is also created separately.
The objective of the “MeriRecognition” Tool is to provide better information for the
users of this system for better results for their hidden talents & identify the real
heroes.
It’s a talent aggregation website that provides a unique platform for budding artists
to showcase their talents. Designed with the aim to help skilled individuals follow
their passion our website acts as the perfect stage for individuals who wish to exhibit
their prowess in a certain field. So if you know how to shake a leg perfectly, enrich
some music with your voice, bring a blank canvas to life, or have a talent you want to
show to the world, we are here to get you the limelight you deserve. Register today
and let the world view your talents ! & Gets popularity by your own work.

3.2 SOFTWARE REQUIREMENTS


 Operating system: Windows 8.1 Pro
 I.D.E.: Microsoft Visual Studio 2017
 PROGRAMMING-Language : C#

3.3 HARDWARE REQUIREMENTS


 Any x86 class processor
 220 MB RAM
 Visual Studio Setup any version i.e. above visual studio 2010

3.4 TECHNOLOGIES USED


 Operating System : Windows
 Web-Technology: ASP.NET
 Front-End: HTML,CSS
 Back-End: SQL SERVER,
 Web Server: IIS SERVER
12 | P a g e
 Documentation tool: MS Word, MS power point
 Scripting language: JavaScript

3.5 TYPE OF PROJECT:

 WEB/WEBSITE DEVELOPMENT


3.6 FUTURE SCOPE OF THE PROJECT :
This “MeriRecognition” project can be more better so, there could be
much number of features coming as and when we explore it. We may
have to modify the abstract slightly.

3. 7 FLOW-CHART SPECIFICATION/DATA FLOW


DIAGRAM/ER-DIAGRAM:

Fig. 3.7.1 Flow of Data in the Data Source

13 | P a g e
Fig. 3.7.2 Distribution of Data source

Fig. 3.7.3 Key Stages in Talent identification & Development

14 | P a g e
Fig 3.7.4 Overview of Administrartor & user profile management

15 | P a g e
Fig. 3.7.5 ER-Diagram for Blog

Fig. 3.7.6 Data Modelling & ER-Diagram

16 | P a g e
Fig. 3.7.7 U.M.L Sequence Diagram

3.8 DESIGN
3.8.1 MODULES & FUNCTIONALITIES USED IN THIS PROJECT
The system has two main modules as:
 Admin(Master control)
 User (Specially Back Stage Staff)
3.8.1.1 ADMIN:
3.8.1.2 USER: Here User can perform various functions as-
 CREATE PROFILE
 EDIT PROFILE
 ADD BLOG
 BLOG POST
 EDIT BLOG
 COMMENTS
 GALLERY

17 | P a g e
3.9 DETAILED DESCRIPTION
3.9.1 ADMIN MODULE
0.) MASTER PAGE CONTROL

 The extension of MasterPage is '.master'.


 MasterPage cannot be directly accessed from the client because it just acts as a
template for the other Content Pages.
 In a MasterPage we can have content either inside ContentPlaceHolder or
outside it. Only content inside the ContentPlaceHolder can be customized in the
Content Page.
 We can have multiple masters in one web application.
 A MasterPage can have another MasterPage as Master to it.
 The content page content can be placed only inside the content tag.
 Controls of MasterPage can be programmed in the MasterPage and content page
but a content page control will never be programmed in MasterPage.
 A master page of one web application cannot be used in another web application.
 The MasterPageFile property of a webform can be set dynamically and it should
be done either in or before the Page_PreInit event of the
WebForm. Page.MasterPageFile = "MasterPage.master". The dynamically set
Master Page must have the ContentPlaceHolder whose content has been
customized in the Web-Form.

1.) ABOUT US:


This page contains the content/information about the Project.
2.) BLOGS:
The Blog page contains the blog related to project i.e. here user can add see the
previous & latest news about the blog.Also they can comment & post their blogs.
In general, Blog is a regularly updated website or web page, typically one run by
an individual or small group, that is written in an informal or conversational style.
3.) COMMENT:
In this section user as well as administrator both can comment on a particular
thing/topic.
4.) OUR SERVICES:
In this module the services of “MeriRecognition” is described that what type of

18 | P a g e
facilities this website provide & how they fulfil it.What are the techniques used to
service the User?
5.) OUR MISSION & VISION:
It describes about Mission & Vision of Website that why it is designed ,What’s
the motto behind it, which type of users can use it?
6.) CONTACT US:
Contact Forms are designed to contact with user so that we can find the feedback
of user.
3.9.2 USER MODULE
1.) LOGIN/REGISTRATION PAGE:
Used for login & registration for the user.
2.) BLOG POST:
Blogging helps solve both of those problems. Every time you write a blogpost, it's
one more indexed page on your website, which means it's one more opportunity
for you to show up in search engines and drive traffic to your website in organic
search.
3.) EDIT BLOG: Here, you can edit your blogs ,make some changes in your
blog.
4.) COMMENTS:
In this section user can COMMENT on a particular issue/topic and can see others
comments also.
8.) GALLERY:
This area basically contains Photos/images of “MeriRecognition” Project.
3.9.3 DATABASE DETAILS
 ASP.Net can work with databases such as Oracle and Microsoft SQL Server.
 ASP.Net has all the commands which are required to work with databases. ...
 The datareader object in ASP.Net is used to hold all the data returned by
the database.

19 | P a g e
While working with databases, the following concepts which are common across all
databases.

1. Connection – To work with the data in a database, the first obvious step is the
connection. The connection to a database normally consists of the below-
mentioned parameters.

o Database name or Data Source – The first important parameter is the


database name. Each connection can only work with one database at a time.
o Credentials – The next important aspect is the 'username' and 'password'.
This is used to establish a connection to the database.
o Optional parameters - You can specify optional parameters on how .net
should handle the connection to the database. For example, one can specify
a parameter for how long the connection should stay active.
 Selecting data from the database – Once the connection is established, data is
fetched from the database. ASP.Net has the ability to execute 'sql' select command
against the database. The 'sql' statement can be used to fetch data from a specific
table in the database.
 Inserting data into the database – ASP.Net is used to insert records into the
database. Values for each row that needs to be inserted in the database are
specified in ASP.Net.
 Updating data into the database – ASP.Net can also be used to update existing
records into the database. New values can be specified in ASP.Net for each row
that needs to be updated into the database.
 Deleting data from a database – ASP.Net can also be used to delete records
from the database. The code is written to delete a particular row from the
database.

In this project Microsoft SQL SERVER is used for storing data in


database.Here we insert some tables which contains “Primary Key” & related
key parmeters as User name ,Password, BlogId etc. It also contains dome SQL
Queries also which help us to establish connection with different tables.

3.10 TEST STEP/ CRITERIA

Step 1: Functional Testing


Typically, functional testing includes:

 the identification of functions that software is supposed to do


 data input and entry
 the execution of the test case
 an analysis of the actual results

20 | P a g e
Step 2: Usability Testing
Usability testing should not be mixed up with User Acceptance Testing. Even though
both are essential to the success of a web application. They each have a very different
focus and are executed at different stages of the software development life cycle.

 Usability testing involves the following steps: Develop a testing strategy that
ensures all functions of your application will be examined. These include
navigation and content Run the test under the observation of experts.
 Analyze the results and improve your application accordingly

Step 3: Interface Testing


Interface testing ensures that all interactions between the web server and application
server interfaces are running smoothly. This includes checking the communication
processes as well as making sure that error messages are displayed correctly.

Step 4: Compatibility Testing


Ensuring your application is compatible with all browsers and devices is a key step in
web application testing. Here are the different elements of compatibility testing:

(i) Browser compatibility

Make sure that your application is functioning correctly across the different browsers.
This includes checking that JavaScript, AJAX, WebSockets, browser notifications,
and authentication requests are working as designed.

Besides checking that your application runs in all the browsers (yes, even Internet
Explorer!), you should also check it for different versions of the browsers, to see if
any updates affect its functionality.

(ii) Operating system compatibility

Just like with different browsers, your web application might run into problems on
some operating systems. Check that it runs smoothly on Windows, macOS, Linux,
and Unixes.

Step 5: Performance Testing


After ensuring that your application’s functionality is working properly and
responsively on all browsers and devices, it is time to take a look at how it performs
under heavy load. This includes testing the application under different internet speeds
and how it behaves under normal and peak loads (load testing).

21 | P a g e
Step 6: Security Testing
The final step of web application testing makes sure that your application is
protected against unauthorized access and harmful actions through viruses or other
malicious software.

Overall, a security testing checklist comes in handy at this stage, as it helps you to
structure and organize your testing efforts. Such a checklist should include tasks in
the following areas:

 Secure Transmission
 Authentication
 Session Management
 Data Validation
 Specific Functionality Tests
 Error Handling

3.11 TESTING PROCESS

Software testing is a critical element of software quality assurance and


represents the ultimate review of specification, design and code generation.
Once source code has been generated, software must be tested to uncover as
many errors as possible before delivery to the customer. Our goal is to design
a series of test cases that have a high likelihood of finding errors.That’s where
software testing techniques come into the picture. These techniques provide
systematic guidance for designing tests that exercise the internal logic of
software components and exercise the input and output domains of the
program to uncover errors in program function, behavior and performance.
The various types of testing system used are:
 Unit Testing
 Integration Testing
 Validation Testing
 User Acceptance Testing/System Testing

22 | P a g e
CHAPTER-4

SOURCE-CODE
&
OUTPUT
With
Snaps
23 | P a g e
CHAPTER-4
SOURCE CODES & THEIR WITH SCREEN-SHOT
OUTPUT
1.) Masterpage.master
SOURCE-CODE
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MeriRecognition</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />


<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "templatemo_menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
24 | P a g e
.auto-style1 {
font-size: xx-large;
color: #FFFFFF;
}
.auto-style2 {
font-size: x-small;
}
.auto-style3 {
color: #FF6600;
}
</style>
</head>
<body>
<div id="templatemo_wrapper">
<div id="templatemo_header">
<div id="site_title" class="auto-
style1"><strong>MeriRecognition</strong></div>
<div id="templatemo_search">
<form action="#" method="get">
<input type="text" value="Search..." name="keyword" id="keyword"
title="keyword" onfocus="clearText(this)" onblur="clearText(this)" class="txt_field"
/>
<input type="submit" name="Search" value="" alt="Search"
id="searchbutton" title="Search" class="sub_btn" />
</form>
</div>
</div><!-- END of templatemo_header -->
<div id="templatemo_menu" class="ddsmoothmenu">
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="index_flash.html">Flash Slider</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="#">Web Template 6</a></li>
<li><a href="#">Template Page 7</a></li>
<li><a href="#">Web Template 8</a></li>
<li><a href="#">Template Page 9</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a>
<ul>
<li><a href="#">Web Page 1</a></li>
<li><a href="#">Collection 2</a></li>
<li><a href="#">Web Page 3</a></li>
<li><a href="#">Collection 4</a></li>
<li><a href="#">Web Page 5</a></li>

25 | P a g e
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<br style="clear: left" />
</div> <!-- end of templatemo_menu -->
</div>
&nbsp;<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div id="templatemo_bottom_wrapper">
<div id="templatemo_bottom">
<div class="col one_fourth">
<h4>About</h4>
<p>
<span class="auto-style2" style="color: rgb(51, 51, 51); font-family:
&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-style: normal; font-
variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing:
normal; orphans: 2; text-align: start; text-indent: 30px; text-transform: none; white-
space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;
background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-
color: initial; display: inline !important; float: none;">Talent Riser is a talent
aggregation website that provides a unique platform for budding artists to showcase
their talents. Designed with the aim to help skilled individuals follow their passion
our website acts as the perfect stage for individuals who wish to exhibit their prowess
in a certain field. So if you know how to shake a leg perfectly, enrich some music
with your voice, bring a blank canvas to life, or have a talent you want to show to
the world, we are here to get you the limelight you deserve. Register today
and let the world view your talents !</span></p>
</div>
<div class="col one_fourth">
<h4>Photo Gallery</h4>
<ul class="footer_gallery">
<li><a href="images/templatemo_image_06_l.jpg"
rel="lightbox[portfolio]"><img src="images/templatemo_image_06.jpg" alt="image
6" /></a></li>
<li><a href="images/templatemo_image_07_l.jpg"
rel="lightbox[portfolio]"><img src="images/templatemo_image_07.jpg" alt="image
7" /></a></li>
<li><a href="images/templatemo_image_08_l.jpg"
rel="lightbox[portfolio]"><img src="images/templatemo_image_08.jpg" alt="image
8" /></a></li>
<li><a href="images/templatemo_image_09_l.jpg"
rel="lightbox[portfolio]"><img src="images/templatemo_image_09.jpg" alt="image
9" /></a></li>
<li><a href="images/templatemo_image_10_l.jpg"

26 | P a g e
rel="lightbox[portfolio]"><img src="images/templatemo_image_10.jpg" alt="image
10" /></a></li>
<li><a href="images/templatemo_image_11_l.jpg"
rel="lightbox[portfolio]"><img src="images/templatemo_image_11.jpg" alt="image
11" /></a></li>
<li><a href="images/templatemo_image_12_l.jpg"
rel="lightbox[portfolio]"><img src="images/templatemo_image_12.jpg" alt="image
12" /></a></li>
<li><a href="images/templatemo_image_13_l.jpg"
rel="lightbox[portfolio]"><img src="images/templatemo_image_13.jpg" alt="image
13" /></a></li>
<li><a href="images/templatemo_image_14_l.jpg"
rel="lightbox[portfolio]"><img src="images/templatemo_image_14.jpg" alt="image
14" /></a></li>
</ul>
<div class="clear"></div>
<a href="gallery.html" class="more">more</a>
</div>
<div class="col one_fourth">
<h4>Recent Posts</h4>
<ul class="no_bullet">
<li>
<span class="header"><a href="#">E</a><span class="auto-
style3">nthusiastic Cameramen</span></span> We have find an unique way of
Photography.
</li>
<li class="auto-style3">
Don&#39;t reside back-stage</li>
<li>
&nbsp;Come before us</li>
<li>
Let join us</li>
<li>
&nbsp;Don&#39;t hesitate,you are the real hero.
</li>
</ul>
</div>
<div class="col one_fourth no_margin_right">
<h4>Twitter</h4>
<ul class="no_bullet">
<li><a href="#">@</a>MeriRecognition</li>
<li>Come &amp; Join us</li>
<li>View&nbsp; our latest news on&nbsp; <a
href="#">http://bit.ly/13IwZO</a></li>
</ul>
</div>

27 | P a g e
<div class="clear"></div>
</div><!-- END of templatemo_bottom -->
</div><!-- END of templatemo_bottom_wrapper -->
<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
<p>MeriRecognition</p>
</div><!-- END of templatemo_footer -->
</div><!-- END of templatemo_footer_wrapper -->
</body>
</html>

OUTPUT
Fig.4.1.1 HEADER SECTION with animated slider

28 | P a g e
Fig. 4.1.2 FOOTER SECTION

4.2.) About.aspx
SOURCE -CODE
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="about.aspx.cs" Inherits="about" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.auto-style2 {
font-size: x-large;
text-align: center;
text-decoration: underline;
}
.auto-style4 {
font-size: small;
}
.auto-style6 {
text-align: center;
font-size: medium;
}
.auto-style8 {
color: #FF3300;

29 | P a g e
}
.auto-style9 {
text-align: left;
height: 189px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<div class="clear"></div>
<div id="templatemo_main">
<h1 class="auto-style2"><strong>About Us</strong></h1>
<center>
<div class="img_frame img_frame_13 img_nom"><span></span>
<img src="images/showcase-slider2.jpg" alt="Image 5" height="200px" />
</div><br /><br /><br />
</center>
<p class="auto-style9">&nbsp;&nbsp;<span class="auto-
style4">We,MeriRecognition team firmly committed to deliver the value to the market place
by identifying unique strength with people. Not only we bring out&nbsp; your uniqueness
and talent to the limelight but also provide special opportunity to use people’s unique ability
to the need of market. If a talent is ignored , It is not loss of ours but of entire world .Let’s
together uproot&nbsp; this barrier forever and give a hope with ample of opportunity for
everyone .Let them shine like a diamond , achieve like leader. One talent can change entire
course of history , be it science , arts or anything. It can take us to different world which may
be better than this , what many leaders may not have thought .We are here to give that
platform to make you ebullient. Our vigorous and dedicated team will search across the
globe physically , on internet or with a reference to give right value to the unique talent .once
you get
registered with our website , everything will be taken care by our team. We value
you and your uniqueness. We ask for zero money to promote you. Our team welcome you
for your first take off to the world market. In return we want your cheering smile and thanks
because If you can see your dream comes true with us ,that’s our achievement . That’s our
motto. We call for volunteer across the world to join us to give a opportunity to a opportunity
seeker . At anytime you can contact us for volunteer on our website:
www.MeriRecognition.com or email us at join at merirecognition@gmail.com or you can
call us too. </span></p>
<p class="auto-style6"><em class="auto-style8"><marquee align="center" style="font-
size: large; font-weight: 700; background-color: #CCCCFF">&quot;WE RESPECT YOUR
WORK AND EXPERTISE&quot;</marquee></em></p>
<a href="#" class="more"><em class="auto-style8">More</em></a>
</div>
</asp:Content>

30 | P a g e
OUTPUT

Fig. 4.2 ABOUT US PAGE

4.3) LOGIN.aspx
SOURCE -CODE
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

31 | P a g e
protected void btnLogin_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(Database.ConnectionString);
try
{
con.Open();
SqlCommand cmd = new SqlCommand("select uid, fname from users where email =
@email and pwd = @pwd", con);
cmd.Parameters.Add("@email", SqlDbType.VarChar, 50).Value = txtEmail.Text;
cmd.Parameters.Add("@pwd", SqlDbType.VarChar, 50).Value = txtPwd.Text;
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read()) // valid user
{
Session.Add("uid", dr["uid"]);
Session.Add("fname", dr["fname"]);
FormsAuthentication.RedirectFromLoginPage(txtEmail.Text, false);
}
else
lblMsg.Text = "Invalid Login!";
}
catch (Exception ex)
{
lblMsg.Text = ex.Message;
}
finally
{
con.Close();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>

32 | P a g e
</head>
<body>
<form id="form1" runat="server">
<div>
<h1> YOURBLOGS.COM</h1>
<table width="100%" height="600px">
<tr>
<td width="70%" valign="top">
<h2>
What is this?<br />
</h2>
This is the place to post your blogs. Blogging is as simple as taking two
steps:<br />
<br />
<ul>
<li>Register as a user for free</li>
<li>Start posting your blogs.</li>
</ul>
<h2>
Recently Posted Blogs</h2>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="bid,uid"
DataSourceID="SqlDataSource1" Width="100%">
<Columns>
<asp:BoundField DataField="bid" HeaderText="bid" ReadOnly="True"
SortExpression="bid"
Visible="False" />
<asp:BoundField DataField="uid" HeaderText="uid" ReadOnly="True"
SortExpression="uid"
Visible="False" />
<asp:HyperLinkField DataNavigateUrlFields="bid"
DataNavigateUrlFormatString="all/showblog.aspx?bid={0}"
DataTextField="title" HeaderText="Title" />

33 | P a g e
<asp:HyperLinkField DataNavigateUrlFields="uid">
DataNavigateUrlFormatString="all/showuser.aspx?uid={0}"
DataTextField="fname" HeaderText="Author" />
<asp:BoundField DataField="postedon" HeaderText="postedon"
ReadOnly="True" SortExpression="postedon" />
</Columns>
</asp:GridView>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="select top 5 bid, u.uid,title, fname, postedon = convert(
varchar(10), postedon, 3) from blogs b, users u&#13;&#10;where b.uid = u.uid order by bid
desc">
</asp:SqlDataSource>
<br />
<a href="all/searchblogs.aspx">Search Blogs</a>
</td>
<td valign="top" style="background-color:wheat">
<h3>
Login</h3>
Email Address<br />
<asp:TextBox ID="txtEmail" runat="server" Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Email is required!"
ControlToValidate="txtEmail"></asp:RequiredFieldValidator><br />
Password<br />
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password"
Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage="Password is required!"
ControlToValidate="txtPwd"></asp:RequiredFieldValidator><br />
<asp:Button ID="btnLogin" runat="server" Text="Login"
OnClick="btnLogin_Click" /><br />

34 | P a g e
<br />
<asp:Label ID="lblMsg" runat="server" Font-Bold="True"
ForeColor="Red"></asp:Label><br />
<br />
<a href="all/forgotpassword.aspx">Forgot Password?</a>
<br />
<a href="all/register.aspx">Register!</a>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

OUTPUT
Fig. 4.3 LOGIN PAGE

35 | P a g e
4.4 ) Blog.aspx
SOURCE -CODE
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Blog.aspx.cs" Inherits="Blog" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.newStyle1 {
font-family: "Monotype Corsiva";
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<div id="templatemo_wrapper">

<div id="templatemo_main">
<div align="left" ><u><h1><span class="newStyle1"><em><strong>It's Blogging
time</strong></em></span></u></h1></div>
<div id="content" class="left">
<div class="post">
<div class="img_frame img_frame_14 img_fl"><span>
<br />
</span><a href="blog_post.html"><img src="images/kp%20pic.jpg" alt=""
/></a></div>
<h2><a href="blog_post.html">Khushboo Pal</a></h2>
<br />
Hello,&quot;MeriRecognition&quot; is a good platform where we can show our
hidden talents &amp; our expertise .It is dedicated to basically the backstage -staff.<div
class="clear h20"></div>
<div class="post_meta">
<span>26-05-2019&nbsp;&nbsp;&nbsp;<a href="#">latest
post</a></span><span><a href="#">256 comments</a></span><span><a href="#">New
Media</a>, <a href="#">Online</a></span><div class="clear"></div>
</div>
<a href="blog_post.html" class="more">More</a>
</div>
<div class="post">
<div class="img_frame img_frame_14 img_fl"><span></span><a
href="blog_post.html">" <img src="images/photographer.jpg" alt="" /></a></div>
<h2><a href="blog_post.html">Simran</a></h2>
<p>Photography is not a simple task ,it includes a lot of effort ,dedication & lot's of
fun.The person who doing click photos ,feel happy,but one who does this task ,seems very
happy.</p>
<div class="clear h20"></div>
<div class="post_meta">

36 | P a g e
<span>20-05-2019</span><span></span><span><a href="#">512
comments</a></span><span><a href="#">Last post</a></a></span>
<div class="clear"></div>
</div>
<a href="blog_post.html" class="more">More</a>
</div>
<a href="blog_post.html" class="more">More</a>
</div>
<div class="pagging">
<ul>
<li><a href="#">Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</div>
<div id="sidebar" class="right">
<div class="sidebar_box">
<h3>Categories</h3>
<div class="sidebar_box_content">
<ul class="list_bullet">
<li>Entertainment</li>
<li>Media Partners</li>
<li>Journalist</li>
<li>Labours</li>
<li>Artist/Theatre&nbsp; Artist</li>
<li>Backstage -staff</li>
<li>Innovators</li>
</ul>
</div>
</div>
<div class="sidebar_box">
<h3>Popular Posts</h3>
<div class="sidebar_box_content">
<ul class="no_bullet">
<li>
<a href="#" class="header">Abhijeet Mohdikar</a>
International JUMP ROPE Player A well known sportsperson in field of
JUMP ROPE In JUMP ROPE, 7 times NATIONAL CHAMPION, Gold Medalist
Represented INDIA in World Rope Skipping Championship – 2012 Secured 21st Rank all
over the World in World Rope Skipping Championship – 2012 Made the World Record by
Jumping 24hours (Single Rope) Performed at many T.V. reality shows Colors (Guinness

37 | P a g e
book of world record) , zee tv (I CAN DO THAT).
</li>
<li>
<a href="#" class="header">Lavanya Dass</a>
Dancer
</li>
<li>
<a href="#" class="header">Nunc bibendum cursus justo</a>
Sed quam felis, aliquam non tempor quis lacus odio at rutrum accumsan.
</li>
<li>
<a href="#" class="header">In pretium libero ut libero molestie</a>
Imperdiet urna orci sit amet velit massa sit amet enim pulvinar molestie.
</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
</div><!-- END of templatemo_main -->
</div>
</asp:Content>
OUTPUT

Fig.4.4 BLOG PAGE

38 | P a g e
4.5) Blogpost.aspx
SOURCE -CODE
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled
Page" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="server">
protected void btnPost_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(Database.ConnectionString);
try
{
con.Open();
SqlCommand cmd = new SqlCommand("addblog", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@userid", SqlDbType.Int).Value = Session["uid"];
cmd.Parameters.Add("@title", SqlDbType.VarChar,100).Value =
txtTitle.Text;
cmd.Parameters.Add("@text", SqlDbType.Text).Value = txtText.Text;
cmd.ExecuteNonQuery();
lblMsg.Text = "Blog has been posted successfully! Click <a
href=default.aspx>here</a> to continue..";
}
catch (Exception ex)
{
lblMsg.Text = "Error ->" + ex.Message;
}
finally
{
con.Close();
}

39 | P a g e
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h2>
Add Blog</h2>
Title<br />
<asp:TextBox ID="txtTitle" runat="server" Width="498px"></asp:TextBox><br
/>
Text<br />
<asp:TextBox ID="txtText" runat="server" Height="140px"
TextMode="MultiLine" Width="498px"></asp:TextBox><br />
<br />
<asp:Button ID="btnPost" runat="server" OnClick="btnPost_Click" Text="Post
Blog" /><br />
<br />
<asp:Label ID="lblMsg" runat="server"></asp:Label><br />
</asp:Content>

OUTPUT
Fig. 4.5 BLOG POST

40 | P a g e
4.6) Profile.aspx
SOURCE-CODE

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"


AutoEventWireup="true" CodeFile="profile.aspx.cs" Inherits="profile" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<br />
<br />
<div class="clear"></div>
<h1 align="center"><B><U>USER PROFILE CARD</U></B></h1><br />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">

<div class="card">
<img src="images/photographer.jpg" alt="simran" style="width:100%">
<h1>Simran</h1>
<p class="title">Photographer</p>
<label>at</label>
<p>Pratibha Studio</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<p><button>Contact</button></p>
</div>
</asp:Content>

41 | P a g e
OUTPUT
Fig. 4.6 Profile Card Page

4.7 ) Editprofile.aspx
Fig. 4.7 EDIT PROFILE PAGE OUTPUT

42 | P a g e
4.8) Contact.aspx
SOURCE- CODE
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="contact.aspx.cs" Inherits="contact" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<div id="templatemo_wrapper">
<div id="templatemo_main">
<h2>Contact Information</h2>
<div class="col two-third">
<p>Trust us ,We respect your privacy<a href="http://validator.w3.org/check?uri=referer"
rel="nofollow"></a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer"
rel="nofollow"></a>.</p>
<div class="clear h40"></div>
<div id="contact_form">
<form method="post" name="contact" action="#">
<label for="author">Name:</label> <input type="text" id="author"
name="author" class="input_field" />
<div class="clear h20"></div>
<label for="email">Email:</label> <input type="text" id="email"
name="email" class="input_field" />
<div class="clear h20"></div>

<label for="phone">Phone:</label> <input type="text" name="phone"


id="phone" class="input_field" />
<div class="clear h20"></div>
<label for="text">Message:</label> <textarea id="text" name="text" rows="0"
cols="0" class="required"></textarea>
<div class="clear h20"></div>

<input type="submit" class="submit_btn left" name="submit" id="submit"


value="Send" />
<input type="reset" class="submit_btn right" name="reset" id="reset"
value="Reset" />
</form>
</div>
</div>
<div class="col one_third no_margin_right">
<h4>Office One</h4>
Address<br /><br />Phone: 090-010-0990<br />
<strong>Email:</strong> <a
href="mailto:info@company.com">info@company.com</a><br/>
<div class="cleaner h40"></div>
<h4>Office Two</h4>

43 | P a g e
Address<br /><br />Phone: 040-060-0460<br />
<strong>Email:</strong> <a
href="mailto:contact@company.com">contact@company.com</a><br/>
<div class="clear h40"></div>
<div class="img_frame img_frame_13 img_nom"><span></span>
<iframe width="286" height="163" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp
;q=new+york+central+park&amp;aq=&amp;sll=37.0625,-
95.677068&amp;sspn=60.158465,135.263672&amp;vpsrc=6&amp;ie=UTF8&amp;hq=&a
mp;hnear=Central+Park,+New+York&amp;t=m&amp;ll=40.769606,-
73.973372&amp;spn=0.014284,0.033023&amp;z=14&amp;output=embed"></iframe></div
><br /><small><a
href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&
amp;q=new+york+central+park&amp;aq=&amp;sll=37.0625,-
95.677068&amp;sspn=60.158465,135.263672&amp;vpsrc=6&amp;ie=UTF8&amp;hq=&a
mp;hnear=Central+Park,+New+York&amp;t=m&amp;ll=40.769606,-
73.973372&amp;spn=0.014284,0.033023&amp;z=14" target="_blank"
style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
<div class="clear"></div>
</div><!-- END of templatemo_main -->
</div>
</asp:Content>

OUTPUT
Fig. 4.9 Contact Page

44 | P a g e
4.10 PROJECT CONTAINER(SOLUTION EXPLORER
VIEW

4.11 STYLE –SHEET & JAVASCRIPT CODING


Templatemo_style.css
body {
margin: 0;
padding: 0;
color: #555;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
background-color: #fff;
background-image: url(images/templatemo_header.png);
background-position: top;

45 | P a g e
background-repeat: repeat-x
}
h1, h2, h3, h4, h5, h6 {
color:#555;
font-weight:400;
padding: 0;
margin: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
}
h1 { font-size:32px; margin-bottom: 20px; }
h2 { font-size:26px; margin-bottom: 20px; line-height: 28px }
h3 { font-size:20px; margin-bottom: 20px; }
h4 { font-size:18px; margin-bottom: 10px; }
h5 { font-size:16px }
h6 { font-size:14px }
.header { display: block }
.left { float: left }
.right { float: right }
img { margin: 0; padding: 0}
.img_border { background: #ede8e8; padding: 4px; border: 1px solid #dcd5d5 }
.img_frame { position: relative; display: block; padding: 7px }
img_frame span { position: absolute; top: 0; left: 0; z-index: 0 }
.img_frame img, .img_frame iframe { position: absolute; top: 23px;
left: 22px;
z-index: 10;
width: 260px;
height: 128px;
}
.img_frame_13 { width: 280px; height: 157px }
.img_frame_13 span { background: url(images/templatemo_image_frame_13.png);
width: 300px; height: 177px }
.img_frame_14 { width: 203px; height: 108px }
.img_frame_14 span { background: url(images/templatemo_image_frame_14.png);

46 | P a g e
width: 217px; height: 122px }
.img_frame_23 { width: 616px; height: 216px }
.img_frame_23 span { background: url(images/templatemo_image_frame_23.png);
width: 630px; height: 230px }
.img_frame_12 { width: 451px; height: 245px }
.img_frame_12 span { background: url(images/templatemo_image_frame_12.png);
width: 465px; height: 260px }
.img_nom { display: block; margin-bottom: 15px;
top: 0px;
left: -107px;
width: 293px;
height: 165px;
}
.img_fl { float: left; margin: 3px 15px 5px 0 }
.img_fr { float: left; margin: 3px 0 5px 15px }
a:link, a:visited { color: #dc8924; text-decoration: none}
a:hover { color: #CC3300; text-decoration:underline }
a:hover,a:active { outline:none }
a.more, .submit_btn { clear: both; display: block; width: 80px; height: 24px; line-
height: 24px; text-align: center; text-decoration: none; background:
url(images/templatemo_button.png) no-repeat }
.submit_btn { border: none; cursor: pointer }
em { color: #555 }
p { margin: 0 0 15px 0 }
.list_bullet { margin: 10px 0 10px 15px; padding: 0; list-style: none }
.list_bullet li { color:#555; margin: 0 0 7px 0; padding: 0 0 0 20px; background:
url(images/templatemo_bullet.png) no-repeat scroll 0 5px }
.list_bullet li a { color: #555; font-weight: normal; text-decoration: none }
.list_bullet li a:hover { color: #555 }
.col { float: left; margin: 0 30px 20px 0 }
.half { width: 465px; margin-bottom: 30px }
.one_third { width: 300px }
#content, .two-third { width: 630px }

47 | P a g e
#sidebar { width: 300px }
.one_fourth { width: 217px }
.clear { clear: both; display: block; }
.h20 { height: 20px }
.h40 { height: 40px }
.no_bullet { margin: 0; padding: 0; list-style: none }
.no_bullet li { margin: 0 0 20px 0; padding: 0 }
a.header { display: block; font-weight: 700 }
#templatemo_wrapper {
width: 960px;
padding: 0 10px;
margin: 0 auto
}
#templatemo_header {
height: 120px;
}
#templatemo_menu {
height: 56px;
}
#templatemo_slider {
padding: 10px 0;
height: 350px;
margin-top: 40px;
}
#templatemo_main {
padding: 40px 0 20px;
}
section#video-container {
margin-top: 80px;
}
#video-container {
position: relative;
width: 100%;

48 | P a g e
height: 560px;
overflow: hidden;
z-index: 1;
}
#video-container video,
.video-overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}
#video-container .video-overlay {
z-index: 9999;
background: rgba(0,0,0,0.7);
width: 100%;
}
#video-container .video-content {
z-index: 99999;
position: absolute;
height: 100%;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
#video-container .video-content .inner {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;

49 | P a g e
}
#video-container .video-content .inner span {
font-size: 17px;
display: block;
margin: 0px;
color: #fff;
}
#video-container .video-content .inner h2 {
margin-bottom: 0px;
margin-top: 14px;
font-size: 23px;
font-weight: 500;
color: #fff;
letter-spacing: 0.5px;
}
#video-container .video-content .inner a {
margin-top: 30px;
width: 60px;
height: 60px;
display: inline-block;
text-align: center;
line-height: 56px;
color: #fff;
background-color: rgba(250,250,250,0.1);
font-size: 18px;
border: 3px solid #fff;
border-radius: 50%;
}
#templatemo_bottom_wrapper {
width: 100%;
border-top: 5px solid #f7f5f3;
background: #ebe7e4
}

50 | P a g e
#templatemo_bottom {
width: 960px;
margin: 0 auto;
padding: 20px 10px;
}
#templatemo_footer_wrapper {
width: 100%;
border-top: 5px solid #000;
background: #222222
}
#templatemo_footer {
width: 960px;
margin: 0 auto;
padding: 10px 10px 5px;
color: #dc8924;
}
#site_title { float: left; margin-top: 40px; }
#site_title a { display: block; font-size: 12px; font-family: Georgia, "Times New
Roman", Times, serif; width: 200px; height: 45px; color: #acacac; text-indent: -
10000px; background: url(images/templatemo_logo.png) no-repeat top left }
#templatemo_search { float: right; margin-top: 50px; width: 243px; height: 36px;
background: url(images/templatemo_search.png) }
#templatemo_search form {
margin: 0;
padding: 0;
}
#templatemo_search .txt_field {
float: left;
display: block;
height: 25px;
line-height: 16px;
width: 190px;
margin: 0px 5px 0px 0px;

51 | P a g e
color: #999999;
font-size: 12px;
padding: 5px 0px 5px 10px;
font-variant: normal;
border: none;
background: none;
}
#templatemo_search .sub_btn {
float: right;
display: block;
color: #fff;
height: 34px;
width: 36px;
font-size: 11px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
border: none;
background: none;
}
.post { clear: both; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid
#eee }
.post h2 { font-size: 24px; margin-bottom: 10px }
.post_meta { margin-bottom: 30px; font-size: 9px; line-height: 10px }
.post_meta span { display: block; float: left; border-left: 1px solid #eee; margin-right:
20px; padding-left: 10px }
.post .img_fl { margin-right: 30px }
.comment_list { margin: 0; padding: 0; list-style: none }
.comment_list .comment_box { padding: 20px; border-bottom: 1px solid #efefef }
.comment_list li { margin-bottom: 20px }
.comment_list li ul { list-style: none; background: none }
.comment_list li ul li { }
.comment_list li ul li .comment_box { background: #efefef }

52 | P a g e
.comment_content { float: right; width: 480px }
.comment_list li ul li.depth_2 .comment_content { width: 440px }
.comment_list li ul li.depth_3 .comment_box { background: #ccc }
.comment_list li ul li.depth_3 .comment_content { width: 400px }
#comment_form { margin-top: 40px }
#comment_form textarea {
background:#ffffff none repeat fixed 0 0;
border: 1px solid #cccccc;
display: block;
margin-top: 5px;
width: 360px;
height: 150px;
padding: 5px;
color: #555555;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#comment_form .form_row {
width: 100%;
margin-bottom: 15px;
}
#comment_form form input {
margin-top: 5px;
padding: 5px;
width: 200px;
background:#fff none repeat fixed 0 0;
border: 1px solid #ccc;
color: #555555;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#comment_form .submit_btn {
display: block; width: 70px; height: 30px; line-height: 30px; padding: 0 8px;

53 | P a g e
text-align: center; text-decoration: none; font-weight: bold; background-color:
#524239; border: 1px solid #2f2f2f; color: #fff; font-size:11px; cursor: pointer
}
#gallery { margin: 0; padding: 0 }
#gallery .gallery_box { padding-bottom: 30px; margin-bottom: 30px }
#contact_form { padding: 0; margin-bottom: 40px }
#contact_form form { margin: 0px; padding: 0px; }
#contact_form form .input_field {
width: 400px;
padding: 5px;
color: #555555;
background: #ffffff;
border: 1px solid #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#contact_form form label { display: block; width: 300px; margin-right: 12px; font-
size: 11px }
#contact_form form textarea {
width: 400px;
height: 160px;
padding: 5px;
color: #555555;
background: #ffffff;
border: 1px solid #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#sidebar h3 { padding: 10px 0 10px 10px; height: 25px; background:
url(images/templatemo_sidebar_title.png) top no-repeat }
.sidebar_box { margin-bottom: 40px }
.sidebar_box_content {padding-left: 10px }
.footer_gallery { margin: 0; padding:0; list-style: none }

54 | P a g e
.footer_gallery li { margin: 0 10px 10px 0; padding: 0; display: block; float: left }
.pagging { margin: 0 0 20px; padding: 0 }
.pagging ul { margin: 0; padding: 0; list-style: none }
.pagging ul li { margin: 0; padding: 0; display: inline }
.pagging ul li a { float: left; display: block; color: #666; text-decoration: none;
margin-right: 5px; padding: 5px 10px; background: #ebe7e4; border: 1px solid
#d6d0cc}
.pagging ul li a:hover { color: #fff; background: #cfccc9; }
.no_margin_right { margin-right: 0 }
.last_box { margin-bottom: 0; background: none }

ddsmoothmenu.js
var ddsmoothmenu={
arrowimages: {down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']},
transition: {overtime:300, outtime:300},
shadow: {enable:true, offsetx:5, offsety:5},
showhidedelay: {showdelay: 100, hidedelay: 200},

detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1,
detectie6: document.all && !window.XMLHttpRequest,

getajaxmenu:function($, setting){ var $menucontainer=$('#'+setting.contentsource[0]) //


$menucontainer.html("Loading Menu...")
$.ajax({
url: setting.contentsource[1], //path to external menu file
async: true,
error:function(ajaxrequest){
$menucontainer.html('Error fetching content. Server Response:
'+ajaxrequest.responseText)
},
success:function(content){
$menucontainer.html(content)
ddsmoothmenu.buildmenu($, setting)
}
})
},
buildmenu:function($, setting){
var smoothmenu=ddsmoothmenu
var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
var $headers=$mainmenu.find("ul").parent()
$headers.hover(
function(e){
55 | P a g e
$(this).children('a:eq(0)').addClass('selected')
},
function(e){
$(this).children('a:eq(0)').removeClass('selected')
}
)
$headers.each(function(i){ //loop through each LI header
var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
var $subul=$(this).find('ul:eq(0)').css({display:'block'})
$subul.data('timers', {})
this._dimensions={w:this.offsetWidth, h:this.offsetHeight,
subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false //is top level
header?
$subul.css({top:this.istopheader && setting.orientation!='v'?
this._dimensions.h+"px" : 0})
if (smoothmenu.shadow.enable){

this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.off
setx : this._dimensions.w), y:(this.istopheader?
$subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this
shadow's offsets
if (this.istopheader)
$parentshadow=$(document.body)
else{
var $parentLi=$curobj.parents("li:eq(0)")
$parentshadow=$parentLi.get(0).$shadow
}
this.$shadow=$('<div class="ddshadow'+(this.istopheader? '
toplevelshadow' :
'')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px',
top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent node for the next
shadow div
}
$curobj.hover(
function(e){
var $targetul=$subul //reference UL to reveal
var header=$curobj.get(0) //reference header LI as DOM
object
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer=setTimeout(function(){
header._offsets={left:$curobj.offset().left,
top:$curobj.offset().top}
var menuleft=header.istopheader &&
setting.orientation!='v'? 0 : header._dimensions.w

menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).wi
dth())? (header.istopheader && setting.orientation!='v'? -
header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft //c
if ($targetul.queue().length<=1){ //if 1 or less queued animations

56 | P a g e
$targetul.css({left:menuleft+"px",
width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'},
ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enable){
var shadowleft=header.istopheader?
$targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
var
shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety :
header._shadowoffset.y
if (!header.istopheader &&
ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
header.$shadow.css({opacity:1})
}
header.$shadow.css({overflow:'',
width:header._dimensions.subulw+'px', left:shadowleft+'px',
top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'},
ddsmoothmenu.transition.overtime)
}
}
}, ddsmoothmenu.showhidedelay.showdelay)
},
function(e){
var $targetul=$subul
var header=$curobj.get(0)
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer=setTimeout(function(){
$targetul.animate({height:'hide', opacity:'hide'},
ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enable){
if (ddsmoothmenu.detectwebkit){ //in WebKit
browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them

header.$shadow.children('div:eq(0)').css({opacity:0})
}

header.$shadow.css({overflow:'hidden'}).animate({height:0},
ddsmoothmenu.transition.outtime)
}
}, ddsmoothmenu.showhidedelay.hidedelay)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
},

init:function(setting){
if (typeof setting.customtheme=="object" && setting.customtheme.length==2){
//override default menu colors (default/hover) with custom set?
var mainmenuid='#'+setting.mainmenuid
var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+',

57 | P a g e
'+mainmenuid
document.write('<style type="text/css">\n'
+mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
+mainmenuid+' ul li a:hover
{background:'+setting.customtheme[1]+';}\n'
+'</style>')
}
this.shadow.enable=(document.all && !window.XMLHttpRequest)? false :
this.shadow.enable //in IE6, always disable shadow
jQuery(document).ready(function($){ //ajax menu?
if (typeof setting.contentsource=="object"){ //if external ajax menu
ddsmoothmenu.getajaxmenu($, setting)
}
else{ //else if markup menu
ddsmoothmenu.buildmenu($, setting)
}
})
}
}

4.12 DATABASE CONNECTION IN VISUAL


STUDIO

58 | P a g e
Fig. 4.12.1 CREATION OF TABLE named BlogPost

59 | P a g e
Fig. 4.12.2 TABLE ENTRIES-

Fig. 4.12.3 SQL SERVER DATABASE

60 | P a g e
Fig. 4.12.4 SQL QUERY WITH DATBASE ENTRY

4.13 FUTURE SCOPE & ENHANCEMENT OF


PROJECT

“MeriRecognition” Project help to backstage staff to gain their role popularity and
give them a chance to explore themselves. It also help them to share their expertise
also.It gives benefit to both who shows their skills & who sees them.They can use
their talents as when they needed.The present project has been developed to meet the
aspirations indicated in the modern age. An attempt has been made through this
project to do all work ease & fast. It provide current add, Update, MoveNext,
MovePrevious, MoveLast, Find & Delete all facilities to accomplish the desired
objectives.

61 | P a g e
CHAPTER-5
CONCLUSION

62 | P a g e
CHAPTER-5

CONCLUSION
As per the goal of this project an attempt is made to show how we
can utilize our online Internet facility for us & can present our
knowledge in such a different way.This project lead us to interact with
world & has given a chance to showcase our hidden talent to world &
get recognized by different people of the world.

Present system just give a small limelight to us but one day by


doing some more improvements in the system we can extend it’s concept
to wider level. We will get a chance to show our abilities to the world.

By developing such systems, relationship between human and


computer becomes much closer. Thus it helps in overcoming the problem
of DIGITAL DIVIDE.

63 | P a g e
CHAPTER-6
BIBLIOGRAPHY
/
REFERENCES

64 | P a g e
CHAPTER-6
REFERENCES

1.www.google.com
2.www.scribd.com
3.www.wikipedia.com
4.www.talentriser.com
5.www.academia.edu
6.www.microtec.ac.in
7.www.dcsmse.gov.in
8.SYNOPSIS Manuals
9.Guidance and support of College and Training Institute 3-ASP.NET
Tutorials
10.C# Tutorials
11.Online Support from different sites
12.https://en.wikipedia.org/wiki/
13.www.google.co.in
14.For HTML,CSS and Javascript - use “Sololearn App”.

65 | P a g e
CHAPTER- 7
CURRICULAM
VITAE

66 | P a g e
67 | P a g e

You might also like