Main Content

Hero Banner 1

Close

HTML

<section id="hero">
	<div id="hero-style-1">
		<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
		<div class="hero-tagline">
			<div class="hero-content">
				<div class="container">
					<h2>Sample Heading</h2>
					<p>Sample Description</p>
					<a href="#">Learn More</a>			
				</div>				
			</div>
		</div>
	</div>	
</section>

CSS

#hero-style-1 {
    width: 100%;
    height: auto;
    position: relative;
}

	#hero-style-1:after {
	    display: block;
	    content: "";
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    background-color: rgba(0,0,0,.4);
	    top: 0;
	    z-index: 8;
	}
	#hero-style-1 canvas{
		display:block;
		width: 100%;
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
	}

	#hero-style-1 .hero-tagline{
		position:absolute;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		z-index:10;
		text-align:center;
	}
		#hero-style-1 .hero-tagline .hero-content{
			display: inline-block;
			vertical-align: middle;

		}
		#hero-style-1 .hero-tagline:after{
			content: "";
			height: 100%;
			width: 0;
			display: inline-block;
			vertical-align: middle;
		}

			#hero-style-1 .hero-tagline h2{
				color: #fff;
				font-size: 60px;
				font-weight: bold;
				line-height: 60px;
   			}

			#hero-style-1 .hero-tagline p{
				font-weight: 300;
				font-size: 40px;
				color: #fff;
			}
			#hero-style-1 .hero-tagline a{
				display: block;
				width: 100%;
				max-width: 311px;
				height: 67px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				background-color: #009bbb;
				text-transform: uppercase;
				font-size: 20px;
				color: #fff;
				text-decoration: none;
				line-height: 67px;
				letter-spacing: 2px;
				margin: 30px auto 0;
				text-align: center;
			}
				#hero-style-1 .hero-tagline a:hover{
					background: #07b4d8;
				}

@media only screen and (max-width: 992px) {

	#hero-style-1 .hero-tagline{
		position: relative;
		background: gray;
		padding: 50px 0;
	}
}

CSS Mobile

@media only screen and (max-width: 992px) {

	#hero-style-1 .hero-tagline{
		position: relative;
		background: gray;
		padding: 50px 0;
	}
}

Javascript

Copy

Sample Heading

Sample Description

Learn More

Hero Banner 2

Close

HTML

<section id="hero">
	<div id="hero-style-2">
		<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
		<div class="hero-tagline">
			<div class="hero-content">
				<div class="container">
					<h2>Sample Heading</h2>
					<p>Sample Description</p>
					<a href="#">Learn More</a>			
				</div>				
			</div>
		</div>
	</div>	
</section>

CSS

#hero-style-2 {
    width: 100%;
    height: auto;
    position: relative;
}

	#hero-style-2:after {
	    display: block;
	    content: "";
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    background-color: rgba(0,0,0,.4);
	    top: 0;
	    z-index: 8;
	}
	#hero-style-2 canvas{
		display:block;
		width: 100%;
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
	}

	#hero-style-2 .hero-tagline{
		position:absolute;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		z-index:10;
		text-align:center;
	}
		#hero-style-2 .hero-tagline .hero-content{
			display: inline-block;
			vertical-align: middle;
			text-align: left;
		}
		#hero-style-2 .hero-tagline:after{
			content: "";
			height: 100%;
			width: 0;
			display: inline-block;
			vertical-align: middle;
		}

			#hero-style-2 .hero-tagline h2{
				color: #fff;
				font-size: 60px;
				font-weight: bold;
				line-height: 60px;
   			}

			#hero-style-2 .hero-tagline p{
				font-weight: 300;
				font-size: 40px;
				color: #fff;
			}
			#hero-style-2 .hero-tagline a{
				display: block;
				width: 100%;
				max-width: 311px;
				height: 67px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				background-color: #009bbb;
				text-transform: uppercase;
				font-size: 20px;
				color: #fff;
				text-decoration: none;
				line-height: 67px;
				letter-spacing: 2px;
				margin: 0;
				text-align: center;
				margin-top: 30px;
			}
				#hero-style-2 .hero-tagline a:hover{
					background: #07b4d8;
				}

CSS Mobile

