Team Full Project | jagserve team | Full Project Code | Team Full Project

style.css

*{padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Alata', sans-serif;
}
.navbar{min-height:60px;background-color:#000080;}
.navbar-brand{color: #fff;outline: none;}
.navbar-brand:hover{color:#fff;}
.navbar-collapse .navbar-nav li{margin:0, 10px 0 8px;}
.navbar-collapse .navbar-nav .nav-item a{margin:0 15px; color:#fff;position: relative; outline: none;}
.navbar-collapse .navbar-nav .nav-item a:before{
content: '';
position: absolute;
top:40%;
left:0;
width:0px;
height: 30px;
border-bottom:2px solid #ffffff;
transition: all 0.4s linear;
}
.navbar-collapse .navbar-nav .nav-item a:hover:before{
width:100%;
}
.navbar .navbar-toggler-icon{color: #fff;}
.navbar-toggler-icon{
color: #fff!important; outline:none;
}
.navbar-toggler-icon:hover{
color:#d10a35;
}
.my-btn{background-color: #d10a35;
color:#fff;
}
.my-btn:hover{background-color: #ff832b;
color: #fff;
transform: rotate(20deg);
/* transform: skewY(20deg);*
/*transform: scaleX(1.5);*/
}
.carousel{margin-top: 5%;}
.slider-1{background-color:rgba(6,35,65,.4);}
/*.slider-1{background-color:rgba(0,0,128,.4);}*/
.slider-2{background-color:rgba(40,41,35,.4);}
.slider-3{background-color:rgba(2,55,95,.4);}
.carousel-item{width: 100%;min-height:89.5vh;}
.slide-1-text{width: 100%;}
.slide-1-text{
text-align: center;
justify-content: center;
align-items: center;text-shadow: 2px 1px 2px black;
color: #fff;margin-top:12%;

}
.slide_image img{
margin:3% 8% 2% -2%; align-items: center;justify-content: center;text-align: center;
/* filter: drop-shadow(0 0 128.75rem crimson); */
filter: drop-shadow(0 -5mm 3mm rgb(0, 0, 28));
}
.deepak-slider-iamge-3{
margin-top:20px!important;
}
.img-fluid{
display: flex;align-items: center;
justify-content: center;
}
.slide-1-text .btn a{
padding: 12px;
border-radius: 4px;
outline: none;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
text-decoration: none;
letter-spacing: 2px;
}
.slide-1-text .btn-1{background-color: #d10a35;
color: #fff;
}
.slide-1-text .btn-2{background-color: #000080;
color: #fff;
}
.slide-1-text .btn-1:hover{
background-color: #000080;
color: #fff;
transition: all ease 2s;
transform: rotate(20deg);
}
.slide-1-text .btn-2:hover{
background-color: #d10a35;
color: #fff;
transition: all ease 2s;
}
/************************Start section our knoeledge******************************8*/
.Knowledge .know{
padding:5% 0%;
}
.Knowledge .know .learn h2{
font-size:35px;font-weight: 500;
}
.know h2:after{
content: '';
background-color: #e1e1e1;
height: 2px;
width: 150px;
margin: 5px auto 0;
clear: both;
display: block;
}
.Knowledge .know p{
padding:4px;
}
.learn{
min-height: 300px;
padding:2% 0%;border-radius: 3px;transition: 0.3s;
position:relative;
}
.learn .know-icon .fa{
width:65px;height:65px;
background: linear-gradient(to top,#ff4041,#000080);
box-shadow: 1px 1px 5px rgba(0,0,0,0.3),-1px -5px 1px 1px #fff;
border-radius: 50%;
align-items: center;
justify-content: center;
text-align: center;
display: inline-flex;
}
.learn .know-icon i{
color:#fff;
}
.learn:hover{
box-shadow:0 0 20px 0 rgba(0,0,0,.3);
transform:translateY(-20px);
}
/*.know-icon:hover{ transform:rotateY(360deg); }
.learn:hover .fa {
background-color: #d10a35;
}*/
/*.serviceBox:hover{ transform: rotateY(360deg); }*/
.learn a{text-decoration: none;}
/************************end section our knoeledge******************************8*/
.desire{min-height:400px;padding:5% 0;
background-color: #000080;color:#fff;
}
.desire:hover{
box-shadow:0 0 20px 0 rgba(0,0,0,.3);
}
.desire .desire-header{
padding:2% 0%;
}
.desire .desire-header h2{
padding:1%;
}
.desire .desire-text{
text-align: center;
justify-content: center;
align-items: center;display: flex;
}
.desire .desire-text a{
text-decoration: none;
}
.desire .desire-text p{
padding: 1%;

}
.desire .desire-image .desire-icon .fa{
font-size: 210px; color: #38b728;text-align: center;
justify-content: center;
align-items: center;
}
.desire .desire-image .desire-icon .google-desire{
font-size: 210px; color:blue;text-align: center;
justify-content: center;
align-items: center;display: flex;
}
/************************** Start our testimonials*********************************************/
.our-team{
min-height:400px;width: 100%; background-color: #333;
}
.our-team-pics{
margin-top:6%;
}
.testimonial{
background: #faf8d4;
padding: 20px 40px 20px 70px;
margin: 0 10px 60px;
position: relative;
}
.testimonial:before{
content: "";
width: 0;
height: 0;
border-bottom: 50px solid #eee;
border-left: 50px solid #333;
box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
}
.testimonial .testimonial-title{
font-size: 15px;
font-weight: bold;
color: #192bc2;
margin-bottom: 15px;
}
.testimonial .description{
font-size: 13px;
font-style: italic;
line-height: 20px;
color: #0b132b;
}
.testimonial .post{
display: block;
font-size: 13px;
font-style: italic;
font-weight: 700;
color: #ff1053;
margin-top: 10px;
}
.testimonial .pic{
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
position: absolute;
bottom: -35px;
right: 23px;
}
.testimonial .pic img{
width: 100%;
height: auto;
}
.owl-theme .owl-controls{
margin-top: 40px;
}
.owl-theme .owl-controls .owl-buttons div{
background: #3646b5;
border-radius: 0;
opacity: 1;
padding: 5px 10px;
}
.owl-prev:before,
.owl-next:before{
content: "\f053";
font-family: "Font Awesome 5 Free"; font-weight: 900;
color: #fff;
}
.owl-next:before{
content: "\f054";
}
@media only screen and (max-width: 767px){
.owl-theme .owl-controls{ margin-top: 20px; }
}
@media only screen and (max-width: 480px){
.testimonial{
margin: 0 10px 60px;
text-align: center;
padding: 20px 30px 20px 40px;
}
}
@media only screen and (max-width: 479px){
.testimonial{
padding: 20px 25px 20px 25px;
}
}
/************************** end our testimonials*********************************************/
/************************** contact us start *********************************************/
.contact_us{
min-height:500px;margin-top: 4%;
width: 100%;
background-color: rgba(255,255,255,0.9);

}
.form-container{
background-color: rgba(255,255,255,0.9);
font-family: 'Titillium Web', sans-serif;
padding: 25px 30px 30px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.form-container .title{
color: #333;
font-size: 24px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 25px;
}
.form-container .title:after{
content: '';
background-color: #e1e1e1;
height: 2px;
width: 150px;
margin: 5px auto 0;
clear: both;
display: block;
}
.form-container .form-horizontal{
margin: 0 0 20px;
font-size: 0;
}
.form-container .form-horizontal .sub-title{
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
margin: 0 0 15px;
padding: 17px 0 0;
border-top: 1px solid #d1d1d1;
}
.form-horizontal .form-group{
width: calc(50% - 10px);
margin: 0 10px 15px 0;
display: inline-block;
}
.form-horizontal .form-group:nth-child(even){ margin: 0 0 10px 10px; }
.form-horizontal .form-group:nth-child(3),
.form-horizontal .form-group:nth-child(4){
margin-bottom: 25px;
}
.form-horizontal .form-group.phone-no{ margin: 0 10px 20px 0; }
.form-horizontal .form-group.age{ margin: 0 0 20px 10px; }
.form-horizontal .form-group label{
color: #999;
font-size: 13px;
font-weight: 500;

margin: 0 0 3px;
}
.form-horizontal .form-control{
color: #555;
background-color: transparent;
font-size: 14px;
letter-spacing: 1px;
height: 33px;
padding: 5px;
box-shadow: none;
border: 1px solid #d1d1d1;
border-radius: 0;
display: inline-block;
transition: all 0.3s;
}
.form-horizontal .form-control:focus{
box-shadow: none;
border: 1px solid #0cd674;
}
.form-horizontal .btn{
color: #fff;
background: #d10a35;
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
padding: 7px 20px 7px;
margin: 0 auto 20px;
border: none;
border-radius: 0;
display: block;
transition: all 0.3s ease;
}
.form-horizontal .btn:hover,
.form-horizontal .btn:focus{
color: #fff;
background-color: #000080;
box-shadow: 0 0 10px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.3) inset;
outline: none;
}
.form-horizontal .user-login{
color: #333;
font-size: 16px;
font-weight: 600;
text-align: center;
display: block;
}
.form-horizontal .user-login a{

transition: all 0.3s ease 0s;
}
.form-horizontal .user-login a:hover{ color: #555; }
.form-container .social-links{
font-size: 14px;
text-align: center;
}
.form-container .social-links span{
font-style: italic;
margin: 0 0 20px;
display: block;
position: relative;
}
.form-container .social-links span:before,
.form-container .social-links span:after{
content: '';
background-color: #999;
height: 1px;
width: 25%;
position: absolute;
top: 50%;
left: 0;
}
.form-container .social-links span:after{
left: auto;
right: 0;
}
.form-container .social-links a{
color: #fff;
background-color: #20599F;
display: inline-block;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
width: 120px;
padding: 7px 15px;
margin: 0 5px;
transition: all 0.3s ease 0s;
}
.form-container .social-links a i{
font-size: 13px;
margin-right: 3px;
}
.form-container .social-links a:nth-child(2){ background-color: #00ADF2; }
.form-container .social-links a:hover{
text-shadow: 0 0 10px rgba(0,0,0,0.4);
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
@media only screen and (max-width:576px){
.form-container .form-group,
.form-container .form-group:nth-child(even),
.form-container .form-group.phone-no,
.form-container .form-group.age{
width: 100%;
margin: 0 0 25px;
}
}
@media only screen and (max-width:479px){
.form-container .social-links a{
width: 80%;
margin: 0 auto;
display: block;
}
.form-container .social-links a:nth-child(even){ margin: 0 auto 10px; }
}
.change_text:after{
content: '';
animation: changetext 5s infinite linear;
color:#544373;
}
@keyframes changetext{
0%{ content: "Technology";}
100%{ content: "Team Support";}
}
/************************** contact us end *********************************************/
/**************************start footer *********************************************/
.footer{min-height: 350px;width: 100%;background-color:#000080;
color:#fff;
}
.footer .about_text_footer{
text-align: center;
align-items: center;
justify-content: center;
margin-top:100px;
}
.footer .footer-join h3{

color: #fff;
margin-top:90px;

}
.footer .footer-join a{
text-decoration: none;
color: #fff;outline: none;
}
.footer .footer-join a:hover{
color:#d10a35;
}
.footer .footer-join ul li{
list-style-type: none;
}
.footer-social-facebook,.footer-social-twitter,.footer-social-instagram,
.footer-social-whatsapp{
width: 50px; height: 50px;
border-radius: 50%;
outline: none;
font-weight: 500; background-color: #d10a35;
align-items: center;
text-align: center;justify-content: center;
display:inline-flex;
}

.footer-join ul li a:hover i{
color:#fff;
}
.footer-credit{
min-height:50px; width: 100%;background-color: #d10a35;
color: #fff;
align-items: center;text-align: center;
justify-content: center;
display: flex;
}
.footer-credit a{
text-decoration: none; color: #fff;
}
.footer-credit a:hover{
color: #000080;
}
/***************end footer ************/

Index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Team Support For Government Polytechnic Aurai</title>
<?php include 'link/header-link.php' ?>
</head>
<body>


<?php include 'menu/menu.php' ?>



<div id="carouselBasicExample" class="carousel slide carousel-fade" data-ride="carousel">



<div class="carousel-inner">

<div class="carousel-item active slider-1">
<div class="container-fluide">
<div class="row">
<div class="col-md-6 slide-1-text">
<div class="text">
<h1>JAGSERVE TEAM SUPPORT </h1>
<p>Computer Knowledge, Every Technology Field,<br/> Blogger tips & tric,Youtube Query,Keyword Researching,<br/> Website design,Any problem, you can ask any time.</p>
<section class="btn">
<a href="" class="btn-1">learn more</a>
<a href="" class="btn-2">Sign up here</a></section>
</div>
</div>
<div class="col-md-6 slide_image">
<br/>
<img src="image/1.png"class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>

<div class="carousel-item slider-2">
<div class="row">
<div class="col-md-6 slide-1-text">
<h1>A GOOD TEAM<br/>A GOOD WORK</h1>
<p>"None of us, including me, ever do great things. But we can all do small things,<br/> with great love, and together we can do something wonderful." – Mother Teresa</p>
<section class="btn">
<a href="" class="btn-1">learn more</a>
<a href="" class="btn-2">Sign up here</a></section>
</div>
<div class="col-md-6 slide_image">
<img src="image/6.png" class="img-fluid" alt="Responsive image"/>
</div>
</div>
</div>

<div class="carousel-item slider-3">
<div class="row">
<div class="col-md-6 slide-1-text">
<h1>Everyone's support<br/>Development of all</h1>
<p>Alone we can do so little; together we can do so much."<br/> – Helen Keller<br/>
"If you want to lift yourself up, lift up someone else." <br/>– Booker T. Washington</p>
<section class="btn">
<a href="" class="btn-1">learn more</a>
<a href="" class="btn-2">Sign up here</a></section>
</div>
<div class="col-md-6 slide_image">
<br/>
<br/>
<br/>
<br/>
<img src="image/7.png" class="img-fluid deepak-slider-iamge-3" alt="Responsive image"/>
</div>
</div>
</div>

</div>



</div>



<section class="Knowledge">
<div class="container">
<div class="know text-center">
<h2>Some Important Topics</h2>
<p>There are some important topics here. That you can learn.</p>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 col-12 d-block ml-auto learn text-center">
<div class="know-icon text-center">
<i class="fa fa-code fa-3x"></i>
</div>
<h2>Website Design</h2>
<p>Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on (<a href="https://www.interaction-design.org/literature/topics/web-design">Read More</a>)</p>

</div>
<div class="col-md-4 col-lg-4 col-12 d-block ml-auto learn text-center">
<div class="know-icon">
<i class="fa fa-globe fa-3x"></i>
</div>
<h2>Blogger Tips</h2>
<p>Start your first blog today in 3 easy steps. Have a blog in 20 minutes. Easy guide to blogging. Easy guide - Start a blog. Courses: Blogging for Beginners, Making Money Blogging, Blog Promotion.(<a href="https://www.theblogstarter.com/?gclid=Cj0KCQjwhb36BRCfARIsAKcXh6F3PIcVUH1nmLdR5IRCwGydjAcs4w7iG-H5c1RyMhhdU4r7_jTScB4aAl9MEALw_wcB">Read More</a>)</p>
</div>
<div class="col-md-4 col-lg-4 col-12 d-block ml-auto learn text-center">
<div class="know-icon">
<i class="fa fa-youtube fa-3x"></i>
</div>
<h2>Youtube Tips</h2>
<p>Before even creating your YouTube channel, you’ve probably already decided on the kind of video content that you want to show. The best ways to increase your views and gain followers is still to keep your content (<a href="https://www.adorama.com/alc/10-tips-for-starting-a-youtube-channel">Read More</a>) </p>
</div>

</div>
</div>
</section>


<section class="desire">
<div class="container">
<div class="desire-header text-center">
<h2>Whatsapp Group</h2>
<p>Here you have some Terms & Condition of our Whatsapp group. Which you will have to follow.</p>
</div>
<br><br><br><br>
<div class="row">
<div class="col-md-6 col-lg-6 col-12 d-block ml-auto text-center desire-text">
<h3>{ Terms & Condition }</h3>
<p>You can not share and send any kind of surplus video, cartoon video, image, or movie poster, video.
If you share or send something like this, then you will be removed from this group and you are responsible for it.Thank you (<a href=" https://chat.whatsapp.com/FlZDxvA5DUiL778Ur01HKg">Join Now</a>)</p>
</div>
<div class="col-md-6 col-lg-6 col-12 d-block ml-auto text-center desire-image">
<div class="desire-icon">
<i class="fa fa-whatsapp fa-5x"></i>
</div>
</div>
</div>
</div>
</section>

<section class="Knowledge">
<div class="container">
<div class="know text-center">
<h2>About Some Google Tool</h2>
<p>I can tell you guys about some Google tools. Using which you can make your website, blog website even better.</p>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 col-12 d-block ml-auto learn text-center">
<div class="know-icon text-center">
<i class="fa fa-google fa-3x"></i>
</div>
<h2>Google Search Console</h2>
<p>Search Console tools and reports help you measure your site's Search traffic and performance, fix issues, and make your site shine in Google Search results (<a href="https://search.google.com/search-console/about">Read More</a>)</p>

</div>
<div class="col-md-4 col-lg-4 col-12 d-block ml-auto learn text-center">
<div class="know-icon">
<i class="fa fa-search fa-3x"></i>
</div>
<h2>Google Keyword Planner</h2>
<p>The right keywords can get your ad in front of the right customers, and Google Ads Keyword Planner is here to help. (<a href="https://ads.google.com/intl/en_in/home/tools/keyword-planner/">Read More</a>)</p>
</div>
<div class="col-md-4 col-lg-4 col-12 d-block ml-auto learn text-center">
<div class="know-icon">
<i class="fa fa-globe fa-3x"></i>
</div>
<h2>Google Analytics</h2>
<p>Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing (<a href="https://en.wikipedia.org/wiki/Google_Analytics">Read More</a>) </p>
</div>

</div>
</div>
</section>


<section class="our-team" id="#team">
<div class="container ">
<div class="know text-center">
<br><br>
<h3 style="color: #fff;">- Our Testiminials -</h3>
</div>
<div class="row">
<div class="col-md-12 our-team-pics">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<h3 class="testimonial-title">Williamson</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula turpis non est imperdiet, et facilisis nisl tempus. Donec nec. </p>
<span class="post">Web Designer</span>
<div class="pic">
<img src="images/1.jpg" alt="">
</div>
</div>

<div class="testimonial">
<h3 class="testimonial-title">kristiana</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula turpis non est imperdiet, et facilisis nisl tempus. Donec nec. </p>
<span class="post">Web Developer</span>
<div class="pic">
<img src="images/1.jpg" alt="">
</div>
</div>

<div class="testimonial">
<h3 class="testimonial-title">Steve Thomas</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula turpis non est imperdiet, et facilisis nisl tempus. Donec nec. </p>
<span class="post">Web Designer</span>
<div class="pic">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="testimonial">
<h3 class="testimonial-title">Steve Thomas</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula turpis non est imperdiet, et facilisis nisl tempus. Donec nec. </p>
<span class="post">Web Designer</span>
<div class="pic">
<img src="images/1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>


<section class="contact_us" id="contact_us">
<div class="form-bg">
<div class="container">
<div class="row">
<div class="col-md-12 col-md-12 col-sm-10">
<div class="form-container">
<h3 class="title">Contact With Us</h3>
<form class="form-horizontal" action="code/contact_us_code.php" method="post" >
<div class="form-group">
<label>Name*</label>
<input class="form-control" type="text" name="name">
</div>
<div class="form-group">
<label>Email ID*</label>
<input class="form-control" type="email" name="email">
</div>
<div class="form-group">
<label>From*</label>
<textarea class="address form-control" name="address" style="width:100%; min-height:50px;">

</textarea>
</div>
<div class="form-group">
<label>Massage*</label>
<textarea class="massage form-control" name="msg" style="width:100%; min-height:50px;">

</textarea>
</div>
<button class="btn signin" type="submit" name="submit" value="register">Send Massage</button>
<span class="user-login">Welcome To Jagserve <span class="change_text"></span></span>
</form>

</div>
</div>
</div>
</div>
</div>
</section>


<?php include 'footer/footer.php' ?>


<?php include 'link/footer-link.php' ?>



<script>
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:3,
itemsDesktop:[1199,2],
itemsDesktopSmall:[979,2],
itemsTablet:[768,2],
itemsMobile:[600,1],
pagination: false,
navigation:true,
navigationText:["",""],
slideSpeed:1000,
autoPlay:true
});
});
</script>
<script>
document.querySelector('html').classList.remove('no-js');
if (!window.Cypress) {
const scrollCounter = document.querySelector('.js-scroll-counter');
AOS.init({
mirror: true
});
document.addEventListener('aos:in', function(e) {
console.log('in!', e.detail);
});
window.addEventListener('scroll', function() {
scrollCounter.innerHTML = window.pageYOffset;
});
}
</script>

</body>
</html>

Register.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - Team Member - Jagserve Team Support</title>
<?php include 'link/header-link.php' ?>
<?php include 'css/registercss.php' ?>

</head>
<body>

<?php include 'menu/menu.php' ?>
<section class="registraion-form-bg">
<br>
<br>
<div class="container registraion-form">
<h1 text-center>Register Now</h1>
<form action="code/reg.php" method="post">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 form-deep">
<br/>
<div class="form-control bg-primary text-center text-white">
<i class="fa fa-facebook facebook"></i> <span>Sign up Your Facebook</span>
</div>
<div class="form-control bg-danger text-center text-white">
<i class="fa fa-user gmail"></i> <span> Sign up Your Gmail</span>
</div>
<br>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Name" name="name" required="">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user-plus"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Father Name" name="faname" required="">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-angle-double-down"></i>
</span>
</div>
<select style="width:89.5%;" name="gender" required="" class="form-control">
<option>Select</option>
<option>Male</option>
<option>Fimale</option>
</select>
</div>

<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-at"></i>
</span>
</div>
<input type="email" class="form-control" placeholder="Email" name="email" required="">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-phone"></i>
</span>
</div>
<input type="number" class="form-control" placeholder="Mobile Number" name="mobile" required="">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="Password" class="form-control" placeholder="Password" name="pass" required="">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control" placeholder="Confirm Password" name="cpass" required="">
</div>
<div class="form-group input-group">
<button type="submit" name="submit" class="form-control btn-danger">Registration</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
</form>
<p text-center>You have an account ? <a href="login.php">Log In</a></p>
</div>
</section>
<?php include 'footer/footer.php' ?>


<?php include 'link/footer-link.php' ?>

</body>
</html>

Login.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Member Login - Jagserve Team Support</title>
<?php include 'link/header-link.php' ?>
<link rel="stylesheet" type="text/css" href="css/login.css">
<style>

</style>
</head>
<body>
<?php include 'menu/menu.php' ?>
<br>
<br>
<br>
<br>
<div class="adminform-bg">
<div class="container">
<div class="row">
<div class="col-md-6 adminform-image ">
<img src="image/login.png" class="img-circle" alt="Cinque Terre" style="filter: drop-shadow(0 -3mm 4mm rgb(0,0,0,8));">
</div>
<div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
<div class="adminform">
<h3 class="title">Login - </h3>
<span class="description">Welcome to the Jagerve Team Sign in to find out what technical information your friends and interests are sharing around the world.</span>
<form class="form-horizontal-admin" action="code/userlgcode.php" method="post">
<div class="form-group">
<span class="input-icon"><i class="far fa-envelope"></i></span>
<label>Email Address</label>
<input class="form-control" type="email" name="email">
</div>
<div class="form-group">
<span class="input-icon"><i class="fa fa-lock"></i></span>
<label>Password</label>
<input class="form-control" type="password" name="password">
</div>
<span class="remember-me"><input type="checkbox"> Remember Me</span>
<span class="forgot"><a href="">Forgot Password?</a></span>
<button class="btn signin" type="submit" name="submit">Login</button>
<a href="register.php" class="btn signup">Create Account</a>
</form>
<div class="social-login">
<span>Or you can join with</span>
<ul class="social-list">

<li><a href="https://www.facebook.com/Secret-of-Today-100742455038253"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://twitter.com/JagserveT"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/jagserve/"><i class="fab fa-instagram" style="color:purple;"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<?php include 'footer/footer.php' ?>


<?php include 'link/footer-link.php' ?>

</body>
</html>

menu.php

<nav class="navbar navbar-expand-lg fixed-top ">
<div class="container">
<a class="navbar-brand text-uppercase" href="index.php">Jagserve Team Support</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse text-uppercase" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto p-2">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="https://www.secretoftoday.com/p/about-us.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.secretoftoday.com/">Blog</a>
</li>

<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.php">Login</a>
</li>


</ul>
<form class="form-inline my-2 my-lg-0">

<a href=" https://chat.whatsapp.com/FlZDxvA5DUiL778Ur01HKg"><button class="btn my-2 my-sm-0 my-btn" type="submit">Join Now</button></a>
</form>
</div>
</div>
</nav>

Footer.php

<section class="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-4 col-12 about_text_footer text-center">
<h3>About</h3>
<p>Our goal is to make all of us better. Those who are behind in everything they are interested in.</p>
</div>
<div class="col-md-4 col-lg-4 col-12 footer-join text-center">
<h3>Follow Me On</h3>
<ul>
<li><a href="#"><i class="fa fa-facebook fa-2x footer-social-facebook"></i> Facebook</a></li><br/>
<li><a href="#"> <i class="fa fa-instagram fa-2x footer-social-instagram"></i> Instagram</a></li><br/>
<li><a href="#"> <i class="fa fa-whatsapp fa-2x footer-social-whatsapp"></i> Whatsapp</a></li>
</ul>

</div>
<div class="col-md-4 col-lg-4 col-12 facebook-page">
<br><br>
<center>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FJagserveTechnology%2F&tabs=timeline&width=260&height=300&small_header=true&adapt_container_width=false&hide_cover=false&show_facepile=true&appId" width="260" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</center>

</div>
</div>
</div>
</section>


<section class="footer-credit">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-10 text-center">
<p class="p-small">Copyright © 2020 <a href="#">Jagserve</a> - All rights reserved - <a href="#">Government Polytechnic Aurai</a></p>
</div>

</div>
</div>
</section>

headerlink.php

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="https://e6t7a8v2.stackpathcdn.com/tutorial/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

footerlink.php

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>