Reviews Page

It is my pleasure to recommend Canada's Restoration Services and its CEO Darren Gradus.Mold removal

Geoff Cape

CEO, Evergreen Brickworks

I would like to thank Canada's Restoration Services for the excellent service they provided when I had a water damage in my home

Joni R

Unionville, ON

I highly recommend Darren and his staff and company

Joseph Mapa

President of Mount Sinai Hospital, Toronto

I had turned to Canada's Restoration Services to take on a full mould remediation for a house that was used for a Grow Op

Linda W

Richmond Hill, writing about Water Damage

PHP

<?php
	$reviews = array(
		array('name'=>'Geoff Cape','position'=>'CEO, Evergreen Brickworks','value'=>'It is my pleasure to recommend Canada\'s Restoration Services and its CEO Darren Gradus.Mold removal'),
		array('name'=>'Joni R','position'=>'Unionville, ON','value'=>'I would like to thank Canada\'s Restoration Services for the excellent service they provided when I had a water damage in my home'),
		array('name'=>'Joseph Mapa','position'=>'President of Mount Sinai Hospital, Toronto','value'=>'I highly recommend Darren and his staff and company'),
		array('name'=>'Linda W','position'=>'Richmond Hill, writing about Water Damage','value'=>'I had turned to Canada\'s Restoration Services to take on a full mould remediation for a house that was used for a Grow Op')
	);
?>
	
<section class="reviews_page">
	<div class="wrapper">
		<div class="reviews_block_wrap">
			<?php foreach ($reviews as $item): ?>
                <div class="review_block">
                    <div class="desc">
                        <img src="/img/quote.png" class="quote" alt="quote">
                        <p><?= $item['value'] ?></p>
                    </div>
                    <div class="name_wrap">
                        <div class="name">
                            <h3><?= $item['name']?></h3>
                            <span><?= $item['position'] ?></span>
                        </div>
                        <div class="stars">
                            <?php for ($i = 0; $i < 5; $i++) :?>
                                <div class="star"></div>
                            <?php endfor ;?>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
		</div>
	</div>
</section>

CSS

