Services Page with Image, Description and More (Vertical)

Alt Text Here

Title 1

Sed mattis, quam tempus venenatis mattis, nisi eros vulputate ex, eu euismod mauris urna sed ligula. Donec facilisis iaculis mauris sit amet hendrerit. Sed quis bibendum dui, in blandit lorem.

Alt Text Here

Title 2

Sed mattis, quam tempus venenatis mattis, nisi eros vulputate ex.

eu euismod mauris urna sed ligula.

Alt Text Here

Title 3

Sed quis bibendum dui, in blandit lorem.

I’m calling this a Services Page, but it’s basically a page that lists an abreviated list that displays an image, a summary, and a call to action. You need one HTML/CSS block and add the information below. Just edit the image, image size (width="350" height="233") link, and description. In addition to changing the image size, you’ll need to edit the CSS width: 350px; to at least the same width of the images.

HTML


<div class="wrapper">

	<section class="section">
		<a href="link-here" class="section__image"><img src="image-1.jpg" alt="Alt Text Here" width="350" height="233" /></a>
		<div class="section__wrap">
			<h3 class="section__title">Title 1</h3>
			<div class="section__details"><p>Sed mattis, <a href="#">quam tempus venenatis</a> mattis, nisi eros vulputate ex, <strong>eu euismod mauris urna sed ligula</strong>. Donec facilisis iaculis mauris sit amet hendrerit. Sed quis bibendum dui, <em>in blandit</em> lorem.</p></div>
			<div class="section__button"><a href="#">Learn More »</a></div>
		</div>
	</section>

	<section class="section">
		<a href="link-here" class="section__image"><img src="image-2.jpg" alt="Alt Text Here" width="350" height="233" /></a>
		<div class="section__wrap">
			<h3 class="section__title">Title 2</h3>
			<div class="section__details">
				<p>Sed mattis, quam tempus venenatis mattis, nisi eros vulputate ex.</p>
				<p><strong>eu euismod</strong> mauris urna sed ligula.</p>
			</div>
			<div class="section__button"><a href="#">Learn More »</a></div>
		</div>
	</section>

	<section class="section">
		<a href="link-here" class="section__image"><img src="image-3.jpg" alt="Alt Text Here" width="350" height="233" /></a>
		<div class="section__wrap">
			<h3 class="section__title">Title 3</h3>
			<div class="section__details"><p>Sed quis bibendum dui, in blandit lorem.</p></div>
			<div class="section__button"><a href="#">Learn More »</a></div>
		</div>
	</section>

</div>

CSS


/**
* Services with Image, Description and See More Link
*****************************************************/
.wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.section {
	display: flex;
	flex-flow: column;
	max-width: 350px;
	margin: 0 auto 2rem;
	background: #f7f7f7;
	border: 1px solid #e3e3e3;
}

.section__image {margin: 0 auto;}

	.section__image:hover {opacity: .9;}

.section__wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem;
}

.section__title {
	font-size: 1.25rem;
	color: #000;
	margin-bottom: 1rem;
}

.section__details {
	flex-grow: 1;
	font-size: 1rem;
}

.section__button {
	display: inline-flex;
	justify-content: center;
}

	.section__button a {
		padding: 1rem 2rem;
		text-decoration: none;
		text-transform: uppercase;
		border: 1px solid #151515;
		background-color: #151515;
		color: #ccc;
	}

		.section__button a:hover {
			background-color: transparent;
			color: #151515;
		}

/* Transitions */
.section__image,
.section__button a {transition-duration: 0.4s;}
/* Services with Image, Description and See More Link End */

Powered by SmugMug Owner Log In