Портфолио для FCC

@import url('https://fonts.googleapis.com/css?family=Roboto:100'); 
@import url('https://fonts.googleapis.com/css?family=Oswald'); 
@import url('https://fonts.googleapis.com/css?family=Raleway'); 
@import url('https://fonts.googleapis.com/css?family=Raleway:200'); 
html, 
body { 
  margin: 0; 
  padding: 0; 
  background: #fff; 
} 
 
 :active, 
 :hover, 
 :focus { 
  outline: 0; 
  outline-offset: 0; 
} 
 
 ::selection { 
  background: #f7f7f7; 
} 
 
 ::-moz-selection { 
  background: #f7f7f7; 
} 
 
h3.main { 
  font-family: 'Roboto', sans-serif; 
  font-size: 2.250em; 
  color: #eee; 
  display: inline-block; 
  position: relative; 
  line-height: 1.5; 
  text-align: center; 
} 
 
h1.main { 
  font-family: 'Oswald', sans-serif; 
  position: relative; 
  display: inline-block; 
  font-size: 5em; 
  color: #eee; 
  left: 5%; 
  line-height: 0.5; 
  padding-top: 25%; 
  letter-spacing: -2px; 
} 
 
.header { 
  background: url('../img/header.png'); 
  -moz-background-size: 100%; 
  /* Firefox 3.6+ */ 
  -webkit-background-size: 100%; 
  /* Safari 3.1+ и Chrome 4.0+ */ 
  -o-background-size: 100%; 
  /* Opera 9.6+ */ 
  background-size: 100%; 
  /* Современные браузеры */ 
  background-repeat: no-repeat; 
  height: 100%; 
} 
 
.fa-bars { 
  position: relative; 
  color: #eee; 
  transition: 0.35s; 
  margin-top: 150%; 
} 
 
.fa-bars:hover { 
  color: #999; 
  transition: 0.35s; 
} 
 
.fa-long-arrow-up { 
  color: #eee; 
  position: relative; 
  left: 7%; 
  margin-top: 20%; 
  border: 1px solid #b1b1b1; 
  padding-left: 12px; 
  padding-right: 12px; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  transition: 0.35s 
} 
 
.fa-long-arrow-up:hover { 
  color: #d1d1d1; 
  border: 1px solid #249cce; 
  position: relative; 
  top: 2px; 
  transition: 0.35s; 
} 
 
p.main { 
  font-family: 'Raleway', sans-serif; 
  font-size: 3.000em; 
  color: #404040; 
  letter-spacing: -2px; 
  display: inline-block; 
  position: relative; 
} 
 
.line { 
  width: 1px; 
  background-color: #626060; 
  height: 75px; 
  display: inline-block; 
  position: relative; 
  right: 72.5%; 
  margin-bottom: 3%; 
} 
 
p.text { 
  font-family: 'Raleway', sans-serif; 
  font-size: 1.125em; 
  color: #404040; 
  display: inline-block; 
  position: relative; 
  margin-bottom: 15%; 
  right: 150%; 
  text-align: center; 
} 
 
.fa-heart-o { 
  border: 5px solid #242424; 
  padding: 10px; 
  border-radius: 40px; 
  border-width: thin; 
  margin-top: 70px; 
  transition: 0.25s; 
} 
 
.fa-heart-o:hover { 
  color: #249cce; 
  transition: 0.25s; 
  border: 1px solid #249cce; 
} 
 
.fa-toggle-on { 
  border: 5px solid #292929; 
  padding: 10px; 
  padding-left: 7px; 
  border-radius: 40px; 
  border-width: thin; 
  margin-top: 70px; 
  transition: 0.25s; 
} 
 
.fa-toggle-on:hover { 
  color: #249cce; 
  transition: 0.25s; 
  border: 1px solid #249cce; 
} 
 
.fa-thumbs-o-up { 
  border: 5px solid #292929; 
  padding: 10px; 
  padding-left: 15px; 
  border-radius: 40px; 
  border-width: thin; 
  margin-top: 70px; 
  text-align: center; 
  transition: 0.25s; 
} 
 
.fa-thumbs-o-up:hover { 
  color: #249cce; 
  transition: 0.25s; 
  border: 1px solid #249cce; 
} 
 
p.onblock { 
  font-family: 'Raleway', sans-serif; 
  font-size: 1.313em; 
  color: #404040; 
  display: block; 
  position: relative; 
  text-align: center; 
  right: 32.5% 
} 
 
