Code Pad : View video demo box with rounded list items

html

<div class="home-promo-box home-promo-box-col">
	<div class="grid-container">
		<div class="row grid-x grid-padding-x grid-margin-x">
			<div class="large-12 cell columns">
				<div class="home-promo-box-title">
					<span class="hpb-blue">Lorem </span><span class="hpb-gray"> ipsum</span>
				</div>
			</div>
			<div class="large-4 cell columns">
				<div class="home-promo-box-text">
					<h3>List Title</h3>
					<div class="why-link">
						<div class='why-icon'><i class="fas fa-lightbulb"></i></div> 
						<div class="why-text">Lorem ipsum dolor sit amet</div>
					</div>
					<div class="why-link">
						<div class='why-icon'><i class="fas fa-wrench"></i></div>
						<div class="why-text">Lorem ipsum dolor sit amet</div>
					</div>
					<div class="why-link">
						<div class='why-icon'><i class="fas fa-filter"></i></div> 
						<div class="why-text">Lorem ipsum dolor sit amet</div>
					</div>
					<div class="why-link">
						<div class='why-icon'><i class="fas fa-leaf"></i></div> 
						<div class="why-text">Lorem ipsum dolor sit amet</div>
					</div>
				</div>
			</div>
			<div class="large-8 cell columns">
				<iframe width="100%" height="350" src="https://www.youtube.com/embed/ScMzIvxBSi4?autoplay=1&controls=0&loop=1&rel=0&playlist=ScMzIvxBSi4" frameborder="0" allowfullscreen></iframe>
			</div>
		</div>
	</div>
</div>

css

@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
	font-family: "Open Sans", sans-serif;
}
.home-promo-box {
    text-align: center;
    padding: 30px 0px;
}
.home-promo-box h1 {
	font-family: "Montserrat", sans-serif;
}
.hpb-blue {
    color: #282a4d;
}
.hpb-gray {
    color: #1f929f;
}
.home-promo-box-title {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 40px;
    margin-bottom: 20px;
}
.why-text {
    height: 64px;
    text-align: left;
    padding-top: 7px;
    transition: all 0.3s;
}
.why-icon {
    transition: all 0.3s;
    color: #1f929f;
    display: block;
    font-size: 30px;
    border-radius: 64px;
    float: left;
    height: 64px;
    width: 64px;
    text-align: center;
    padding-top: 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    background: rgba(224, 252, 255, 0.81);
}
.why-link {
    text-align: left;
    clear: both;
    font-size: 16px;
    color: #fff;
    background: #1f929f;
    border-radius: 64px;
    height: 64px;
}
.home-promo-box-text h3 {
	color:#666;
}
.why-link:hover {
	transition: all 0.3s;
	padding-left:30px;
}
.why-link:hover .why-icon {
	transition: all 0.3s;
    float: right;
    margin-right: 0px;
}
.home-promo-box-col {
    background: rgba(31, 146, 159, 0.06);
}

js

scripts

video demo box with rounded list items

Code

Download & Run

Preview