Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Add Icon Boxes to Your Homepage Slider

Spice up your website's branding cohesion with simple icon boxes with a homepage slider.

While your website's main hero or slider section is ideal to present your organization's initial branding, navigation elements can help brand your website more. A select list of quick links underneath provide greater navigational options to your users. Combined with choice icons, you can further extend your branding in a concise design space.

Here's how to add icon boxes to your homepage slider:

HTML

<div class="container">
	<div class="row">
		<div class="col-sm-12">
		  <p class="mt-3 mb-0">
		  <img src="https://raw.githubusercontent.com/solodev/icon-boxes-under-hero/master/image1.png" class="img-fluid mx-auto d-block" alt="logo"/>
		  </p>
			<p class="text-center mb-3">Create websites beyond your imagination</p>
		</div>
	</div>
</div>
<section>
	<div class="bg-primary"><img src="https://raw.githubusercontent.com/solodev/icon-boxes-under-hero/master/image2.png" alt="" class="img-fluid mx-auto d-block "/></div>
</section>
<section class="boxes text-white">
	<div class="container">
		<div class="row text-center">
				<div class="col-sm-4 column">
					<div class="product">
						<div class="content">
							<p><i class="fa fa-rocket fa-3x" aria-hidden="true"></i></p>
							<h2>Web Studio</h2>
						</div>
					</div>
				</div>
				<div class="col-sm-4 column">
					<div class="product">
						<div class="content">
							<p><i class="fa fa-globe fa-3x" aria-hidden="true"></i></p>
							<h2>Mobile Studio</h2>
						</div>
					</div>
				</div>
				<div class="col-sm-4 column ">
					<div class="product">
						<div class="content">
							<p><i class="fa fa-heart fa-3x" aria-hidden="true"></i></p>
							<h2>API Studio</h2>
						</div>
					</div>
				</div>
		</div>
	</div>
</section>

CSS

Now to add the other stylistic elements of the icons themselves:

@import url('https://fonts.googleapis.com/css?family=Montserrat'); body{ font-family: 'Montserrat', sans-serif; } .slick-dotted.slick-slider { margin-bottom: 0px!important; } .slick-dots { bottom: 10px; } .boxes{ background:#202a35; } .product{ cursor:pointer; min-height:250px; display: table; width: 100%; float:left; } .product:hover { background-color: #0d1017; } .product:hover:active { background-color: #0d1017; } .content{ display: table-cell; width: 100%; vertical-align: middle; } .column{ padding-left:0px; padding-right:0px; } @media only screen and (max-width: 1199px) { .boxes .column { border: 1px solid #0d1017; } } .boxes .column + .column { border-left: 1px solid #0d1017; }

"Ain't they a beaut?" Not only was this tutorial a functional way to further brand your website, it's a genuinely appealing visual element. Be sure to adjust your browser window to see how the tutorial looks on various screen sizes.

Download from Github

Share on Facebook Tweet It