Harry Web Tech

ATCHAYAM TRUST WEB CREATION
CRAFTING IMPACT
A MINI PROJECT REPORT
Submitted By
Hariharan T (73772114140)
50 CS 504 - WEB TECHNOLOGY
BACHELOR OF ENGINEERING
in
COMPUTER SCIENCE AND ENGINEERING
K S RANGASAMY COLLEGE OF TECHNOLOGY

(An Autonomous Institution, affiliated to Anna University Chennai and Approved by AICTE, New Delhi)
(Autonomous)
TIRUCHENGODE-637215
1
K S RANGASAMY COLLEGE OF TECHNOLOGY
TIRUCHENGODE - 637 215

(AUTONOMOUS)
BONAFIDE CERTIFICATE
Certified that this mini project report titled “ATCHAYAM TRUST WEB
CREATION CRAFTING IMPACT” is the bonafide work of Hariharan T (73772114140)
who carried out the project under my supervision.
Dr.S.Madhavi M.E., Ph.D., Ms. R.Kabila B.E.,M.E.,

Head of the Department Project Guide
Professor Assistant Professor
Department of Computer Science Department of Computer Science
and Engineering and Engineering
K.S.Rangasamy College of K.S.Rangasamy College of
Technology Technology
Tiruchengode - 637 215 Tiruchengode - 637 215
2
ABSTRACT
This project report describes the design and development of a web application for the
Atchayam Trust, a non-governmental organization that works towards the rehabilitation of
beggars, homeless, and destitute people in Tamil Nadu. The web application aims to provide a
platform for the Trust to showcase its activities, achievements, and impact, as well as to raise
awareness and funds for its cause. The web application uses HTML, CSS, PHP and
incorporates features such as dynamic content, multimedia, user feedback, and social media
integration. The project report also evaluates the usability, functionality, and performance of
the web application, and discusses the challenges and limitations faced during the development
process. The project report concludes with recommendations for future improvements and
enhancements of the web application.
3
TABLE OF CONTENTS
Chapter No Content Page No
1. Introduction 5
2. Design 7
3. Use-case diagram 8
4. Implementation 9
5. Code 16
6. Conclusion 80
7. References 81
4
CHAPTER 1
INTRODUCTION
The Web is a service that operates over the Internet, just as email does. According to
Microsoft, web technologies include the following: Mark-up languages, such as HTML, CSS,
XML, CGI, and HTTP (Front-end or Client-side technologies) Programming languages and
technologies that help create applications for the web. In this project I have used the following
technologies HTML, CSS and Java Script.
1.1 HTML
The Hyper Text 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 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 includes for the appearance of the document.
1.2 CSS
Cascading Style Sheets 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.
The name cascading comes from the specified priority scheme to determine which style
rule applies if more than one rule matches a particular element. This cascading priority scheme
is predictable.
1.3 JAVASCRIPT
JavaScript, often abbreviated as JS, is a programming language that conforms to the
ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-
paradigm. It has dynamic typing, prototype-based object-orientation and first-class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the World
Wide Web. Over 97% of websites use it 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 the user's device.
5
1.4 PHP
PHP (a recursive initialism for PHP: Hypertext Preprocessor) is an open-source server-
side scripting language that can be embedded into HTML to build web applications and dynamic
websites.
PHP is a server scripting language, and a powerful tool for making dynamic and
interactive Web pages. PHP is a widely-used, free, and efficient alternative to competitors such
as Microsoft's ASP.
6
CHAPTER 2
DESIGN
Welcome to the Atchayam Trust rehabilitation home website. This is the website for the team of
dedicated volunteers who are committed to transforming the lives of the less fortunate people in our
society. Its vision is to create a beggar-free society where everyone has a chance to live with dignity and
respect. Its mission is to rescue, rehabilitate, and reintegrate the beggars, homeless, and destitute people
into the mainstream society. The design of the website that provide them with medical care, counseling,
education, skill training, and livelihood opportunities. The website also cares for the old age and homeless
destitute people, and provide them with shelter, food, clothing, and love. Join us in our journey of making
a difference in the world. Anyone can support this website by donating, volunteering, or spreading the
word about our work. Together, we can make a change in this world.
7
CHAPTER 3
USE CASE DIAGRAM
8
CHAPTER 4
IMPLEMENTATION
Figure 4.1 Desktop view of the Home page in the website
9
Figure 4.2 Desktop view of the Service Projects in the website
10
Figure 4.3 Desktop view of the Become a Volunteer
11
Figure 4.4 Desktop view of the About page in the website
12
Figure 4.5 Desktop view of the Donation page in the website
13
Figure 4.6 Desktop view of the about the Founder
14
Figure 4.7 Desktop view of Team behind the Atchayam page
15
CHAPTER 5
CODE
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="icon" href="assets/images/favicon.png" sizes="32x32" type="image/png">
<title>ATCHAYAM TRUST- Nonprofit Fundraising Multipurpose</title>
<link rel="stylesheet" href="assets/css/icons.min.css">

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-select.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/fancybox.min.css">
<link rel="stylesheet" href="assets/css/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<link rel="stylesheet" href="assets/css/color.css">


<link rel="stylesheet" href="assets/css/revolution/settings.css">

<link rel="stylesheet" href="assets/css/revolution/layers.css">

<link rel="stylesheet" href="assets/css/revolution/navigation.css">
</head>
<body itemscope>
<main>
<body itemscope>
<main>
<div class="page-loader">
<div class="loader">
<div class='loader-style-1 panelLoad'>
<div class='cube-face cube-face-front'>அ</div>
16
<div class='cube-face cube-face-back'>ட்</div>
<div class='cube-face cube-face-left'>ச</div>
<div class='cube-face cube-face-right'>ய</div>
<div class='cube-face cube-face-bottom'>ம் </div>
<div class='cube-face cube-face-top'>.</div>
</div>
<span class="cube-face">அட்சயம் </span>
</div>
</div>
<header class="style2 stick flex">
<div class="wb-lgmnu-wrp">
<div class="container">
<div class="lgmnu-inr align-items-center flex justify-content-between">
<div class="logo"><a href="project.html" title="Home" itemprop="url"><img
src="assets/images/logo2.png" alt="logo2.png" itemprop="image"></a></div>
<nav>
<div>
<ul>
<li class="menu-item-has-children"><a href="project.html" title=""
itemprop="url">Home</a>
</li>
<li><a href="https://www.atchayamtrust.com/about-us.php" title=""
itemprop="url">About</a></li>
<li class="menu-item-has-children"><a href="#" title=""
itemprop="url">Pages</a>
<ul>
<li class="menu-item-has-children"><a
href="https://www.atchayamtrust.com/rescue-and-rehabilitation.php" title=""
itemprop="url">Event</a>
</li>
<li><a href="https://www.atchayamtrust.com/donate-now.php" title=""
itemprop="url">Donate Now</a></li>
<li><a href="coming-soon.html" title="" itemprop="url">Coming
Soon</a></li>
<li><a href="404.html" title="" itemprop="url">Error Page</a></li>
</ul>
</li>
itemprop="url">Team</a>
<ul>
<li><a href="https://www.atchayamtrust.com/founder-president.php"
title="" itemprop="url">Founder</a></li>
17
<li><a href="https://www.atchayamtrust.com/team-behind-
atchaiyam.php" title="" itemprop="url">Team Behind Atchayam</a></li>
</ul>
</li>
<li><a href="https://www.atchayamtrust.com/conact-us.php" title=""
itemprop="url">Contact</a></li>
</ul>
<a class="thm-btn" href="https://www.atchayamtrust.com/donate-now.php"
title="" itemprop="url">Donate Now<span></span></a>
</div>
</nav>
</div>
</div>
</div>
</header>
<div class="sticky-header flex">
<nav>
<div>
<ul>
</li>
<ul>
</li>
<li><a href="https://www.atchayamtrust.com/donate-now.php" title=""
itemprop="url">Donate Now</a></li>
Soon</a></li>
</ul>
</li>
18
<ul>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="rspns-hdr">
<div class="rspns-lg-mnu-br">
src="assets/images/logo2.png" alt="logo2.png" itemprop="image"></a></div>
<span class="rspns-mnu-btn"><i class="fa fa-align-justify"></i></span>
</div>
<nav>
<div>
<ul>
</li>
<ul>
19
</li>
<li><a href="https://www.atchayamtrust.com/donate-now.php"
title="" itemprop="url">Donate Now</a></li>
Soon</a></li>
</ul>
</li>
<ul>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="rspns-lnks-br">
<div class="rspns-lnks-lst">
<a href="#" title="" itemprop="url"><i class="flaticon-
user"></i><span>Login</span></a>
portfolio"></i><span>Careers</span></a>
hand"></i><span>Volunteer</span></a>
</div>
<a class="thm-btn" href="https://www.atchayamtrust.com/donate-now.php" title=""
itemprop="url">Donate<span></span></a>
</div>
</div>
<img src="assets/images/resources/slide2.jpg" alt="slide2.jpg" data-bgposition="center

center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-
no-retina>
20
<section>
<div class="block no-padding">
<div id="rev_slider_4_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-
alias="notgeneric125" data-source="gallery" style="background-color:transparent;padding:0px;">
<div id="rev_slider_4_1" class="rev_slider fullscreenbanner" style="display:none;"
data-version="5.4.1">
<ul>



