<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link href='http://mywebfont.appspot.com/css?font=yunghkio' rel='stylesheet' type='text/css'>
<link href='http://mywebfont.appspot.com/css?font=myanmar3' rel='stylesheet' type='text/css'>
<link href='http://mywebfont.appspot.com/css?font=padauk' rel='stylesheet' type='text/css'>
<link href='http://mywebfont.appspot.com/css?font=parabaik' rel='stylesheet' type='text/css'>
<link href='http://mywebfont.appspot.com/css?font=zawgyi' rel='stylesheet' type='text/css'>
<style>
.yunghkio {
font-family:"Masterpiece Uni Sans",Yunghkio;
}
.myanmar3 {
font-family:"Masterpiece Uni Sans",Myanmar3;
}
.padauk {
font-family:"Masterpiece Uni Sans",Padauk;
}
.zawgyi {
font-family:Zawgyi-One;
}
.parabaik {
font-family:"Masterpiece Uni Sans",Parabaik;
}
</style>
</head>
<div class="container">
<div class="iconcontainer">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-book"></span>
</div>
<div class="featureinfo">
<h4 class="text-center">Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!
</p>
<a class="btn btn-default btn-sm" href="#" role="button">View Page »</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-tasks"></span>
</div>
<div class="featureinfo">
<h4 class="text-center">Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!
</p>
<a class="btn btn-default btn-sm" href="#" role="button">View Page »</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-comment"></span>
</div>
<div class="featureinfo">
<h4 class="text-center">Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!
</p>
<a class="btn btn-default btn-sm" href="#" role="button">View Page »</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="featureinfo">
<h4 class="text-center">Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta!
</p>
<a class="btn btn-default btn-sm" href=""about.php#bottom"" role="button">View Page »</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" ng-app="app">
<div class="iconcontainer">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="iconbox">
<div class="iconbox-icon">
<span class="glyphicon glyphicon-book"></span>
</div>
<div class="featureinfo">
<ul ng-controller="list">
<li ng-repeat="item in list">
<h4 class="text-center">{{ item.name }}</h4>
<hr>
<p>Date: {{item.fontSize}}</p>
<p> {{item.color}}</p>
<hr>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
body {
background-color: #ebebeb;
}
.iconcontainer {
margin-top: 20px;
margin-bottom: 20px;
}
.iconbox {
background: #ffffff;
background-color: #ffffff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
padding: 20px 25px;
text-align: right;
display: block;
margin-top: 60px;
margin-bottom: 15px;
}
.iconbox-icon {
background-color: #008EED;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 auto;
width: 100px;
height: 100px;
margin-top: -70px;
}
.iconbox-icon span {
color: #fff;
font-size: 42px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 29px;
text-align: center;
vertical-align: middle;
}
.featureinfo h4 {
font-size: 26px;
letter-spacing: 1px;
text-transform: uppercase;
}
.featureinfo > p {
color: #000000;
font-size: 16px;
padding-top: 4px;
text-align: left;
}
.btn-default {
text-shadow: 0px 1px 0px #FFF;
background-image: linear-gradient(to bottom, #FFF 0px, #E0E0E0 100%);
background-repeat: repeat-x;
border-color: #CCC;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15) inset, 0px 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-default:hover,
.btn-default:focus {
background-color: #e0e0e0;
background-position: 0 -15px
}
angular.module('app', [])
.controller('list', function($scope, $http) {
$scope.list = [];
$http.get('https://spreadsheets.google.com/feeds/list/14NocyMJfTS_pZLmEqwpmjMwO--fy4g1jM1x51th_MlY/od6/public/values?alt=json')
.success(function (response) {
response.feed.entry.forEach (function (entry, i) {
var tmp = {"name": entry.gsx$name.$t, "fontSize":entry.gsx$fontsize.$t, "color": entry.gsx$color.$t };
$scope.list.push(tmp);
});
}).error(function (response) {
console.log(response);
});
});
