RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

HTML

CSS

PHP

WordPress

Bootstrap

Автор

Главная » Основы Bootstrap 3 » Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

30.11.2016


15:13


11655


6


Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

Всем привет!
Вот и подошли мы к завершению изучения основ Bootstrap.
Сегодня будем учиться использовать на практике все знания, которые вы получили, изучая Bootstrap  на моем блоге.
Что я вам предлагаю?
Я предлагаю вместе со мной создать простой сайт-визитку с использованием Bootstrap 3.
Тип сайта – портфолио для художника.
Вот такой схеме должен соответствовать сайт, над которым будем работать:

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

Структура сайта:
вся информация будет на одной веб-странице, но скрыта.
То есть, при нажатии по какому-либо разделу меню, будет отображаться только тот контент, который принадлежит этому же разделу меню. Макет будет полностью адаптивный под мобильные устройства.
В конце урока вы сможете посмотреть результат, а художники, которым нужен простенький адаптивный сайт, смогут скачать готовый макет.

План действий:

  1. Подключение файлов bootstrap к «index.html»
  2. Создание меню
  3. Создание контента
  4. Создание фотогалереи
  5. Вставка формы
  6. Проверка работоспособности сайта

1. Подключение файлов bootstrap к «index.html»

Расписывать, как подключить файлы «Bootstrap» я не буду, так как это уже пройденный материал, и кто не помнит, что за чем нужно делать, повторите вот этот урок (Подключение.).

Итак, создайте файл «index.html» вот с таким кодом:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 на StepkinBLOG.RU</title>

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>

2.Создаем меню

Теперь между тегами <body></body> вставляем горизонтальное меню (читайте тут).
Создаем меню с такими разделами:
- ГЛАВНАЯ;
- ОБО МНЕ;
- ПОРТФОЛИО;
- БЛОГ;
- КОНТАКТЫ.

<nav role="navigation" class="navbar navbar-default navbar-static-top col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://stepkinblog.ru/" class="navbar-brand">STEPKINBLOG.RU</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home" data-toggle="tab">ГЛАВНАЯ</a></li>
<li><a href="#obo_mne" data-toggle="tab">ОБО МНЕ</a></li>
<li><a href="#portfolio" data-toggle="tab">ПОРТФОЛИО</a></li>
<li><a href="#blog" data-toggle="tab">БЛОГ</a></li> 
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#contakt" data-toggle="tab">КОНТАКТЫ</a></li>
</ul>
</div>
</nav>

Помните, выше я уточнял, что вся информация будет на одной веб-странице, но вся сразу видна не будет? Так вот, для реализации такого эффекта я буду использовать вкладки.
В ссылке в меню обязательно должны присутствовать:

data-toggle="tab"

href="#уникальное название"

В вашем случае копируйте все так, как сейчас есть.
Должен получиться вот такой вид:

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

3.Создаем контент

Теперь работаем над контентом.
Вставим его сразу после меню, но для начала я его отцентрирую через класс «container».

 <div class="container">.......</div>

Далее, я думаю, для сайта нужна шапка (heder).
Скачайте уже готовый «heder.jpg» или же создайте свой:

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
Скачать

Не забывайте «heder.jpg» спрятать в папку «images».
Предлагаю шапку разместить сразу после div с классом «container»:

<div class="container">
<!-- Шапка сайта -->
<img src="images/heder.jpg" class="img-responsive" alt="...">

Для адаптивности картинки, добавьте класс «img-responsive» к img.
Сам текст будет находиться вот в этом коде

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Контент -->
</div>
</div>

Контент будет в сетке (col-lg-12 col-md-12 col-sm-12 col-xs-12).

Свяжите для каждого div свой  id, то есть, если ссылка в меню была:

<a href="#obo_mne" data-toggle="tab">ОБО МНЕ</a>

* обратите внимание на «#obo_mne»
То в контенте для div,  id будет «obo_mne»:

<div class="tab-pane fade" id="obo_mne">ОБО МНЕ</div>

Вот так будет выглядеть код с контентом:

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="home">Главная страница</div>
<div class="tab-pane fade" id="obo_mne">ОБО МНЕ</div>
<div class="tab-pane fade" id="portfolio">ПОРТФОЛИО</div>
<div class="tab-pane fade" id="blog">БЛОГ</div>
<div class="tab-pane fade" id="contakt">КОНТАКТЫ</div>
</div>

Вот так будет выглядеть код с контентом + шапка сайта :

