Testimonials Page

What Our Clients Say

G & E, Oakville ON

Matthew conveyed knowledge and professionalism from the start. We had a vision for the bedroom, he listened, provided insight and laid out the project from start to finish. Updates were provided regularly and the work was completed as promised, on budget and finished only one day past the original completion date … which is probably more than “on time” in the industry given all the variables involved. We do not hesitate to recommend Rose Building Group and thank them for making our vision a reality.

Sarah Lancaster

We have had the pleasure of working with Rose Building Group on several projects, both professionally and personally. Matt is a highly qualified professional who strives to give his clients the best products and workmanship. He has a dedicated team of individuals who treat your home like it was their own. From framing our basement, to a complete bathroom renovation, Matt and his crew were a breath of fresh air when it came to dealing with trades. Always eager to help, communication was key on all aspects of the job. We were always in the loop with timelines and up to date on project management. If you want quality, honesty and a great project, Matt and his crew are the only guys we would recommend. We are so happy with the quality of the finished projects, I cannot wait to start something else with Rose Building Group to see what happens next! Sarah Bowden Flamborough

Debbie St Louis

We are thrilled with the results of Rose Building Group. Mr Rose was highly communicative, explaining each step and prepping us for upcoming stages throughout our major renovation. Every member of his team was professional, hard working, and completed work on schedule. What I especially appreciated was Mr Rose\’ was ability to work with us to manage our expectations during the renovations, his excellent attention to detail, and his presence/availability throughout the project. Excellent work with an excellent team.

PHP

<?php
	$testimonials = array(
		array('name'=>'G & E, Oakville ON','value'=>'Matthew conveyed knowledge and professionalism from the start. We had a vision for the bedroom, he listened, provided insight and laid out the project from start to finish. Updates were provided regularly and the work was completed as promised, on budget and finished only one day past the original completion date … which is probably more than “on time” in the industry given all the variables involved. We do not hesitate to recommend Rose Building Group and thank them for making our vision a reality.'),
		array('name'=>'Sarah Lancaster','value'=>'We have had the pleasure of working with Rose Building Group on several projects, both professionally and personally. Matt is a highly qualified professional who strives to give his clients the best products and workmanship. He has a dedicated team of individuals who treat your home like it was their own. From framing our basement, to a complete bathroom renovation, Matt and his crew were a breath of fresh air when it came to dealing with trades. Always eager to help, communication was key on all aspects of the job. We were always in the loop with timelines and up to date on project management. If you want quality, honesty and a great project, Matt and his crew are the only guys we would recommend. We are so happy with the quality of the finished projects, I cannot wait to start something else with Rose Building Group to see what happens next! Sarah Bowden Flamborough'),
		array('name'=>'Debbie St Louis','value'=>'We are thrilled with the results of Rose Building Group. Mr Rose was highly communicative, explaining each step and prepping us for upcoming stages throughout our major renovation. Every member of his team was professional, hard working, and completed work on schedule. What I especially appreciated was Mr Rose\’ was ability to work with us to manage our expectations during the renovations, his excellent attention to detail, and his presence/availability throughout the project. Excellent work with an excellent team.')
	);
?>
	
<section class="testimonials_page">
	<div class="wrapper">
		<div class="tc">
			<h1>What Our Clients Say</h1>
		</div>
		<div class="testimonials_wrap">
			<?php foreach ($testimonials as $item): ?>
			<div class="testimonial_item">
				<div class="testimonial_name"><p><?= $item['name'] ?></p>
					<div class="stars">
						<?php for ($i = 0; $i < 5; $i++) :?>
							<div class="star"></div>
						<?php endfor ;?>
					</div>
				</div>
				<div class="testimonial_desc || content">
					<p><?= $item['value'] ?></p>
				</div>
			</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>

CSS