@media only screen and (max-width: 992px) {

	#hero-style-2 .hero-tagline{
		position: relative;
		background: gray;
		padding: 50px 0;
	}
}

Javascript

Copy

Sample Heading

Sample Description

Learn More

Hero Banner 3

Close

HTML

<section id="hero">
	<div id="hero-style-3">
		<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
		<div class="hero-tagline">
			<div class="hero-content">
				<div class="container">
					<div class="row">
						<div class="col-md-6 hero-text">
							<div class="textwrap">
								<h2>Sample Heading</h2>
								<p>Sample Description</p>								
							</div>
						</div>

						<div class="col-md-4 pull-right hero-form">
							<div class="formwrap">
								<h3>Send a Message</h3>
								<form action="">
									<input type="text" placeholder="Name">
									<input type="email" placeholder="Email">
									<input type="tel" placeholder="Phone">
									<textarea placeholder="Message"></textarea>
									<input type="submit" value="submit">
								</form>
							</div>
						</div>
					</div>
		
				</div>				
			</div>
		</div>
	</div>	
</section>

CSS

#hero-style-3 {
    width: 100%;
    height: auto;
    position: relative;
}

	#hero-style-3:after {
	    display: block;
	    content: "";
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    background-color: rgba(0,0,0,.4);
	    top: 0;
	    z-index: 8;
	}
	#hero-style-3 canvas{
		display:block;
		width: 100%;
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
	}

	#hero-style-3 .hero-tagline{
		position:absolute;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		z-index:10;
		text-align:center;
	}
		#hero-style-3 .hero-tagline .hero-content{
			display: inline-block;
			vertical-align: middle;
			text-align: left;
		}
		#hero-style-3 .hero-tagline:after{
			content: "";
			height: 100%;
			width: 0;
			display: inline-block;
			vertical-align: middle;
		}


			
			#hero-style-3 .hero-text{

			}
				#hero-style-3 .hero-text:after{
					content: "";
					height: 100%;
					width: 0;
					display: inline-block;
					vertical-align: middle;					
				}
				#hero-style-3 .hero-text .textwrap{
					display: inline-block;
					vertical-align: middle;
				}
			#hero-style-3 .hero-tagline h2{
				color: #fff;
				font-size: 60px;
				font-weight: bold;
				line-height: 60px;
   			}

			#hero-style-3 .hero-tagline p{
				font-weight: 300;
				font-size: 40px;
				color: #fff;
			}
			#hero-style-3 .hero-tagline a{
				display: block;
				width: 100%;
				max-width: 311px;
				height: 67px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				background-color: #009bbb;
				text-transform: uppercase;
				font-size: 20px;
				color: #fff;
				text-decoration: none;
				line-height: 67px;
				letter-spacing: 2px;
				margin: 0;
				text-align: center;
				margin-top: 30px;
			}
				#hero-style-3 .hero-tagline a:hover{
					background: #07b4d8;
				}
	#hero-style-3 .hero-form{
	}
		#hero-style-3 .hero-form .formwrap{
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			background-color: rgba(255,255,255,.9);
		    padding: 10%;
		}

		#hero-style-3 .hero-form h3{
			color: #009bbb;
			text-align: center;
			font-size: 20px;
			text-transform: uppercase;
		    padding-bottom: 20px;
		}

		#hero-style-3 .hero-form input[type="text"],
		#hero-style-3 .hero-form input[type="email"],
		#hero-style-3 .hero-form input[type="tel"]{
			display: block;
			width: 100%;
			height: 37px;
			background-color: #fff;
			border: none;
			outline: none;
			font-size: 12px;
			color: #a2a2a2;
			padding: 10px 10px;
			margin: 10px 0;
		}
		
		#hero-style-3 .hero-form textarea{
			display: block;
			width: 100%;
			height: 67px;
			background-color: #fff;
			border: none;
			outline: none;
			font-size: 12px;
			color: #a2a2a2;
			padding: 10px 10px;
			margin: 10px 0;			
		}

		#hero-style-3 .hero-form input[type="submit"]{
			height: 37px;
			border:none;
			background-color: #009bbb;
			width: 100%;
			text-transform: uppercase;
			text-align: center;
			color: #fff;
			font-size: 12px;
		}