<div class="container">
<!-- Шапка сайта -->
<img src="images/heder.jpg" class="img-responsive" alt="...">

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Контент -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="home"><h2>Главная страница</h2> </div>
<div class="tab-pane fade" id="obo_mne"><h2>Обо мне </h2> </div>
<div class="tab-pane fade" id="portfolio"> <h2>Портфолио</h2> </div>
<div class="tab-pane fade" id="blog"><h2>Блог</h2> </div>
<div class="tab-pane fade" id="contakt"><h2>Контакты</h2> </div>
</div>

</div>
</div>
</div>

 

4.Создаем фотогалерею

Скажите, может ли быть портфолио художника без фотогалереи его работ?
В разделе «ПОРТФОЛИО» сделаем фотогалерею.
Создайте папку «image-gallery». В эту папку закиньте фотографии (ваших) работ.

<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>

</div>

Естественно, в коде замените названия картинок своими, так как у меня «kartinka.jpg».

И в самом конце добавляем сразу перед </body> вот этот код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.fancyimage").fancybox();
});
</script>
<!-- подключение CSS файла Fancybox -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Подключение JS файла Fancybox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>

5.Вставляем форму

Сегодня без формы обратной связи не обойдется ни один сайт. В «Контакты» я предлагаю указать не только адрес или данные, чтобы связаться с вами, но дать возможность отправить письмо прямо с сайта.
Для формы достаточно три поля:

1. Имя человека
2. Электронная почта
3. Поле для ввода сообщения

Если есть желание продолжить список, например, поле для ввода телефона, год рождения и смерти (ой, это не сюда :mrgreen:, то можете посмотреть урок№14.

Внимание! Во избежание лишних вопросов, уточняю: форма – это только внешний вид. Чтобы она заработала (чтобы приходили письма на почту), нужен обработчик php.

Итак, вставляем код формы вот сюда:

<div class="tab-pane fade" id="contakt">
<h2>Контакты</h2>
<!-- здесь будет форма -->
</div>

А вот и сама форма:

<form>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<input name="name" type="text" class="form-control" placeholder="Ваше имя*">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<input name="email" type="text" class="form-control" placeholder="Электронная почта*">
</div>
</div>

<br />
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<textarea name="body" cols="1" rows="5" class="form-control"/></textarea>
</div>
</div>
<br />
<button type="submit" class="btn btn-default">Отправить</button>
</form>

6.Проверка работоспособности сайта

Вот и подошли мы к завершению запланированных работ.
В итоге у вас будет:

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

А в файле «index.html» будет вот такой код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 на StepkinBLOG.RU</title>
 
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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>
<nav role="navigation" class="navbar navbar-default navbar-static-top col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://stepkinblog.ru/" class="navbar-brand">STEPKINBLOG.RU</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home" data-toggle="tab">ГЛАВНАЯ</a></li>
<li><a href="#obo_mne" data-toggle="tab">ОБО МНЕ</a></li>
<li><a href="#portfolio" data-toggle="tab">ПОРТФОЛИО</a></li>
<li><a href="#blog" data-toggle="tab">БЛОГ</a></li> 
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#contakt" data-toggle="tab">КОНТАКТЫ</a></li>
</ul>
</div>
</nav>

<div class="container">
<!-- Шапка сайта -->
<img src="images/heder.jpg" class="img-responsive" alt="...">
 
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Контент -->
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="home"><h2>Главная страница</h2> </div>
<div class="tab-pane fade" id="obo_mne"><h2>Обо мне </h2> </div>
<div class="tab-pane fade" id="portfolio"> <h2>Портфолио</h2> 
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="image-gallery/kartinka.jpg">
<img class="img-responsive" src="image-gallery/kartinka.jpg" />
</a>
</div>
 
</div>
</div>
<div class="tab-pane fade" id="blog"><h2>Блог</h2> </div>
<div class="tab-pane fade" id="contakt"><h2>Контакты</h2>
<form>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<input name="name" type="text" class="form-control" placeholder="Ваше имя*">
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<input name="email" type="text" class="form-control" placeholder="Электронная почта*">
</div>
</div>
 
<br />
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<textarea name="body" cols="1" rows="5" class="form-control"/></textarea>
</div>
</div>
<br />
<button type="submit" class="btn btn-default">Отправить</button>
</form>
</div>
</div>
 
</div>
</div>
</div>
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.fancyimage").fancybox();
});
</script>
<!-- подключение CSS файла Fancybox -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Подключение JS файла Fancybox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>
</body>
</html>

Смотрим результат!

[смотреть результат]

А те, кто пришел сюда случайно по запросу «создать свой мини сайт для художника», могут скачать результат, который получился в процессе сегодняшней практики:

[скачать сайт для художника]