.testimonials_page .testimonials_wrap{margin:7.3rem 0 4.9rem}
.testimonials_page .testimonial_item{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 6rem}
.testimonials_page .testimonial_item:last-child{margin:0}
.testimonials_page .testimonial_item .testimonial_name{width:20%;text-align:right;padding:0 4rem 0 0}
.testimonials_page .testimonial_item .testimonial_name p{font-size:2.6rem;line-height:1.2;font-weight:700;color:#57cbf5;text-align:right;max-width:80%;margin:1rem 0 1.1rem auto}
.testimonials_page .testimonial_item .testimonial_desc{width:80%;padding:1rem 0 1.3rem 10rem;border-left:.1rem solid #acacac;position:relative}
.testimonials_page .testimonial_item .testimonial_desc:after{content:'';position:absolute;top:1.6rem;left:3rem;display:block;width:4.1rem;height:3.7rem;background-image:url(/img/quote-grey.png);background-repeat:no-repeat;background-position:0 0;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain}
.testimonials_page .testimonial_item .testimonial_desc p,.testimonials_page .testimonial_item .testimonial_desc ul li{font-size:1.7rem}

@media only screen and (max-width: 1100px) {
	.testimonials_page .testimonials_wrap{margin:5rem 0}
	.testimonials_page .testimonial_item{margin:0 0 4rem}
	.testimonials_page .testimonial_item .testimonial_name p{font-size:2.4rem}
	.testimonials_page .testimonial_item .testimonial_name{padding:0 2.5rem 0 0}
	.testimonials_page .testimonial_item .testimonial_desc{padding:1rem 0 1.3rem 8rem}
	.testimonials_page .testimonial_item .testimonial_desc:after{left:2.4rem;width:3.5rem;height:3rem}
	.testimonials_page .testimonial_item .testimonial_desc p,.testimonials_page .testimonial_item .testimonial_desc ul li{font-size:1.5rem}
}

@media only screen and (max-width: 992px) {
	.testimonials_page .testimonials_wrap{margin:3.5rem 0}
	.testimonials_page .testimonial_item .testimonial_name{width:27%}
	.testimonials_page .testimonial_item .testimonial_desc{width:73%}
	.testimonials_page .testimonial_item .testimonial_name p{max-width:95%}
}

@media only screen and (max-width: 767px) {
	.testimonials_page .testimonial_item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:.1rem solid #acacac;margin:0 0 2rem;padding:0 0 2.6rem}
	.testimonials_page .testimonial_item:last-child{border-bottom:0;padding:0 0 2rem}
	.testimonials_page .testimonial_item .testimonial_name{text-align:center;width:100%;padding:0 0 1rem}
	.testimonials_page .testimonial_item .testimonial_name p{text-align:center;max-width:100%;margin:0 0 1rem}
	.testimonials_page .testimonial_item .stars{margin:0 auto 1rem}
	.testimonials_page .testimonial_item .testimonial_desc{width:100%;padding:4rem 0 0;border-left:none;text-align:center}
	.testimonials_page .testimonial_item .testimonial_desc:after{content:'';position:absolute;top:0;left:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}
}

SCSS

.testimonials_page {
	.testimonials_wrap {
		margin: 7.3rem 0 4.9rem;
	}
	
	.testimonial_item {
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 6rem;
		
		&:last-child {
			margin: 0;
		}
		
		.testimonial_name {
			width: 20%;
			text-align: right;
			padding: 0 4rem 0 0;
			
			p {
				font-size: 2.6rem;
				line-height: 1.2;
				font-weight: 700;
				color: #57cbf5;
				text-align: right;
				max-width: 80%;
				margin: 1rem 0 1.1rem auto;
			}
		}
		
		.testimonial_desc {
			width: 80%;
			padding: 1rem 0 1.3rem 10rem;
			border-left: .1rem solid #acacac;
			position: relative;
			
			&:after {
				content: '';
				position: absolute;
				top: 1.6rem;
				left: 3rem;
				display: block;
				width: 4.1rem;
				height: 3.7rem;
				background-image: url("/img/quote-grey.png");
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: contain;
			}
			
			p, ul li {
				font-size: 1.7rem;
			}
		}
	}
}

@media only screen and (max-width: 1100px) {
	.testimonials_page .testimonials_wrap {margin: 5rem 0;}
	.testimonials_page .testimonial_item {margin: 0 0 4rem;}
	.testimonials_page .testimonial_item .testimonial_name p {font-size: 2.4rem;}
	.testimonials_page .testimonial_item .testimonial_name {padding: 0 2.5rem 0 0;}
	.testimonials_page .testimonial_item .testimonial_desc {padding: 1rem 0 1.3rem 8rem;}
	.testimonials_page .testimonial_item .testimonial_desc:after {left: 2.4rem;width: 3.5rem;height: 3rem;}
	.testimonials_page .testimonial_item .testimonial_desc p, .testimonials_page .testimonial_item .testimonial_desc ul li {font-size: 1.5rem;}
}

@media only screen and (max-width: 992px) {
	.testimonials_page .testimonials_wrap {margin: 3.5rem 0;}
	.testimonials_page .testimonial_item .testimonial_name {width: 27%;}
	.testimonials_page .testimonial_item .testimonial_desc {width: 73%;}
	.testimonials_page .testimonial_item .testimonial_name p {max-width: 95%;}
}

@media only screen and (max-width: 767px) {
	.testimonials_page .testimonial_item {flex-direction: column;align-items: center;border-bottom: .1rem solid #acacac;margin: 0 0 2rem;padding: 0 0 2.6rem}
	.testimonials_page .testimonial_item:last-child {border-bottom: 0;padding: 0 0 2rem}
	.testimonials_page .testimonial_item .testimonial_name {text-align:center;width: 100%;padding: 0 0 1rem;}
	.testimonials_page .testimonial_item .testimonial_name p {text-align:center;max-width: 100%;margin: 0 0 1rem;}
	.testimonials_page .testimonial_item .stars {margin: 0 auto 1rem;}
	.testimonials_page .testimonial_item .testimonial_desc {width: 100%;padding: 4rem 0 0;border-left: none;text-align: center}
	.testimonials_page .testimonial_item .testimonial_desc:after {content: '';position: absolute;top: 0;left: 50%;transform: translate(-50%, 0);}
}