Footer


Mention


Fixed "mobile phone" appears at @media only screen and (max-width: 992px). HTML can be found on this page in header. Dont forget to check styles.

PHP
<footer>
	<div class="wrapper">
		<div class="row_f">
			<div class="col_3 || col_md_6 || col_mobile">
				<p class="footer_title">Contact & Info</p>
				
				<address>
					<?php if (isset($CAddress) && !empty($CAddress)):?>
						<?php if (isset($CLink) && !empty($CLink)):?>
							<p class="location_link">
							<a href="<?= $CLink ?>" target="_blank">
								<?= svg('iconLocation6', '') ?>
								<?= $CAddress ?>
							</a>
						</p>
						<?php else :?>
							<p class="location_link">
								<?= svg('iconLocation6', '') ?>
								<?= $CAddress ?>
							</p>
						<?php endif;?>
					<?php endif;?>
					<?php if (isset($CPhone) && !empty($CPhone)):?>
						<p>
						<a href="tel:<?= $CPhone ?>">
							<?= svg('iconTel', '') ?>
							<?= $CPhone ?>
						</a>
					</p>
					<?php endif;?>
					
					<?php if (isset($CEmail) && !empty($CEmail)):?>
						<p>
						<a href="mailto:<?= $CEmail ?>">
							<?= svg('iconChat2', 'mail') ?>
							<?= $CEmail ?>
						</a>
					</p>
					<?php endif;?>
				</address>
				
				<div class="social">
					<?php if (isset($Cfacebook) && !empty($Cfacebook)): ?>
						<a href="<?= $Cfacebook ?>" target="_blank" class="social_block">
							<?= svg('iconFacebookC2','')?>
						</a>
					<?php endif; ?>
					
					<?php if (isset($Cinstagram) && !empty($Cinstagram)): ?>
						<a href="<?= $Cinstagram ?>" target="_blank" class="social_block">
							<img src="/img/instagram-c.svg" alt="instagram logo">
						</a>
					<?php endif; ?>
					
					<?php if (isset($Cgoogle) && !empty($Cgoogle)): ?>
						<a href="<?= $Cgoogle ?>" target="_blank" class="social_block">
							<?= svg('iconGoogleC','')?>
						</a>
					<?php endif; ?>
					
					<?php if (isset($Cyoutube) && !empty($Cyoutube)): ?>
						<a href="<?= $Cyoutube ?>" target="_blank" class="social_block">
							<?= svg('iconYtPlC','')?>
						</a>
					<?php endif; ?>
					
					<?php if (isset($Clinkedin) && !empty($Clinkedin)): ?>
						<a href="<?= $Clinkedin ?>" target="_blank" class="social_block">
							<?= svg('iconLinkedinC','')?>
						</a>
					<?php endif; ?>
					
					<?php if (isset($Ctwitter) && !empty($Ctwitter)): ?>
						<a href="<?= $Ctwitter ?>" target="_blank" class="social_block">
							<?= svg('iconTwitterC','')?>
						</a>
					<?php endif; ?>
				</div>
			</div>
			<div class="col_3 || col_md_6 || col_mobile">
				<p class="footer_title">Industries Served</p>
				<ul>
					<li><a href="#">Landscapers</a></li>
					<li><a href="#">Contractors</a></li>
					<li><a href="#">Commercial Developers</a></li>
					<li><a href="#">Residential Development</a></li>
					<li><a href="#">Retail</a></li>
				</ul>
			</div>
			<div class="col_3 || col_md_6 || col_mobile">
				<p class="footer_title">Recent Post</p>
				<div class="footer_blog">
					<p class="name"><a href="#">Everything You Need to Know About BUYING TURF WHOLESALE</a></p>
					<div class="desc">
						<p>No more hassle, commercial lawn maintenance, or heavy costs with Turf Inc. Read on for everything you need to know about commercial artificial turf. Spend your time playing golf, instead of having to care for your grass</p>
					</div>
					<a href="#" class="button || small">read more</a>
				</div>
			</div>
			<div class="col_3 || col_md_6 || col_mobile">
				<p class="footer_title">Join Our Mailing List</p>
				<p class="mailing_heading">Enter your email to sign up</p>
				<form action="" method="POST" autocomplete="off" class="subscribe_form || validate_form" novalidate>
					<div class="form_item">
						<label>
							<input type="email" class="input || validate_email" placeholder="Email Address" autocomplete="off">
						</label>
					</div>
					
					<?php $check_id = isset($modal_name) ? 2 : 1; ?>
					<div class="form_item || validate_checkbox" data-action="mailer">
						<input type="checkbox" class="custom_checkbox" id="not_robot<?=$check_id?>" name="form[not_robot]">
						<label for="not_robot<?=$check_id?>">
							<span class="checkbox_design"><?= svg('iconCheckbox','') ?></span>
							<span class="checkbox_text">I'm not a robot</span>
						</label>
					</div>
					
					<button class="button || small">Submit</button>
				</form>
			</div>
		</div>
		<div class="footer_bottom">
			<div class="row_f">
				<div class="col_8 || col_sm_12">
					<p><?= date('Y') ?> All Rights Reserved. <br> Turf Inc. ©</p>
				</div>
				
				<div class="col_4 || col_sm_12 || development">
					<p>Web Development by <a href="https://www.xi-digital.com/" target="_blank">Xi Digital</a></p>
				</div>
			</div>
		</div>
	</div>
