Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="options">
- <div class="option">
- <a href="https://www.handpickedhotels.co.uk/bailbrookhouse"><img class="opt_img" src="images/hotels/BBH.jpg"></a>
- <h3 class="centered" id="hotel_info">Bailbrook House Hotel<br>BA1 7JD<br>Approx Price: £xx</h3>
- </div>
- <div class="option">
- <a href="https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel"><img class="opt_img" src="images/hotels/bath_central_travelodge.jpg"></a>
- <h3 class="centered" id="hotel_info">Bath Central Travelodge<br>BA1 2EB<br>Approx Price: £xx </h3>
- </div>
- <div class="option">
- <a href="https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel"><img class="opt_img" src="images/hotels/bath_waterside_travelodge.jpg"></a>
- <h3 class="centered" id="hotel_info">Bath Waterside Travelodge<br>BA2 4JP<br>Approx Price: £xx</h3>
- </div>
- </div>
- <div class="options">
- <div class="option">
- <a href="https://www.premierinn.com/gb/en/hotels/england/somerset/bath/bath-city-centre.html"><img class="opt_img" src="images/hotels/Bath_premier_inn.jpg"></a>
- <h3 class="centered" id="hotel_info">Bath City Centre Premier Inn<br>BA1 2BX<br>Approx Price: £xx</h3>
- </div>
- <div class="option">
- <a href="https://www.yha.org.uk/hostel/yha-bath"><img class="opt_img" src="images/hotels/YHA.jpg"></a>
- <h3 class="centered" id="hotel_info">YHA Bath<br>BA2 6LA <br>Approx Price: £xx </h3>
- </div>
- <div class="option">
- <a href="https://www.bailbrooklodge.co.uk/"><img class="opt_img" src="images/hotels/bailbrook_lodge.jpg"></a>
- <h3 class="centered" id="hotel_info">Bailbrook Lodge<br>BA1 7HZ<br>Approx Price: £xx</h3>
- </div>
- *{
- font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif
- }
- #hotel_info{
- background-color: rgba(130, 130, 130,0.7);
- width: 80%;
- }
- .centered {
- position: absolute;
- width: 100%;
- top: 40%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .options{
- width: 100%;
- overflow: hidden;
- }
- .option {
- position: relative;
- text-align: center;
- width: 33%;
- float:left;
- }
- .opt_img{
- width: 100%;
- opacity: 0.7;
- }
- app.controller('MainController', function($scope){
- $scope.title = 'Hotels';
- $scope.hotels = [
- {
- name: 'Bailbrook House Hotel',
- postcode: "BA1 7JD",
- price: 0.00,
- website: "https://www.handpickedhotels.co.uk/bailbrookhouse",
- img: "images/hotels/BBH.jpg"
- },
- {
- name: "Bath Central Travelodge",
- postcode: "BA1 2EB",
- price: 0.00,
- website: "https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel",
- img: "images/hotels/bath_central_travelodge.jpg"
- },
- {
- name: "Bath Waterside Travelodge",
- postcode: "BA2 4JP",
- price: 0.00,
- website: "https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel",
- img: "images/hotels/bath_waterside_travelodge.jpg"
- }... [and so on]
- ]
- });
- <div ng-controller="MainController">
- <div class = "options" ng-repeat="hotel in hotels">
- <div class = "option">
- <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
- <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'£'}}</h3>
- </div>
- </div>
- </div>
- $scope.hotelGroups = [[
- {
- name: 'Bailbrook House Hotel',
- postcode: "BA1 7JD",
- price: 0.00,
- website: "https://www.handpickedhotels.co.uk/bailbrookhouse",
- img: "images/hotels/BBH.jpg"
- },
- {
- name: "Bath Central Travelodge",
- // ...
- },
- {
- name: "Bath Waterside Travelodge"
- // ...
- ],[
- {
- name: 'Bailbrook House Hotel'
- },
- {
- name: "Bath Central Travelodge"
- },
- {
- name: "Bath Waterside Travelodge"
- }
- ]];
- <div ng-controller="MainController">
- <div class = "options" ng-repeat="hotelGroup in hotels">
- <div class = "option" ng-repeat="hotel in hotelGroup">
- <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
- <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'£'}}</h3>
- </div>
- </div>
- </div>
- $scope.hotels = [
- [{
- name: 'Bailbrook House Hotel',
- postcode: "BA1 7JD",
- price: 0.00,
- website: "https://www.handpickedhotels.co.uk/bailbrookhouse",
- img: "images/hotels/BBH.jpg"
- }, {
- name: "Bath Central Travelodge",
- postcode: "BA1 2EB",
- price: 0.00,
- website: "https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel",
- img: "images/hotels/bath_central_travelodge.jpg"
- }, {
- name: "Bath Waterside Travelodge",
- postcode: "BA2 4JP",
- price: 0.00,
- website: "https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel",
- img: "images/hotels/bath_waterside_travelodge.jpg"
- }],
- //...
- ]
- <div ng-controller="MainController">
- <div ng-repeat="group in hotels">
- <div class = "options" ng-repeat="hotel in group">
- <div class = "option">
- <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
- <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'£'}}</h3>
- </div>
- </div>
- </div>
- </div>
Add Comment
Please, Sign In to add comment