Process

Inquiry

No Commitment Required

Each project will have a detailed Scope of Work created for the client's specific requirements. To schedule your in home consultation, please fill out our online request form to begin this process.

We cannot wait to hear from you!

1

Site Visit

No Commitment Required

We will schedule you're first site inspection. During this inspection, we will review your renovation project details. This provides us the opportunity to view your project first hand. During this meeting measurements will be taken, options will be reviewed, and we will strive to bring your dreams to reality. Depending on the scale of the renovation, Plans / Drawings may be required.

2

Plans / Drawings

Commitment Required ($)

Our team of designers and architects will bring your project alive! Working with these individuals will help to plan your process, while ensuring the details meet your expectations. At this time we will also discuss building permits required to complete your renovation.

3

Scope of Work

No Commitment Required

Our transparent Scope of Work exceeds expectations. Providing detail, while allowing clients to understand everything included. Within this proposal, you will be provided with breakdown pricing. This is important for you to understand how we come up with our overall project total.

4

Design / Budget Review

No Commitment Required

We will review the Scope of Work provided. At this time, we will answer any questions you may have and discuss potential contingencies. If revisions are required, we provide one complimentary revision to adjust the Scope of Work as needed.

5

Timeline with Pure CSS

Article

PHP
<?php
	$process = array(
		array('name' => 'Inquiry', 'subtitle' => 'No Commitment Required', 'value' => '<p>Each project will have a detailed Scope of Work created for the client\'s specific requirements. To schedule your in home consultation, please fill out our online request form to begin this process.</p><p>We cannot wait to hear from you!</p>'),
		array('name' => 'Site Visit', 'subtitle' => 'No Commitment Required', 'value' => '<p>We will schedule you\'re first site inspection. During this inspection, we will review your renovation project details. This provides us the opportunity to view your project first hand. During this meeting measurements will be taken, options will be reviewed, and we will strive to bring your dreams to reality. <span style="color:#00ccff;"><em>Depending on the scale of the renovation, Plans / Drawings may be required.</em></span></p>'),
		array('name' => 'Plans / Drawings', 'subtitle' => 'Commitment Required ($)', 'value' => '<p>Our team of designers and architects will bring your project alive! Working with these individuals will help to plan your process, while ensuring the details meet your expectations. At this time we will also discuss building permits required to complete your renovation.</p>'),
		array('name' => 'Scope of Work', 'subtitle' => 'No Commitment Required', 'value' => '<p>Our transparent Scope of Work exceeds expectations. Providing detail, while allowing clients to understand everything included. Within this proposal, you will be provided with breakdown pricing. This is important for you to understand how we come up with our overall project total.</p>'),
		array('name' => 'Design / Budget Review', 'subtitle' => 'No Commitment Required', 'value' => '<p>We will review the Scope of Work provided. At this time, we will answer any questions you may have and discuss potential contingencies. If revisions are required, we provide one complimentary revision to adjust the Scope of Work as needed.</p>')
	);
?>
	
<section class="process_page">
	<div class="wrapper">
		<h1>Process</h1>
		<div class="process_wrap">
			<?php foreach ($process as $k=>$item): ?>
				<div class="process_item">
				<div class="desc">
					<h3><?= $item['name'] ?></h3>
					<p><b><?= $item['subtitle'] ?></b></p>
					<?= $item['value'] ?>
				</div>
				<div class="counting">
					<div class="circle">
						<span><?= $k+1 ?></span>
					</div>
				</div>
			</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>