.horizontal { 
  width: 100%; 
  background-color: #6a6a6a; 
  height: 1px; 
  display: inline-block; 
  position: relative; 
  margin-bottom: 10%; 
  margin-top: 2%; 
} 
 
.horizontal2 { 
  width: 100%; 
  background-color: #6a6a6a; 
  height: 1px; 
  display: inline-block; 
  position: relative; 
  margin-bottom: 2%; 
  margin-top: 2%; 
} 
 
.galleryphoto:hover { 
  -webkit-filter: grayscale(0%) blur(0px); 
  transition: 0.35s; 
} 
 
.galleryphoto { 
  position: relative; 
  -webkit-filter: grayscale(100%) blur(2px); 
  transition: 0.35s; 
  border: 1px solid #404040; 
  margin-top: 15%; 
  margin-right: 25%; 
} 
 
.margin { 
  position: relative; 
  margin-top: 25%; 
} 
 
.margin2 { 
  position: relative; 
  margin-top: 17.5%; 
} 
 
h4.comments { 
  font-family: 'Oswald', sans-serif; 
  font-size: 1.625em; 
  color: #676666; 
  display: inline-block; 
  position: relative; 
  border-bottom: 1px solid #676666; 
  padding-bottom: 5px; 
  left: 3%; 
} 
 
.fa-smile-o { 
  position: relative; 
  border: 1px solid #dddddd; 
  padding: 12px; 
  border-radius: 5px; 
  bottom: 17px; 
  color: #b1b1b1; 
  transition: 0.35s; 
  left: 3%; 
} 
 
.fa-smile-o:hover { 
  color: #249cce; 
  transition: 0.35s; 
} 
 
.fa-paper-plane { 
  position: relative; 
  border: 1px solid #dddddd; 
  padding: 12px; 
  border-radius: 5px; 
  bottom: 17px; 
  color: #b1b1b1; 
  transition: 0.35s; 
  left: 3%; 
} 
 
.fa-paper-plane:hover { 
  color: #249cce; 
  transition: 0.35s; 
} 
 
textarea { 
  padding: 12px; 
  position: relative; 
  left: 3%; 
  width: 80%; 
  height: 53px; 
  resize: none; 
  border: 1px solid #dddddd; 
  border-radius: 5px; 
  font-size: 14px; 
  color: #888585; 
  font-family: 'TimesNewRoman', sans-serif; 
  transition: 0.25s; 
} 
 
textarea:focus { 
  border: 1px solid #ececec; 
  color: #404040; 
  transition: 0.25s; 
} 
 
.commentfont { 
  position: relative; 
  color: #249cce; 
  font-size: 1.575em; 
  font-family: 'Oswald', sans-serif; 
  display: inline-block; 
  left: 5%; 
  margin-top: 2%; 
} 
 
.date { 
  position: relative; 
  color: #a4a4a4; 
  font-size: 1.005em; 
  font-family: 'Oswald', sans-serif; 
  display: inline-block; 
  left: 6%; 
  margin-top: 2%; 
} 
 
.comment { 
  position: relative; 
  color: #676666; 
  font-size: 1.000em; 
  font-family: 'TimesNewRoman', sans-serif; 
  display: block; 
  left: 5%; 
} 
 
.vmore { 
  border: 1px solid #575757; 
  padding-left: 20px; 
  padding-right: 20px; 
  text-decoration: none; 
  margin-top: 5%; 
  left: 40%; 
  position: relative; 
  color: #575757; 
  font-size: 1.250em; 
  font-family: 'Oswald', sans-serif; 
  display: inline-block; 
  transition: 0.35s; 
} 
 
.vmore:hover { 
  text-decoration: none; 
  border: 1px solid #249cce; 
  transition: 0.35s; 
  color: #249cce; 
} 
 
.main2 { 
  font-family: 'Raleway', sans-serif; 
  font-size: 3.000em; 
  color: #404040; 
  letter-spacing: -1px; 
  display: inline-block; 
  position: relative; 
  margin-top: 7%; 
  left: 4%; 
} 
 
.fa-vk { 
  display: inline-block; 
  position: relative; 
  color: #404040; 
  transition: 0.35s; 
  font-size: 2.375em; 
  transition: 0.35s; 
  margin-top: 40%; 
  margin-left: 30%; 
  opacity: 0.6; 
} 
 
