TwentySixteen Footer with Widgets

footer.php

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>

		</div><!-- .site-content -->

		<?php
		// Check if there are footer widgets.
		if ( is_active_sidebar( 'footer-1' ) or is_active_sidebar( 'footer-2' ) or is_active_sidebar( 'footer-3' ) or is_active_sidebar( 'footer-4' ) ) : ?>

			<div id="footer-widgets-wrap" class="footer-widgets-wrap">

				<div id="footer-widgets" class="footer-widgets"  role="complementary">

					<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>

						<div class="footer-widget-column widget-area">
							<?php dynamic_sidebar( 'footer-1' ); ?>
						</div>

					<?php endif; ?>

					<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>

						<div class="footer-widget-column widget-area">
							<?php dynamic_sidebar( 'footer-2' ); ?>
						</div>

					<?php endif; ?>

					<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>

						<div class="footer-widget-column widget-area">
							<?php dynamic_sidebar( 'footer-3' ); ?>
						</div>

					<?php endif; ?>

					<?php if ( is_active_sidebar( 'footer-4' ) ) : ?>

						<div class="footer-widget-column widget-area">
							<?php dynamic_sidebar( 'footer-4' ); ?>
						</div>

					<?php endif; ?>

				</div>

			</div>

		<?php endif; ?>
        
		<footer id="colophon" class="site-footer" role="contentinfo">
			<?php if ( has_nav_menu( 'primary' ) ) : ?>
				<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'primary',
							'menu_class'     => 'primary-menu',
						 ) );
					?>
				</nav><!-- .main-navigation -->
			<?php endif; ?>

			<?php if ( has_nav_menu( 'social' ) ) : ?>
				<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'social',
							'menu_class'     => 'social-links-menu',
							'depth'          => 1,
							'link_before'    => '<span class="screen-reader-text">',
							'link_after'     => '</span>',
						) );
					?>
				</nav><!-- .social-navigation -->
			<?php endif; ?>

			<div class="site-info">
				<?php
					/**
					 * Fires before the twentysixteen footer text for footer customization.
					 *
					 * @since Twenty Sixteen 1.0
					 */
					do_action( 'twentysixteen_credits' );
				?>
				<span class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
				<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentysixteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentysixteen' ), 'WordPress' ); ?></a>
			</div><!-- .site-info -->
		</footer><!-- .site-footer -->
	</div><!-- .site-inner -->
</div><!-- .site -->

<?php wp_footer(); ?>
</body>
</html>

Could you please share related code for style.css and function.php. Mine don't seem to work

