или
регистрация Я забыл свой пароль
Оцените работу движка

Адаптивный HTML шаблон для портфолио


Шаблон выполнен на Bootstrap 3 для портфолио разработчику. Шаблон имеет адаптивную вёрстку. Отлично смотрится на различных экранах и работает во всех современных браузерах.

Шаблон портфолио DEVAID на Bootstrap 3

Шаблон DEVAID предназначен для демонстрации собственных проектов разработчика. Шаблон полностью  совместим со всеми современными браузерами. Построен на популярном фреймворке  Bootstrap 3 , HTML5 + CSS3. Имеет четыре цветовые гаммы.

Адаптивный корпоративный шаблон на Bootstrap

Предлагаю к скачиванию семь корпоративных шаблонов выполненных на Bootstrap. Шаблоны отличаются между собой наличием или отсутствием слайдера. И небольшим расположением элементов. Присутствует поисковая форма. Преимущественно использованы зелёные тона.

Адаптивный шаблон бизнес тематики

Адаптивный шаблон бизнес тематики создан при помощи популярного фреймворка Bootstrap 3.
Шаблон полностью адаптивен, имеет приятные глазу оттенки. Отображается корректно на всех устройствах.
Шаблон изначально заточен под интернет магазин.

Шаблон начальной загрузки на Bootstrap 4

Этот шаблон содержит компоненты, которые являются новыми  в Bootstrap 4.
Шаблон включает в себя 5-уровневую сетку, теги, пользовательские формы, карточки и многое другое. Данный шаблон можно использовать для наглядного примера разметки в бутстрапе .
Шаблон имеет малый вес и будет расположен ниже в редакторе.


