Skip to content

Commit

Permalink
gm1 page
Browse files Browse the repository at this point in the history
  • Loading branch information
@1880akshay
1880akshay committed Jul 15, 2020
1 parent 0501485 commit c80a4e0
Show file tree
Hide file tree
Showing 6 changed files with 303 additions and 1 deletion.
71 changes: 71 additions & 0 deletions css/gm1.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
.main-head {
background-image: url("../img/members/1.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 300px;
text-align: center;
font-size: 40px;
font-weight: bold;
line-height: 300px;
}
.main-head h3 {
line-height: 1.2;
display: inline-block;
vertical-align: middle;
color: white;
font-size: larger;
}
.member-card {
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
width: 100%;
margin: 10px 0;
}
.member-card img {
width: 60% !important;
border-radius: 50%;
}
.member-card .member-name {
width: 100%;
text-transform: uppercase;
font-size: 22px;
font-weight: bold;
padding: 5px 5px 0 5px;
margin: 5px 0 0;
}
.member-card .member-post {
font-size: smaller;
font-weight: bolder;
}
.member-card .member-social-strip {
background-color: black;
padding: 5px 5px 7px 5px;
border-radius: 8px;
}
.member-card .member-social-strip a {
color: white;
padding: 0 8px;
font-size: smaller;
}
.member-card .member-social-strip a:hover {
color: #18d26e;
}
.owl-next {
position: absolute;
right: -20px;
bottom: 50%;
}
.owl-prev {
position: absolute;
left: -20px;
bottom: 50%;
}
@media (max-width: 500px) {
.owl-next {
right: -15px;
}
.owl-prev {
left: -15px;
}
}
197 changes: 197 additions & 0 deletions gm1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html>
<head>
<title>LiGHT | MEMBERS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">




<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">


<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Libraries CSS Files -->
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.theme.green.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">


<!--css files used-->
<link rel="stylesheet" href="css/gm1.css">


<!--link scripts used-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="main-head">
<header class="section-header">
<h3>general manager</h3>
</header>
</div>
<section class="pt-4 pb-4" style="background-color: #cfcfcf;">
<center>
<div class="container pl-4 pr-4">
<div class="row justify-content-center">
<div class="col-lg-3 col-md-5 pl-4 pr-4">
<div class="member-card bg-light p-3">
<img src="img/members/f.jpg"><br>
<div class="member-name">member name</div>
<div class="member-post">General Manager</div>
<div class="member-text mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ex.</p>
</div>
<div class="member-social-strip">
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</center>
</section>
<section class="pt-4 pb-4" style="background-color: #cfcfe4;">
<center>
<div class="container pl-3 pr-3">
<div class="row justify-content-center owl-carousel owl-theme">
<div class="col-md-12">
<div class="member-card bg-light p-3">
<img src="img/members/f.jpg">
<div class="member-name">member name</div>
<div class="member-post">Centre Coordinator</div>
<div class="member-text mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ex.</p>
</div>
<div class="member-social-strip">
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="member-card bg-light p-3">
<img src="img/members/f.jpg">
<div class="member-name">member name</div>
<div class="member-post">Centre Coordinator</div>
<div class="member-text mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ex.</p>
</div>
<div class="member-social-strip">
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="member-card bg-light p-3">
<img src="img/members/f.jpg">
<div class="member-name">member name</div>
<div class="member-post">Centre Coordinator</div>
<div class="member-text mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ex.</p>
</div>
<div class="member-social-strip">
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="member-card bg-light p-3">
<img src="img/members/f.jpg">
<div class="member-name">member name</div>
<div class="member-post">Centre Coordinator</div>
<div class="member-text mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ex.</p>
</div>
<div class="member-social-strip">
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="member-card bg-light p-3">
<img src="img/members/f.jpg">
<div class="member-name">member name</div>
<div class="member-post">Centre Coordinator</div>
<div class="member-text mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ex.</p>
</div>
<div class="member-social-strip">
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="member-card bg-light p-3">
<img src="img/members/f.jpg">
<div class="member-name">member name</div>
<div class="member-post">Centre Coordinator</div>
<div class="member-text mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ex.</p>
</div>
<div class="member-social-strip">
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>

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




<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery/jquery-migrate.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/superfish/hoverIntent.js"></script>
<script src="lib/superfish/superfish.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>
<script src="lib/touchSwipe/jquery.touchSwipe.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
<script src="js/gm1.js"></script>
</body>
</html>
Binary file added img/members/1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/members/f.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions js/gm1.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
center: false,
loop: true,
items:3,
margin: 0,
stagePadding: 0,
nav: true,
navText: ['<span class="fa fa-caret-left" style="font-size: large">', '<span class="fa fa-caret-right" style="font-size: large">'],
responsive:{
0:{
items: 1,
autoplay: true,
autoplayTimeout:3000,
autoplayHoverPause:true
},
600:{
items: 3,
autoplay: true,
autoplayTimeout:3000,
autoplayHoverPause:true
},
1000:{
items: 4,
autoplay: true,
autoplayTimeout:3000,
autoplayHoverPause:true,
margin: 12
}
},

});

});
2 changes: 1 addition & 1 deletion lib/owlcarousel/assets/owl.theme.green.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit c80a4e0

Please sign in to comment.