pip-webui/pip-webui-css/samples/landing_components/info_block.html

HTML5 UI for LOB applications

<p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
    Info block
</p>

<div  class="pip-info-block layout-row layout-xs-column layout-align-center-center" >
    <div class="pip-content">
        <div class="pip-title pip-orange">ВЗАИМОСВЯЗи</div>
        <div class="pip-text">Достаточно отметить взаимосвязи между событиями, заметками, целями, планами и проектами. Стоит держать их в голове, пусть голова занята более важными мыслями.</div>
    </div>
    <div class="pip-content">
        <div class="pip-title pip-pink">ОБЩАЯ КАРТИНА</div>
        <div class="pip-text">Теперь есть возможность увидеть полную картину жизни и работы в одном месте.</div>
        <img src="http://mockups.pipdevs.com/Content/General/Landing_Page/images/landing_-_rus/u49.png"
            width="100%" class="tm16" ng-if="$mdMedia('gt-sm')">
    </div>
    <div class="pip-content">
        <div class="pip-title pip-blue">"БЕЛЫЕ" ПЯТНА ОЧЕВИДНЫ</div>
        <div class="pip-text">Любые накладки в планах, нестыковки стратегии и выполнения - становятся очевидными раньше чем они стали проблемой.</div>
    </div>
</div>

<div class="h48"></div>
<div  class="pip-info-block layout-row layout-xs-column layout-align-start-start" >
    <div class="pip-content">
        <img src="http://mockups.pipdevs.com/Content/General/Landing_Page/images/landing_-_rus/u500.png"
             height="160" width="160" class="bm16" >
        <div class="pip-title pip-blue">ГИБКАЯ СИСТЕМА НАСТРОЕК ДОСТУПА</div>
        <div class="pip-text">К каждой записи, цели, проекту и новости вы можете присвоить свой уровень приватности, а также предоставить конкретным людям возможность управлять ими.</div>
    </div>
    <div class="pip-content">
        <img src="http://mockups.pipdevs.com/Content/General/Landing_Page/images/landing_-_rus/u502.png"
             height="160" width="230" class="bm16" >
        <div class="pip-title pip-yellow">ПОЛНАЯ БЕЗОПАСТНОСТЬ ДАННЫХ</div>
        <div class="pip-text">Все ваши данные находятся в полной безопасности. Вы сами определяете настройки приватности и решаете, кто и что сможет увидеть.</div>
    </div>
    <div class="pip-content">
        <img src="http://mockups.pipdevs.com/Content/General/Landing_Page/images/landing_-_rus/u504.png"
             height="160" width="200" class="bm16" >
        <div class="pip-title pip-green">ЛЕГКО ПОДСТРАИВАЕТСЯ ПОД ВАШ СТИЛЬ</div>
        <div class="pip-text">Вы легко подстроите систему под привычный вам способ ведения дел. Если Вы уже используете какую-то систему, то сможете импортировать</div>
    </div>

</div>

<div class="h48"></div>
<div  class="pip-info-block layout-row layout-xs-column layout-align-start-start" >
    <div class="pip-content">
        <div style="background-image: url('http://mockups.pipdevs.com/Content/General/Landing_Page/images/landing_-_rus/u436.jpg'); height: 260px; width: 100%"
                class="pip-pic bm16 layout-row layout-align-center-end">
            <div class="pip-title pip-white m0 p16 pip-title-bg w-stretch">Для себя</div>
        </div>
        <div class="pip-text">Ведите свои дела и проекты, фиксируйте мысли, стройте планы и визуализируйте будущее.</div>
    </div>
    <div class="pip-content">
        <div style="background-image: url('http://mockups.pipdevs.com/Content/General/Landing_Page/images/landing_-_rus/u14.png'); height: 260px; width: 100%"
             class="pip-pic bm16 layout-row layout-align-center-end">
            <div class="pip-title pip-white m0 p16 pip-title-bg w-stretch">Для cемьи</div>
        </div>
        <div class="pip-text">Создавайте совместные планы с близкими, помогайте детям реализовывать школьные проекты и планировать будущее.</div>
    </div>
    <div class="pip-content">
        <div style="background-image: url('http://mockups.pipdevs.com/Content/General/Landing_Page/images/landing_-_rus/u12.png'); height: 260px; width: 100%"
             class="pip-pic bm16 layout-row layout-align-center-end">
            <div class="pip-title pip-white m0 p16 pip-title-bg w-stretch">Для работы</div>
        </div>
        <div class="pip-text">Используйте все возможности для эффективной организации работы команды, ведения проектов, планирования деятельности организации</div>
    </div>

</div>