├── screenshot.png
├── media
    ├── cartoon_city.png
    ├── city_clipart.png
    ├── house_for_rent.png
    └── property_image.png
├── README.md
├── LICENSE.md
├── css
    └── styles.css
└── index.html


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aldi/bulma-rent-template/HEAD/screenshot.png


--------------------------------------------------------------------------------
/media/cartoon_city.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aldi/bulma-rent-template/HEAD/media/cartoon_city.png


--------------------------------------------------------------------------------
/media/city_clipart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aldi/bulma-rent-template/HEAD/media/city_clipart.png


--------------------------------------------------------------------------------
/media/house_for_rent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aldi/bulma-rent-template/HEAD/media/house_for_rent.png


--------------------------------------------------------------------------------
/media/property_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aldi/bulma-rent-template/HEAD/media/property_image.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bulma Rent Template
 2 | 
 3 | Part of [Awesome Bulma Templates](https://github.com/aldi/awesome-bulma-templates) repo
 4 | 
 5 | ## [Live Demo](https://aldi.github.io/bulma-rent-template/index.html)
 6 | 
 7 | ![Screenshot](screenshot.png)
 8 | 
 9 | ## Additional Libraries used
10 | 
11 | Font-Awesome - [github.com/FortAwesome/Font-Awesome](https://github.com/FortAwesome/Font-Awesome)
12 | 
13 | ## Contributing
14 | 
15 | 1. Fork it!
16 | 2. Create your feature branch: `git checkout -b my-new-feature`
17 | 3. Commit your changes: `git commit -am 'Add some feature'`
18 | 4. Push to the branch: `git push origin my-new-feature`
19 | 5. Submit a pull request!
20 | 
21 | ## Licence
22 | 
23 | Code released under [the MIT license](https://github.com/aldi/bulma-rent-template/blob/master/LICENSE.md).
24 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Aldi Duzha (aldi)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | .sub-section {
  2 | 	margin-bottom: 60px;
  3 | }
  4 | .rb-card {
  5 | 	border: none;
  6 | 	border-radius: 4px;
  7 | 	box-shadow: 5px 5px 16px 0 rgba(0, 0, 0, 0.13);
  8 | 	cursor: pointer;
  9 | 	transition: all 0.3s ease-in-out;
 10 | 	position: relative;
 11 | 	overflow: hidden;
 12 | }
 13 | .rb-card a {
 14 | 	color: #515f6a;
 15 | }
 16 | .rb-card:hover {
 17 | 	transform: scale(1.015);
 18 | }
 19 | .m-l-5 {
 20 | 	margin-left: 5px !important;
 21 | }
 22 | .p-t-30 {
 23 | 	padding-top: 30px !important;
 24 | }
 25 | .p-b-30 {
 26 | 	padding-bottom: 30px !important;
 27 | }
 28 | .m-t-10 {
 29 | 	margin-top: 10px !important;
 30 | }
 31 | .m-t-30 {
 32 | 	margin-top: 30px !important;
 33 | }
 34 | .m-t-50 {
 35 | 	margin-top: 50px !important;
 36 | }
 37 | .m-t-60 {
 38 | 	margin-top: 60px !important;
 39 | }
 40 | .b-t {
 41 | 	border-top: 1px solid #e2e8ef;
 42 | }
 43 | .ellipsis {
 44 | 	display: block;
 45 | 	display: -webkit-box;
 46 | 	margin: 0 auto;
 47 | 	line-height: 1.4;
 48 | 	-webkit-box-orient: vertical;
 49 | 	overflow: hidden;
 50 | 	text-overflow: ellipsis;
 51 | }
 52 | .is-ellipsis-1 {
 53 | 	-webkit-line-clamp: 1;
 54 | }
 55 | .is-ellipsis-2 {
 56 | 	-webkit-line-clamp: 2;
 57 | }
 58 | h1,
 59 | h2,
 60 | h3,
 61 | h4 {
 62 | 	font-family: Montserrat, sans-serif;
 63 | 	font-weight: 600;
 64 | }
 65 | .title {
 66 | 	font-weight: 600;
 67 | }
 68 | .field.has-shadow-field {
 69 | 	-webkit-box-shadow: 0 5px 30px hsla(224, 8%, 64%, 0.25) !important;
 70 | 	box-shadow: 0 5px 30px hsla(224, 8%, 64%, 0.25) !important;
 71 | }
 72 | .subtitle {
 73 | 	font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
 74 | 		Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
 75 | 	font-weight: 500;
 76 | }
 77 | .hero.is-light .subtitle,
 78 | .subtitle {
 79 | 	color: #99a6b3;
 80 | }
 81 | .input {
 82 | 	box-shadow: none;
 83 | 	-webkit-box-shadow: none;
 84 | }
 85 | .input:-webkit-autofill {
 86 | 	-webkit-box-shadow: 0 0 0 30px #fff inset;
 87 | }
 88 | .input:invalid {
 89 | 	outline: none;
 90 | 	-webkit-box-shadow: none;
 91 | 	box-shadow: none;
 92 | }
 93 | .input:active,
 94 | .input:focus {
 95 | 	-webkit-box-shadow: none;
 96 | 	box-shadow: none;
 97 | }
 98 | .button {
 99 | 	-webkit-transition: all 0.3s ease-out;
100 | 	transition: all 0.3s ease-out;
101 | 	font-family: Montserrat, sans-serif;
102 | 	font-weight: 500;
103 | }
104 | .button.is-shadowy {
105 | 	box-shadow: 0 5px 30px hsla(224, 8%, 64%, 0.25);
106 | 	-webkit-box-shadow: 0 5px 30px hsla(224, 8%, 64%, 0.25);
107 | 	-moz-box-shadow: 0 5px 30px hsla(224, 8%, 64%, 0.25);
108 | }
109 | .button.is-shadowy:hover {
110 | 	-webkit-box-shadow: 0 16px 43px 2px rgba(0, 0, 0, 0.2);
111 | 	box-shadow: 0 16px 43px 2px rgba(0, 0, 0, 0.2);
112 | }
113 | a {
114 | 	-webkit-transition: color 0.3s ease-out;
115 | 	transition: color 0.3s ease-out;
116 | }
117 | .navbar.is-transparent {
118 | 	background-color: transparent;
119 | 	background-image: none;
120 | }
121 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  7 | 	<meta name="author" content="Aldi Duzha">
  8 | 	<meta name="description" content="Search houses and apartments for rent anywhere within the US. View floorplans, pricing, images and more. Find your perfect rental.">
  9 | 	<meta name="keywords" content="bulma, rent, template, apartments, page, website, free, awesome">
 10 | 	<link rel="canonical" href="https://aldi.github.io/bulma-rent-template/index.html"/>
 11 | 	<title>Bulma Rent - Free Bulma Template</title>
 12 | 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
 13 | 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css">
 14 | 	<link rel="stylesheet" type="text/css" href="css/styles.css">
 15 | </head>
 16 | <body>
 17 | 	<div id="app">
 18 | 		<section class="hero is-fullheight is-light" >
 19 | 			<div class="hero-head">
 20 | 				<nav class="navbar is-transparent is-spaced" role="navigation" aria-label="main navigation">
 21 | 					<div class="container">
 22 | 						<div class="navbar-brand">
 23 | 							<a class="navbar-item" href="rent.html">
 24 | 								<img src="https://bulma.io/images/bulma-logo.png" alt="Bulma Rent" width="80" height="20">
 25 | 							</a>
 26 | 							<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarTopMain">
 27 | 								<span aria-hidden="true"></span>
 28 | 								<span aria-hidden="true"></span>
 29 | 								<span aria-hidden="true"></span>
 30 | 							</a>
 31 | 						</div>
 32 | 						<div class="navbar-menu" id="navbarTopMain">
 33 | 							<div class="navbar-end">
 34 | 								<a href="#"
 35 | 								class="navbar-item has-text-weight-semibold">
 36 | 								<span>Blog</span>
 37 | 								<span class="tag is-success m-l-5">NEW</span>
 38 | 							</a>
 39 | 							<a href="#"
 40 | 							class="navbar-item has-text-weight-semibold">Apartments</a>
 41 | 							<a href="#"
 42 | 							class="navbar-item has-text-weight-semibold">Houses</a>
 43 | 							<a href="#" class="navbar-item has-text-weight-semibold">Post a listing</a>
 44 | 							<div class="navbar-item">
 45 | 								<a href="https://aldi.github.io/awesome-bulma-templates/templates/login/login.html" class="button is-primary">
 46 | 									Sign in
 47 | 								</a>
 48 | 							</div>
 49 | 						</div>
 50 | 					</div>
 51 | 				</div>
 52 | 			</nav>
 53 | 		</div>
 54 | 		<div class="hero-body  p-b-30 ">
 55 | 			<div class="container">
 56 | 				<h2 class="subtitle">
 57 | 					<span class="has-text-centered is-block">
 58 | 						Search hundreds of thousands of apartments, condos and houses for rent.
 59 | 					</span>
 60 | 				</h2>
 61 | 				<h1 class="title">
 62 | 					<span class="is-size-2 has-text-centered is-block">Find A Place You’ll Love.</span>
 63 | 				</h1>
 64 | 				<div class="columns is-centered">
 65 | 					<div class="column is-7">
 66 | 						<div class="search-form">
 67 | 							<form>
 68 | 								<div class="field has-addons has-shadow-field">
 69 | 									<div class="control has-icons-left is-expanded">
 70 | 										<input type="text" id="mainSearch" defaultvalue="" placeholder="Find rentals in..." class="input is-large"> 
 71 | 										<span class="icon is-small is-left">
 72 | 											<svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
 73 | 												<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">
 74 | 												</path>
 75 | 											</svg>
 76 | 										</span>
 77 | 									</div> 
 78 | 									<div class="control">
 79 | 										<button type="button" class="button is-large is-primary">
 80 | 											<span class="has-text-weight-semibold">Go!</span>
 81 | 										</button>
 82 | 									</div>
 83 | 								</div>
 84 | 							</form>
 85 | 						</div>
 86 | 					</div>
 87 | 				</div>
 88 | 				<div class="has-text-centered">
 89 | 					<img class="m-t-50" src="media/property_image.png" alt="Find rentals">
 90 | 				</div>
 91 | 			</div>
 92 | 		</div>
 93 | 	</section>
 94 | 	<section class="hero is-medium has-text-centered" >
 95 | 		<div class="hero-body ">
 96 | 			<div class="container">
 97 | 				<h2 class="subtitle">
 98 | 					Find rentals in all of the major US cities.
 99 | 				</h2>
100 | 				<h1 class="title">
101 | 					Rental listings updated daily.
102 | 				</h1>
103 | 				<br>
104 | 				<div class="columns is-centered">
105 | 					<div class="column is-10">
106 | 						<div class="columns is-multiline">
107 | 							<div class="column is-one-third">
108 | 								<div class="card rb-card">
109 | 									<div class="card-image">
110 | 										<div class="card-image">
111 | 											<figure class="image is-16by9">
112 | 												<img src="https://via.placeholder.com/640x360" alt="Rental Rates and Rental Prices in Phoenix, AZ">
113 | 											</figure>
114 | 										</div>
115 | 									</div>
116 | 									<div class="card-content">
117 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
118 | 											<a class="has-text-dark">
119 | 												Rental Rates and Rental Prices in Phoenix, AZ
120 | 											</a>
121 | 										</h3>
122 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
123 | 											Phoenix has a total population of 1,626,078 and 52.70% of the population own their home. 47.30% of the occupied housing units are renters within the P...
124 | 										</h4>
125 | 									</div>
126 | 								</div>
127 | 							</div>
128 | 							<div class="column is-one-third">
129 | 								<div class="card rb-card">
130 | 									<div class="card-image">
131 | 										<div class="card-image">
132 | 											<figure class="image is-16by9">
133 | 												<img src="https://via.placeholder.com/640x360" alt="Rental Rates in Simi Valley and Rental Prices">
134 | 											</figure>
135 | 										</div>
136 | 									</div>
137 | 									<div class="card-content">
138 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
139 | 											<a class="has-text-dark" href="s/rental-rates-simi-valley.html">
140 | 												Rental Rates in Simi Valley and Rental Prices
141 | 											</a>
142 | 										</h3>
143 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
144 | 											View average rental rates and prices in Simi Valley CA for 1 bed, 2 bed, 3 bed and all rental size properties.
145 | 										</h4>
146 | 									</div>
147 | 								</div>
148 | 							</div>
149 | 							<div class="column is-one-third">
150 | 								<div class="card rb-card">
151 | 									<div class="card-image">
152 | 										<div class="card-image">
153 | 											<figure class="image is-16by9">
154 | 												<img src="https://via.placeholder.com/640x360" alt="Rental Rates in Detroit">
155 | 											</figure>
156 | 										</div>
157 | 									</div>
158 | 									<div class="card-content">
159 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
160 | 											<a class="has-text-dark" href="s/rental-rates-detroit.html">
161 | 												Rental Rates in Detroit
162 | 											</a>
163 | 										</h3>
164 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
165 | 											The average rental rate for all rental properties within Detroit is $987. The rental rates by bedrooms is as follows:  a studio is $759, a one bedroom...
166 | 										</h4>
167 | 									</div>
168 | 								</div>
169 | 							</div>
170 | 							<div class="column is-one-third">
171 | 								<div class="card rb-card">
172 | 									<div class="card-image">
173 | 										<div class="card-image">
174 | 											<figure class="image is-16by9">
175 | 												<img src="https://via.placeholder.com/640x360" alt="Rentals Near Johns Hopkins University">
176 | 											</figure>
177 | 										</div>
178 | 									</div>
179 | 									<div class="card-content">
180 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
181 | 											<a class="has-text-dark" href="s/rentals-near-johns-hopkins-university.html">
182 | 												Rentals Near Johns Hopkins University
183 | 											</a>
184 | 										</h3>
185 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
186 | 											Johns Hopkins University is ranked number 17 in best education schools by US News and World Report.
187 | 										</h4>
188 | 									</div>
189 | 								</div>
190 | 							</div>
191 | 							<div class="column is-one-third">
192 | 								<div class="card rb-card">
193 | 									<div class="card-image">
194 | 										<div class="card-image">
195 | 											<figure class="image is-16by9">
196 | 												<img src="https://via.placeholder.com/640x360" alt="Rental Properties Near University of Colorado Boulder">
197 | 											</figure>
198 | 										</div>
199 | 									</div>
200 | 									<div class="card-content">
201 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
202 | 											<a class="has-text-dark" href="s/rental-properties-near-university-of-colorado-boulder.html">
203 | 												Rental Properties Near University of Colorado Boulder
204 | 											</a>
205 | 										</h3>
206 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
207 | 											The University of Colorado in Boulder, CO has over 33,000 students of which a vast amount of them live off-campus close to the university.
208 | 										</h4>
209 | 									</div>
210 | 								</div>
211 | 							</div>
212 | 							<div class="column is-one-third">
213 | 								<div class="card rb-card">
214 | 									<div class="card-image">
215 | 										<div class="card-image">
216 | 											<figure class="image is-16by9">
217 | 												<img src="https://via.placeholder.com/640x360" alt="Privately Owned Homes For Rent">
218 | 											</figure>
219 | 										</div>
220 | 									</div>
221 | 									<div class="card-content">
222 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
223 | 											<a class="has-text-dark" href="s/privately-owned-homes-for-rent.html">
224 | 												Privately Owned Homes For Rent
225 | 											</a>
226 | 										</h3>
227 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
228 | 											The United States has a total population of 325,719,178 and 63.60% of the population own their home. 36.40% of the occupied housing units are renters...
229 | 										</h4>
230 | 									</div>
231 | 								</div>
232 | 							</div>
233 | 							<div class="column is-one-third">
234 | 								<div class="card rb-card">
235 | 									<div class="card-image">
236 | 										<div class="card-image">
237 | 											<figure class="image is-16by9">
238 | 												<img src="https://via.placeholder.com/640x360" alt="Cheap San Antonio Apartments For Rent">
239 | 											</figure>
240 | 										</div>
241 | 									</div>
242 | 									<div class="card-content">
243 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
244 | 											<a class="has-text-dark" href="s/cheap-san-antonio-apartments-for-rent.html">
245 | 												Cheap San Antonio Apartments For Rent
246 | 											</a>
247 | 										</h3>
248 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
249 | 											San Antonio is home to many affordable apartments that fall below $800 a month in rent. San Antonio has a total population of 1,511,946 and 54.10% of...
250 | 										</h4>
251 | 									</div>
252 | 								</div>
253 | 							</div>
254 | 							<div class="column is-one-third">
255 | 								<div class="card rb-card">
256 | 									<div class="card-image">
257 | 										<div class="card-image">
258 | 											<figure class="image is-16by9">
259 | 												<img src="https://via.placeholder.com/640x360" alt="Craigslist Sarasota Rental Data">
260 | 											</figure>
261 | 										</div>
262 | 									</div>
263 | 									<div class="card-content">
264 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
265 | 											<a class="has-text-dark" href="s/craigslist-sarasota-rentals.html">
266 | 												Craigslist Sarasota Rental Data
267 | 											</a>
268 | 										</h3>
269 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
270 | 											Craigslist is by far the most popular classified site in the world. Specifically for rentals, they havesignificantly more renter leads to property man...
271 | 										</h4>
272 | 									</div>
273 | 								</div>
274 | 							</div>
275 | 							<div class="column is-one-third">
276 | 								<div class="card rb-card">
277 | 									<div class="card-image">
278 | 										<div class="card-image">
279 | 											<figure class="image is-16by9">
280 | 												<img src="https://via.placeholder.com/640x360" alt="Houses for Rent Near Ohio State Campus">
281 | 											</figure>
282 | 										</div>
283 | 									</div>
284 | 									<div class="card-content">
285 | 										<h3 class="title is-size-6 ellipsis is-ellipsis-1">
286 | 											<a class="has-text-dark" href="s/houses-for-rent-near-ohio-state-campus.html">
287 | 												Houses for Rent Near Ohio State Campus
288 | 											</a>
289 | 										</h3>
290 | 										<h4 class="subtitle is-size-7 ellipsis is-ellipsis-2">
291 | 											The Ohio State University campus currently has over 66,000 students. Many of these students live near or on campus and others commute from home outsid...
292 | 										</h4>
293 | 									</div>
294 | 								</div>
295 | 							</div>
296 | 						</div>
297 | 					</div>
298 | 				</div>
299 | 
300 | 				<img class="m-t-50" src="media/city_clipart.png" alt="Rental listings">
301 | 			</div>
302 | 		</div>
303 | 	</section>
304 | 	<div class="container"><hr></div>
305 | 	<section class="hero">
306 | 		<div class="hero-body">
307 | 			<div class="container">
308 | 				<div class="columns is-centered">
309 | 					<div class="column is-7">
310 | 						<div class="columns">
311 | 							<div class="column">
312 | 								<h1 class="title m-t-60">All marketplaces</h1>
313 | 								<h2 class="subtitle">Bulma Rent provides you insights into all marketplaces.</h2>
314 | 							</div>
315 | 							<div class="column has-text-centered">
316 | 								<img class="m-t-50" src="media/house_for_rent.png" alt="Rental marketplaces">
317 | 							</div>
318 | 						</div>
319 | 					</div>
320 | 				</div>
321 | 			</div>
322 | 		</div>
323 | 	</section>
324 | 	<section class="hero is-medium">
325 | 		<div class="hero-body">
326 | 			<div class="container">
327 | 				<div class="columns is-centered">
328 | 					<div class="column is-10">
329 | 						<div class="sub-section">
330 | 							<h3 class="title is-size-4">Find rentals in all States</h3>
331 | 							<h4 class="subtitle is-size-6">Whether you are looking for apartments or single family homes we got 'em all.</h4>
332 | 							<div class="columns">
333 | 								<div class="column">
334 | 									<div class="card rb-card">
335 | 										<div class="card-image">
336 | 											<figure class="image is-16by9">
337 | 												<img src="https://via.placeholder.com/640x360" alt="Dallas houses for rent">
338 | 											</figure>
339 | 										</div>
340 | 										<div class="card-content">
341 | 											<h2 class="title is-size-6">
342 | 												<a href="#">
343 | 													Houses for rent in<br/> Dallas, TX
344 | 												</a>
345 | 											</h2>
346 | 										</div>
347 | 									</div>
348 | 								</div>
349 | 								<div class="column">
350 | 									<div class="card rb-card">
351 | 										<div class="card-image">
352 | 											<figure class="image is-16by9">
353 | 												<img src="https://via.placeholder.com/640x360" alt="San Antonio apartments for rent">
354 | 											</figure>
355 | 										</div>
356 | 										<div class="card-content">
357 | 											<h2 class="title is-size-6">
358 | 												<a href="#">
359 | 													Apartments for rent in<br/> San Antonio, TX
360 | 												</a>
361 | 											</h2>
362 | 										</div>
363 | 									</div>
364 | 								</div>
365 | 								<div class="column">
366 | 									<div class="card rb-card">
367 | 										<div class="card-image">
368 | 											<figure class="image is-16by9">
369 | 												<img src="https://via.placeholder.com/640x360" alt="Phoenix houses for rent">
370 | 											</figure>
371 | 										</div>
372 | 										<div class="card-content">
373 | 											<h2 class="title is-size-6">
374 | 												<a href="#">
375 | 													Houses for rent in<br/> Phoenix, AZ
376 | 												</a>
377 | 											</h2>
378 | 										</div>
379 | 									</div>
380 | 								</div>
381 | 								<div class="column">
382 | 									<div class="card rb-card">
383 | 										<div class="card-image">
384 | 											<figure class="image is-16by9">
385 | 												<img src="https://via.placeholder.com/640x360" alt="Denver houses for rent">
386 | 											</figure>
387 | 										</div>
388 | 										<div class="card-content">
389 | 											<h2 class="title is-size-6">
390 | 												<a href="#">
391 | 													Apartments for rent in<br/> Denver, CO
392 | 												</a>
393 | 											</h2>
394 | 										</div>
395 | 									</div>
396 | 								</div>
397 | 							</div>
398 | 							<div class="columns">
399 | 								<div class="column">
400 | 									<div class="card rb-card">
401 | 										<div class="card-image">
402 | 											<figure class="image is-16by9">
403 | 												<img src="https://via.placeholder.com/640x360" alt="Houston houses for rent">
404 | 											</figure>
405 | 										</div>
406 | 										<div class="card-content">
407 | 											<h2 class="title is-size-6">
408 | 												<a href="#">
409 | 													Houses for rent in<br/>Houston, TX
410 | 												</a>
411 | 											</h2>
412 | 										</div>
413 | 									</div>
414 | 								</div>
415 | 								<div class="column">
416 | 									<div class="card rb-card">
417 | 										<div class="card-image">
418 | 											<figure class="image is-16by9">
419 | 												<img src="https://via.placeholder.com/640x360" alt="San Francisco apartments for rent">
420 | 											</figure>
421 | 										</div>
422 | 										<div class="card-content">
423 | 											<h2 class="title is-size-6">
424 | 												<a href="#">
425 | 													Apartments for rent in<br/>San Francisco, CA
426 | 												</a>
427 | 											</h2>
428 | 										</div>
429 | 									</div>
430 | 								</div>
431 | 								<div class="column">
432 | 									<div class="card rb-card">
433 | 										<div class="card-image">
434 | 											<figure class="image is-16by9">
435 | 												<img src="https://via.placeholder.com/640x360" alt="San Diego houses for rent">
436 | 											</figure>
437 | 										</div>
438 | 										<div class="card-content">
439 | 											<h2 class="title is-size-6">
440 | 												<a href="#">
441 | 													Houses for rent in <br/>San Diego, CA
442 | 												</a>
443 | 											</h2>
444 | 										</div>
445 | 									</div>
446 | 								</div>
447 | 								<div class="column">
448 | 									<div class="card rb-card">
449 | 										<div class="card-image">
450 | 											<figure class="image is-16by9">
451 | 												<img src="https://via.placeholder.com/640x360" alt="Austin apartments for rent">
452 | 											</figure>
453 | 										</div>
454 | 										<div class="card-content">
455 | 											<h2 class="title is-size-6">
456 | 												<a href="#">
457 | 													Apartments for rent in <br/>Austin, TX
458 | 												</a>
459 | 											</h2>
460 | 										</div>
461 | 									</div>
462 | 								</div>
463 | 							</div>
464 | 						</div>
465 | 						<div class="sub-section">
466 | 							<div class="columns">
467 | 								<div class="column">
468 | 									<h4 class="title is-size-6 is-uppercase">
469 | 										From the West
470 | 									</h4>
471 | 									<ul>
472 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Seattle</a></li>
473 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Las Vegas</a></li>
474 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Portland</a></li>
475 | 										<li style="font-size:0.9rem"><a href="#">Rentals in San Jose</a></li>
476 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Mesa</a></li>
477 | 									</ul>
478 | 								</div>
479 | 								<div class="column">
480 | 									<h4 class="title is-size-6 is-uppercase">
481 | 										From the Midwest
482 | 									</h4>
483 | 									<ul>
484 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Indianapolis</a></li>
485 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Kansas City</a></li>
486 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Minneapolis</a></li>
487 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Albuquerque</a></li>
488 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Columbus</a></li>
489 | 									</ul>
490 | 								</div>
491 | 								<div class="column">
492 | 									<h4 class="title is-size-6 is-uppercase">
493 | 										From the South
494 | 									</h4>
495 | 									<ul>
496 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Charlotte</a></li>
497 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Atlanta</a></li>
498 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Nashville</a></li>
499 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Jacksonville</a></li>
500 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Raleigh</a></li>
501 | 									</ul>
502 | 								</div>
503 | 								<div class="column">
504 | 									<h4 class="title is-size-6 is-uppercase">
505 | 										From the East
506 | 									</h4>
507 | 									<ul>
508 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Washington</a></li>
509 | 										<li style="font-size:0.9rem"><a href="#">Rentals in New York</a></li>
510 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Baltimore</a></li>
511 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Brooklyn</a></li>
512 | 										<li style="font-size:0.9rem"><a href="#">Rentals in Boston</a></li>
513 | 									</ul>
514 | 								</div>
515 | 							</div>
516 | 						</div>
517 | 						<div class="sub-section">
518 | 							<h3 class="title is-size-4">Browse by popular neighborhoods</h3>
519 | 							<div class="columns">
520 | 								<div class="column">
521 | 									<div class="card rb-card">
522 | 										<div class="card-image">
523 | 											<figure class="image is-16by9">
524 | 												<img src="https://via.placeholder.com/640x360" alt="Washington park rentals">
525 | 											</figure>
526 | 										</div>
527 | 										<div class="card-content">
528 | 											<h3 class="title is-size-7">
529 | 												<a href="#">
530 | 													Washington Park Denver, CO
531 | 												</a>
532 | 											</h3>
533 | 										</div>
534 | 									</div>
535 | 								</div>
536 | 								<div class="column">
537 | 									<div class="card rb-card">
538 | 										<div class="card-image">
539 | 											<figure class="image is-16by9">
540 | 												<img src="https://via.placeholder.com/640x360" alt="Upper West Side NYC rentals">
541 | 											</figure>
542 | 										</div>
543 | 										<div class="card-content">
544 | 											<h3 class="title is-size-7">
545 | 												<a href="#">
546 | 													Upper West Side New York
547 | 												</a>
548 | 											</h3>
549 | 										</div>
550 | 									</div>
551 | 								</div>
552 | 								<div class="column">
553 | 									<div class="card rb-card">
554 | 										<div class="card-image">
555 | 											<figure class="image is-16by9">
556 | 												<img src="https://via.placeholder.com/640x360" alt="Downtown Dallas rentals">
557 | 											</figure>
558 | 										</div>
559 | 										<div class="card-content">
560 | 											<h3 class="title is-size-7">
561 | 												<a href="#">
562 | 													Downtown Dallas, TX
563 | 												</a>
564 | 											</h3>
565 | 										</div>
566 | 									</div>
567 | 								</div>
568 | 								<div class="column">
569 | 									<div class="card rb-card">
570 | 										<div class="card-image">
571 | 											<figure class="image is-16by9">
572 | 												<img src="https://via.placeholder.com/640x360" alt="Lincoln Park Chicago rentals">
573 | 											</figure>
574 | 										</div>
575 | 										<div class="card-content">
576 | 											<h3 class="title is-size-7">
577 | 												<a href="#">
578 | 													Lincoln Park Chicago, IL
579 | 												</a>
580 | 											</h3>
581 | 										</div>
582 | 									</div>
583 | 								</div>
584 | 								<div class="column">
585 | 									<div class="card rb-card">
586 | 										<div class="card-image">
587 | 											<figure class="image is-16by9">
588 | 												<img src="https://via.placeholder.com/640x360" alt="Washington Square West Philadelphia rentals">
589 | 											</figure>
590 | 										</div>
591 | 										<div class="card-content">
592 | 											<h3 class="title is-size-7">
593 | 												<a href="#">
594 | 													Washington Sq. Philadelphia
595 | 												</a>
596 | 											</h3>
597 | 										</div>
598 | 									</div>
599 | 								</div>
600 | 							</div>
601 | 						</div>
602 | 					</div>
603 | 				</div>
604 | 			</div>
605 | 		</div>
606 | 	</section>
607 | 	<section class="hero is-medium is-light" >
608 | 		<div class="hero-body p-b-30">
609 | 			<div class="container">
610 | 				<div class="has-text-centered">
611 | 					<h2 class="subtitle">
612 | 						For landlords & property managers
613 | 					</h2>
614 | 					<h1 class="title">Want to Decrease Time on Market?</h1>
615 | 					<p class="m-t-30">
616 | 						<a href="https://github.com/aldi/awesome-bulma-templates" class="button is-medium is-shadowy is-primary">
617 | 							Learn more
618 | 						</a>
619 | 					</p>
620 | 					<div class="has-text-centered m-t-60">
621 | 						<img class="m-t-50" src="media/cartoon_city.png" alt="Find rentals">
622 | 					</div>
623 | 				</div>
624 | 			</div>
625 | 		</div>
626 | 	</section>
627 | 	<footer class="hero is-small is-light">
628 | 		<div class="hero-body">
629 | 			<div class="container has-text-centered">
630 | 				<a href="https://bulma.io">
631 | 					<img src="https://bulma.io/images/made-with-bulma.png" alt="Made with Bulma" width="171" height="32">
632 | 				</a>
633 | 				<div class="columns m-t-10">
634 | 					<div class="column">
635 | 						<nav class="has-text-grey-light">
636 | 							<a href="#" class="has-text-primary">About us</a> &bullet;
637 | 							<a href="#" class="has-text-primary">Our story</a> &bullet;
638 | 							<a href="#" class="has-text-primary">Post a listing</a> &bullet;
639 | 							<a href="#" class="has-text-primary">Contact us</a> &bullet;
640 | 						</nav>
641 | 					</div>
642 | 				</div>
643 | 				<div class="b-t m-t-30 p-t-30 has-text-grey-light is-size-7">
644 | 					Rent Template 2020 &copy; Aldi Duzha <br> <a href="#" class="has-text-primary">Terms of use</a> and <a class="has-text-primary" href="#">Privacy policy</a>.
645 | 					<a href="#" class="has-text-primary">Fair Housing</a>
646 | 				</div>
647 | 			</div>
648 | 		</div>
649 | 	</footer>
650 | </div>
651 | <script>
652 | 	document.addEventListener('DOMContentLoaded', () => {
653 |         // Get all "navbar-burger" elements
654 |         const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
655 |         // Check if there are any navbar burgers
656 |         if ($navbarBurgers.length > 0) {
657 |             // Add a click event on each of them
658 |             $navbarBurgers.forEach( el => {
659 |             	el.addEventListener('click', () => {
660 |                     // Get the target from the "data-target" attribute
661 |                     const target = el.dataset.target;
662 |                     const $target = document.getElementById(target);
663 |                     // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
664 |                     el.classList.toggle('is-active');
665 |                     $target.classList.toggle('is-active');
666 |                 });
667 |             });
668 |         }
669 |     });
670 | </script>
671 | </body>
672 | </html>
673 | 


--------------------------------------------------------------------------------