nakov/agency.css

## agency.css
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

.site-header, .site-footer, main section {
    border: 1px solid blue;
    margin: 10px;
}

.industries article {
    width: 300px;
    border: 1px solid green;
    margin: 10px;
    display: inline-block;
}

.benefits article {
    width: 300px;
    border: 1px solid green;
    margin: 10px;
    display: inline-block;
}

.site-footer section {
    width: 300px;
    border: 1px solid green;
    margin: 10px;
    display: inline-block;
}

## agency.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Consulting Agency</title>
    <link rel="stylesheet" href="agency.css">
</head>

<body>
    <header class="site-header">
        <nav class="top-navigation">
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">about us</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">cases</a></li>
                <li><a href="#">news</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">contacts</a></li>
            </ul>
        </nav>
        <section class="slider">
            <h1>video slider</h1>
            <p>Challenging established thinking,
                achieving sustainable advantage</p>
            <a href="#" class="slider-button">
                our services
            </a>
        </section>
    </header>
    <main>
        <section class="industries">
            <h1>Industries</h1>
            <article>
                <div class="icon">icon</div>
                <h2>Travel and Aviation Consulting</h2>
                <p>We are a company that offers design and
                    build services for you from initial
                    sketches to the final construction.</p>
            </article>
            <article>
                <div class="icon">icon</div>
                <h2>Business Services Consulting</h2>
                <p>The sector is diverse, including
                    professional services, education
                    and training, and support services
                    and outsourcing.</p>
            </article>
            <article>
                <div class="icon">icon</div>
                <h2>Consumer Products Consulting</h2>
                <p>We are a company that offers design
                    and build services for you from
                    initial sketches to the final
                    construction.</p>
            </article>
            <article>
                <div class="icon">icon</div>
                <h2>Financial Services Consulting</h2>
                <p>We are a company that offers design and
                    build services for you from initial
                    sketches to the final construction.</p>
            </article>
            <article>
                <div class="icon">icon</div>
                <h2>Energy and Environment Consulting</h2>
                <p>We are a company that offers design and
                    build services for you from initial
                    sketches to the final construction.</p>
            </article>
            <article>
                <div class="icon">icon</div>
                <h2>Surface Transport & Logistics Consultin</h2>
                <p>We are a company that offers design and
                    build services for you from initial
                    sketches to the final construction.</p>
            </article>
        </section>
        <section class="mission">
            <h1>
                <div class="accent">To help entrepreneurs
                    get their act together</div>
                before they talk to investors.
            </h1>
        </section>
        <section class="benefits">
            <h1>Why traders choose us</h1>
            <article>
                <h1>Raw Spreads</h1>
                <p>Receive premium pricing from
                    Top Tier financial institutions.
                    Pricing from Top Tier financial
                    institutions.</p>
            </article>
            <article>
                <h1>No Dealing Desk</h1>
                <p>With Consulting WP you’ll get
                    no re-quotes, no dealer intervention
                    and fair order execution.
                </p>
            </article>
            <article>
                <h1>State of the Art</h1>
                <p>Trade Forex and CFDs with the
                    world’s best trading platforms
                    on your desktop or mobile device.
                </p>
            </article>
        </section>
        <section class="testimonials">
            <article class="testimonial">
                <p class="text">
                    We were amazed by how little effort
                    was required on our part to have
                    Consulting WP prepare these materials.
                    We exchanged a few phone calls
                    and e-mails, and they… handled the rest.
                </p>
                <div class="author">
                    <div class="position">Founder & CEO,
                        Arcade Systems</div>
                    <div class="name">Amanda Seyfried</div>
                </div>
            </article>
        </section>
        <section class="partners">
            <ul>
                <li><a href="#"><img src="images/partner-arcade.png"
                                     height="75" width="151"/></a></li>
                <li><a href="#"><img src="images/partner-Edtech.png"
                                     height="86" width="162"/></a></li>
                <li><a href="#"><img src="images/partner-fast-brothers.png"
                                     height="96" width="180"/></a></li>
                <li><a href="#"><img src="images/partner-KPhone.png"
                                     height="62" width="156"/></a></li>
                <li><a href="#"><img src="images/partner-TVC.png"
                                     height="96" width="180"/></a></li>
                <li><a href="#"><img src="images/partner-Volker-Stevin.png"
                                     height="35" width="134"/></a></li>
            </ul>
        </section>
    </main>
    <footer class="site-footer">
        <section class="consulting">
            <h1>Consulting</h1>
            <p class="location">1010 Avenue of the
                Moon New York, NY 10018 US.</p>
            <p class="work-hours">Mon - Sat 8.00 - 18.00
                Sunday CLOSED</p>
            <p class="phone-number">212 386 5578
                Free call</p>
            <a href="#">
                <i class="fa fa-facebook"
                   aria-hidden="true"></i>
            </a>
            <a href="#">
                <i class="fa fa-twitter"
                   aria-hidden="true"></i>
            </a>
            <a href="#">
                <i class="fa fa-linkedin"
                   aria-hidden="true"></i>
            </a>
            <a href="#">
                <i class="fa fa-youtube"
                   aria-hidden="true"></i>
            </a>
        </section>
        <section class="extra-links">
            <h1>Extra Links</h1>
            <div class="first-column">
                <a href="#">About</a>
                <a href="#">Contacts</a>
                <a href="#">Typography</a>
                <a href="#">Careers</a>
                <a href="#">Shop</a>
                <a href="#">News</a>
            </div>
            <div class="second-column">
                <a href="#">Testimonials</a>
                <a href="#">Services</a>
                <a href="#">Our team</a>
                <a href="#">Our approach</a>
            </div>
        </section>
        <section class="instagram-widget">
            <h1>Instagram Widget</h1>
            <ul>
                <li><a href="#"><img
                        src="images/footer-widget(1).jpg"
                        height="150" width="150"/></a></li>
                <li><a href="#"><img
                        src="images/footer-widget(2).jpg"
                        height="150" width="150"/></a></li>
                <li><a href="#"><img
                        src="images/footer-widget(3).jpg"
                        height="150" width="150"/></a></li>
                <li><a href="#"><img
                        src="images/footer-widget(4).jpg"
                        height="150" width="150"/></a></li>
                <li><a href="#"><img
                        src="images/footer-widget(5).jpg"
                        height="150" width="150"/></a></li>
                <li><a href="#"><img
                        src="images/footer-widget(6).jpg"
                        height="150" width="150"/></a></li>
            </ul>
        </section>
    </footer>