</footer>
CSS
footer{padding:4rem 0 0;background:#000;position:relative;z-index:3}
footer .footer_title{font-size:2.4rem;font-weight:700;color:#09a5be;margin:0 0 2rem;text-transform:capitalize}
footer address{margin:0 0 3rem}
footer address p{position:relative;padding:0 0 0 2.5rem}
footer address p.location_link{max-width:19rem}
footer address p .icon{position:absolute;top:.4rem;left:0;color:#fff}
footer address p .icon.mail{top:.4rem}
footer p{display:block;color:#fff;font:400 1.6rem/1.4 'Nunito Sans',sans-serif;margin:1rem 0}
footer a{display:inline-block;font:400 1.6rem/1.4 'Nunito Sans',sans-serif;color:#fff;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
footer br{display:none}
footer ul{position:relative;top:-.5rem}
footer ul li a{position:relative;padding:0 0 0 1rem;margin:.5rem 0}
footer ul li a::before{content:'';position:absolute;top:.7rem;left:0;display:block;width:0;height:0;border-top:.4rem solid transparent;border-left:.6rem solid #066978;border-bottom:.4rem solid transparent}
footer .footer_blog .name{margin:1rem 0 0;color:#fff}
footer .footer_blog .name a{font-weight:700}
footer .footer_blog .desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;margin-bottom:1.1rem}
footer form .form_item{margin:1.3rem 0 1rem}
footer form .input{color:#fff;border:.1rem solid #fff;background-color:transparent}
footer form .input::-webkit-input-placeholder{color:#fff}
footer form .input:-moz-placeholder{color:#fff}
footer form .input::-moz-placeholder{color:#fff}
footer form .input:-ms-input-placeholder{color:#fff}
footer form .input::-ms-input-placeholder{color:#fff}
footer form .input::placeholder{color:#fff}
footer form .custom_checkbox + label .checkbox_text{color:#fff}
footer form .button{margin:-.4rem 0 0}

.footer_bottom{padding:2rem 0 1.8rem;margin:3rem 0 0;border-top:.1rem solid #464646;position:relative;z-index:3}
.footer_bottom p,.footer_bottom a{font:500 1.5rem/1.4 'Nunito Sans',sans-serif;color:#fff}
.footer_bottom p{margin:.5rem 0}
.footer_bottom a{-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.footer_bottom .development{text-align:right}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	footer a:hover{color:#09a5be}
	.footer_bottom a:hover{color:#09a5be}
}

@media only screen and (max-width: 992px) {
	footer{padding:3.5rem 0 5.1rem}
	footer .footer_title{font-size:2.2rem;margin:0 0 1.5rem}
	footer .row_f .col_mobile{margin-bottom:3.5rem}
	footer form{max-width:22.7rem}
	.footer_bottom{margin:0}
}

@media only screen and (max-width: 767px) {
	.footer_bottom,.footer_bottom .development{text-align:center}
}

@media only screen and (max-width: 550px) {
	footer{text-align:center}
	footer .row_f [class*='col_']{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}
	footer address p{padding:0}
	footer address p.location_link{margin:1rem auto}
	footer address p .icon,footer address p .icon.mail{position:relative;top:-.1rem}
	footer .footer_blog{max-width:30rem;margin:0 auto}
	footer form{margin:0 auto}
}

@media only screen and (max-width: 450px) {
	footer{padding:3.5rem 0 3.7rem}
	footer br{display:block}
}
SCSS
/* Vars */
$font:      'Nunito Sans', sans-serif;
$main:      #09a5be;
$dark:      #066978;
$white:     #ffffff;
$footerBg:  #000000;

footer {
	padding: 4rem 0 0;
	background: $footerBg;
	position: relative;
	z-index: 3;
	
	.footer_title {
		font-size: 2.4rem;
		font-weight: 700;
		color: $main;
		margin: 0 0 2rem;
		text-transform: capitalize;
	}
	
	address {
		margin: 0 0 3rem;
		
		p {
			position: relative;
			padding: 0 0 0 2.5rem;
			
			&.location_link {
				max-width: 19rem;
			}
			
			.icon {
				position: absolute;
				top: 0.4rem;
				left: 0;
				color: $white;
				
				&.mail {
					top: 0.4rem;
				}
			}
		}
	}
	
	p {
		display: block;
		color: $white;
		font: 400 1.6rem/1.4 $font;
		margin: 1rem 0;
	}
	
	a {
		display: inline-block;
		font: 400 1.6rem/1.4 $font;
		color: $white;
		transition: 0.3s linear;
	}
	
	br {
		display: none;
	}
	
	ul {
		position: relative;
		top: -0.5rem;
		
		li {
			
			a {
				position: relative;
				padding:0 0 0 1rem;
				margin: .5rem 0;
				
				&::before {
					content: '';
					position: absolute;
					top: 0.7rem;
					left: 0;
					display: block;
					width: 0;
					height: 0;
					border-top: .4rem solid transparent;
					border-left: .6rem solid $dark;
					border-bottom: .4rem solid transparent;
				}
			}
		}
	}
	
	.footer_blog {
		
		.name {
			margin: 1rem 0 0;
			color: $white;
			
			a {
				font-weight: 700;
			}
			
		}
		
		.desc {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
			overflow: hidden;
			margin-bottom: 1.1rem;
		}
	}
	
	form {
		.form_item {
			margin: 1.3rem 0 1rem;
		}
		
		.input {
			color: $white;
			border: 0.1rem solid $white;
			background-color: transparent;
			
			&::placeholder {
				color: $white;
			}
		}
		
		.custom_checkbox + label .checkbox_text {
			color: $white;
		}
		
		.button {
			margin: -.4rem 0 0;
		}
	}
}

.footer_bottom {
	padding: 2rem 0 1.8rem;
	margin: 3rem 0 0;
	border-top: .1rem solid #464646;
	position: relative;
	z-index: 3;
	
	p, a {
		font: 500 1.5rem/1.4 $font;
		color: $white;
	}
	
	p {
		margin: .5rem 0;
	}
	
	a {
		transition: .3s linear;
	}
	
	.development {
		text-align: right;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	footer a:hover {color: $main}
	.footer_bottom a:hover {color: $main}
}

@media only screen and (max-width: 992px) {
	footer {padding: 3.5rem 0 5.1rem}
	footer .footer_title {font-size: 2.2rem;margin: 0 0 1.5rem}
	footer .row_f .col_mobile {margin-bottom: 3.5rem}
	footer form {max-width: 22.7rem}
	.footer_bottom {margin: 0}
}

@media only screen and (max-width: 767px) {
	.footer_bottom, .footer_bottom .development {text-align: center}
}

@media only screen and (max-width: 550px) {
	footer {text-align: center}
	footer .row_f [class*='col_'] {width: calc(100% / 1 - 3.01rem)}
	footer address p {padding: 0}
	footer address p.location_link {margin: 1rem auto}
	footer address p .icon, footer address p .icon.mail {position: relative;top: -0.1rem}
	footer .footer_blog {max-width: 30rem;margin: 0 auto}
	footer form {margin: 0 auto}
}

@media only screen and (max-width: 450px) {
	footer {padding: 3.5rem 0 3.7rem}
	footer br {display: block}
}

Please, enter a valid value