CSS
.process_wrap{position:relative}
.process_wrap::after{content:"";display:block;width:.1rem;height:100%;background:#57cbf5;position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);z-index:1}
.process_item{position:relative}
.process_item .desc{width:-webkit-calc(50% - 11.3rem);width:-moz-calc(50% - 11.3rem);width:calc(50% - 11.3rem);padding:0 1rem 0 0}
.process_item .desc h3{font-size:2.4rem;font-weight:700;color:#57cbf5}
.process_item .desc p{font-size:1.7rem;max-width:92%;margin:0 0 0 auto}
.process_item .counting{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}
.process_item .counting::before,.process_item .counting::after{content:"";display:block;position:absolute;z-index:1}
.process_item .counting::before{top:-3.5rem;left:-3.6rem;width:3.5rem;height:3.5rem;-webkit-border-radius:3.5rem 0 0 0;-moz-border-radius:3.5rem 0 0;border-radius:3.5rem 0 0 0;background-color:#57cbf5}
.process_item .counting::after{top:-3.4rem;left:-3.5rem;width:3.4rem;height:3.4rem;-webkit-border-radius:3.4rem 0 0 0;-moz-border-radius:3.4rem 0 0;border-radius:3.4rem 0 0 0;background-color:#fff}
.process_item .counting .circle{border:.1rem solid #57cbf5;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;width:5.5rem;height:5.5rem;top:50%;left:50%;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}
.process_item .counting .circle::before,.process_item .counting .circle::after{content:"";position:absolute;top:50%;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);display:block;background-color:#57cbf5}
.process_item .counting .circle::before{right:12.8rem;width:1rem;height:1rem;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.process_item .counting .circle::after{right:4.3rem;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);width:8.5rem;height:.1rem}
.process_item .counting .circle span{background-color:#57cbf5;width:3.5rem;height:3.5rem;line-height:3.5rem;color:#fff;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;display:block;font-size:2.2rem;font-weight:700;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.process_item:nth-child(odd){text-align:right}
.process_item:nth-child(even) .desc{margin-left:auto;padding:0 0 0 1rem}
.process_item:nth-child(even) .desc p{margin:0 auto 0 0}
.process_item:nth-child(even) .counting::before,.process_item:nth-child(even) .counting::after{left:.1rem;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.process_item:nth-child(even) .counting::before{top:-3.5rem}
.process_item:nth-child(even) .counting::after{top:-3.4rem}
.process_item:nth-child(even) .counting .circle::before{right:-8.5rem}
.process_item:nth-child(even) .counting .circle::after{right:-7.5rem}

@media only screen and (max-width: 992px) {
	.process_wrap::after,.process_item .counting::before,.process_item .counting::after,.process_item .counting .circle::before,.process_item .counting .circle::after{display:none}
	.process_item{padding:0 0 0 7rem;margin:0 0 3rem}
	.process_item:last-child{margin:0}
	.process_item .desc,.process_item:nth-child(even) .desc{width:100%;padding:0}
	.process_item .counting{left:3rem;top:3.5rem;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
	.process_item:nth-child(odd){text-align:left}
	.process_item .desc p,.process_item:nth-child(even) .desc p{font-size:1.5rem;max-width:100%;margin:0}
}

@media only screen and (max-width: 450px) {
	.process_item{padding:6rem 0 0}
	.process_item,.process_item:nth-child(odd){text-align:center}
	.process_item .counting{left:50%;top:2.8rem;-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
.process_wrap {
	position: relative;
	
	&::after {
		content: "";
		display: block;
		width: .1rem;
		height: 100%;
		background: #57cbf5;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}
}

.process_item {
	position: relative;
	
	.desc {
		width: calc(50% - 11.3rem);
		padding: 0 1rem 0 0;
		
		h3 {
			font-size: 2.4rem;
			font-weight: 700;
			color: #57cbf5;
		}
		
		p {
			font-size: 1.7rem;
			max-width: 92%;
			margin: 0 0 0 auto;
		}
	}
	
	.counting {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		
		&::before, &::after {
			content: "";
			display: block;
			position: absolute;
			z-index: 1;
		}
		
		&::before {
			top: -3.5rem;
			left: -3.6rem;
			width: 3.5rem;
			height: 3.5rem;
			border-radius: 3.5rem 0 0 0;
			background-color: #57cbf5;
		}
		
		&::after {
			top: -3.4rem;
			left: -3.5rem;
			width: 3.4rem;
			height: 3.4rem;
			border-radius: 3.4rem 0 0 0;
			background-color: #fff;
		}
		
		.circle {
			border: .1rem solid #57cbf5;
			border-radius: 50%;
			width: 5.5rem;
			height: 5.5rem;
			top: 50%;
			left: 50%;
			position: absolute;
			transform: translate(-50%, -50%);
			z-index: 2;
			
			&::before, &::after {
				content: "";
				position: absolute;
				top: 50%;
				transform: translate(0, -50%);
				display: block;
				background-color: #57cbf5;
			}
			
			&::before {
				right: 12.8rem;
				width: 1rem;
				height: 1rem;
				border-radius: 50%;
			}
			
			&::after {
				right: 4.3rem;
				transform: translate(0, -50%);
				width: 8.5rem;
				height: .1rem;
			}
			
			span {
				background-color: #57cbf5;
				width: 3.5rem;
				height: 3.5rem;
				line-height: 3.5rem;
				color: #fff;
				border-radius: 50%;
				text-align: center;
				display: block;
				font-size: 2.2rem;
				font-weight: 700;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	
	&:nth-child(odd) {
		text-align: right;
	}
	
	&:nth-child(even) {
		.desc {
			margin-left: auto;
			padding: 0 0 0 1rem;
			
			p {
				margin: 0 auto 0 0;
			}
		}
		
		.counting {
			
			&::before, &::after {
				left: .1rem;
				transform: rotate(90deg);
			}
			
			&::before {
				top: -3.5rem;
			}
			
			&::after {
				top: -3.4rem;
			}
			
			.circle {
				&::before {
					right: -8.5rem;
				}
				
				&::after {
					right: -7.5rem;
				}
			}
		}
	}
}

@media only screen and (max-width: 992px) {
	.process_wrap::after, .process_item .counting::before, .process_item .counting::after, .process_item .counting .circle::before, .process_item .counting .circle::after {display: none;}
	.process_item {padding: 0 0 0 7rem; margin: 0 0 3rem}
	.process_item:last-child {margin: 0}
	.process_item .desc, .process_item:nth-child(even) .desc {width: 100%;padding: 0;}
	.process_item .counting {left: 3rem;top: 3.5rem;transform: translate(0, 0);}
	.process_item:nth-child(odd) {text-align: left;}
	.process_item .desc p, .process_item:nth-child(even) .desc p {font-size: 1.5rem;max-width: 100%;margin: 0;}
}

@media only screen and (max-width: 450px) {
	.process_item {padding: 6rem 0 0 0;}
	.process_item, .process_item:nth-child(odd) {text-align: center;}
	.process_item .counting {left: 50%;top: 2.8rem;transform: translate(-50%, 0);}
}