<!DOCTYPE html>
<!-- Template by Quackit.com -->
<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, shrink-to-fit=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">

    <title>Bootstrap 4 Template</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
      
    <!-- Some extra styles (remove if not needed) -->
    <style>
        section {
            padding: 70px 0;
            border-bottom: 1px dotted #ccc;
        }

        /* So that we can see the grid */
        .grid-example  div[class^="col"] {
            border: 1px solid white;
            background: lightblue;
            text-align: center;
            padding-top: 8px;
            padding-bottom: 8px;
            }
        /* Overide Jumbotron's color */
        .jumbotron {
    background-color: lightskyblue;
        }
    </style>

  </head>

  <body data-spy="scroll" data-target="#navbar-example">

    <nav id="topNav" class="navbar navbar-full navbar-static-top navbar-dark bg-inverse">
        <div class="container">
            <button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                &#9776;
            </button>
            <a class="navbar-brand" href="#">Logo</a>
            <div class="collapse navbar-toggleable-sm" id="collapsingNavbar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#grid">Grid</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#cards">Cards</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tags">Tags</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#customForms">Forms</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#outlineButtons">Buttons</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#progress">Progress Bars</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tables">Tables</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-3">Fluid Jumbotron!</h1>
        <p>This is a fluid jumbotron. Fluid jumbotrons occupy the entire horizontal space of its parent.</p>
        <p>Fluid jumbotrons are new in Bootstrap 4.</p>
        <p><a class="btn btn-primary btn-lg" href="http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_jumbotron.cfm" role="button">Jumbotron Examples &raquo;</a></p>
      </div>
    </div>

    <div class="container">
        <section id="grid">
            <h2>Bigger Grid</h2>
            <p>OK, maybe not <em>bigger</em> but... Bootstrap 4 uses a 5 tier grid system compared to the 4 tier grid system in Bootstrap 3.</p>
            <p>Bootstrap 4 added <code>sm</code> to its grid classes, so it now supports <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code> (for example, <code>class="col-sm-6</code>).</p>

            <div class="grid-example">
                <!-- Bootstrap Grid -->
                <div class="row">
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                  <div class="col-sm-1">.col-sm-1</div>
                </div>
                <div class="row">
                  <div class="col-sm-2">.col-sm-2</div>
                  <div class="col-sm-3">.col-sm-3</div>
                  <div class="col-sm-7">.col-sm-7</div>
                </div>
                <div class="row">
                  <div class="col-sm-4">.col-sm-4</div>
                  <div class="col-sm-4">.col-sm-4</div>
                  <div class="col-sm-4">.col-sm-4</div>
                </div>
                <div class="row">
                  <div class="col-sm-5">.col-sm-5</div>
                  <div class="col-sm-7">.col-sm-7</div>
                </div>
                <div class="row">
                  <div class="col-sm-6">.col-sm-6</div>
                  <div class="col-sm-6">.col-sm-6</div>
                </div>
                <div class="row">
                  <div class="col-sm-12">.col-sm-12</div>
                </div>
            </div>

            <p>The following table shows how different grid options work with different viewport sizes.</p>

            <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>&nbsp;</th>
                    <th>
                      Extra small
                      <small>&lt;34em</small>
                    </th>
                    <th>
                      Small
                      <small>&ge;34em</small>
                    </th>
                    <th>
                      Medium
                      <small>&ge;48em</small>
                    </th>
                    <th>
                      Large
                      <small>&ge;62em</small>
                    </th>
                    <th>
                      Extra large
                      <small>&ge;75em</small>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th class="text-nowrap" scope="row">Grid behavior</th>
                    <td>Horizontal at all times</td>
                    <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
                  </tr>
                  <tr>
                    <th class="text-nowrap" scope="row">Container width</th>
                    <td>None (auto)</td>
                    <td>34rem</td>
                    <td>45rem</td>
                    <td>60rem</td>
                    <td>72.25rem</td>
                  </tr>
                  <tr>
                    <th class="text-nowrap" scope="row">Class prefix</th>
                    <td><code>.col-xs-</code></td>
                    <td><code>.col-sm-</code></td>
                    <td><code>.col-md-</code></td>
                    <td><code>.col-lg-</code></td>
                    <td><code>.col-xl-</code></td>
                  </tr>
                  <tr>
                    <th class="text-nowrap" scope="row">Number of columns</th>
                    <td colspan="5">12</td>
                  </tr>
                  <tr>
                    <th class="text-nowrap" scope="row">Gutter width</th>
                    <td colspan="5">30px (15px on each side of a column)</td>
                  </tr>
                  <tr>
                    <th class="text-nowrap" scope="row">Nestable</th>
                    <td colspan="5">Yes</td>
                  </tr>
                  <tr>
                    <th class="text-nowrap" scope="row">Offsets</th>
                    <td colspan="5">Yes</td>
                  </tr>
                  <tr>
                    <th class="text-nowrap" scope="row">Column ordering</th>
                    <td colspan="5">Yes</td>
                  </tr>
                </tbody>
            </table>
            
        </section>


        <section id="cards">
            <h2>Introducing Cards</h2>
            <p>In Bootstrap 4, <a href="http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_cards.cfm">cards</a> replace panels, thumbnails and wells from Bootstrap 3.</p>

            <div class="card-columns">
                <!-- Card 1 -->
                <div class="card">
                    <div class="card-header">Card 1</div>
                        <div class="card-block">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="card">
                    <div class="card-block">
                        <h4 class="card-title">Card 2</h4>
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="card">
                    <div class="card-header">Card 3</div>
                        <div class="card-block">
                           <p class="card-text">Text for this card. Here's <a href="#" class="card-link">why</a>.</p>
                        </div>
                    <div class="card-footer">Footer</div>
                </div>
                <!-- Card 4 -->
                <div class="card">
                    <div class="card-header">Card 4</div>
                        <div class="card-block">
                            <p class="card-text">Text for this card.</p>
                        </div>
                    <div class="card-footer">Footer</div>
                </div>
                <!-- Card 5 -->
                <div class="card">
                    <div class="card-block">
                        <h4 class="card-title">Card 5</h4>
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
                <!-- Card 6 -->
                <div class="card">
                    <div class="card-header">Card 6</div>
                    <div class="card-block">
                        <p class="card-text">Text for this card. Here's <a href="#" class="card-link">why</a>.</p>
                    </div>
                </div>
                <!-- Card 7 -->
                <div class="card">
                    <div class="card-header">Card 7</div>
                    <div class="card-block">
                        <p class="card-text">Text for this card. Here's <a href="#" class="card-link">why</a>.</p>
                    </div>
                    <div class="card-footer">Footer</div>
                </div>
                <!-- Card 8 -->
                <div class="card">
                    <div class="card-block">
                        <h4 class="card-title">Card 8</h4>
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="tags">
            <h2>Introducing <span class="tag tag-default">Tags</span></h2>
            <p>Bootstrap's tag classes can be used to highlight additional information that's appended to a string of text. </p> 
            <p><a href="http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_tags.cfm">Tags</a> replace labels from Bootstrap 3.</p>
            <h3>Contextual Tags</h3>
            <p>Add some color based on context.</p>
            <p>
                <span class="tag tag-default">Default</span>
                <span class="tag tag-primary">Primary</span>
                <span class="tag tag-success">Success</span>
                <span class="tag tag-info">Info</span>
                <span class="tag tag-warning">Warning</span>
                <span class="tag tag-danger">Danger</span>
            </p>
            <h3>Pill Tags</h3>
            <p>Use the <code>.tag-pill</code> class to give your tags rounded corners.</p>
            <p>
                <span class="tag tag-pill tag-default">Default</span>
                <span class="tag tag-pill tag-primary">Primary</span>
                <span class="tag tag-pill tag-success">Success</span>
                <span class="tag tag-pill tag-info">Info</span>
                <span class="tag tag-pill tag-warning">Warning</span>
                <span class="tag tag-pill tag-danger">Danger</span>
            </p>
        </section>

        <section id="customForms">
            <h2>Introducing Custom Forms</h2>
            <p>Bootstrap 4 introduces <a href="http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_custom_forms.cfm">custom forms</a>. These are custom form elements that completely replace the browser defaults. The idea behind custom forms is that they allow for more customization and cross browser consistency.</p>
            <p>
                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Boots</span>
                </label>
                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Shoes</span>
                </label>
            </p>
            <div class="custom-controls-stacked">
                <label class="custom-control custom-radio">
                    <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Boots</span>
                </label>
                <label class="custom-control custom-radio">
                    <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Shoes</span>
                </label>
            </div>
            <p>
                <select class="custom-select">
                    <option selected>Choose One...</option>
                    <option value="1">Boots</option>
                    <option value="2">Shoes</option>
                    <option value="3">Feet</option>
                </select>
            </p>
            <p>
                <label class="custom-file">
                    <input type="file" id="file" class="custom-file-input">
                    <span class="custom-file-control"></span>
                </label>
            </p>
        </section>


        <section id="outlineButtons">
            <h2>Outline Buttons</h2>
            <p>Bootstrap 4 introduces outline buttons &mdash; buttons with a contextual outline.</p>
            <button type="button" class="btn btn-lg btn-outline-primary">Primary</button>
            <button type="button" class="btn btn-lg btn-outline-secondary">Secondary</button>
            <button type="button" class="btn btn-lg btn-outline-info">Info</button>
            <button type="button" class="btn btn-lg btn-outline-success">Success</button>
            <button type="button" class="btn btn-lg btn-outline-warning">Warning</button>
            <button type="button" class="btn btn-lg btn-outline-danger">Danger</button>
        </section>



        <section id="progress">
            <h2>Progress Bars</h2>
            <p>Bootstrap 4 takes advantage of the HTML5 <a href="http://www.quackit.com/html/tags/html_progress_tag.cfm"><code>&lt;progress&gt;</code></a> element when working with progress bars.</p> 
            <progress class="progress progress-success" value="73" max="100">73%</progress>
            <progress class="progress progress-info" value="500" max="1000">50%</progress>
            <progress class="progress progress-warning" value="35" max="100">35%</progress>
            <progress class="progress progress-danger" value="200" max="1000">20%</progress>     
        </section>


        <section id="tables">
            <h2>Responsive Tables</h2>
            <p>Bootstrap 4 allows you to apply the <code>.table-responsive</code> class directly to the table (as opposed to being required to apply it to a parent element, like in Bootstrap 3).</p> 
  
            <table class="table table-responsive">
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                        <th>Header 4</th>
                        <th>Header 5</th>
                        <th>Header 6</th>
                        <th>Header 7</th>
                        <th>Header 8</th>
                        <th>Header 9</th>
                        <th>Header 10</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                </tbody>
            </table>
        </section>
        <section>
            <h3>Reflow Tables</h3>
            <p>There's a new <code>.table-reflow</code> class that effectively turns your table on its side.</p>

            <table class="table table-reflow">
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                        <th>Header 4</th>
                        <th>Header 5</th>
                        <th>Header 6</th>
                        <th>Header 7</th>
                        <th>Header 8</th>
                        <th>Header 9</th>
                        <th>Header 10</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                </tbody>
            </table>
        </section>
        <section>
            <h3>Table Head Styles</h3>
            <p>You can add background color to your table headers in Bootstrap 4.</p>

            <table class="table">
                <thead class="thead-inverse">
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Footer 1</th>
                        <th>Footer 2</th>
                        <th>Footer 3</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                </tbody>
            </table>

        </section>

        <footer>
            <p>&copy; Somebody 2016</p>
        </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core jаvascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

    <!-- Tether -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

    <!-- Latest compiled jаvascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>

    <!-- Initialize Bootstrap functionality -->
    <script>
    // Initialize tooltip component
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

    // Initialize popover component
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    </script>    

  </body>
</html>


Шаблон спортивной тематики на Bootstrap

Спортивный шаблон для интернет магазина созданный при помощью популярного фреймворка Bootstrap.
 eCommerce это адаптивный шаблон с большим функционалом , уникальным слайдером, функциональными боковыми панелями .
Спорт шаблон  свёрстан с использованием современных технологий HTML5 и CSS3 и совместим со всеми браузерами.

Шаблон портфолио на Bootstrap

Resume - адаптивный шаблон выполненный на популярном фреймворке бутстрап.
Данный шаблон одностраничный.
Отлично подойдёт для портфолио.
Шаблон Resume  выполнен в минималистическом стиле и полностью бесплатен.

Страница лендинга на Bootstrap


Brushed - это бесплатный одно страничный адаптивный шаблон , созданный на платформе Twitter Bootstrap.
Шаблон оптимизирован под следующие платформы: (iPhone, iPad, iPod Touch и MacBook Pro Retina).
Отлично подойдёт  творческих людей. 
Шаблон выполнен в тёмных тонах.
Имеет совместимость со старыми браузерами.


Шаблон портфолио One Page Wonder

One Page Wonder - простая тема Bootstrap 4 для быстрого создания привлекательных одностраничных веб-сайтов в Bootstrap.

Особенности

  • Исправлено верхнее меню навигации
  • Заголовок с повторяющимся фоновым изображением (редактируется в CSS)
  • Адаптивные разделы контента с изображениями и текстом


Шаблон лендинга на Bootstrap 4

Шаблон лэндинга выполнен на Bootstrap 4, которая скоро станет идеальной в качестве целевой страницы для проекта, который находится в стадии разработки! Присутствует фоновое изображение в качестве видео, а так же  форма подписки на рассылку!

Особенности

  • Видео фон с мобильным резервным изображением
  • Подписка на рассылку