CSS Mobile

@media only screen and (max-width: 992px) {

	#hero-style-3 .hero-tagline{
		position: relative;
		background: gray;
		padding: 50px 0;
	}

	#hero-style-3 .hero-form {
	    float: none !important;
	    margin-top: 40px;
	}
}

Javascript

jQuery(document).ready(function(){

	function banner_height(){
		jQuery("#hero-style-3 .hero-text, #hero-style-3 .hero-form").chainHeight({
		    breakpoints: [
		        {
		           
				    min: 1024,
				    max: 1920
		        }
		    ]
		});		
	}
	banner_height();

	jQuery(window).on('resize', function(){
		banner_height()
	})


});
Copy

Sample Heading

Sample Description

Send a Message

Close

HTML

<section id="hero">
	<div id="hero-style-4">
		<div class="slideshow">
			<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
			<div class="hero-tagline">
				<div class="hero-content">
					<div class="container">
						<h2>Sample Heading</h2>
						<p>Sample Description</p>
					</div>				
				</div>
			</div>			
		</div>

		<div class="hero-form">
			<h2>get in touch</h2>
			<form action="">
				<div class="form-col">
					<input type="text" placeholder="Name">
					<input type="email" placeholder="Email">
				</div>
				<textarea placeholder="Message"></textarea>
				<input type="submit" value="submit">
			</form>
		</div>
	</div>	
</section>

CSS

#hero-style-4 {
    width: 100%;
    height: auto;
    position: relative;
}
	#hero-style-4 .slideshow{
		position: relative;
	}
		#hero-style-4 .slideshow:after {
		    display: block;
		    content: "";
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    left: 0;
		    background-color: rgba(0,0,0,.4);
		    top: 0;
		    z-index: 8;
		}
		#hero-style-4 canvas{
			display:block;
			width: 100%;
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;
		}

	#hero-style-4 .hero-tagline{
		position:absolute;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		z-index:10;
		text-align:center;
	}
		#hero-style-4 .hero-tagline .hero-content{
			display: inline-block;
			vertical-align: middle;
		}
		#hero-style-4 .hero-tagline:after{
			content: "";
			height: 100%;
			width: 0;
			display: inline-block;
			vertical-align: middle;
		}

			#hero-style-4 .hero-tagline h2{
				color: #fff;
				font-size: 60px;
				font-weight: bold;
				line-height: 60px;
   			}

			#hero-style-4 .hero-tagline p{
				font-weight: 300;
				font-size: 40px;
				color: #fff;
			}
			#hero-style-4 .hero-tagline a{
				display: block;
				width: 100%;
				max-width: 311px;
				height: 67px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				background-color: #009bbb;
				text-transform: uppercase;
				font-size: 20px;
				color: #fff;
				text-decoration: none;
				line-height: 67px;
				letter-spacing: 2px;
				margin: 0 auto;
				margin-top: 30px;
			}
				#hero-style-4 .hero-tagline a:hover{
					background: #07b4d8;
				}

	#hero-style-4 .hero-form{
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		background-color: #009bbb;
		width: 80%;
		margin: -150px auto 0;
		height: auto;
		min-height: 302px;
		max-width: 940px;
		position: relative;
		z-index: 11;
		padding: 0 3%;
	}
		#hero-style-4 .hero-form h2{
			color: #fff;
			font-size: 30px;
			font-weight:  700;
			text-align: center;
			text-transform: uppercase;
		    padding: 20px 0;
		}

		#hero-style-4 .hero-form .form-col{
			font-size: 0;
		}

			#hero-style-4 .hero-form .form-col input[type="text"],
			#hero-style-4 .hero-form .form-col input[type="email"]{
				width: 49.5%;
				height: 41px;
				background-color: #fff;
				margin-left: 1%;
				font-size: 12px;
				color: #a2a2a2;
				border: none;
				padding: 10px;
			}

			#hero-style-4 .hero-form .form-col input[type="text"]{
				margin-left: 0;
			}

			#hero-style-4 .hero-form textarea{
				width: 100%;
				height: 64px;
				background-color: #fff;
				font-size: 12px;
				color: #a2a2a2;
				border: none;
				padding: 10px;
				display: block;
			    margin-top: 10px;
			}

			#hero-style-4 .hero-form input[type="submit"]{
				width: 100%;
				max-width: 240px;
				height: 52px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				background-color: #fff;
				display: block;
				color: #009bbb;
				text-transform: uppercase;
				font-size: 20px;
				border: none;
				margin: 15px auto;
			}