Поздравляю всех, кто изучал мои курсы от самого начала до сегодняшнего момента, с окончанием изучения основ Bootstrap3!!!!!

Удачи!

Создание простого сайта на Bootstrap 3. Практика по пройденному материалу



Случайные записи:

  1. Слои в CSS. Основы CSS для начинающих. Урок №16
  2. Работа с файлами-3 (дополнительные функции и возможности). Основы PHP с нуля. Урок №21
  3. Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
  4. Информеры. Основы bootstrap 3 для начинающих. Урок №20
  5. Подключение файлов php через Include или Require. Основы PHP с нуля. Урок №17

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  3. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  4. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

6 ответа(ов) на статью: “Создание простого сайта на Bootstrap 3. Практика по пройденному материалу”

  1. Олег says:
    17.04.2019 в 12:24

    доброго дня ! уже несколько дней к ряду не могу понять глюк который происходит с вкладкой этого пробного сайта (контакты). При нажатии на на нее она не отжимается обратно, и работает одноразово. Я код не один десяток раз переписывал. Потом копировал с вашей страницы. результат один. В чем может быть лажа?

    <nav class="navbar navbar-default">
        <div class container-fluid>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Очередной первый</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a data-toggle="tab" href="#home">Главная</a></li>
                    <li><a data-toggle="tab" href="#about">О нас</a></li>
                    <li><a data-toggle="tab" href="#portfolio">Портфолио</a></li>
                    <li><a data-toggle="tab" href="#blog">Блог</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="tab" href="#contact">Контакты</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <!-- Шапка сайта -->
        <img src="images/heder.jpg" class="img-responsive" alt="...">

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!-- Контент -->
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active fade in" id="home">
                        <h4>Главная страница</h4>
                    </div>
                    <div class="tab-pane" id="about">
                        <h4>О нас </h4>
                    </div>
                    <div class="tab-pane" id="portfolio">
                        <h4>Портфолио</h4>
                    </div>
                    <div class="tab-pane" id="blog">
                        <h4>Блог</h4>
                    </div>
                    <div class="tab-pane" id="contact">
                        <h4>Контакты</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    Ответить

    Степка ответил(а) на комментарий:
    19 апреля, 2019 at 13:55

    Здравствуйте. Возможно не подключен СSS или JS.
    Когда переходите по ссылке "посмотреть пример", также работает как у Вас с глюком или у меня на сайте все работает?

    Ответить

  2. Олег says:
    17.04.2019 в 14:47

    Кстати в вашем примере тоже самое

    Ответить

    Степка ответил(а) на комментарий:
    19 апреля, 2019 at 14:13

    Попробуйте вот так:

    <div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home" data-toggle="tab">ГЛАВНАЯ</a></li>
<li><a href="#obo_mne" data-toggle="tab">ОБО МНЕ</a></li>
<li><a href="#portfolio" data-toggle="tab">ПОРТФОЛИО</a></li>
<li><a href="#blog" data-toggle="tab">БЛОГ</a></li> 
<li><a href="#contakt" data-toggle="tab">КОНТАКТЫ</a></li>
</ul>
</div>

    Ответить

  3. Олег says:
    22.04.2019 в 12:23

    Здравствуйте, спасибо за ответ , но я знаю что так работает. Просто не понятна причина почему не работает если используется именно эта конструкия:

    <ul class="nav navbar-nav navbar-right">
<li><a data-toggle="tab" href="#contact">Контакт</a></li>
</ul>

    Ответить

    Степка ответил(а) на комментарий:
    22 апреля, 2019 at 16:30

    Просто в меню присутствую два элемента 

    <ul>
<li></li> 
     <ul> <!-- вот из-за этого конфликт -->
     <li></li><!-- вот из-за этого конфликт -->
     </ul><!-- вот из-за этого конфликт -->
</ul>

    bootstrap стандартное открытие вкладок не позволяет это сделать. Нужно допиливать код уже самому. Для этого нужно знания по JavaScrupt.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

  • Разные темы:

    • Реклама на блоге:

    Последние записи на блоге:

    Мои цели на
    2019 год:

    Довести количество статей до 150

    Доделать этот блог

    Закончить тему «Основы CSS»

    Закончить тему «Основы PHP»

    Начать тему «Основы JavaScript»

    Добиться посещаемости 500 чел/сутки

    Облако меток:

    bootstrap CSS HTML php WordPress Итог работы дополнение основы отдых праздники

    Статистика:

    Записей: 111
    Страниц: 3
    Рубрик: 9
    Меток: 11
    Комментариев: 347

    StepkinBlog.com © 2023

    Автор Костаневич Степан.

    Заказать сайт

    html css php wordpress bootstap Автор