</body>

</html>
	@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

	.site-header, .site-footer, main section {
	border: 1px solid blue;
	margin: 10px;
	}

	.industries article {
	width: 300px;
	border: 1px solid green;
	margin: 10px;
	display: inline-block;
	}

	.benefits article {
	width: 300px;
	border: 1px solid green;
	margin: 10px;
	display: inline-block;
	}

	.site-footer section {
	width: 300px;
	border: 1px solid green;
	margin: 10px;
	display: inline-block;
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Consulting Agency</title>
	<link rel="stylesheet" href="agency.css">
	</head>

	<body>
	<header class="site-header">
	<nav class="top-navigation">
	<ul>
	<li><a href="#">home</a></li>
	<li><a href="#">about us</a></li>
	<li><a href="#">services</a></li>
	<li><a href="#">cases</a></li>
	<li><a href="#">news</a></li>
	<li><a href="#">portfolio</a></li>
	<li><a href="#">contacts</a></li>
	</ul>
	</nav>
	<section class="slider">
	<h1>video slider</h1>
	<p>Challenging established thinking,
	achieving sustainable advantage</p>
	<a href="#" class="slider-button">
	our services
	</a>
	</section>
	</header>
	<main>
	<section class="industries">
	<h1>Industries</h1>
	<article>
	<div class="icon">icon</div>
	<h2>Travel and Aviation Consulting</h2>
	<p>We are a company that offers design and
	build services for you from initial
	sketches to the final construction.</p>
	</article>
	<article>
	<div class="icon">icon</div>
	<h2>Business Services Consulting</h2>
	<p>The sector is diverse, including
	professional services, education
	and training, and support services
	and outsourcing.</p>
	</article>
	<article>
	<div class="icon">icon</div>
	<h2>Consumer Products Consulting</h2>
	<p>We are a company that offers design
	and build services for you from
	initial sketches to the final
	construction.</p>
	</article>
	<article>
	<div class="icon">icon</div>
	<h2>Financial Services Consulting</h2>
	<p>We are a company that offers design and
	build services for you from initial
	sketches to the final construction.</p>
	</article>
	<article>
	<div class="icon">icon</div>
	<h2>Energy and Environment Consulting</h2>
	<p>We are a company that offers design and
	build services for you from initial
	sketches to the final construction.</p>
	</article>
	<article>
	<div class="icon">icon</div>
	<h2>Surface Transport & Logistics Consultin</h2>
	<p>We are a company that offers design and
	build services for you from initial
	sketches to the final construction.</p>
	</article>
	</section>
	<section class="mission">
	<h1>
	<div class="accent">To help entrepreneurs
	get their act together</div>
	before they talk to investors.
	</h1>
	</section>
	<section class="benefits">
	<h1>Why traders choose us</h1>
	<article>
	<h1>Raw Spreads</h1>
	<p>Receive premium pricing from
	Top Tier financial institutions.
	Pricing from Top Tier financial
	institutions.</p>
	</article>
	<article>
	<h1>No Dealing Desk</h1>
	<p>With Consulting WP you’ll get
	no re-quotes, no dealer intervention
	and fair order execution.
	</p>
	</article>
	<article>
	<h1>State of the Art</h1>
	<p>Trade Forex and CFDs with the
	world’s best trading platforms
	on your desktop or mobile device.
	</p>
	</article>
	</section>
	<section class="testimonials">
	<article class="testimonial">
	<p class="text">
	We were amazed by how little effort
	was required on our part to have
	Consulting WP prepare these materials.
	We exchanged a few phone calls
	and e-mails, and they… handled the rest.
	</p>
	<div class="author">
	<div class="position">Founder & CEO,
	Arcade Systems</div>
	<div class="name">Amanda Seyfried</div>
	</div>
	</article>
	</section>
	<section class="partners">
	<ul>
	<li><a href="#"><img src="images/partner-arcade.png"
	height="75" width="151"/></a></li>
	<li><a href="#"><img src="images/partner-Edtech.png"
	height="86" width="162"/></a></li>
	<li><a href="#"><img src="images/partner-fast-brothers.png"
	height="96" width="180"/></a></li>
	<li><a href="#"><img src="images/partner-KPhone.png"
	height="62" width="156"/></a></li>
	<li><a href="#"><img src="images/partner-TVC.png"
	height="96" width="180"/></a></li>
	<li><a href="#"><img src="images/partner-Volker-Stevin.png"
	height="35" width="134"/></a></li>
	</ul>
	</section>
	</main>
	<footer class="site-footer">
	<section class="consulting">
	<h1>Consulting</h1>
	<p class="location">1010 Avenue of the
	Moon New York, NY 10018 US.</p>
	<p class="work-hours">Mon - Sat 8.00 - 18.00
	Sunday CLOSED</p>
	<p class="phone-number">212 386 5578
	Free call</p>
	<a href="#">
	<i class="fa fa-facebook"
	aria-hidden="true"></i>
	</a>
	<a href="#">
	<i class="fa fa-twitter"
	aria-hidden="true"></i>
	</a>
	<a href="#">
	<i class="fa fa-linkedin"
	aria-hidden="true"></i>
	</a>
	<a href="#">
	<i class="fa fa-youtube"
	aria-hidden="true"></i>
	</a>
	</section>
	<section class="extra-links">
	<h1>Extra Links</h1>
	<div class="first-column">
	<a href="#">About</a>
	<a href="#">Contacts</a>
	<a href="#">Typography</a>
	<a href="#">Careers</a>
	<a href="#">Shop</a>
	<a href="#">News</a>
	</div>
	<div class="second-column">
	<a href="#">Testimonials</a>
	<a href="#">Services</a>
	<a href="#">Our team</a>
	<a href="#">Our approach</a>
	</div>
	</section>
	<section class="instagram-widget">
	<h1>Instagram Widget</h1>
	<ul>
	<li><a href="#"><img
	src="images/footer-widget(1).jpg"
	height="150" width="150"/></a></li>
	<li><a href="#"><img
	src="images/footer-widget(2).jpg"
	height="150" width="150"/></a></li>
	<li><a href="#"><img
	src="images/footer-widget(3).jpg"
	height="150" width="150"/></a></li>
	<li><a href="#"><img
	src="images/footer-widget(4).jpg"
	height="150" width="150"/></a></li>
	<li><a href="#"><img
	src="images/footer-widget(5).jpg"
	height="150" width="150"/></a></li>
	<li><a href="#"><img
	src="images/footer-widget(6).jpg"
	height="150" width="150"/></a></li>
	</ul>
	</section>
	</footer>
	</body>

	</html>