<!DOCTYPE html>
<html lang="en" ng-app="BlankApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css?fafd" rel="stylesheet">
</head>
<body ng-cloak ng-controller="MainCtrl">
<md-content>
<div id="profile" class="page-layout simple tabbed">
<div class="header" layout="column" layout-align="center center" layout-gt-sm="row" layout-align-gt-sm="space-between end">
<div layout="column" layout-align="center center" layout-gt-sm="row" layout-align-gt-sm="start center">
<img class="profile-image avatar huge" src="https://randomuser.me/api/portraits/men/7.jpg">
<div class="name">Katherine Wilson</div>
</div>
<div layout="row" layout-align="end center">
<md-button class="md-raised md-accent">Follow</md-button>
<md-button class="md-raised md-primary">Send Message</md-button>
</div>
</div>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="About">
<md-content class="md-padding">
<div layout="column" flex="100" flex-gt-sm="50" flex-gt-md="65">
<div class="profile-box info-box general md-whiteframe-1dp" layout="column">
<md-toolbar>
<div class="md-toolbar-tools">General Information</div>
</md-toolbar>
<div class="content md-padding">
<div class="info-line">
<div class="title">Gender</div>
<div class="info">Female</div>
</div>
<div class="info-line">
<div class="title">Birthday</div>
<div class="info">
May 8th, 1988</div>
</div>
<div class="info-line">
<div class="title">Locations</div>
<div class="info location"><span>Istanbul, Turkey</span>
<md-icon md-font-icon="icon-map-marker"></md-icon>
</div>
</div>
<div class="info-line">
<div class="title">About Me</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget pharetra felis, sed ullamcorper dui. Sed et elementum neque. Vestibulum pellente viverra ultrices. Etiam justo augue, vehicula ac gravida a, interdum sit amet nisl.
Integer vitae nisi id nibh dictum mollis in vitae tortor.</div>
</div>
</div>
</div>
<div class="profile-box info-box work md-whiteframe-1dp" layout="column">
<md-toolbar>
<div class="md-toolbar-tools">Work</div>
</md-toolbar>
<div class="content md-padding">
<div class="info-line">
<div class="title">Occupation</div>
<div class="info">Developer</div>
</div>
<div class="info-line">
<div class="title">Skills</div>
<div class="info">C#, PHP, Javascript, Angular, JS, HTML, CSS
</div>
</div>
<div class="info-line">
<div class="title">Jobs</div>
<table class="info jobs">
<tbody>
<tr class="job">
<td class="company">Self-Employed</td>
<td class="date">2010 - Now
</td>
</tr>
<tr class="job">
<td class="company">Google</td>
<td class="date">2008 - 2010
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="profile-box info-box contact md-whiteframe-1dp" layout="column">
<md-toolbar>
<div class="md-toolbar-tools">Contact</div>
</md-toolbar>
<div class="content md-padding">
<div class="info-line">
<div class="title">Address</div>
<div class="info">
Ut pharetra luctus est quis sodales. Duis nisi tortor, bibendum eget tincidunt, aliquam ac elit. Mauris nec euismod odio.</div>
</div>
<div class="info-line">
<div class="title">Tel.</div>
<div class="info"><span>+6 555 5555</span></div>
<div class="info"><span>+9 555 5555</span></div>
</div>
<div class="info-line">
<div class="title">Website</div>
<div class="info"><span>test.com</span></div>
</div>
<div class="info-line">
<div class="title">Emails</div>
<div class="info">
<span>mail@test.com</span></div>
<div class="info">
<span>mail@test.com</span></div>
</div>
</div>
</div>
</div>
</md-content>
</md-tab>
<md-tab label="Photos">
<md-content class="md-padding">
<div class="period-media" layout="row" layout-wrap>
<div class="media">
<img class="preview" title="Mountain Sunset" src="http://fuse-angular-material.withinpixels.com/assets/images/etc/mountain-sunset.jpg">
</div>
<div class="media">
<img class="preview" title="Mountain Sunset" src="http://fuse-angular-material.withinpixels.com/assets/images/etc/mountain-sunset.jpg">
</div>
<div class="media">
<img class="preview" title="Mountain Sunset" src="http://fuse-angular-material.withinpixels.com/assets/images/etc/mountain-sunset.jpg">
</div>
<div class="media">
<img class="preview" title="Mountain Sunset" src="http://fuse-angular-material.withinpixels.com/assets/images/etc/mountain-sunset.jpg">
</div>
</div>
</md-content>
</md-tab>
<md-tab label="Social">
<md-content class="md-padding">
<h1 class="md-display-2">Social</h1>
<p>Integer turpis.</p>
</md-content>
</md-tab>
</md-tabs>
</div>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://kamilkp.github.io/angular-sortable-view/src/angular-sortable-view.js"></script>
<script src="app.js"></script>
</body>
</html>
# Angular Material Profile Detail Page
[jQuery2DotNet](http://www.jquery2dotnet.com/)
var app = angular.module('BlankApp', ['ngMaterial', 'ngMessages']);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.loginModel = {
username: '',
password: ''
};
$scope.people = [{
name: 'Janet Perkins',
img: 'https://randomuser.me/api/portraits/men/1.jpg',
newMessage: true
}, {
name: 'Mary Johnson',
img: 'https://randomuser.me/api/portraits/men/2.jpg',
newMessage: false
}, {
name: 'Peter Carlsson',
img: 'https://randomuser.me/api/portraits/men/3.jpg',
newMessage: false
}];
$scope.openMenu = function($mdOpenMenu, ev) {
$mdOpenMenu(ev);
};
$scope.notificationsEnabled = true;
$scope.toggleNotifications = function() {
$scope.notificationsEnabled = !$scope.notificationsEnabled;
};
});
/* Styles go here */
.page-layout.simple.tabbed {
min-height: 100%;
}
#profile .header {
height: 320px;
min-height: 320px;
max-height: 320px;
background: url(http://fuse-angular-material.withinpixels.com/assets/images/backgrounds/march.jpg) 0 45% no-repeat;
background-size: 100% auto;
padding: 24px;
}
#profile .header .profile-image {
margin-right: 24px;
}
#profile .header .name {
font-size: 34px;
color: #FFF;
}
@media screen and (max-width: 960px) {
#profile .header .name {
margin-bottom: 32px;
}
}
#profile .profile-box {
margin-bottom: 16px;
}
#profile .profile-box .content {
background-color: #FFF;
}
#profile .profile-box.info-box .info-line {
margin-bottom: 24px;
}
#profile .profile-box.info-box .info-line .title {
font-size: 14px;
font-weight: 600;
padding-bottom: 4px;
}
#profile .profile-box.info-box .info-line .info {
font-size: 13px;
}
#profile .period-media {
margin-bottom: 16px;
}
#profile .period-media .media {
margin: 0 16px 16px 0;
position: relative;
}
#profile .period-media .media .preview {
width: 256px;
height: 256px;
display: block;
}
.avatar {
width: 40px;
min-width: 40px;
height: 40px;
line-height: 40px;
margin: 0 8px 0 0;
border-radius: 50%;
font-size: 17px;
font-weight: 500;
text-align: center;
color: #FFF;
outline: none;
}
.avatar.huge {
width: 96px;
min-width: 96px;
height: 96px;
line-height: 96px;
}