<div class="tp-caption tp-resizeme"
id="slide-layer2-1"
data-x="['left','left','center','center']" data-hoffset="['370','100','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-122','-100','-
100','-100']"
data-fontsize="['22','22','20','18']"
data-lineheight="['28','28','26','20']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"y:-
[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:0;s:inherit;e:inher
it;","speed":1500,"to":"o:1;","delay":2000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000
,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
data-textAlign="['left','left','center','center']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="letter-spacing: 0;font-weight:400;font-family: Rubik;color:
#fff;">Poverty connects nonprofits, donors,
</div>


<div class="tp-caption tp-resizeme inhrt-spn-fnt"
id="slide-layer2-2"
data-y="['middle','middle','middle','middle']" data-voffset="['-62','-50','-50','-
50']"
data-fontsize="['60','50','45','35']"
21
data-lineheight="['80','70','65','55']"
data-width="none"
data-height="none"
data-type="text"
style="letter-spacing: 0;font-weight:700;font-family:
Rubik;color:#fff;">Change a <span style="font-weight: 400;font-size: inherit !important;">Child's
Life</span>
</div>


<div class="tp-caption tp-resizeme"
id="slide-layer2-3"
data-y="['middle','middle','middle','middle']" data-
voffset="['38','30','30','20']"
data-fontsize="['20','20','20','16']"
data-lineheight="['33','33','33','30']"
data-width="none"
data-height="none"
data-type="text"
style="letter-spacing: 0;font-weight:400;font-family: Rubik;color:
#fff;">nonprofits access the funding, tools, training, and support <br> they need to become more
22
effective.
</div>


<div class="tp-caption rev-btn thm-btn"
id="slide-layer2-4"
data-y="['middle','middle','middle','middle']" data-
voffset="['148','120','120','110']"
data-width="none"
data-height="none"
data-type="button"
data-
actions='[{"event":"click","action":"simplelink","slide":"next","delay":"","target": "_self", "url":
"contact.html"}]'
data-responsive="on"
data-textAlign="['center','center','center','center']"
style="cursor:pointer;line-height: 1.875rem;display: inline-block;font-
family: Rubik;font-size: 0.9375rem;letter-spacing: 0;font-weight: 700;">Get Started<span></span>
</div>


<div class="tp-caption tp-resizeme rs-parallaxlevel-3 slider-img"
id="slide-layer2-5"
data-x="['right','right','right','right']" data-hoffset="['250','50','0','0']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['100','0','0','0']"
data-fontsize="['20','20','17','15']"
data-lineheight="['31','30','28','26']"
data-width="none"
data-height="none"
data-type="image"
data-frames='[{"from":"x:-
23
data-textAlign="['right','right','center','center']"
style="z-index: 1;">
<img src="assets/images/slide-shp1.png" alt="slide-shp1.png"
itemprop="image">
</div>


<div class="tp-caption tp-resizeme rs-parallaxlevel-5 slider-img"
id="slide-layer2-6"
data-x="['right','right','right','right']" data-hoffset="['360','130','0','0']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
data-fontsize="['20','20','17','15']"
data-lineheight="['31','30','28','26']"
data-width="none"
data-height="none"
data-type="image"
data-frames='[{"from":"x:-
data-textAlign="['right','right','center','center']"
style="z-index: 1;">
<img src="assets/images/resources/slide-mockp1.png" alt="slide-
mockp1.png" itemprop="image">
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
24
<section>
<div class="block remove-bottom">
<div class="srv-wrp remove-ext4 text-center">
<div class="row">
<div class="col-md-3 col-sm-6 col-lg-3">
<div class="srv-bx">
<i class="flaticon-tshirt thm-clr"></i>
<div class="srv-inr">
<h4 itemprop="headline">we serve</h4>
<p itemprop="description">Dedicated to enhancing the lives of seniors,
we serve at Old Rehabilitation Trust with unwavering commitment, fostering wellness, and ensuring a
dignified journey into their golden years.</p>
</div>
</div>
</div>
<i class="flaticon-ribbon thm-clr"></i>
<h4 itemprop="headline">we work</h4>
<p itemprop="description">Empowered by a tireless dedication, at Old
Rehabilitation Trust, we work diligently to provide comprehensive and compassionate support,
fostering a nurturing environment for the well-being of our cherished elderly community.</p>
</div>
</div>
</div>
<i class="flaticon-heart-1 thm-clr"></i>
<h4 itemprop="headline">we respond</h4>
<p itemprop="description">At Old Rehabilitation Trust, we prioritize
swift responses, providing timely and tailored support to meet the distinct needs of our elderly
community. Our commitment to proactive care ensures a responsive approach, fostering a nurturing
environment where every senior's well-being is our top priority.</p>
</div>
</div>
</div>
<i class="flaticon-charity thm-clr"></i>
<h4 itemprop="headline">we resettle</h4>
25
<p itemprop="description">At Old Rehabilitation Trust, we specialize in
compassionate resettlement, guiding seniors through seamless transitions and creating supportive
environments for them to thrive in their new chapters of life.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="block white-layer opc8">
<div class="fixed-bg" style="background-image: url(assets/images/prlx-
bg3.jpg);"></div>
<div class="prg-dnt-wrp text-center">
<div class="prg-dnt-inr">
<span class="thm-clr">Atchayam Trust Rehabilitation Center</span>
<h2 itemprop="headline">Gifts into Service Projects that Change</h2>
<p itemprop="description">Foundation awarded ₹10 lakhs in funding to 1,438
grants fiscal year 2022.</p>
<div class="progress">
<div class="progress-bar thm-bg progress-bar-striped wdth75"></div>
</div>
<div class="prg-dnt-cls">
<span class="thm-clr">75%</span>
<div class="prg-dnt-cls-inf">
<strong><span>Collected:</span> ₹1000000</strong>
<strong><span>Goal:</span> ₹1500000</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="non-orgn-wrp text-center">
<div class="row mrg align-items-center">
26
<div class="orgn-inf-wrp blue-layer opc75">
<div class="fixed-bg back-post-cntrbtm-norpet blue-bg back-post-lftcntr back-
blend-multiply" style="background-image: url(assets/images/orgn-wrp-bg.jpg);"></div>
<div class="orgn-inf">
<span>Helping Nonprofit Organizations</span>
<h2 itemprop="headline">Since we began, we have worked with <span
class="thm-clr">over 1,000+ nonprofits</span> learning what it takes.</h2>
<a class="thm-btn" href="https://forms.gle/DxPTo8sFWdm42jSFA" title=""
itemprop="url">Become Volunteer<span></span></a>
</div>
</div>
</div>
<div class="orgn-wrp">
<div class="fixed-bg" style="background-image: url(assets/images/orgn-wrp-
bg2.jpg);"></div>
<div class="row mrg">
<div class="orgn-bx">
<img src="assets/images/resources/org-img1.png" alt="org-img1.png"
itemprop="image">
</div>
</div>
itemprop="image">
</div>
</div>
itemprop="image">
</div>
</div>
itemprop="image">
</div>
</div>
</div>
</div>
27
</div>
</div>
</div>
</div>
</section>
<section>
<div class="block white-layer opc5">
<div class="fixed-bg" style="background-image: url(assets/images/prlx-
bg4.jpg);"></div>
<div class="huslnd-wrp">
<div class="row">
<div class="huslnd-inf">
<span class="counter thm-clr">1500</span>
<h6 itemprop="headline">homeless people rescued in Erode</h6>
<a class="thm-btn2" href="https://www.atchayamtrust.com/donate-
now.php" title="" itemprop="url">Start Donation</a>
</div>
</div>
<h3 itemprop="headline">The most impactful donations are those wrapped in
the warmth of trust, creating ripples of positive change.</h3>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
<section>
<div class="spnsr-shp-titl text-center">
<div class="spnsr-shp-titl-inr">
<h2 itemprop="headline">Giving with trust is like <strong class="thm-
clr">sowing seeds of goodwill, nurturing a garden of positive change.</strong> </h2>
<a href="sponsor-child.html" title="" itemprop="url"><i class="fa fa-angle-
right"></i></a>
28
</div>
</div>
</div>
<div class="spnsr-chld-wrp">
<div class="row mrg">
<div class="spnsr-chld-bx">
<div class="spnsr-chld-thmb"><img src="assets/images/resources/spnsr-chld-
img1-1.jpg" alt="spnsr-chld-img1-1.jpg" itemprop="image"></div>
<div class="spnsr-chld-inf">
<h4 itemprop="headline"><a href="sponsor-child-detail.html" title=""
itemprop="url">Ravi</a></h4>
<a class="thm-btn" href="sponsor-child-detail.html" title=""
itemprop="url">Sponsor Now<span></span></a>
</div>
</div>
</div>
itemprop="url">Karuppannasamy</a></h4>
</div>
</div>
</div>
itemprop="url">Senthil Kumar</a></h4>
</div>
</div>
</div>
29
itemprop="url">Murugesan</a></h4>
</div>
</div>
</div>
itemprop="url">Achiyammal</a></h4>
</div>
</div>
</div>
itemprop="url">Devnath</a></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="block thm-layer opc97">
<div class="fixed-bg patern-bg thm-bg back-blend-multiply" style="background-image:
url(assets/images/pattern-bg1.jpg);"></div>
<div class="ftr-dta-wrp2 remove-ext11">
<div class="row">
30
<div class="wdgt-bx style2">
<h4 itemprop="headline">Sign up for our news</h4>
<form class="nwsltr-frm">
<input type="text" placeholder="Enter your email address here">
<button type="submit">Submit<span></span></button>
</form>
</div>
</div>
<h4 itemprop="headline">Connect with social links.</h4>
<div class="ftr-scl">
<a href="https://www.facebook.com/Atchayamtrust" title="Facebook"
itemprop="url" target="_blank"><i class="fa-brands fa-facebook-f"></i> facebook</a>
<a href="https://x.com/TrustAtchayam?s=20" title="Twitter"
itemprop="url" target="_blank"><i class="fa fa-twitter"></i>twitter</a>
<a
href="https://instagram.com/atchayam_official?igshid=MTk0NTkyODZkYg==" title="Instagram"
itemprop="url" target="_blank"><i class="fa fa-pinterest-p"></i>instagram</a>
<a
href="https://youtube.com/@atchayamtrust150?si=wManRFatCIS0LVX7" title="Youtube"
itemprop="url" target="_blank"><i class="fa fa-play"></i>youtube</a>
</div>
</div>
</div>
<h4 itemprop="headline">Need to talk to us?</h4>
<ul class="abt-cnt-lst">
<li><span>Email:</span><a href="#" title=""
itemprop="url">[email protected]</a></li>
<li><span>Phone:</span>99439 08424</li>
<li><span>Map:</span>Atchayam Beggars Rehabilitation Home,
Solarputhur to Lakkapuram road, New bus stand backside Solar, Erode-638 002.</li>
</ul>
</div>
</div>
<h4 itemprop="headline">Get Involved</h4>
<ul>
<li><a href="#" title="" itemprop="url">Charity Campaigns</a></li>
<li><a href="#" title="" itemprop="url">Comunit Communities</a></li>
31
<li><a href="#" title="" itemprop="url">Helping Events</a></li>
</ul>
</div>
</div>
<h4 itemprop="headline">Useful links</h4>
<ul>
<li><a href="#" title="" itemprop="url">Hat We Do</a></li>
<li><a href="#" title="" itemprop="url">Contact Us</a></li>
<li><a href="#" title="" itemprop="url">Where your money
goes</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<div class="btm-br">
<p itemprop="description">© Copyright <span class="thm-clr">2014 <a
href="index.html" title="Povert" itemprop="url">Atchayam</a></span>. All rights reserved.</p>
<ul class="btm-lnks">
<li><a
href="https://maps.google.com/maps?ll=11.316965,77.763001&z=15&t=m&hl=en&gl=IN&mapclie
nt=embed&cid=13805126709937149773" title="" itemprop="url">Site Map</a></li>
<li><a href="#" title="" itemprop="url">Privacy policy</a></li>
<li><a href="#" title="" itemprop="url">Terms & Conditions</a></li>
</ul>
</div>
</div>
</main>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-select.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/fancybox.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/perfectscrollbar.min.js"></script>
<script src="assets/js/scroll-up-bar.min.js"></script>
32
<script src="assets/js/counterup.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/custom-scripts.js"></script>
<script src="assets/js/revolution/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/revolution/jquery.themepunch.revolution.min.js"></script>

