daily pastebin goal
40%
SHARE
TWEET

Untitled

a guest May 26th, 2018 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="options">
  2.     <div class="option">
  3.         <a href="https://www.handpickedhotels.co.uk/bailbrookhouse"><img class="opt_img" src="images/hotels/BBH.jpg"></a>
  4.         <h3 class="centered" id="hotel_info">Bailbrook House Hotel<br>BA1 7JD<br>Approx Price: &pound;xx</h3>
  5.     </div>
  6.     <div class="option">
  7.         <a href="https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel"><img class="opt_img" src="images/hotels/bath_central_travelodge.jpg"></a>
  8.         <h3 class="centered" id="hotel_info">Bath Central Travelodge<br>BA1 2EB<br>Approx Price: &pound;xx </h3>
  9.     </div>
  10.     <div class="option">
  11.         <a href="https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel"><img class="opt_img" src="images/hotels/bath_waterside_travelodge.jpg"></a>
  12.         <h3 class="centered" id="hotel_info">Bath Waterside Travelodge<br>BA2 4JP<br>Approx Price: &pound;xx</h3>
  13.     </div>
  14. </div>
  15. <div class="options">
  16.     <div class="option">
  17.         <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>
  18.         <h3 class="centered" id="hotel_info">Bath City Centre Premier Inn<br>BA1 2BX<br>Approx Price: &pound;xx</h3>
  19.     </div>
  20.     <div class="option">
  21.         <a href="https://www.yha.org.uk/hostel/yha-bath"><img class="opt_img" src="images/hotels/YHA.jpg"></a>
  22.         <h3 class="centered" id="hotel_info">YHA Bath<br>BA2 6LA <br>Approx Price: &pound;xx </h3>
  23.     </div>
  24.     <div class="option">
  25.         <a href="https://www.bailbrooklodge.co.uk/"><img class="opt_img" src="images/hotels/bailbrook_lodge.jpg"></a>
  26.         <h3 class="centered" id="hotel_info">Bailbrook Lodge<br>BA1 7HZ<br>Approx Price: &pound;xx</h3>
  27.     </div>
  28.    
  29. *{
  30.     font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif
  31. }
  32.  
  33. #hotel_info{
  34.     background-color: rgba(130, 130, 130,0.7);
  35.     width: 80%;
  36. }
  37.  
  38. .centered {
  39.     position: absolute;
  40.     width: 100%;
  41.     top: 40%;
  42.     left: 50%;
  43.     transform: translate(-50%, -50%);
  44. }
  45.  
  46. .options{
  47.     width: 100%;
  48.     overflow: hidden;
  49. }
  50.  
  51. .option {
  52.     position: relative;
  53.     text-align: center;
  54.     width: 33%;
  55.     float:left;
  56. }
  57.  
  58. .opt_img{
  59.     width: 100%;
  60.     opacity: 0.7;
  61. }
  62.    
  63. app.controller('MainController', function($scope){
  64.     $scope.title = 'Hotels';
  65.     $scope.hotels = [
  66.         {
  67.             name: 'Bailbrook House Hotel',
  68.             postcode: "BA1 7JD",
  69.             price: 0.00,
  70.             website: "https://www.handpickedhotels.co.uk/bailbrookhouse",
  71.             img: "images/hotels/BBH.jpg"
  72.         },
  73.         {
  74.             name: "Bath Central Travelodge",
  75.             postcode: "BA1 2EB",
  76.             price: 0.00,
  77.             website: "https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel",
  78.             img: "images/hotels/bath_central_travelodge.jpg"
  79.         },
  80.         {
  81.             name: "Bath Waterside Travelodge",
  82.             postcode: "BA2 4JP",
  83.             price: 0.00,
  84.             website: "https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel",
  85.             img: "images/hotels/bath_waterside_travelodge.jpg"
  86.         }... [and so on]
  87.     ]
  88. });
  89.    
  90. <div ng-controller="MainController">
  91.     <div class = "options" ng-repeat="hotel in hotels">
  92.         <div class = "option">
  93.             <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
  94.             <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'&pound;'}}</h3>
  95.         </div>
  96.     </div>
  97. </div>
  98.    
  99. $scope.hotelGroups = [[
  100.     {
  101.         name: 'Bailbrook House Hotel',
  102.         postcode: "BA1 7JD",
  103.         price: 0.00,
  104.         website: "https://www.handpickedhotels.co.uk/bailbrookhouse",
  105.         img: "images/hotels/BBH.jpg"
  106.     },
  107.     {
  108.         name: "Bath Central Travelodge",
  109.         // ...
  110.     },
  111.     {
  112.         name: "Bath Waterside Travelodge"
  113.         // ...
  114. ],[
  115.     {
  116.         name: 'Bailbrook House Hotel'
  117.     },
  118.     {
  119.         name: "Bath Central Travelodge"
  120.     },
  121.     {
  122.         name: "Bath Waterside Travelodge"
  123.     }
  124. ]];
  125.    
  126. <div ng-controller="MainController">
  127.     <div class = "options" ng-repeat="hotelGroup in hotels">
  128.         <div class = "option" ng-repeat="hotel in hotelGroup">
  129.             <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
  130.             <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'&pound;'}}</h3>
  131.         </div>
  132.     </div>
  133. </div>
  134.    
  135. $scope.hotels = [
  136.     [{
  137.       name: 'Bailbrook House Hotel',
  138.       postcode: "BA1 7JD",
  139.       price: 0.00,
  140.       website: "https://www.handpickedhotels.co.uk/bailbrookhouse",
  141.       img: "images/hotels/BBH.jpg"
  142.     }, {
  143.       name: "Bath Central Travelodge",
  144.       postcode: "BA1 2EB",
  145.       price: 0.00,
  146.       website: "https://www.travelodge.co.uk/hotels/75/Bath-Central-hotel",
  147.       img: "images/hotels/bath_central_travelodge.jpg"
  148.     }, {
  149.       name: "Bath Waterside Travelodge",
  150.       postcode: "BA2 4JP",
  151.       price: 0.00,
  152.       website: "https://www.travelodge.co.uk/hotels/361/Bath-Waterside-hotel",
  153.       img: "images/hotels/bath_waterside_travelodge.jpg"
  154.     }],
  155.     //...
  156.   ]
  157.    
  158. <div ng-controller="MainController">
  159.   <div ng-repeat="group in hotels">
  160.     <div class = "options" ng-repeat="hotel in group">
  161.       <div class = "option">
  162.         <a ng-href={{hotel.website}}><img class="opt_img" ng-src={{hotel.img}}></a>
  163.         <h3 class="centered" id="hotel_info">{{hotel.name}}<br>{{hotel.postcode | uppercase}}<br>Approx Price: {{hotel.price | currency:'&pound;'}}</h3>
  164.       </div>
  165.     </div>
  166.   </div>
  167. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top