Quick angular real estate mockup using angular to cycle through and array of objects containing the info for the homes.
A Pen by Jeremy Woodbridge on CodePen.
Quick angular real estate mockup using angular to cycle through and array of objects containing the info for the homes.
A Pen by Jeremy Woodbridge on CodePen.
<body ng-app="app" ng-controller="mainController"> | |
<div class="jumbotron"> | |
<h1> Dream Home App </h1> | |
</div> | |
<div class="container"> | |
<div class="well card" ng-repeat="house in housing"> | |
<img ng-src="{{house.img}}" alt='housepicture' height="420px"> | |
<h3>{{house.address}}</h3> | |
<h4>{{house.cost | currency}}</h4> | |
</div> | |
</div> | |
</body> |
var app = angular.module("app", []); | |
app.controller('mainController', function($scope) { | |
$scope.housing = [ | |
{ | |
'img': 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F1*QVILsDvh_4fXo1WCI2ymPw.jpeg&f=1&nofb=1', | |
'address': '964 NW Ave, Miami', | |
'cost': 1000000 | |
}, | |
{ | |
'img': 'http://cdn.designrulz.com/wp-content/uploads/2014/05/designrulz-cage-house-1.jpg', | |
'address': '105 Danger St, Malibu', | |
'cost': 900000 | |
}, | |
{ | |
'img': 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FDNmlKrx5_SQ%2Fmaxresdefault.jpg&f=1&nofb=1', | |
'address': '360 Everythinggonnabealright Dr, Jamaica', | |
'cost': 750000 | |
}, | |
{ | |
'img': 'https://4.bp.blogspot.com/-rXpxcSqn6_U/UUhCOGJcpeI/AAAAAAAAD0o/wD04w0DfH5U/s1600/Contamporary+Glass+House+by+Nico+Van+Der+Meulen+Architects+Johannesburg+South+Africa+1.jpg', | |
'address': '4567 Parkway, Beverly Hills', | |
'cost': 2000000 | |
} | |
]; | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> |
.card { | |
position: relative; | |
overflow: hidden; | |
img{ | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 1.2em; | |
display: block; | |
} | |
h4, h3{ | |
margin-bottom: 1.5em; | |
} | |
} | |
h1{ | |
font-family: 'Oswald'; | |
text-align: center; | |
} |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> |