.fa-vk:hover { 
  transition: 0.35s; 
  background: #fff; 
  opacity: 1; 
} 
 
.fa-facebook { 
  display: inline-block; 
  position: relative; 
  color: #404040; 
  font-size: 2.375em; 
  transition: 0.35s; 
  margin-top: 40%; 
  margin-left: 30%; 
  opacity: 0.6; 
} 
 
.fa-facebook:hover { 
  transition: 0.35s; 
  opacity: 1; 
} 
 
.fa-twitter { 
  display: inline-block; 
  position: relative; 
  color: #404040; 
  font-size: 2.375em; 
  transition: 0.35s; 
  margin-top: 40%; 
  margin-left: 30%; 
  opacity: 0.6; 
} 
 
.fa-twitter:hover { 
  transition: 0.35s; 
  opacity: 1; 
} 
 
.fa-github { 
  display: inline-block; 
  position: relative; 
  color: #404040; 
  font-size: 2.375em; 
  transition: 0.35s; 
  margin-top: 40%; 
  margin-left: 30%; 
  opacity: 0.6; 
} 
 
.fa-github:hover { 
  transition: 0.35s; 
  opacity: 1; 
} 
 
.fa-envelope { 
  display: inline-block; 
  position: relative; 
  color: #404040; 
  font-size: 2.375em; 
  transition: 0.35s; 
  margin-top: 40%; 
  margin-left: 30%; 
  opacity: 0.6; 
} 
 
.fa-envelope:hover { 
  transition: 0.35s; 
  opacity: 1; 
} 
 
.footer { 
  background: #000; 
  width: 100%; 
  height: 300px; 
}

<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Tvarinsky Klondike</title> 
  <link rel="shortcut icon" href="favicon.ico" /> 
  <link rel="stylesheet" href="css/bootstrap.css" /> 
  <link rel="stylesheet" href="css/bootstrap-theme.css" /> 
  <link rel="stylesheet" href="css/font-awesome.css" /> 
  <link rel="stylesheet" href="css/font-awesome.min.css" /> 
  <link rel="stylesheet" type="text/css" href="css/styles.css" /> 
  <meta name="viewport" content="width=450, initial-scale=1" /> 
 
</head> 
 
