var app = angular.module('app', ['ngSanitize']);
app.controller('MainController', ['$scope',
function($scope){
$scope.mainTitle = 'MEET THE TEAM',
$scope.headLine = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
$scope.teamSection = 'EXECUTIVE TEAM',
$scope.modals = [
{
bio: "TAB 1",
experience: "TAB 2",
motto: "TAB 3"
}
];
$scope.teams = [
{
name : 'name1',
role : 'role1',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here1',
author : 'some more text1',
mobile: 'READ MORE'
},
{
name : 'name2',
role : 'role2',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here2',
author : 'some more text2',
mobile: 'READ MORE'
},
{
name : 'name3',
role : 'role3',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here3',
author : 'some more text3',
mobile: 'READ MORE'
},
{
name : 'name4',
role : 'role4',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here4',
author : 'some more text4',
mobile: 'READ MORE'
}
];
}]);
body,
html {
margin: 0;
padding: 0;
font-family: Montserrat;
height: 100%;
}
.p0 {
padding: 0;
}
.container {
margin-top: 50px;
}
h1 {
text-align: center;
font-size: 35px;
padding-bottom: 20px;
}
h2 {
text-align: center;
font-size: 15px;
line-height: 150%;
padding-bottom: 50px;
}
h3 {
text-align: center;
font-size: 14px;
font-weight: 600;
}
.flex-parent {
display: flex;
width: 100%;
height: 50px;
align-items: center;
padding: 50px 0;
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #e3e3e3;
border: 0.5 #e3e3e3 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
padding: 20px;
font-size: 13px;
line-height: 150%;
color: #777777;
letter-spacing: 3px;
}
.flex-parent-second {
height: 150px;
}
.person {
text-align: center;
margin-bottom: 50px;
}
.person img {
cursor: pointer;
}
.name {
font-size: 15px;
margin-top: 10px;
padding-bottom: 8px;
letter-spacing: 3px;
line-height: 150%;
}
.role {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
line-height: 150%;
}
.line {
width: 50px;
height: 1px;
background-color: #e3e3e3;
}
.modal-header {
border-bottom: 0;
}
.roundProfile {
margin: 0 auto;
text-align: center !important;
}
.roundProfile img {
max-width: 150px;
margin-bottom: 15px;
}
hr {
max-width: 30%;
}
.modal-open .modal {
background-color: rgba(255, 255, 255, 0.8);
}
.modal-content {
background-image: url(../images/e.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
box-shadow: 0 0 10px #e3e3e3;
border: none;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #b04890;
font-weight: 500;
color: #ffffff !important;
}
.modal-body {
padding: 0 50px 50px;
}
.nav-pills {
text-align: center;
margin: 30px 0;
}
.nav-pills>li {
text-align: center;
float: none;
display: inline;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
}
.nav>li>a {
display: inline;
padding: 5px 15px;
}
.tab-content p {
font-size: 13px;
line-height: 200%;
text-align: center;
padding-left: 15px;
font-weight: 400;
}
.author {
font-style: italic;
display: block;
text-align: center;
font-size: 11px;
margin-top: 20px;
}
.flex-parent {
padding: 0 0 50px 0;
}
.fade {
opacity: 1 !important;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5 !important;
}
@media (max-width:767px) {
.red-more-mobile {
font-size: 10px;
position: relative;
bottom: 20px;
background-color: rgba(255, 255, 255, 0.80);
padding: 5px 0;
letter-spacing: 2px;
margin-bottom: -20px;
}
.container {
padding-left: 0;
padding-right: 0;
}
.modal-body {
padding: 0px 20px 20px 20px;
}
.nav>li>a {
display: inline;
padding: 2px 5px;
}
.nav-pills>li {
letter-spacing: 1px;
}
.name {
font-size: 10px;
}
.role {
font-size: 9px;
}
h2 {
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
}
.flex-parent {
padding: 0;
}
.flex-parent-second {
position: relative;
top: 0px;
height: 50px;
margin-bottom: 50px;
}
}
<!doctype html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Include the AngularJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.5/angular-sanitize.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="js/respond.js"></script>-->
</head>
<body ng-app="app">
<div class="container" ng-controller="MainController">
<h1>{{ mainTitle }}</h1>
<h2>{{ headLine }}</h2>
<div class="flex-parent">
<div class="flex-child-edge"></div>
<div class="flex-child-text">
<h3>{{ teamSection }}</h3>
</div>
<div class="flex-child-edge"></div>
</div>
<div class="main" ng-repeat="team in teams">
<!-- PERSON 1 -->
<div class="col-xs-6 col-md-3 col-sm-4 person">
<img ng-src="{{ team.mainImage }}" class="img-responsive center-block fade" alt="{{team.alt}}" data-toggle="modal" data-target="#person{{$index}}" />
<div class="red-more-mobile visible-xs" data-toggle="modal" data-target="#person{{$index}}">{{team.mobile}}</div>
<div class="name">{{ team.name }}</div>
<div class="role">{{ team.role }}</div>
</div>
<!-- Modal -->
<div class="modal " id="person{{$index}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="roundProfile row">
<div class="col-xs-12">
<img ng-src="{{ team.roundImage }}" class="img-responsive img-circle center-block" alt="" />
</div>
<div class="name">{{ team.name }}</div>
<div class="role">{{ team.role }}</div>
<hr>
</div>
<div class="modal-body" ng-repeat="modal in modals">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">{{modal.bio}}</a></li>
<li><a data-toggle="pill" href="#menu1">{{modal.experience}}</a></li>
<li><a data-toggle="pill" href="#menu2">{{modal.motto}}</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane in active">
<p ng-bind-html="team.bio"></p>
</div>
<div id="menu1" class="tab-pane ">
<p>{{ team.experience }}</p>
</div>
<div id="menu2" class="tab-pane ">
<p>{{ team.motto }}<span class="author">{{ team.author }}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>