100-летняя война с картой

Простой html для сайта о 100-летней войне

by Vasilii Chugunov

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="first-period">
  <div class="container">
    <div class="row fancy-row">
      <div class="header">
        <h3>Первый период войны (1337-1360 гг.)</h3>
      </div>
      <div class="col col-xs-12 col-sm-4 col-md-3" >
        <div class="item">
          <img src="http://war100.ru/Main/Graphics/1337-1360.gif">
        </div>
      </div>
      <div class="col col-xs-12 col-sm-8 col-md-6" >
        <div class="item">
          <p>Первый период войны - борьба за господство на море, поражение Франции и народные восстания.</p>
          <p>Англичане в 1339 г. предприняли первое вторжение на континент, где они осадили крепость Камбрэ в провинции Артуа. Крепость взять не удалось, и Эдуард вернулся в Англию, для подготовки следующего похода. Снарядив большой флот и сильную армию англичане осадили крепость Турнэ. В июне 1340 г. французы наняли корабли у генуэзцев, мобилизовали торговые суда, усилив свой флот, и двинулись к берегам Фландрии, чтобы напасть на английский флот, стоявший в устье р. Шельды. В сражении, получившем название бой при Слейсе (Эклюзе) французский флот был полностью уничтожен и англичане получили господство на море. Но на суше они снова потерпели неудачу – англичане не смогли взяли Турнэ. Эдуард снял осаду и заключил перемирие, которое длилось до 1346 г.</p>
        </div>
      </div>
      <div class="clearfix visible-sm-block"></div>
      <div class="col col-xs-12 col-sm-4 col-md-3">
        <div class="item">
          <img src="http://i28.fastpic.ru/big/2011/1218/e3/4e606df151a6e938fad31cf4619475e3.jpeg">
        </div>
      </div>
    </div>
  </div>
</section>

CSS

.fancy-row .col .item img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.fancy-row .item {
  padding: 5px;
}

.fancy-row .header h3 {
  text-align: center;
}