.reviews_page .wrapper{padding:0 3.5rem}
.reviews_page .reviews_block_wrap{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;font-size:0;margin:0 -3.5rem}
.reviews_page .review_block{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-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;width:-webkit-calc(100% / 2 - 7.01rem);width:-moz-calc(100% / 2 - 7.01rem);width:calc(100% / 2 - 7.01rem);margin:3.5rem}
.reviews_page .review_block .desc{padding:3rem 4.4rem 3.5rem;background:#efefef;position:relative;height:100%}
.reviews_page .review_block .desc::after{content:"";width:0;height:0;position:absolute;left:0;bottom:-2.6rem;border-left:0 solid transparent;border-top:2.8rem solid #efefef;border-right:2rem solid transparent}
.reviews_page .review_block .desc .quote{position:absolute;top:1.5rem;left:-2.8rem;width:3.9rem;height:3rem;-o-object-fit:contain;object-fit:contain;font-family:"object-fit: contain;\A	"}
.reviews_page .review_block .desc p{font-size:1.6rem;line-height:1.5;margin:1rem 0;font-style:italic}
.reviews_page .review_block .name_wrap{margin:1rem 0 0 2rem}
.reviews_page .review_block .name_wrap .name{display:inline-block;vertical-align:top;width:-webkit-calc(100% - 15.5rem);width:-moz-calc(100% - 15.5rem);width:calc(100% - 15.5rem);padding:0 1rem 0 0}
.reviews_page .review_block .name_wrap .name h3{font-size:2.2rem;line-height:1.5;font-weight:700;text-transform:uppercase;color:#e31e26}
.reviews_page .review_block .name_wrap .name span{font-size:1.6rem;line-height:1.2;text-transform:uppercase}
.reviews_page .review_block .name_wrap .stars{display:inline-block;vertical-align:top;max-width:15.5rem;width:15.5rem;margin:0;text-align:right}

@media only screen and (max-width: 1200px) {
	.reviews_page .wrapper{padding:0 2.5rem}
	.reviews_page .reviews_block_wrap{margin:0 -2.5rem}
	.reviews_page .review_block{width:-webkit-calc(100% / 2 - 5.01rem);width:-moz-calc(100% / 2 - 5.01rem);width:calc(100% / 2 - 5.01rem);margin:2.5rem}
	.reviews_page .review_block .desc{padding:1.5rem 3.5rem 2rem}
	.reviews_page .review_block .desc .quote{width:3rem;height:2.4rem;left:-.8rem}
	.reviews_page .review_block .name_wrap .name h3{font-size:1.8rem}
	.reviews_page .review_block .name_wrap .name span{font-size:1.4rem}
	.stars .star:after{font-size:2.7rem}
}

@media only screen and (max-width: 992px) {
	.reviews_page .review_block .desc p{font-size:1.4rem}
}

@media only screen and (max-width: 767px) {
	.reviews_page .review_block{width:-webkit-calc(100% / 1 - 5.01rem);width:-moz-calc(100% / 1 - 5.01rem);width:calc(100% / 1 - 5.01rem)}
}

@media only screen and (max-width: 400px) {
	.reviews_page .review_block .name_wrap .name{display:block;width:100%;padding:0;margin:0 0 .2rem}
	.reviews_page .review_block .name_wrap .stars{display:block;max-width:100%;width:100%;text-align:left}
}

SCSS

.reviews_page {

	.wrapper {
		padding: 0 3.5rem;
	}
	
	.reviews_block_wrap {
		display: flex;
		flex-wrap: wrap;
		font-size: 0;
		margin: 0 -3.5rem;
	}
	
	.review_block {
		display: flex;
		flex-direction: column;
		width: calc(100% / 2 - 7.01rem);
		margin: 3.5rem;
		
		.desc {
			padding: 3rem 4.4rem 3.5rem;
			background: #efefef;
			position: relative;
			height: 100%;
			
			&::after {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				left: 0;
				bottom: -2.6rem;
				border-left: 0 solid transparent;
				border-top: 2.8rem solid #efefef;
				border-right: 2rem solid transparent;
			}
			
			.quote {
				position: absolute;
				top: 1.5rem;
				left: -2.8rem;
				width: 3.9rem;
				height: 3rem;
				object-fit: contain;
				font-family: "object-fit: contain;";
			}
			
			p {
				font-size: 1.6rem;
				line-height: 1.5;
				margin: 1rem 0;
				font-style: italic;
			}
		}
		
		.name_wrap {
			margin: 1rem 0 0 2rem;
			
			.name {
				display: inline-block;
				vertical-align: top;
				width: calc(100% - 15.5rem);
				padding: 0 1rem 0 0;
				
				h3 {
					font-size: 2.2rem;
					line-height: 1.5;
					font-weight: 700;
					text-transform: uppercase;
					color: #e31e26;
				}
			
				span {
					font-size: 1.6rem;
					line-height: 1.2;
					text-transform: uppercase;
				}
			}
			
			.stars {
				display: inline-block;
				vertical-align: top;
				max-width: 15.5rem;
				width: 15.5rem;
				margin: 0;
				text-align: right;
			}
		}
	}
}

@media only screen and (max-width: 1200px) {
	.reviews_page .wrapper {padding: 0 2.5rem;}
	.reviews_page .reviews_block_wrap {margin: 0 -2.5rem}
	.reviews_page .review_block {width: calc(100% / 2 - 5.01rem);margin:2.5rem;}
	.reviews_page .review_block .desc {padding: 1.5rem 3.5rem 2rem;}
	.reviews_page .review_block .desc .quote {width: 3rem;height: 2.4rem;left: -0.8rem;}
	.reviews_page .review_block .name_wrap .name h3 {font-size: 1.8rem;}
	.reviews_page .review_block .name_wrap .name span {font-size: 1.4rem;}
	.stars .star:after {font-size: 2.7rem;}
}

@media only screen and (max-width: 992px) {
	.reviews_page .review_block .desc p {font-size: 1.4rem;}
}

@media only screen and (max-width: 767px) {
	.reviews_page .review_block {width: calc(100% / 1 - 5.01rem);}
}

@media only screen and (max-width: 400px) {
	.reviews_page .review_block .name_wrap .name {display: block;width: 100%;padding: 0;margin: 0 0 .2rem;}
	.reviews_page .review_block .name_wrap .stars {display: block;max-width: 100%;width: 100%;text-align: left;}
}