index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <title>css framework</title>

		<link type="text/css" rel="stylesheet" href="./public/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="./public/css/main.css" />


        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="wrapper">
            <header id="header" class="main-header"></header>

            <main id="content" class="main-content">

                <section class="service">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12">
                                <h2 class="section-title">企業概要</h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4 col-xs-12">
                                <div class="service-block">
                                    <figure>
                                        <img class="service-image" src="./public/img/code-icon.png" alt="An awesome picture">
                                        <figcaption class="service-image-caption">業務システム開発</figcaption>
                                    </figure>
                                    <p class="service-text">ITシステムを企画から設計・開発及び保守まで一貫し
                                        てサポートします。 詳細ページ</p>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="service-block">
                                    <figure>
                                        <img class="service-image" src="./public/img/geo-icon.png" alt="An awesome picture">
                                        <figcaption class="service-image-caption">Globalアウトソーシング</figcaption>
                                    </figure>
                                    <p class="service-text">Global的な業務を支えるIT技術から一般業務ま
                                        で一貫してサポートします。詳細ページ</p>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="service-block">
                                    <figure>
                                        <img class="service-image" src="./public/img/book-icon.png" alt="An awesome picture">
                                        <figcaption class="service-image-caption">コミックサービス</figcaption>
                                    </figure>
                                    <p class="service-text">2016年、夏GRAND OPEN予定 詳細ページ</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="employees">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6">
                                <div class="employees-block">
                                    <p class="employees-title">YOUTUBE</p>
                                    <video class="employees-video hidden" controls>
                                        <source src="https://youtu.be" type="video/mp4">
                                    </video>
                                    <iframe class="employees-video" src="http://www.youtube.com">
                                    </iframe>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                <div class="employees-block">
                                    <p class="employees-title">社員の一言</p>
                                    <figure>
                                        <img class="employees-image" src="./public/img/employees-img.jpg" alt="An awesome picture">
                                        <figcaption class="employees-image-caption">
                                            <p class="employees-image-title">株式会社ネクスチャーは？」について社員より一言を申し上げます。</p>
                                            <p class="employees-image-more">社員の一言</p>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

            </main>

            <footer id="footer" class="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-3 col-xs-12">
                            <div class="footer-col">
                                <p class="footer-col-title">COMPANY</p>
                                <ul class="footer-list">
                                    <li class="footer-list-item">〒101-0033</li>
                                    <li class="footer-list-item">東京都千代田区神田岩本町4-5</li>
                                    <li class="footer-list-item">都築ビル4階</li>
                                    <li class="footer-list-item">TEL. 03-5652-9565</li>
                                    <li class="footer-list-item">FAX. 03-5652-9565</li>
                                </ul>
                            </div>
                        </div>

                        <div class="col-sm-3 col-xs-12">
                            <div class="footer-col">
                                <p class="footer-col-title">SERVICE</p>
                                <ul class="footer-list">
                                    <li class="footer-list-item">システム開発</li>
                                    <li class="footer-list-item">Global アウトソーシング</li>
                                    <li class="footer-list-item">コミック事業</li>
                                </ul>
                            </div>
                        </div>

                        <div class="col-sm-3 col-xs-12">
                            <div class="footer-col">
                                <p class="footer-col-title">SNS</p>
                                <img src="./public/img/sns-img.jpg" alt="sns-img" />
                            </div>
                        </div>
                        <div class="col-sm-3 col-xs-12">
                            <div class="footer-col">
                                <p class="footer-col-title">SITE MAP</p>
                                <ul class="footer-list">
                                    <li class="footer-list-item">トップページ</li>
                                    <li class="footer-list-item">会社情報</li>
                                    <li class="footer-list-item">ニュース
                                        <ul class="footer-sub-list footer-list">
                                            <li class="footer-list-item">業務システム開発</li>
                                            <li class="footer-list-item">Global アウトソーシング</li>
                                            <li class="footer-list-item">コミック事業</li>
                                        </ul>
                                    </li>
                                    <li class="footer-list-item">トップページ</li>
                                    <li class="footer-list-item">会社情報</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                <p class="footer-bottom-txt">セキュリティポリシー</p>
                            </div>
                            <div class="col-xs-12 col-sm-8">
                                <p class="footer-bottom-copyright">Copyright By Nexture Inc. 2011 - 2015 All Rights Reserved</p>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        <script type="text/javascript" src="./public/js/main.js"></script>
        <script type="text/javascript" src="./public/js/libs/bootstrap.min.js"></script>
    </body>
</html>