itProger Видеокурсы Обучение технологиям в одном видеоуроке Сайт на Bootstrap за 45 минут

Сайт на Bootstrap за 45 минут

Создание сайта на Bootstrap за 45 минут ⚡ Обучение основ верстки на Бутстрапе ⚡ Видео уроки верстки на Bootstrap для начинающих на itProger

Видеоурок

Как создать сайт на Bootstrap? В видео мы с вами создадим полноценный адаптивный сайт на Bootstrap всего за 45 минут. Верстка сайта дело несложное, поэтому вы научитесь делать отличные сайты всего за 45 минут!

Материалы для курса

bootstrap_website.zip

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Файл index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap сайт</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Домой</a></li>
          <li><a href="#">Про нас</a></li>
          <li><a href="#">Сервсиы</a></li>
          <li><a href="#">Работы</a></li>
          <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="headerwrap">
    <div class="container">
      <div class="row centered">
        <div class="col-lg-8 col-lg-offset-2">
          <h1>Bootstrap is awesome!</h1>
          <h2>Сайты на Bootstrap отличные</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="container w">
    <div class="row centered">
      <br><br>
      <div class="col-lg-4">
        <i class="fa fa-heart"></i>
        <h4>Дизайн</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
      <div class="col-lg-4">
        <i class="fa fa-laptop"></i>
        <h4>Компьютеры</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
      <div class="col-lg-4">
        <i class="fa fa-trophy"></i>
        <h4>Помощь</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </div>
    </div>
    <br><br>
  </div>
  <div id="dg">
    <div class="container">
      <div class="row centered">
        <h4>Последние работы</h4>
        <br>
        <div class="col-lg-4">
          <div class="tilt">
            <a href="#"><img src="img/p01.png" alt=""></a>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="tilt">
            <a href="#"><img src="img/p02.png" alt=""></a>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="tilt">
            <a href="#"><img src="img/p03.png" alt=""></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container wb">
    <div class="row centered">
      <br><br>
      <div class="col-lg-8 col-lg-offset-2">
        <h4>Мы создаем сайты</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
        <p><br><br></p>
      </div>
      <div class="col-lg-2"></div>
      <div class="col-lg-10 col-lg-offset-1">
        <img src="img/munter.png" alt="" class="img-responsive">
      </div>
    </div>
  </div>
  <div id="lg">
    <div class="container">
      <div class="row centered">
        <h4>Партнеры</h4>
        <div class="col-lg-2 col-lg-offset-1">
          <img src="img/c01.gif" alt="">
        </div>
        <div class="col-lg-2">
          <img src="img/c02.gif" alt="">
        </div>
        <div class="col-lg-2">
          <img src="img/c03.gif" alt="">
        </div>
        <div class="col-lg-2">
          <img src="img/c04.gif" alt="">
        </div>
        <div class="col-lg-2">
          <img src="img/c05.gif" alt="">
        </div>
      </div>
    </div>
  </div>
  <div id="r">
    <div class="container">
      <div class="row centered">
        <div class="col-lg-8 col-lg-offset-2">
          <h4>Разарботка сайтов на профессиональном уровне</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
        </div>
      </div>
    </div>
  </div>
  <div id="f">
    <div class="container">
      <div class="row centered">
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-vk"></i></a>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

Посмотреть остальной код можно после подписки на проект!

Задание к уроку

Новый секция

Создайте дополнительную секцию и расположите её внутри сайта.

Секция должна выглядеть как на фото ниже:

Посмотреть ответ

Пропишите необходимый HTML:

<div id="b">
	<div class="container">
		<div class="row centered">
			<div class="col-lg-6">
				<h4>Bootstrap отличный помощник!</h4>
				<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-lg-6">
				<h4>При помощи Bootstrap все написано!</h4>
				<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>
	</div>
</div>

Допишите стили CSS:

#b {
	background: #78D3ED;
	padding-top: 30px;
	padding-bottom: 30px;
}

#b h4 {
	color: #333;
	font-size: 45px;
	font-weight: bolder;
}

#b p {
	color: white;
}

Получить остальные домашние задания можно после подписки на проект