<body> 
 
  <div class="header"> 
    <div class="container"> 
      <div class="row"> 
        <div class="col-xs-2 col-md-1 col-md-offset-9"> 
          <a href="#"><i class="fa fa-bars fa-3x" aria-hidden="true"></i></a> 
        </div> 
        <div class="col-md-6 col-xs-5 col-md-offset-4"> 
          <h1 class="main">TVARINSKY</h1> 
        </div> 
        <div class="col-md-6 col-xs-12 col-md-offset-4"> 
          <h3 class="main">Front-end разработчик <br>UI/UX дизайнер</h3> 
        </div> 
        <div class="col-xs-12 col-md-6 col-md-offset-5"> 
          <a href="#"><i class="fa fa-long-arrow-up fa-flip-vertical fa-2x" aria-hidden="true"></i></a> 
        </div> 
      </div> 
    </div> 
  </div> 
 
  <div class="content"> 
    <div class="col-xs-12 col-md-3 col-md-offset-4"> 
      <p class="main">Обо мне</p> 
    </div> 
    <div class="col-xs-12 col-md-2"> 
      <div class="line"></div> 
    </div> 
    <div class="col-xs-12 col-md-2"> 
      <p class="text">Здравствуйте! Я Иван.<br> Я Front-end разработчик,<br> UI/UX дизайнер.</p> 
    </div> 
 
    <div class="block"> 
      <div class="col-xs-12 col-md-6 col-md-offset-3"> 
        <div class="col-xs-12 col-md-3 col-md-offset-1"> 
          <i class="fa fa-heart-o fa-3x" aria-hidden="true"></i> 
          <p class="onblock">Моя жизнь</p> 
        </div> 
        <div class="col-xs-12 col-md-3 col-md-offset-1"> 
          <i class="fa fa-toggle-on fa-3x" aria-hidden="true"></i> 
          <p class="onblock">Это работает</p> 
        </div> 
        <div class="col-xs-12 col-md-3 col-md-offset-1"> 
          <i class="fa fa-thumbs-o-up fa-3x" aria-hidden="true"></i> 
          <p class="onblock">Всё как у людей</p> 
        </div> 
 
        <div class="horizontal"></div> 
      </div> 
    </div> 
    <div class="col-xs-12 col-md-3 col-md-offset-4"> 
      <p class="main">Портфолио</p> 
    </div> 
    <div class="col-xs-12 col-md-2"> 
      <div class="line"></div> 
    </div> 
    <div class="col-xs-12 col-md-2"> 
      <p class="text">Ниже представлены<br> выполненные мною работы.<br> Вы можете оценить их.</p> 
    </div> 
 
 
    <div class="col-md-offset-3"> 
      <div class="col-xs-5 col-md-2"> 
        <img src="img\portfolio\2.png" class="galleryphoto" alt=""> 
        <img src="img\portfolio\3.png" class="galleryphoto" alt=""> 
        <img src="img\portfolio\4.png" class="galleryphoto" alt=""> 
      </div> 
 
 
      <div class="col-xs-8 col-md-3"> 
        <img src="img\portfolio\1.png" class="galleryphoto" alt=""> 
        <img src="img\portfolio\8.png" class="galleryphoto" alt=""> 
      </div> 
 
      <div class="col-xs-5 col-md-2"> 
        <img src="img\portfolio\7.png" class="galleryphoto" alt=""> 
        <img src="img\portfolio\6.png" class="galleryphoto" alt=""> 
        <img src="img\portfolio\5.png" class="galleryphoto" alt=""> 
      </div> 
    </div> 
 
    <div class="col-xs-12 col-md-3 col-md-offset-4"> 
      <p class="main margin2">Отзывы</p> 
    </div> 
    <div class="col-xs-12 col-md-2"> 
      <div class="line margin"></div> 
    </div> 
    <div class="col-xs-12 col-md-2"> 
      <p class="text margin">Здесь Вы можете оставить 
        <BR> отзыв о моей работе, 
        <BR> предложение, пожелание.</p> 
    </div> 
 
    <div class="col-xs-12 col-md-6 col-md-offset-3"> 
      <div class="horizontal2"></div> 
      <h4 class="comments">Комментарии (2)</h4> 
      <br><br> 
      <textarea name="comment" placeholder="Введите текст сообщения..." maxlength="300" wrap="hard"></textarea> 
      <a href="#"><i class="fa fa-smile-o fa-2x" aria-hidden="true"></i></a> 
      <a href="#"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i></a> 
 
      <!-- Первый комментарий --> 
      <p class="commentfont">Екатерина</p> 
      <p class="date">2017.02.11 18:33</p> 
      <p class="comment">Отличная работа, Иван! Выполнил всё даже раньше обговоренных сроков,<br> помог с настройкой таблиц MySQL, сверстал, отличный адаптивный веб-сайт!</p> 
      <!-- Первый комментарий --> 
 
      <!-- Второй комментарий --> 
      <p class="commentfont">Никита</p> 
      <p class="date">2016.11.07 21:40</p> 
      <p class="comment">Иван отличный специалист, сделал все быстро и качественно. P.S. Дополнительно был реализован функционал 
        <BR>который изначально не обсуждали, но при этом исполнитель все сделал и не требовал доп оплаты. Рекомендую! 
      </p> 
      <!-- Второй комментарий --> 
 
      <!-- Показать еще --> 
      <a href="#" class="vmore">Показать еще</a> 
      <!-- Показать еще --> 
 
      <div class="horizontal2"></div> 
      <div class="col-xs-12 col-md-12 col-md-offset-2"> 
        <p class="main2">Контактная информация</p> 
      </div> 
 
      <div class="icons"> 
        <div class="col-xs-2 col-md-1 col-md-offset-3"> 
          <a href="#"><i class="fa fa-vk fa-2x" aria-hidden="true"></i></a> 
        </div> 
        <div class="col-xs-2 col-md-1"> 
          <a href="#"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a> 
        </div> 
        <div class="col-xs-2 col-md-1"> 
          <a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a> 
        </div> 
        <div class="col-xs-2 col-md-1"> 
          <a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a> 
        </div> 
        <div class="col-xs-2 col-md-1"> 
          <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a> 
        </div> 
      </div> 
 
    </div> 
 
    <div class="footer"> 
 
    </div> 
 
  </div> 
</body> 
 
</html>