CSS Mobile

@media only screen and (max-width: 992px) {

	#hero-style-4 .hero-tagline{
		position: relative;
		background: gray;
		padding: 50px 0;
	}
	#hero-style-4 .hero-form{
		margin:0;
		width: 100%;
		-webkit-border-radius:0;
		-moz-border-radius:0;
		border-radius: 0;
	}
}

Javascript

Copy

Sample Heading

Sample Description

get in touch

Close

HTML

<section id="hero">
	<div id="hero-style-5">
		<canvas width="1600" height="639" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/banner-sample.jpg);"></canvas>
		
		<div class="hero-tagline">
			<div class="container">
				<div class="row">
					<div class="hero-content col-md-4 pull-right">
						<div class="herowrap">
							<h2>Sample Heading</h2>
							<h3>Sample Description</h3>
							<p>The Perfect home in the perfect neighborhood.</p>
							<form action="">
								<input type="text" placeholder="Name">
								<input type="email" placeholder="Email">
								<input type="tel" placeholder="Phone">
								<textarea placeholder="Message"></textarea>
								<input type="submit" value="submit">
							</form>
						</div>
					</div>		
				</div>
			</div>

		</div>
	</div>	
</section>

CSS

#hero-style-5 {
    width: 100%;
    height: auto;
    position: relative;
}
	#hero-style-5 .slideshow{
		position: relative;
	}
		#hero-style-5 .slideshow:after {
		    display: block;
		    content: "";
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    left: 0;
		    background-color: rgba(0,0,0,.4);
		    top: 0;
		    z-index: 8;
		}
		#hero-style-5 canvas{
			display:block;
			width: 100%;
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;
		}

		#hero-style-5 .hero-tagline{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}

			#hero-style-5 .hero-content{
				background-color: rgba(0,155,187,.8);
			}

			#hero-style-5 .hero-content h2{
				color: #fff;
				font-size:30px;
				font-weight: 700;
     			padding-top: 60px;
			}
			#hero-style-5 .hero-content h3{
				color: #fff;
				font-size:18px;
				font-weight: 600;
			}
			#hero-style-5 .hero-content p{
				color: #fff;
				font-size: 18px;
				padding-top: 25px;
			}

			#hero-style-5 .hero-content form{
				display: block;
     			margin-top: 50px;
			}

			#hero-style-5 .hero-content input[type="text"],
			#hero-style-5 .hero-content input[type="email"],
			#hero-style-5 .hero-content input[type="tel"]{
				display: block;
				width: 100%;
				height: 37px;
				background-color: #fff;
				border: none;
				outline: none;
				font-size: 12px;
				color: #a2a2a2;
				padding: 10px 10px;
				margin: 10px 0;
			}

			#hero-style-5 .hero-content textarea{
				display: block;
				width: 100%;
				height: 67px;
				background-color: #fff;
				border: none;
				outline: none;
				font-size: 12px;
				color: #a2a2a2;
				padding: 10px 10px;
				margin: 10px 0;			
			}

			#hero-style-5 .hero-content input[type="submit"]{
				height: 37px;
				border:none;
				background-color: #009bbb;
				width: 100%;
				text-transform: uppercase;
				text-align: center;
				color: #fff;
				font-size: 12px;
			}

CSS Mobile

Javascript

jQuery(document).ready(function(){

	function banner_height(){
		jQuery("#hero-style-5, #hero-style-5 .hero-content").chainHeight({
		    breakpoints: [
		        {
		           
				    min: 1024,
				    max: 1920
		        }
		    ]
		});		
	}
	banner_height();

	jQuery(window).on('resize', function(){
		banner_height()
	})


});
Copy

Sample Heading

Sample Description

The Perfect home in the perfect neighborhood.

Visit Our Website

Support: 1.877.317.4111