footer.php
`

</div><!-- .site-content -->

<?php
		/* The footer widget area is triggered if any of the areas
		 * have widgets. So let's check that first.
		 *
		 * If none of the sidebars have widgets, then let's bail early.
		 */
	if (   ! is_active_sidebar( 'first-footer-widget-area'  )
			&& ! is_active_sidebar( 'second-footer-widget-area' )
			&& ! is_active_sidebar( 'third-footer-widget-area'  )
			&& ! is_active_sidebar( 'fourth-footer-widget-area' )
		)
    return;
	?>
	
		<?php 

			
					if (   is_active_sidebar( 'first-footer-widget-area'  )
				&& is_active_sidebar( 'second-footer-widget-area' )
				&& is_active_sidebar( 'third-footer-widget-area'  )
				&& is_active_sidebar( 'fourth-footer-widget-area' )
			) : ?>
	 
			<aside class="fatfooter" role="complementary">
				<div class="first quarter left widget-area">
					<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
				</div><!-- .first .widget-area -->
			 
				<div class="second quarter widget-area">
					<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
				</div><!-- .second .widget-area -->
			 
				<div class="third quarter widget-area">
					<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
				</div><!-- .third .widget-area -->
			 
				<div class="fourth quarter right widget-area">
					<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
				</div><!-- .fourth .widget-area -->
			</aside><!-- #fatfooter -->
	
	
	
		<?php 
			elseif ( is_active_sidebar( 'first-footer-widget-area'  )
				&& is_active_sidebar( 'second-footer-widget-area' )
				&& is_active_sidebar( 'third-footer-widget-area'  )
				&& ! is_active_sidebar( 'fourth-footer-widget-area' )
			) : ?>
			<aside class="fatfooter" role="complementary">
				<div class="first one-third left widget-area">
					<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
				</div><!-- .first .widget-area -->
			 
				<div class="second one-third widget-area">
					<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
				</div><!-- .second .widget-area -->
			 
				<div class="third one-third right widget-area">
					<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
				</div><!-- .third .widget-area -->

		</aside><!-- #fatfooter -->


			<?php
				elseif ( is_active_sidebar( 'first-footer-widget-area'  )
					&& is_active_sidebar( 'second-footer-widget-area' )
					&& ! is_active_sidebar( 'third-footer-widget-area'  )
					&& ! is_active_sidebar( 'fourth-footer-widget-area' )
				) : ?>
				<aside class="fatfooter" role="complementary">
					<div class="first half left widget-area">
						<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
					</div><!-- .first .widget-area -->
				 
					<div class="second half right widget-area">
						<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
					</div><!-- .second .widget-area -->
			 
			</aside><!-- #fatfooter -->
			
			
			
			<?php
				elseif ( is_active_sidebar( 'first-footer-widget-area'  )
					&& ! is_active_sidebar( 'second-footer-widget-area' )
					&& ! is_active_sidebar( 'third-footer-widget-area'  )
					&& ! is_active_sidebar( 'fourth-footer-widget-area' )
				) :
				?>
				<aside class="fatfooter" role="complementary">
					<div class="first full-width widget-area">
						<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
					</div><!-- .first .widget-area -->
				 
				</aside><!-- #fatfooter -->
				 
<!--end of all sidebar checks.-->

<?php endif;?>

'primary', 'menu_class' => 'primary-menu', ) ); ?>

		<?php if ( has_nav_menu( 'social' ) ) : ?>
			<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
				<?php
					wp_nav_menu( array(
						'theme_location' => 'social',
						'menu_class'     => 'social-links-menu',
						'depth'          => 1,
						'link_before'    => '<span class="screen-reader-text">',
						'link_after'     => '</span>',
					) );
				?>
			</nav><!-- .social-navigation -->
		<?php endif; ?>
		
		
	

		


		<div class="site-info">
			
			<span class="site-copyright">&copy 2017 Hoptimum Safety & Fire Slutions. All Rights Reserved.</span>
		
		</div><!-- .site-info -->
	</footer><!-- .site-footer -->
</div><!-- .site-inner -->

`
style.css

`
/* floats */
.quarter,
.one-third,
.two-thirds,
.half {
float: left;
}

/* widths */
.one-third {
width: 32%;
}
.two-thirds {
width: 65.5%;
}
.quarter {
width: 23.5%;
}
.three-quarters {
width: 74.5%;
}
.half {
width: 48%;
}

/* margins /
.one-third {
margin: 0 0.5%;
}
.quarter,
.two-thirds {
margin: 0 0.5%;
}
.left,
.quarter.left,
.one-third.left {
margin: 0 1% 0 0;
float: left;
}
.right,
.quarter.right,
.one-third.right {
margin: 0 0 0 1%;
float: right;
}
.half.left {
width: 48%;
margin: 0 2% 0 0;
}
.half.right {
width: 48%;
margin: 0 0 0 2%;
}
.two-thirds.left {
margin: 0 1% 0 0;
}
.two-thirds.right {
margin: 0 0 0 1%;
float: right;
}

/ media queries for larger screens such as small tablets in landscape or large tablets in portrait */
@media screen and ( max-width: 780px ) {

/* only the .quarter layout class is relevant here - all other classes will have full width */
.quarter {
    width: 48%;
}
.quarter.left {
    margin-right: 2%;
}
.quarter.right {
    margin-left: 2%;
}
footer .third.quarter.widget-area {
    clear: both;
}

}

/* media queries for small screens in landscape mode (or similar) */
@media screen and ( max-width: 600px ) {

/* width sizing all full width in small screens */
.quarter,
.one-third,
.half,
.two-thirds,
.three-quarters,
.full-width {
    width: 100%;
    margin: 0;
}
/* padding adjustments */
.widget-area {
    padding: 0 0 10px 0;
}

}
`
That gives me the following output http://hoptimumfire.com