index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Template RWD - sample1</title>
    </head>
    <body>
        <header>
            <nav class="container">
                <div class="row">
                    <img src="http://placehold.it/200x40" alt="logo">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">Pages</a>
                        </li>
                        <li>
                            <a href="#">Feature</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li>
                            <a href="#">Blog</a>
                        </li>
                        <li>
                            <a href="#">Other</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <main>
            <section class="hero">
                <div class="slogan">
                    <h1>
                        Here you can type<br>
                        your company<br>slogan                                        
                    </h1>
                </div>
            </section>
            <section class="container">
                <div class="row">
                    <div class="benefits col-4 col-s-12">
                        <i class="fa fa-flash"></i>
                        <h2>Research 1</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                    <div class="benefits col-4 col-s-12">
                        <i class="fa fa-laptop"></i>
                        <h2>Fully customizable 2</h2>
                        <p>sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                    <div class="benefits col-4 col-s-12">
                        <i class="fa fa-cogs"></i>
                        <h2>Work and work 3</h2>
                        <p>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </section>
            <section class="container">
                <div class="row">
                    <div class="featured-works col-12">
                        <h1>Featured works</h1>
                        <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </section>
            <section>
                <div class="row row-font0">
                    <div class="gallery col-2 col-m-4 col-s-6">
                        <img src="https://images.unsplash.com/photo-1510139773751-1a0219b89e9a?auto=format&fit=crop&w=254&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                    <div class="gallery col-2 col-m-4 col-s-6">
                        <img src="https://images.unsplash.com/1/macbook-air-all-faded-and-stuff.jpg?auto=format&fit=crop&w=254&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                    <div class="gallery col-2 col-m-4 col-s-6">
                        <img src="https://images.unsplash.com/reserve/RONyPwknRQOO3ag4xf3R_Kinsey.jpg?auto=format&fit=crop&w=254&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                    <div class="gallery col-2 col-m-4 col-s-6">
                        <img src="https://images.unsplash.com/photo-1505153726625-3b970a6dafd5?auto=format&fit=crop&w=254&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                    <div class="gallery col-4 col-m-8 col-s-12">
                        <img src="https://images.unsplash.com/photo-1510139773751-1a0219b89e9a?auto=format&fit=crop&w=508&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                </div>
                <div class="row row-font0">
                    <div class="gallery col-4 col-m-8 col-s-12">
                        <img src="https://images.unsplash.com/photo-1505153726625-3b970a6dafd5?auto=format&fit=crop&w=508&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                    <div class="gallery col-2 col-m-4 col-s-6">
                        <img src="https://images.unsplash.com/photo-1510139773751-1a0219b89e9a?auto=format&fit=crop&w=254&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                    <div class="gallery col-2 col-m-4 col-s-6">
                        <img src="https://images.unsplash.com/1/macbook-air-all-faded-and-stuff.jpg?auto=format&fit=crop&w=254&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                    <div class="gallery col-2 col-m-4 col-s-6">
                        <img src="https://images.unsplash.com/reserve/RONyPwknRQOO3ag4xf3R_Kinsey.jpg?auto=format&fit=crop&w=254&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                    <div class="gallery col-2 col-m-4 col-s-6">
                        <img src="https://images.unsplash.com/1/macbook-air-all-faded-and-stuff.jpg?auto=format&fit=crop&w=254&h=200" alt="photo">
                        <div class="layer">
                            <i class="fa fa-link"></i>
                            <i class="fa fa-search"></i>
                        </div>
                    </div>
                </div>
            </section>
            <section class="staff container">
                <div class="row">
                    <div class="col-3 col-m-6 col-s-12 staff-member">
                        <img src="https://placeimg.com/100/100/nature/grayscale" alt="photo">
                        <h3>Mile Nelson</h3>
                    </div>
                    <div class="col-3 col-m-6 col-s-12 staff-member">
                        <img src="https://placeimg.com/101/101/nature/grayscale" alt="photo">
                        <h3>Mary Collier</h3>
                    </div>
                    <div class="col-3 col-m-6 col-s-12 staff-member">
                        <img src="https://placeimg.com/102/102/nature/grayscale" alt="photo">
                        <h3>Stefan Morisson</h3>
                    </div>
                    <div class="col-3 col-m-6 col-s-12 staff-member">
                        <img src="https://placeimg.com/103/103/nature/grayscale" alt="photo">
                        <h3>Bill Smith</h3>
                    </div>
                </div>
            </section>
            <section class="advert">
                <div class="row container">
                    <div class="col-5">
                        <img src="http://www.pngmart.com/files/4/iPad-PNG-Transparent.png" alt="advertisement">
                    </div>
                    <div class="col-7">
                        <h2 class="advert-title">Some advert title</h2>
                        <div class="row">
                            <div class="col-7 col-s-12">
                                <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                            <div class="col-5 col-s-12">
                                <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="statistics">
                <div class="row container">
                    <div class="col-3 col-m-6 col-s-12">
                        <h1>481</h1>
                        <h2>Followers</h2>
                    </div>
                    <div class="col-3 col-m-6 col-s-12">
                        <h1>1990</h1>
                        <h2>Since</h2>
                    </div>
                    <div class="col-3 col-m-6 col-s-12">
                        <h1>807</h1>
                        <h2>Happy clients</h2>
                    </div>
                    <div class="col-3 col-m-6 col-s-12">
                        <h1>931</h1>
                        <h2>Projects</h2>
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <section class="company-info">
                <div class="row container">
                    <div class="col-4 col-m-12 col-s-12">
                        <h2>About us</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                    <div class="col-4 col-m-12 col-s-12">
                        <h2>Get in touch</h2>
                        <div class="row">
                            <div class="col-4">
                                <h3>Address:</h3>
                            </div>
                            <div class="col-8">
                                <p>66 South Street,<br>Window 6 Wonderland,</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <h3>Phone:</h3>
                            </div>
                            <div class="col-8">
                                <p>+440 875369208 - Office<br>+440 353363114 - Fax</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <h3>Email:</h3>
                            </div>
                            <div class="col-8">
                                <p>freepik@sitename.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-4 col-m-12 col-s-12">
                        <h2>Social media</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
                        <i class="fa fa-youtube"></i>
                        <i class="fa fa-google-plus"></i>
                        <i class="fa fa-facebook"></i>
                        <i class="fa fa-dribbble"></i>
                        <i class="fa fa-twitter"></i>
                        <i class="fa fa-instagram"></i>
                    </div>
                </div>
            </section>
            <section class="copyrights">
                <div class="row container">
                    <div class="col-12">
                        <p>Copyrights 2018</p>
                    </div>
                </div>
            </section>
        </footer>
    </body>
</html>