<script src="assets/js/revolution/extensions/revolution.extension.actions.min.js"></script>
<script src="assets/js/revolution/extensions/revolution.extension.carousel.min.js"></script>
<script src="assets/js/revolution/extensions/revolution.extension.kenburn.min.js"></script>
<script
src="assets/js/revolution/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="assets/js/revolution/extensions/revolution.extension.migration.min.js"></script>
<script src="assets/js/revolution/extensions/revolution.extension.navigation.min.js"></script>
<script src="assets/js/revolution/extensions/revolution.extension.parallax.min.js"></script>
<script src="assets/js/revolution/extensions/revolution.extension.slideanims.min.js"></script>
<script src="assets/js/revolution/extensions/revolution.extension.video.min.js"></script>
<script src="assets/js/revolution/revolution-init.js"></script>
</body>
</html>
CSS:
@import url(https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i&display=swap);
@import
url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&displa
y=swap);
@font-face{
font-family: Early Bird;
src: url('../fonts/EarlyBird.otf');
}
@font-face{
font-family: Entreaty;
src: url('../fonts/Entreaty.ttf');
}
/*===== General Styling =====*/

body,
html {overflow-x: hidden;}
body {
margin: 0;
font-family: Arimo;
position: relative;
width: 100%;
max-width: 100%;
}
33
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Rubik;
color: #333;
font-weight: 700;
}
p{
font-family: Arimo;
color: #666;
line-height: 1.875rem;
font-size: 1.0625rem;
font-weight: 400;
}
ul li,
ol li {
font-family: Rubik;
color: #666;
font-size: 1rem;
}
a {color: inherit;}
a:hover,
a:focus,
ins {
text-decoration:none;
outline:none;
}
input,
textarea,
select,
button {border: 0;}
button,
input[type="submit"],
.fileContainer,
input[type="file"] {cursor: pointer;}
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus,
.form-wrp fieldset p a:focus,
.page-link:focus,
.btn.focus,
.btn:focus,
.bootstrap-select .dropdown-toggle:focus {
border-color: transparent;
outline: none !important;
-webkit-box-shadow: none !important;
-ms-box-shadow: none !important;
-o-box-shadow: none !important;
box-shadow: none !important;
}
34
textarea {resize: none;}
main,
section,
footer,
.block {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 100%;
position:relative;
width:100%;
}
.block {padding: 7.8125rem 0;}
.less-spacing,
.block.less-spacing {padding: 6.25rem 0;}
.top-spac50,
.block.top-spac50 {padding-top: 3.125rem;}
.bottom-spac50,
.block.bottom-spac50 {padding-bottom: 3.125rem;}
.top-spac60,
.bottom-spac60,
.top-spac70,
.bottom-spac70,
.top-spac80,
.block.top-spac80 {padding-top: 5rem;}
.bottom-spac80,
.block.bottom-spac80 {padding-bottom: 5rem;}
.top-spac90,
.bottom-spac90,
.top-spac100,
.bottom-spac100,
.top-spac104,
.bottom-spac104,
.top-spac110,
.bottom-spac110,
.top-spac170,
.bottom-spac170,
.top-spac220,
.bottom-spac220,
35
.top-spac250,
.bottom-spac250,
.top-spac270,
.bottom-spac270,
.top-spac460,
.bottom-spac460,
.remove-gap,
.gap.remove-gap {padding-top: 0;}
.remove-bottom,
.block.remove-bottom {padding-bottom: 0;}
.no-padding,
.block.no-padding {padding: 0;}
.wht-bg {background-color: #fff;}
.drk-bg {background-color: #0f0f0f;}
.drk-bg2 {background-color: #111111;}
.drk-bg3 {background-color: #0d0d0d;}
.gray-bg {background-color: #fafafa;}
.gray-bg2 {background-color: #f9f9f9;}
.gray-bg3 {background-color: #fbfbfb;}
.blue-bg {background-color: #2a255e;}
.gray-grdnt-bg {
background-image: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(250,250,250,0.85) 28%,
rgba(250,250,250,0.65) 42%, rgba(250,250,250,0.4) 64%, rgba(250,250,250,0.3) 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,250,250,1)), color-
stop(28%, rgba(250,250,250,0.85)), color-stop(42%, rgba(250,250,250,0.65)), color-stop(64%,
rgba(250,250,250,0.4)), color-stop(100%, rgba(250,250,250,0.3)));
background-image: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(250,250,250,0.85) 28%,
rgba(250,250,250,0.65) 42%, rgba(250,250,250,0.4) 64%, rgba(250,250,250,0.3) 100%);
background-image: -o-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(250,250,250,0.85) 28%,
rgba(250,250,250,0.65) 42%, rgba(250,250,250,0.4) 64%, rgba(250,250,250,0.3) 100%);
background-image: -ms-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(250,250,250,0.85) 28%,
rgba(250,250,250,0.65) 42%, rgba(250,250,250,0.4) 64%, rgba(250,250,250,0.3) 100%);
background-image: linear-gradient(to bottom, rgba(250,250,250,1) 0%, rgba(250,250,250,0.85) 28%,
rgba(250,250,250,0.65) 42%, rgba(250,250,250,0.4) 64%, rgba(250,250,250,0.3) 100%);
}
.shp-tp {
background-color: inherit;
position: absolute;
left: -3.125rem;
right: -3.125rem;
height: 7.5rem;
top: -3.75rem;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
z-index: -1;
}
.shp-tp.lft,
.shp-btm.lft {
36
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.shp-btm {
position: absolute;
left: -3.125rem;
right: -3.125rem;
bottom: -3.75rem;
height: 7.5rem;
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
z-index: -1;
}
.container {
padding: 0;
max-width:73.125rem;
}
.remove-ext,
.remove-ext0,
.remove-ext1,
.remove-ext2,
.remove-ext3,
.remove-ext4,
.remove-ext5,
.remove-ext6,
.remove-ext7,
.remove-ext8,
.remove-ext9,
.remove-ext10,
.remove-ext11,
.remove-ext12,
.remove-ext13,
.remove-ext14,
.remove-ext15 {
max-width: 100%;
margin-bottom: -0.9375rem;
z-index: 1;
width: 100%;
}
.remove-ext0 {margin-bottom: -0.625rem;}
37
.remove-ext13 {margin-bottom: -5rem;}
.ovrlp92 {
position: relative;
width: 100%;
z-index: 1;
}
.ovrlp92 {margin-top: -5.75rem;}
.mrg {margin: 0;}
.mrg > div {padding: 0;}
.mrg5 {margin: 0 -0.15625rem;}
.mrg5 > div {padding: 0 0.15625rem;}
.mrg15 {margin: 0 -0.46875rem;}
.fixed-bg {
background-position: center;
height:100%;
width:100%;
margin:0;
position:absolute;
left:0;
top:0;
z-index:-2;
}
.fixed-bg {
background-attachment: scroll;
background-size:cover;
}
.back-post-cntrbtm-norpet {
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
}
.back-post-cntrbtm {background-position: center bottom;}
.back-post-lftcntr {background-position: left center;}
.back-post-lftbtm {background-position: left bottom;}
.back-post-lfttp {background-position: left top;}
.back-post-rgtcntr {background-position: right center;}
38
.back-post-rgtbtm {background-position: right bottom;}
.back-post-rgttp {background-position: right top;}
.fixed-bg.patern-bg {background-size: initial;}
.fixed-bg.shp-bg {
background-size: contain;
background-repeat: no-repeat;
}
.back-blend-soft-light {background-blend-mode: soft-light;}
.back-blend-difference {background-blend-mode: difference;}
.back-blend-screen {background-blend-mode: screen;}
.back-blend-multiply {background-blend-mode: multiply;}
.back-blend-darken {background-blend-mode: darken;}
.black-layer:before,
.white-layer:before,
.gray-layer:before,
.gray-layer2:before,
.gray-layer3:before,
.thm-layer:before,
.scndry-layer:before,
.dark-layer:before,
.dark-layer2:before,
.dark-layer3:before,
.blue-layer:before {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.dark-layer:before {background-color: #0f0f0f;}
.dark-layer2:before {background-color: #393939;}
.dark-layer3:before {background-color: #0d0d0d;}
.blue-layer:before {background-color: #2a255e;}
.white-layer:before {background-color:#ffffff;}
.gray-layer:before {background-color: #fafafa;}
.gray-layer2:before {background-color: #cfcfcf;}
.gray-layer3:before {background-color: #f9f9f9;}
.black-layer:before {background-color: #000000;}
.opc1:before {opacity: .1;}
39
iframe {
border: 0;
width: 100%;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.wdth5 {width: 5%;}
.wdth10 {width: 10%;}
.wdth100 {width: 100%;}
.wow {visibility: hidden;}
.flex {
display: flex;
flex-wrap: wrap;
max-width: 100%;
flex-grow: 1;
}
/*===== Cross Browser Compatibility =====*/

i,
a,
img,
input,
button,
textarea,
:before,
:after,
label,
span,
nav > ul li,
.cus-bx,
40
.evnt-loc,
.evnt-loc > span,
.cus-bx2 > span,
.strs-nav-itm > *,
.tem-scl,
.gal-itm > a,
.cus-bx3,
.progress,
.cus-inf3,
.testi-itm,
nav > div > ul > li,
.rspns-cls,
.rspns-mnu-btn,
.rspns-lnks-lst > a span,
.rspns-mnu
{
-webkit-transition: all .4s linear;
-ms-transition: all .4s linear;
-o-transition: all .4s linear;
transition: all .4s linear;
}
.fct-bx > i,
.spnsr-chld-inf,
.srv-inf > h4 a i,
.tem-thmb > a,
.tem-thmb,
.gal-itm > h4,
.srv-bx > i,
.srv-bx > i:after,
nav > div ul li,
.cus-bx2 > img,
.strs-itm-inr > i,
.strs-itm-inr > img
{
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}
.brd-rd50,
.evnt-orgn > img,
.tp-scl > a,
.cus-bx2 > img,
.ceo-wrp span,
.ceo-wrp span img,
.gal-itm > a,
.testi-itm > img,
41
.scl-btns > a,
.blg-scl > a,
.cmt-bx > img,
.cntry-hlp-car .owl-nav > button.owl-prev,
.cntry-hlp-car .owl-nav > button.owl-next,
.ld-mr-btn,
.rspns-mnu-btn,
.wb-cls-btn
{
-webkit-border-radius: 50%;
border-radius: 50%;
}
.brd-rd40,
.pg-srch-frm,
.rply-cmt form input,
.rply-cmt form textarea
{
-webkit-border-radius: 2.5rem;
border-radius: 2.5rem;
}
.brd-rd30
{
}
.brd-rd20
{
}
.brd-rd10
{
}
.brd-rd5
{
}
.brd-rd3
{
}
.brd-rd0
{
-webkit-border-radius: 0rem;
border-radius: 0rem;
}
42
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {width: 100%;}
.zindex-1 {z-index: -1 !important;}
/*===== Social Media =====*/
.facebook,
.facebook-hvr:before,
.tem-scl > a.facebook,
.scl-btns > a.facebook,
.cnt-scl > a.facebook,
.athr-scl > a.facebook {
background-color: #516ae8;
border-color: #516ae8;
}
.twitter,
.twitter-hvr:before,
.tem-scl > a.twitter,
.scl-btns > a.twitter,
.cnt-scl > a.twitter,
.athr-scl > a.twitter {
background-color: #4fbbff;
border-color: #4fbbff;
}
.google,
.google-hvr:before,
.tem-scl > a.google,
.scl-btns > a.google,
.cnt-scl > a.google,
.athr-scl > a.google {
background-color: #df2929;
border-color: #df2929;
}
.linkedin,
.linkedin-hvr:before,
.tem-scl > a.linkedin,
.scl-btns > a.linkedin,
.cnt-scl > a.linkedin,
.athr-scl > a.linkedin {
background-color: #3c4e99;
border-color: #3c4e99;
}
.pinterest,
.pinterest-hvr:before,
.tem-scl > a.pinterest,
.scl-btns > a.pinterest,
.cnt-scl > a.pinterest,
.athr-scl > a.pinterest {
background-color: #bd081c;
border-color: #bd081c;
}
.stumbleupon,
.stumbleupon-hvr:before,
.tem-scl > a.stumbleupon,
.scl-btns > a.stumbleupon,
.cnt-scl > a.stumbleupon,
.athr-scl > a.stumbleupon {
background-color: #eb4924;
border-color: #eb4924;
43
}
.yahoo,
.yahoo-hvr:before,
.tem-scl > a.yahoo,
.scl-btns > a.yahoo,
.cnt-scl > a.yahoo,
.athr-scl > a.yahoo {
background-color: #410093;
border-color: #410093;
}
.instagram,
.instagram-hvr:before,
.tem-scl > a.instagram,
.scl-btns > a.instagram,
.cnt-scl > a.instagram,
.athr-scl > a.instagram {
background-color: #e4405f;
border-color: #e4405f;
}
.facebook:hover,
.facebook:focus,
.tem-scl > a.facebook:hover,
.tem-scl > a.facebook:focus,
.scl-btns > a.facebook:hover,
.scl-btns > a.facebook:focus,
.cnt-scl > a.facebook:hover,
.cnt-scl > a.facebook:focus,
.athr-scl > a.facebook:hover,
.athr-scl > a.facebook:focus {color: #516ae8;}
.twitter:hover,
.twitter:focus,
.tem-scl > a.twitter:hover,
.tem-scl > a.twitter:focus,
.scl-btns > a.twitter:hover,
.scl-btns > a.twitter:focus,
.cnt-scl > a.twitter:hover,
.cnt-scl > a.twitter:focus,
.athr-scl > a.twitter:hover,
.athr-scl > a.twitter:focus {color: #4fbbff;}
.google:hover,
.google:focus,
.tem-scl > a.google:hover,
.tem-scl > a.google:focus,
.scl-btns > a.google:hover,
.scl-btns > a.google:focus,
.cnt-scl > a.google:hover,
.cnt-scl > a.google:focus,
.athr-scl > a.google:hover,
.athr-scl > a.google:focus {color: #df2929;}
.linkedin:hover,
.linkedin:focus,
.tem-scl > a.linkedin:hover,
.tem-scl > a.linkedin:focus,
.scl-btns > a.linkedin:hover,
.scl-btns > a.linkedin:focus,
.cnt-scl > a.linkedin:hover,
44
.cnt-scl > a.linkedin:focus,
.athr-scl > a.linkedin:hover,
.athr-scl > a.linkedin:focus {color: #3c4e99;}
.pinterest:hover,
.pinterest:focus,
.tem-scl > a.pinterest:hover,
.tem-scl > a.pinterest:focus,
.scl-btns > a.pinterest:hover,
.scl-btns > a.pinterest:focus,
.cnt-scl > a.pinterest:hover,
.cnt-scl > a.pinterest:focus,
.athr-scl > a.pinterest:hover,
.athr-scl > a.pinterest:focus {color: #bd081c;}
.stumbleupon:hover,
.stumbleupon:focus,
.tem-scl > a.stumbleupon:hover,
.tem-scl > a.stumbleupon:focus,
.scl-btns > a.stumbleupon:hover,
.scl-btns > a.stumbleupon:focus,
.cnt-scl > a.stumbleupon:hover,
.cnt-scl > a.stumbleupon:focus,
.athr-scl > a.stumbleupon:hover,
.athr-scl > a.stumbleupon:focus {color: #eb4924;}
.yahoo:hover,
.yahoo:focus,
.tem-scl > a.yahoo:hover,
.tem-scl > a.yahoo:focus,
.scl-btns > a.yahoo:hover,
.scl-btns > a.yahoo:focus,
.cnt-scl > a.yahoo:hover,
.cnt-scl > a.yahoo:focus,
.athr-scl > a.yahoo:hover,
.athr-scl > a.yahoo:focus {color: #410093;}
.instagram:hover,
.instagram:focus,
.tem-scl > a.instagram:hover,
.tem-scl > a.instagram:focus,
.scl-btns > a.instagram:hover,
.scl-btns > a.instagram:focus,
.cnt-scl > a.instagram:hover,
.cnt-scl > a.instagram:focus,
.athr-scl > a.instagram:hover,
.athr-scl > a.instagram:focus {color: #e4405f;}
/*===== Animation Style 1 =====*/
.pls-anm {
-webkit-animation: pulse 2s infinite;
-ms-animation: pulse 2s infinite;
-o-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
70% {
45
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
}
70% {
}
100% {
}
}
@-webkit-keyframes ripple {
30% {
-webkit-box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
}
70% {
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
@keyframes ripple {
30% {
}
70% {
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
@keyframes slide-animation {
0% {
-webkit-transform: rotateX(0deg) translateY(0px);
46
-ms-transform: rotateX(0deg) translateY(0px);
-o-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px); }
50% {
100% {
}
@-webkit-keyframes slide-animation {
0% {
50% {
-webkit-transform: rotateX(0deg) translateY(-10px);
-ms-transform: rotateX(0deg) translateY(-10px);
-o-transform: rotateX(0deg) translateY(-10px);
transform: rotateX(0deg) translateY(-10px); }
100% {
transform: rotateX(0deg) translateY(0px);
}
}
/*===== Particles =====*/
.prtcl-wrp {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
/*===== Page Loader =====*/
.page-loader {
position: fixed;
width: 100%;
height: 100%;
background-color: #fff;
display: block;
z-index: 99999999;
}
.loader span {
font-family: Rubik;
position: absolute;
font-weight: normal;
top: 52%;
font-size: 45px;
47
letter-spacing: 15px;
margin-left: -100px;
left: 50%;
margin-top: 20px;
color: #212121;
}
.loader-style-1 {
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 30px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.5s 0.1s;
transition: transform 0.5s 0.1s;
perspective: 9999px;
color: #3e3e3e;
margin: -40px 0 0 -40px;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -37px;
top: 65px;
opacity: 1;
}
.loader-style-1.panelLoad {
z-index: 11;
top: 45%;
margin-top: -60px;
-webkit-animation: panel 2.2s infinite forwards;
animation: panel 2.2s infinite forwards;
}
.loader-style-1.panelLoad .cube-face {
color: black;
-webkit-box-shadow: inset 0 0 0 1px #222, 0 0 1px 1px #222;
box-shadow: inset 0 0 0 1px #222, 0 0 1px 1px #222;
}
.loader-style-1 .cube-face {
width: inherit;
height: inherit;
position: absolute;
background: white;
-webkit-box-shadow: inset 0 0 0 1px #3e3e3e, 0 0 1px 1px #3e3e3e;
box-shadow: inset 0 0 0 1px #3e3e3e, 0 0 1px 1px #3e3e3e;
opacity: 1;
font-family: Rubik;
}
.loader-style-1 .cube-face-front {
-webkit-transform: translate3d(0, 0, 40px);
transform: translate3d(0, 0, 40px);
font-size: 30px;
}
.loader-style-1 .cube-face-back {
-webkit-transform: rotateY(180deg) translate3d(0, 0, 40px);
transform: rotateY(180deg) translate3d(0, 0, 40px);
48
}
.loader-style-1 .cube-face-left {
-webkit-transform: rotateY(-90deg) translate3d(0, 0, 40px);
transform: rotateY(-90deg) translate3d(0, 0, 40px);
}
.loader-style-1 .cube-face-right {
-webkit-transform: rotateY(90deg) translate3d(0, 0, 40px);
transform: rotateY(90deg) translate3d(0, 0, 40px);
}
.loader-style-1 .cube-face-top {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 40px);
transform: rotateX(90deg) translate3d(0, 0, 40px);
}
.loader-style-1 .cube-face-bottom {
-webkit-transform: rotateX(-90deg) translate3d(0, 0, 40px);
transform: rotateX(-90deg) translate3d(0, 0, 40px);
}
@-webkit-keyframes panel {
0% {
-webkit-transform: rotateY(0deg) rotateZ(0deg);
transform: rotateY(0deg) rotateZ(0deg);
}
20% {
}
40% {
-webkit-transform: rotateX(45deg) rotateZ(45deg);
transform: rotateX(45deg) rotateZ(45deg);
}
60% {
-webkit-transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
}
80% {
}
100% {
}
}
@keyframes panel {
0% {
}
20% {
}
40% {
}
49
60% {
-webkit-transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
}
80% {
}
100% {
}
}
.loader-style-2 {
position: absolute;
left: 50%;
top: 50%;
margin: -28px 0 -25px 0;
border-bottom: 2px solid rgba(0, 0, 0, .1);
border-left: 2px solid rgba(0, 0, 0, .1);
border-right: 2px solid rgba(0, 0, 0, .1);
border-top: 3px solid #2A94F6;
border-radius: 100%;
height: 50px;
width: 50px;
-webkit-animation: spinn .6s infinite linear;
animation: spinn .6s infinite linear;
}
@-webkit-keyframes spinn {
from {
}
to {
}
}
@keyframes spinn {
from {
}
to {
}
}
/*===== Theme Style =====*/

/*===== Page Top Donate =====*/
.wb-top-donate-title {
display: inline-block;
position: relative;
padding-left: 10rem;
50
}
.wb-top-donate-title > i {
position: absolute;
left: 0;
top: 0;
line-height: initial;
}
.wb-top-donate-title > h2 {
margin-bottom: 0;
}
.wb-top-donate-title > h2 + p {margin-top: 0.6875rem;}
.wb-top-donate-title > p {
margin-bottom: 0;
font-size: 1.25rem;
line-height: 2rem;
}
.blue-layer .wb-top-donate-title > i {color: #acc6d5;}
.blue-layer .wb-top-donate-title > h2 {color: #fff;}
.blue-layer .wb-top-donate-title > p {color: #dadada;}
.wb-top-donate-list-wrap {
padding-left: 3.75rem;
width: 100%;
}
.wb-top-donate-list {
padding-left: 0;
list-style: none;
margin: 0 -0.3125rem;
display: flex;
flex-wrap: wrap;
}
.wb-top-donate-list > li {
position: relative;
cursor: pointer;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
padding: 0 0.3125rem;
color: #fff;
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 0.625rem;
}
.wb-top-donate-list > li span {
display: block;
position: relative;
padding: 0.9375rem 3.125rem 0.9375rem 1.5625rem;
}
.wb-top-donate-list > li i {
position: absolute;
top: 50%;
right: 1.6875rem;
51
width: 1.375rem;
background-color: rgba(0,0,0,.25);
border-radius: 50%;
text-align: center;
height: 1.375rem;
margin-top: -0.6875rem;
}
.wb-top-donate-list > li:hover span,
.wb-top-donate-list > li.active span {background-color: #fff;}
.wb-top-donate-list > li:hover i,
.wb-top-donate-list > li.active i {color: #fff;}
.wb-top-donate-list-wrap > ul + span {margin-top: 0.625rem;}
.wb-top-donate-list-wrap > span {
width: 100%;
border: 3px solid;
line-height: 64px;
font-size: 1.25rem;
font-weight: 700;
font-family: Rubik;
position: relative;
min-height: 4.375rem;
}
.blue-layer .wb-top-donate-list-wrap > span {color: #fff;}
.wb-top-donate-list-wrap > span i {
font-style: normal;
left: 1.75rem;
position: absolute;
}
.wb-top-donate-list-wrap > span + a {
float: right;
margin-top: 1.25rem;
}
.wb-top-donate-list-wrap > a {
border-bottom: 0.0625rem solid;
font-weight: 700;
font-family: rubik;
}
.blue-layer .wb-top-donate-list-wrap > a {color: #fff;}
.wb-top-donate-list-wrap > a i {margin-left: 0.625rem;}
.wb-top-donate-wrap {
position: relative;
width: 100%;
padding-top: 5.625rem;
padding-bottom: 2.5rem;
display: none;
}
.wb-top-donate-btn {
border: 0;
width: 100%;
text-align: center;
52
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
}
.wb-top-donate-btn:hover,
.wb-top-donate-btn:focus {background-color: #111;}
.wb-cls-btn {
position: absolute;
cursor: pointer;
color: #fff;
right: 2.8125rem;
bottom: -1.875rem;
z-index: 99;
width: 3.75rem;
text-align: center;
font-size: 1.25rem;
font-weight: 400;
}
.wb-cls-btn:hover {background-color: #111;}
/*===== Header Styles =====*/
header {
display: flex;
flex-wrap: wrap;
position: relative;
max-width: 100%;
flex-grow: 1;
width: 100%;
z-index: 99999;
}
/*=== Sticky Header ===*/
.sticky-header {
-webkit-box-shadow: 0 0 1.875rem rgba(0,0,0,.05);
-ms-box-shadow: 0 0 1.875rem rgba(0,0,0,.05);
-o-box-shadow: 0 0 1.875rem rgba(0,0,0,.05);
box-shadow: 0 0 1.875rem rgba(0,0,0,.05);
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 99999;
opacity: 0;
visibility: hidden;
}
.sticky-header nav > div > ul > li {
color: #333;
}
.sticky-header .logo > a {padding: 0.875rem 0;}
.sticky-header.sticky {
opacity: 1;
visibility: visible;
}
/*=== Header Style 1 ===*/
53
header.style1 {
position: absolute;
left: 0;
right: 0;
top: 0;
}
.wb-lgmnu-wrp {width: 100%;}
.logo,
.logo > a,
nav {display: inline-block;}
nav > div {
width: 100%;
}
nav > div ul {
padding-left: 0;
list-style: none;
margin-bottom: 0;
width: 100%;
}
header.style1 nav > div > ul {
display: -ms-flex;
display: flex;
}
nav > div ul li {
width: 100%;
position: relative;
}
nav > div > ul > li a {
position: relative;
display: block;
}
nav > div > ul > li > a:before {
content: "";
position: absolute;
right: -0.15625rem;
height: 0.0625rem;
width: 0;
-webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
-ms-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
top: 50%;
margin-top: -.0.03125rem;
}
nav > div > ul > li > a:hover:before {
width: calc(100% + 0.15625rem);
left: -0.15625rem;
right: auto;
}
nav > div > ul > li {
width: auto;
color: #fff;
54
font-family: Rubik;
font-weight: 500;
}
nav > div > ul > li + li {margin-left: 3.4375rem;}
/*=== Dropdown ===*/
nav > div ul ul {
position: absolute;
left: 0;
top: 100%;
min-width: 15rem;
opacity: 0;
visibility: hidden;
}
nav > div ul ul ul {
top: 0;
left: 100%;
}
nav > div ul ul ul:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 20%;
width: 0.375rem;
z-index: 1;
}
nav > div ul ul li {
font-family: Rubik;
font-weight: 400;
margin-top: 20px;
opacity: 0;
visibility: hidden;
}
nav > div ul ul li a {
display: block;
padding: 0.625rem 1.875rem;
position: relative;
}
nav > div ul ul li a:before {
content: "\f0da";
font-family: fontawesome;
background-color: transparent;
right: auto;
left: 1.25rem;
top: 0.5rem;
position: absolute;
opacity: 0;
}
55
nav > div ul ul li a:hover,
nav > div ul ul li a:focus {
background-color: #f7f7f7;
}
nav > div ul ul li a:hover:before,
nav > div ul ul li a:focus:before {
left: 2.1875rem;
opacity: 1;
}
nav > div ul ul li + li {border-top: 0.0625rem solid #ededed;}
nav > div ul li.menu-item-has-children:hover > ul > li {
margin-top: 0;
opacity: 1;
}
nav > div ul ul ul li {margin: 0 0 0 10px;}
nav > div ul ul li.menu-item-has-children:hover > ul > li {margin-left: 0;}
nav > div ul li.menu-item-has-children:hover > ul {
opacity: 1;
}
nav > div ul li.menu-item-has-children:hover > ul:before {bottom: 0;}
/*=== Header Style 1 Version 2 ===*/
header.style1.v2 nav > div > ul {
width: auto;
float: left;
}
header.style1.v2 nav > div > ul + a {margin-left: 4.375rem;}
header.style1.v2 nav > div > a {
}
header.style1.v2 nav > div > ul > li + li {margin-left: 2.8125rem;}
header.style2 {background-color: #000;}
.tpbr {padding: 0.625rem 0;}
.tpbr-inr {width: 100%;}
.tpbr-inr p {
margin-bottom: 0;
color: #c2c2c2;
}
.tpbr-inr p i {margin-right: 0.625rem;}
.tpbr-inr p strong {color: #fff;}
.tp-lnks {
padding-left: 0;
list-style: none;
margin-bottom: 0;
text-align: initial;
}
.tp-lnks > li {
position: relative;
56
color: #d7d7d7;
}
.tp-lnks > li i {
position: absolute;
left: 0;
top: 0;
line-height: inherit;
}
.tp-scl {display: inline-block;}
.tp-scl > a {
position: relative;
width: 2.5rem;
text-align: center;
height: 2.5rem;
color: #fff;
z-index: 1;
}
.tp-scl > a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
-webkit-border-radius: inherit;
border-radius: inherit;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
opacity: 0;
}
.tp-scl > a:hover:before,
.tp-scl > a:focus:before {
opacity: 1;
-ms-transform: scale(1);
-o-transform: scale(1);
}
.tp-lnks > li + li {margin-left: 1.875rem;}
.tp-lnks + .tp-scl {margin-left: 2.5rem;}
.wb-lgmnu-wrp .lgmnu-inr {
position: relative;
}
.wb-lgmnu-wrp .lgmnu-inr:before {
left: -100%;
57
right: 0;
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}
width: auto;
}
header.style2 nav > div > ul > li {
line-height: 6rem;
color: #333;
}
header.style2 .thm-btn {
border-radius: 0;
height: 100%;
padding: 0 2.5rem;
}
header.style2 nav > div > ul + a {margin-left: 4.375rem;}
header.style2 nav > div > ul > li + li {margin-left: 3.125rem;}
header.style2 .wb-lgmnu-wrp {margin-bottom: -3.125rem;}
header.style4.stick {
position: absolute;
left: 0;
right: 0;
top: 0;
}
header.style4 nav > div > ul > li {
color: #333;
opacity: 0;
}
.mnu-btn {
text-align: right;
max-width: 1.25rem;
height: 1.25rem;
cursor: pointer;
}
.mnu-btn > i {
float: left;
width: 1.25rem;
height: 0.25rem;
}
.mnu-btn > i:nth-child(2) {
width: 0.875rem;
float: right;
margin: 0.125rem 0;
58
}
.mnu-btn + a {
margin-left: 1.5625rem;
}
width: auto;
}
header.style4 .tp-scl > a {
background-color: #fafafa;
color: #333;
}
header.style4 .tp-scl > a:hover,
header.style4 .tp-scl > a:focus {color: #fff;}
.logo + .tp-scl {
margin-left: 3.4375rem;
}
header.style4 .tp-scl + nav {
width: calc(100% - 25rem);
}
header.style4 nav > div > ul > li + li {margin-left: 1.875rem;}
header.style4 nav > div > ul + .mnu-btn {margin-left: 1.65rem;}
header.style4 nav > div > ul.active > li {opacity: 1;}
.mnu-btn:hover > i:nth-child(2) {width: 1.25rem;}
/*=== Header Style 1 Version 3 ===*/
header.style1.v3 {padding-top: 1.875rem;}
/*===== Responsive Header =====*/
.rspns-hdr {
display: none;
width: 100%;
}
.rspns-hdr > div {
position: relative;
display: -ms-flex;
display: flex;
flex-wrap: wrap;
max-width: 100%;
width: 100%;
}
.rspns-lg-mnu-br .logo > a {padding: 1.25rem 0;}
.rspns-mnu-btn {
position: absolute;
right: 1.875rem;
top: 50%;
height: 2.5rem;
text-align: center;
width: 2.5rem;
background-color: #ececec;
cursor: pointer;
font-size: 1.2rem;
59
color: #333;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.rspns-mnu-btn:hover {color: #fff;}
.rspns-mnu {
position: fixed;
top: 0;
right: -20rem;
bottom: 0;
max-width: 20rem;
width: 100%;
z-index: 9999;
opacity: 0;
visibility: hidden;
}
.rspns-cls-btn {
position: absolute;
top: 0;
right: 0;
height: 2.8125rem;
width: 2.8125rem;
text-align: center;
color: #fff;
font-size: 1rem;
cursor: pointer;
}
.rspns-cls-btn:hover {background-color: #fff;}
.rspns-mnu ul {
padding: 0;
list-style: none;
margin-bottom: 0;
width: 100%;
}
.rspns-mnu ul li {
width: 100%;
color: #a0a0a0;
font-weight: 400;
position: relative;
}
.rspns-mnu > ul > li {
font-weight: 500;
color: #fff;
}
.rspns-mnu > ul > li + li {margin-top: 0.125rem;}
.rspns-mnu ul li a {display: block;}
.rspns-mnu > ul > li > a {padding: 0.78125rem 1.25rem 0.78125rem 3.4375rem;}
.rspns-mnu ul ul {
60
padding: 0 1.25rem 0 3.4375rem;
display: none;
}
.rspns-mnu ul ul ul {padding-left: 1rem;}
.rspns-mnu > ul > li.menu-item-has-children.active > a {padding-top: 1.09375rem;}
.rspns-mnu > ul > li.menu-item-has-children.active {padding-bottom: 0.9375rem;}
.rspns-mnu > ul > li > a:before {
content: "\f0da";
font-family: fontawesome;
position: absolute;
left: 2.375rem;
top: 0.8125rem;
line-height: inherit;
font-size: 0.75rem;
}
.rspns-mnu > ul > li.active > a::before {top: 1.0625rem;}
.rspns-mnu.slidein {
right: 0;
opacity: 1;
}
.rspns-lnks-lst {
-ms-flex: 0 0 70%;
flex: 0 0 70%;
max-width: 70%;
}
.rspns-lnks-lst > a {
color: #a4a4a4;
text-align: center;
position: relative;
width: 100%;
display: block;
max-width: 33.334%;
float: left;
}
.rspns-lnks-lst > a:nth-child(2n) {background-color: #0f0f0f;}
.rspns-lnks-lst > a:before {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
height: 0.375rem;
opacity: 0;
}
.rspns-lnks-lst > a:hover:before,
.rspns-lnks-lst > a:focus:before {
opacity: 1;
left: 0;
right: 0;
}
.rspns-lnks-lst > a span {
61
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
color: #fff;
padding: 0.625rem;
opacity: 0;
visibility: hidden;
z-index: 1;
}
.rspns-lnks-lst > a span:before {
content: "";
position: absolute;
left: 50%;
border-left: 0.4375rem solid transparent;
border-right: 0.4375rem solid transparent;
border-bottom: 0.4375rem solid #000;
top: -0.4375rem;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.rspns-lnks-lst > a:hover span {
opacity: 1;
}
.rspns-lnks-br > a {
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
-ms-flex: 0 0 30%;
flex: 0 0 30%;
text-align: center;
max-width: 30%;
width: 100%;
}
.rspns-hdr > div.rspns-lg-mnu-br {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
/*===== About Style 1 =====*/
62
.abt-wrp {
width: 100%;
}
.abt-desc {
max-width: 85%;
}
.abt-desc > span {
font-size: 1rem;
font-family: Rubik;
font-weight: 500;
text-transform: uppercase;
border-bottom: 0.0625rem solid;
letter-spacing: 0.080rem;
}
.abt-desc > span + h2 {margin-top: 1.125rem;}
.abt-desc > h2 {
margin-bottom: 0;
font-weight: 400;
}
.abt-desc > h2 + p {margin-top: 1.875rem;}
.abt-desc > p {margin-bottom: 0;}
.abt-desc > p + a {margin-top: 3.75rem;}
.abt-imgs-wrp {
width: 100%;
}
.remove-ext1 .abt-img {margin-bottom: 1.25rem;}
.abt-img {
width: 100%;
position: relative;
overflow: hidden;
}
.abt-img > a,
.cus-bx3 .cus-thmb > a,
.evnt-thmb > a,
.blg-thmb > a,
.srv-thmb > a,
.mini-pst-thmb > a {
display: block;
position: relative;
overflow: hidden;
}
.abt-img > a:before,
.cus-bx3 .cus-thmb > a:before,
.evnt-thmb > a:before,
.blg-thmb > a:before,
.srv-thmb > a:before,
63
.mini-pst-thmb > a:before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: "";
width: 50%;
height: 100%;
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background-image: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background-image: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.abt-img > a:hover:before,
.cus-bx3:hover .cus-thmb > a:before,
.evnt-bx:hover .evnt-thmb > a:before,
.blg-bx:hover .blg-thmb > a:before,
.blg-bx2:hover .blg-thmb > a:before,
.srv-bx2:hover .srv-thmb > a:before,
.mini-pst:hover .mini-pst-thmb > a:before {
-webkit-animation: shine .75s;
-ms-animation: shine .75s;
-o-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {left: 125%;}
}
@keyframes shine {
100% {left: 125%;}
}
.abt-img > a img,
.cus-thmb > a img,
.evnt-thmb > a img,
.blg-thmb > a img,
.srv-thmb > a img {width: 100%;}
.abt-img > a:hover img,
.cus-bx:hover .cus-thmb > a img,
.cus-bx3:hover .cus-thmb > a img,
.evnt-bx:hover .evnt-thmb > a img,
.blg-bx:hover .blg-thmb > a img,
.mini-pst:hover .mini-pst-thmb > a img {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
-o-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
.abt-imgs-wrp > div > div:last-child {padding-top: 5rem;}
/*===== Theme Button =====*/
.thm-btn {
position: relative;
64
font-weight: 700;
font-family: Rubik;
color: #fff;
overflow: hidden;
z-index: 1;
}
.thm-btn i,
.thm-btn2 i {
margin-right: 0.625rem;
}
.thm-btn span,
.nwsltr-frm > button span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
opacity: .15;
-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
.thm-btn:hover span,
.thm-btn:focus span,
.nwsltr-frm > button:hover span,
.nwsltr-frm > button:focus span {
width: 35.15625rem;
height: 35.15625rem;
}
/*.thm-btn:before {
content: "";
opacity: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-webkit-border-radius: inherit;
width: 10%;
z-index: -1;
}
.thm-btn:hover:before,
65
.thm-btn:focus:before {
width: 100%;
right: auto;
left: 0;
opacity: .15;
}*/
.thm-btn:hover,
.thm-btn:focus {color: #fff;}
/*===== Facts Style 1 =====*/
.fct-wrp {width: 100%;}
.remove-ext3 .fct-bx {margin-bottom: 1.875rem;}
.fct-bx {
position: relative;
}
.fct-wrp > .row > div + div .fct-bx:before {
content: "";
position: absolute;
left: -0.9375rem;
top: 0;
bottom: 0;
width: 0.0625rem;
border-left: 0.0625rem dashed #d9d9d9;
}
.fct-bx > i {
color: #333;
}
.fct-bx:hover > i {
-webkit-transform: translateY(-10px) rotateY(180deg);
-ms-transform: translateY(-10px) rotateY(180deg);
-o-transform: translateY(-10px) rotateY(180deg);
transform: translateY(-10px) rotateY(180deg);
}
.fct-bx > i + h6 {margin-top: 2.1875rem;}
.fct-bx > h6 {
margin-bottom: 0;
}
.fct-bx > h6 + span {margin-top: 0.625rem;}
.fct-bx > span {
font-family: Rubik;
color: #666;
}
.clr2 {color: #c48016;}
.clr3 {color: #166cc4;}
/*===== Sec Title Style 1 =====*/
.sec-ttl {
width: 100%;
margin-bottom: 3.125rem;
}
66
.sec-ttl-inr {
position: relative;
padding-bottom: 2.8125rem;
}
.sec-ttl-inr > h2 {
margin-bottom: 0;
}
.sec-ttl-inr > h2 + span {margin-top: 0.5625rem;}
.sec-ttl-inr > span {
color: #666;
}
.sec-ttl-inr::before,
.sec-ttl-inr::after {
content: "";
height: 0.0625rem;
width: 2.125rem;
position: absolute;
bottom: 0.3125rem;
}
.sec-ttl-inr:after {
right: 50%;
margin-right: -3.4375rem;
}
.sec-ttl-inr::before {
left: 50%;
margin-left: -3.4375rem;
}
.sec-ttl-inr > i {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -0.3125rem;
}
/*===== Sec Title Style 1 Ver 2 =====*/
.sec-ttl.v2 .sec-ttl-inr {
padding-bottom: 0;
max-width: 60%;
}
.sec-ttl.v2 .sec-ttl-inr:before,
.sec-ttl.v2 .sec-ttl-inr:after {display: none;}
.sec-ttl.v2 .sec-ttl-inr > span {font-size: 1.125rem;}
/*===== Cause Style 1 =====*/
.cus-wrp {width: 100%;}
.remove-ext5 .cus-bx {margin-bottom: 2.5rem;}
.cus-bx {
width: 100%;
position: relative;
67
background-color: #fafafa;
}
.gray-layer .cus-bx {background-color: #fff;}
.cus-bx .cus-thmb:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 80%;
opacity: 0;
}
.cus-bx:hover .cus-thmb::before {
opacity: .5;
bottom: 0;
}
.cus-bx:hover .cus-thmb .cus-cat {
opacity: 0;
left: 0;
bottom: 0;
}
.cus-bx .cus-thmb > a {
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-width: 11.875rem;
opacity: 0;
}
.cus-bx:hover .cus-thmb > a {
top: 50%;
opacity: 1;
}
.cus-thmb {
position: relative;
width: 100%;
overflow: hidden;
}
.cus-cat {
position: absolute;
bottom: 2.5rem;
left: 2.5rem;
font-weight: 500;
font-family: Rubik;
}
.cus-cat > a {
color: #fff;
position: relative;
padding: .453rem 1.25rem;
}
68
.bg-clr1 {background-color: #f62643;}
.bg-clr2 {background-color: #8348ad;}
.bg-clr3 {background-color: #0071ce;}
.cus-cat > a:before {
content: "";
border-left: 0.6875rem solid #000;
border-bottom: 0.6875rem solid transparent;
position: absolute;
bottom: -0.6875rem;
left: 1.125rem;
}
.cus-cat > a.bg-clr1::before {border-left-color: #f62643;}
.cus-cat > a.bg-clr2::before {border-left-color: #8348ad;}
.cus-cat > a.bg-clr3::before {border-left-color: #0071ce;}
.cus-inf {
width: 100%;
}
.cus-mta {
padding-left: 0;
list-style: none;
margin-bottom: 0;
}
.cus-mta > li {
color: #999;
}
.cus-mta > li + li {margin-left: 1.25rem;}
.cus-mta > li i {margin-right: 0.4375rem;}
.cus-mta + h4 {margin-top: 0.625rem;}
.cus-inf > h4 {
font-weight: 500;
margin-bottom: 0;
}
.cus-inf > h4 + .progress {margin-top: 1.875rem;}
.cus-inf .progress,
.cus-inf3 .progress,
.cus-dtl-inf .progress {
-webkit-border-radius: 0;
border-radius: 0;
height: 1.25rem;
overflow: initial;
}
.gray-layer .cus-inf .progress,
.gray-layer .cus-inf3 .progress,
.cus-dtl-inf .progress {background-color: #fafafa;}
.cus-inf .progress .progress-bar,
.cus-inf3 .progress .progress-bar,
.cus-dtl-inf .progress .progress-bar {
position: relative;
height: inherit;
69
}
.cus-inf .progress .progress-bar > span,
.cus-inf3 .progress .progress-bar > span,
.cus-dtl-inf .progress .progress-bar > span {
height: 2.8125rem;
width: 2.8125rem;
position: absolute;
right: -1.40625rem;
font-family: Rubik;
font-weight: 500;
border: 0.0625rem solid #fbfbfb;
border-radius: 50%;
-webkit-box-shadow: 0 0.3125rem 1.25rem rgba(0,0,0,.5);
-ms-box-shadow: 0 0.3125rem 1.25rem rgba(0,0,0,.5);
-o-box-shadow: 0 0.3125rem 1.25rem rgba(0,0,0,.5);
box-shadow: 0 0.3125rem 1.25rem rgba(0,0,0,.5);
top: -0.78125rem;
}
.cus-inf .progress + span,
.cus-dtl-inf .progress + span {margin-top: 1.5625rem;}
.cus-amt {
font-size: 1rem;
font-family: Rubik;
color: #666;
}
.cus-amt i {
font-style: normal;
font-weight: 700;
}
.cus-bx:hover {
}
.vw-mr {
width: 100%;
}
/*===== Donate Sec =====*/
.dnt-sec {width: 100%;}
.dnt-sec h3 {
margin-bottom: 0;
font-weight: 500;
max-width: 90%;
}
.black-layer .dnt-sec h3 {color: #fff;}
.dnt-sec > .row > div:last-child {text-align: right;}
70
.dnt-sec .thm-btn {
padding: 1.109rem 3rem;
}
/*===== Event Wrap Style 1 =====*/
.evnt-wrp {
width: 100%;
}
.remove-ext8 .evnt-bx {margin-bottom: 3.4375rem;}
.evnt-bx {
display: -ms-flex;
display: flex;
align-items: center;
}
.evnt-thmb {
max-width: 35.625rem;
position: relative;
}
.evnt-thmb + .evnt-inf {padding: 0 5rem 0 5.625rem;}
.evnt-inf {
width: 100%;
}
.evnt-inf-tp {width: 100%;}
.evnt-inf-tp > span {
font-size: 1.5rem;
font-weight: 500;
font-family: Rubik;
}
.evnt-orgn {
}
.evnt-inf-tp > span + .evnt-orgn {padding-left: 2.5rem;}
.evnt-orgn > img {
border: 0.3125rem solid #fff;
}
.evnt-orgn > img + .evnt-orgn-inf {padding-left: 0.625rem;}
.evnt-orgn-inf {
}
.evnt-orgn-inf > h6 {
font-size: 1rem;
font-weight: 700;
71
color: #1b1b1b;
font-family: Arimo;
margin-bottom: 0;
}
.evnt-orgn-inf > span {
color: #b5b5b5;
display: block;
}
.evnt-inf-tp + h4 {margin-top: 1.25rem;}
.evnt-inf > h4 {
margin-bottom: 0;
}
.evnt-inf > h4 + p {margin-top: 1rem;}
.evnt-inf > p {
margin-bottom: 0;
}
.evnt-inf > p + .evnt-inf-btm {margin-top: 2.5rem;}
.evnt-inf-btm {width: 100%;}
.thm-btn2 {
position: relative;
border: 0.125rem solid;
color: #333;
font-weight: 700;
font-family: Rubik;
z-index: 1;
}
.thm-btn2:before {
position: absolute;
left: 0;
right: -0.0625rem;
top: 0;
bottom: 0;
content: "";
z-index: -1;
opacity: 0;
}
.thm-btn2:hover:before,
.thm-btn2:focus:before {
opacity: 1;
72
}
.thm-btn2:hover,
.thm-btn2:focus {color: #fff;}
.evnt-inf-btm > a + .evnt-loc {margin-left: 0.3125rem;}
.evnt-loc {
position: relative;
color: #999;
width: 3.25rem;
background-color: #fbfbfb;
text-align: center;
cursor: pointer;
z-index: 2;
}
.evnt-loc:hover {color: #fff;}
.evnt-loc > span {
position: absolute;
background-color: #2a255e;
color: #fff;
top: calc(100% + 0.9375rem);
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .25s linear;
-ms-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.evnt-loc > span:before {
content: "";
position: absolute;
border-left: 0.625rem solid #2a255e;
border-top: 0.625rem solid transparent;
top: -0.625rem;
left: 1.25rem;
}
.evnt-loc:hover > span {
opacity: 1;
73
}
.evnt-bx.rev .evnt-thmb {order: 1;}
.evnt-bx.rev .evnt-thmb + .evnt-inf {padding: 0 7.5rem 0 0;}
/*===== Sell Tickets =====*/
.sel-tckt-wrp {
position: relative;
width: 100%;
padding: 3.125rem 5rem;
}
.sel-tckt-inr {
width: 100%;
}
.sel-tckt-inr > h2 {
margin-bottom: 0;
}
.sel-tckt-inr > h2 + p {margin-top: 0.5rem;}
.sel-tckt-inr > p {
margin-bottom: 0;
font-size: 1rem;
}
.sel-tckt-inr > p + .sel-tckt-frm {margin-top: 1.875rem;}
.sel-tckt-frm {width: 100%;}
.thm-layer .sel-tckt-inr > h2,
.thm-layer .sel-tckt-inr > p {color: #fff;}
.sel-tckt-inr > p a {
font-weight: 700;
text-decoration: underline;
}
.sel-tckt-inr > p a:hover,
.sel-tckt-inr > p a:focus {color: #333;}
.sel-tckt-frm input:not([type="submit"]) {
width: 100%;
color: #999;
height: 3.75rem;
padding: 1rem 2.0625rem;
}
.sel-tckt-frm button {
width: 100%;
}
.thm-layer .thm-btn,
.thm-bg .thm-btn {background-color: #000;}
.thm-layer .thm-btn span,
.thm-bg .thm-btn span {background-color: #fff;}
/*===== Recent News Style 1 =====*/
.blg-wrp {
width: 100%;
}
74
.remove-ext9 .blg-bx {margin-bottom: 3.75rem;}
.blg-bx {
width: 100%;
position: relative;
}
.blg-thmb {
width: 100%;
overflow: hidden;
}
.blg-wrp .row > div:nth-child(2n+1) .blg-bx {padding-left: 5.625rem;}
.blg-wrp .row > div:nth-child(3n+1) .blg-bx,
.blg-wrp .row > div:first-child .blg-bx {padding: 0 1.875rem 0 3.75rem;}
.blg-wrp .row > div:nth-child(2n) .blg-bx {padding: 0 0.9375rem 0 4.6875rem;}
.blg-dat {
position: absolute;
top: 2.5rem;
left: 0;
color: #fff;
background-color: #2a255e;
padding: .4081rem 1.0625rem;
}
.blg-dat:before {
border-top: 0.3125rem solid transparent;
border-bottom: 0.3125rem solid transparent;
border-left: 0.5rem solid #2a255e;
position: absolute;
content: "";
right: -0.4375rem;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.blg-dat > a:hover,
.blg-dat > a:focus {color: #fff;}
.blg-wrp .row > div:nth-child(2n) .blg-bx .blg-dat {left: 0.9375rem;}
.blg-wrp .row > div:nth-child(2n+1) .blg-bx .blg-dat {left: 1.875rem;}
.blg-wrp .row > div:first-child .blg-bx .blg-dat {left: 0;}
.blg-thmb + .blg-inf {margin-top: 0.9375rem;}
.blg-inf {width: 100%;}
.blg-inf > h4 {
font-weight: 500;
line-height: 2rem;
margin-bottom: 0;
}
.blg-inf > h4 + ul {margin-top: 0.5rem;}
.pst-mta {
padding-left: 0;
list-style: none;
margin-bottom: 0;
75
position: relative;
}
.pst-mta > li {
}
.pst-mta > li i {margin-right: 0.625rem;}
.pst-mta > li + li {margin-left: 0.875rem;}
/*===== Become A Volunteer & Adopt A Child Style =====*/
.bcm-adpt-wrp {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.bcm-adpt-inr-wrp {
position: relative;
background-size: cover;
background-position: center;
padding: 6.25rem 6.25rem 5rem;
z-index: 1;
}
.bcm-adpt-inr-wrp:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: .3;
z-index: -1;
}
.bcm-vlntr-wrp {background-color: #a8002b;}
.adpt-chld-wrp {background-color: #5e08ae;}
.bcm-adpt-inr {max-width: 50%;}
.bcm-adpt-inr > h2 {
margin-bottom: 0;
color: #fff;
}
.bcm-adpt-inr > h2 + p {margin-top: 1.375rem;}
.bcm-adpt-inr > p {
margin-bottom: 0;
color: #fff;
}
.bcm-adpt-inr > p + a {margin-top: 1.25rem;}
.bcm-adpt-inr > a {
font-size: 1rem;
font-family: Rubik;
font-weight: 700;
color: #fff;
text-decoration: underline;
}
76
/*===== Where We Help Wrap =====*/
.we-hlp-wrp,
.we-hlp-titl {width: 100%;}
.we-hlp-titl > h2 {
margin-bottom: 0;
}
.we-hlp-titl > h2 + p {margin-top: 1.25rem;}
.we-hlp-titl > p {
margin-bottom: 0;
}
.cntry-hlp-wrp {
width: 100%;
}
.cntry-hlp-car {
width: 100%;
margin: -1.875rem 0;
}
.cntry-hlp-bx {
width: 100%;
margin: 1.875rem 0;
padding: 2.1875rem;
}
.cntry-hlp-tp {
display: -ms-flex;
display: flex;
flex-wrap: wrap;
max-width: 100%;
align-items: center;
justify-content: space-between;
}
.cntry-hlp-tp > h6 {
margin-bottom: 0;
font-size: 1.25rem;
}
.cntry-hlp-tp > h6 + img {margin-left: 1.25rem;}
.cntry-hlp-bx > img {max-width: 45px;}
.cntry-hlp-tp > img {
border: 0.0625rem solid #fff;
}
.cntry-hlp-tp + .cntry-hlp-md {margin-top: 1.5625rem;}
.cntry-hlp-md {width: 100%;}
77
.cntry-hlp-md > span {
width: 100%;
font-family: Rubik;
color: #3f3f3f;
font-size: 1rem;
}
PHP
Code for dconnection
<?php
$con=mysqli_connect("localhost", "root", "", "detsdb");
if(mysqli_connect_errno()){
echo "Connection Fail".mysqli_connect_error();
}
Code for Footer:

?>
<div class="col-sm-12">
<p class="back-link">Daily Expense Tracker <a
href="https://phpgurukul.com">phpgurukul</a></p>
</div>
Code for Header:

<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
?>
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#sidebar-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
<a class="navbar-brand" href="dashboard.php"><span>Daily Expense Tracker</span></a>
</div>
</div>
</nav>
Code for Sidebar:

<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');?>
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<div class="profile-sidebar">
<div class="profile-userpic">
<img src="http://placehold.it/50/30a5ff/fff" class="img-responsive" alt="">
78
</div>
<div class="profile-usertitle">
<?php
$uid=$_SESSION['detsuid'];
$ret=mysqli_query($con,"select FullName from tbluser where ID='$uid'");
$row=mysqli_fetch_array($ret);
$name=$row['FullName'];
?>
<div class="profile-usertitle-name"><?php echo $name; ?></div>
<div class="profile-usertitle-status"><span class="indicator label-success"></span>Online</div>
</div>
<div class="clear"></div>
</div>
<div class="divider"></div>
<ul class="nav menu">
<li class="active"><a href="dashboard.php"><em class="fa fa-dashboard"> </em>
Dashboard</a></li>
<li class="parent "><a data-toggle="collapse" href="#sub-item-1">
<em class="fa fa-navicon"> </em>Expenses <span data-toggle="collapse" href="#sub-
item-1" class="icon pull-right"><em class="fa fa-plus"></em></span>
</a>
<ul class="children collapse" id="sub-item-1">
<li><a class="" href="add-expense.php">
<span class="fa fa-arrow-right"> </span> Add Expenses
</a></li>
<li><a class="" href="manage-expense.php">
<span class="fa fa-arrow-right"> </span> Manage Expenses
</a></li>
</ul>
</li>
<li class="parent "><a data-toggle="collapse" href="#sub-item-2">
<em class="fa fa-navicon"> </em>Expense Report <span data-toggle="collapse"
href="#sub-item-1" class="icon pull-right"><em class="fa fa-plus"></em></span>
</a>
<ul class="children collapse" id="sub-item-2">
<li><a class="" href="expense-datewise-reports.php">
<span class="fa fa-arrow-right"> </span> Daywise Expenses
</a></li>
<li><a class="" href="expense-monthwise-reports.php">
<span class="fa fa-arrow-right"> </span> Monthwise Expenses
</a></li>
<li><a class="" href="expense-yearwise-reports.php">
<span class="fa fa-arrow-right"> </span> Yearwise Expenses
</a></li>
</ul>
</li>
<li><a href="user-profile.php"><em class="fa fa-user"> </em> Profile</a></li>
<li><a href="change-password.php"><em class="fa fa-clone"> </em>
</ul>
</div>
79
CHAPTER 6
CONCLUSION
The purpose of this project was to design and develop a website for the Atchayam Trust, a non-
governmental organization that works towards the rehabilitation of beggars, homeless, and destitute people
in Tamil Nadu. The website aims to provide a platform for the Trust to showcase its activities,
achievements, and impact, as well as to raise awareness and funds for its cause. The project also evaluates
the usability, functionality, and performance of the website, and discusses the challenges and limitations
faced during the development process. The website has the following features and benefits:
• It provides information about the vision, mission, objectives, and values of the Atchayam Trust,
and the problem of begging and homelessness in Tamil Nadu.
• It displays the success stories and testimonials of the people who have been rescued, rehabilitated,
and reintegrated by the Trust, and the volunteers who have supported the Trust’s work.
• It allows the visitors to make donations, register as volunteers, or contact the Trust through online
forms, email, phone, or social media.
• It updates the visitors with the latest news, events, and activities of the Trust, and the progress and
impact of its projects.
80
CHAPTER 7
REFERENCES
1. https://www.sourcecodester.com/tags/expense-tracker-
2. https://phpgurukul.com/daily-expense-tracker-using-php-and-
mysql/https://www.tutorialspoint.com/css/index.html
3. https://github.com/topics/expense-tracker?l=html&o=desc&s=
4. https://www.academia.edu/82849383/Daily_Expense_Tracker?f
_ri=483
81
MINIPROJECT LINKS:
DRIVE LINK:
https://drive.google.com/drive/folders/1RphjksbQ1yLJ2SpL2Sc4e6voJtrUDSff?usp=drive_link
82

Harry Web Tech

Uploaded by

Copyright:

Available Formats

Harry Web Tech

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Harry Web Tech

Uploaded by

Copyright:

Available Formats

ATCHAYAM TRUST WEB CREATION

A MINI PROJECT REPORT

50 CS 504 - WEB TECHNOLOGY

COMPUTER SCIENCE AND ENGINEERING

K S RANGASAMY COLLEGE OF TECHNOLOGY

TIRUCHENGODE - 637 215

CREATION CRAFTING IMPACT” is the bonafide work of Hariharan T (73772114140)

who carried out the project under my supervision.

Dr.S.Madhavi M.E., Ph.D., Ms. R.Kabila B.E.,M.E.,

Chapter No Content Page No

Cascading Style Sheets and scripting languages such as JavaScript.

Figure 4.1 Desktop view of the Home page in the website

<link rel="stylesheet" href="assets/css/icons.min.css">

<header class="style2 stick flex">

<img src="assets/images/resources/slide2.jpg" alt="slide2.jpg" data-bgposition="center

/*===== General Styling =====*/

/*===== Cross Browser Compatibility =====*/

/*===== Theme Style =====*/

Code for Footer:

Code for Header:

Code for Sidebar:

You might also like

/===== General Styling =====/

/===== Cross Browser Compatibility =====/

/===== Theme Style =====/