JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<title>LA Times Core Logo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body ng-app="brandApp">
<div>
<div class="logoTitle" ng-controller="brandingContr">
Alternate formats can be downloaded via the links below<br/><br/>
<div class="wrappr">
<div class="MedialeftColumn">
<img ng-src="{{logo.assets.display_logo}}" alt="Logos" width="250" class="alignnone size-medium wp-image-337" />
</div>
<div class="Medialogoss clearfix">
Black logo<br/>
<div class="MediaImgFormats">
<a ng-href="{{logo.assets.blk_jpg}}" download>jpeg</a><br/>
<a ng-href="{{logo.assets.blk_png}}" download>png</a><br/>
<a ng-href="{{logo.assets.blk_eps}}" download>eps</a><br/><br/>
</div>
White logo<br/>
<div class="MediaImgFormats">
<a ng-href="{{logo.assets.wht_png}}" download>png</a><br/>
<a ng-href="{{logo.assets.wht_eps}}" download>eps</a><br/><br/>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
.leftColumn {
float:left;
}
.ImgFormats {
font-size: 0.85em;
line-height:1.5em;
border-bottom:solid 1px #d4d4d4;
padding-bottom:0px;
float:left;
margin:0px 0 30px 50px;
}
.logoss {
margin:5px 0 30px;
border-bottom:solid 1px #d4d4d4;
line-height:2;
padding:15px 0 20px 15px;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.whtLogos { background-color:#4591A8; color:#4591A8; }
.whtLogos a { color:#fff; }
.whtLogosBlk { background-color:#000; color:#fff; }
.whtLogosBlk a { color:#fff; }
.MediaImgFormats {
line-height:1.5em;
padding-bottom:0px;
}
.Medialogoss {
margin:0 0px 30px 140px;
padding:0;
float:left;
}
.MedialeftColumn {
float:left;
}
.wrappr {
overflow:auto;
border-bottom:solid 1px #d4d4d4;
border-top:solid 1px #d4d4d4;
margin-bottom:30px;
padding:40px 0 0;
}
JavaScript
angular.module('brandApp', [])
.controller('brandingContr', ['$scope', '$http', function($scope, $http) {
//For Fiddle
window.title = "LA Times Core Logo";
var data = [{ "logo_name" : "LA Times Core Logo",
"assets": {"display_logo" : "http://events.latimes.com/lat-branding/files/2015/08/2015-latlogo-300x37.png",
"blk_jpg" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.jpg",
"blk_png": "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.png",
"blk_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.eps",
"wht_png" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo_White.png",
"wht_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo_White.eps"}
},
{ "logo_name" : "LA Times Media Group Logo",
"assets": {"display_logo" : "http://events.latimes.com/lat-branding/wp-content/themes/lat-branding/img/15_LAT_MediaGroup_Logo.jpg",
"blk_jpg" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo1.jpg",
"blk_png": "http://events.latimes.com/lat-branding/files/2015/08/15-LAT-Media-Group-Logo1.png",
"blk_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo1.eps",
"wht_png" : "http://events.latimes.com/lat-branding/files/2015/08/15-LAT-Media-Group-Logo-W1.png",
"wht_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo_W1.eps"}
}];
//var data=JSON.parse(data);
var logos = data;
var pgTtl=window.title;
...