I've done a small portfolio project and I'm looking for some review, especially of:HTML markup,CSS/Sass,animations used,media queries.What could been done better? Thanks for help in advance.Here's a pen.HTML<div class=container>  <ul class=projects-list>    <li class=project>      <img src=https://www.dropbox.com/s/lbmdpqvd19ukh5m/florence.jpg?raw=1 alt= />      <div class=project-info>        <ul class=tags>          <li class=tag>HTML</li>          <!-- /.tag -->          <li class=tag>CSS</li>          <!-- /.tag -->        </ul>        <!-- /.tags -->        <h3>Project name</h3>        <p>Sed eu libero eget erat efficitur fermentum in convallis mauris. Sed sit amet ante feugiat, fringilla felis quis, faucibus urna. Vivamus vestibulum congue risus, quis scelerisque leo.</p>        <ul class=project-btns>          <li><a href= class=project-btn><i class=fa fa-plus></i>Info</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-external-link></i>Show</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-github></i>Code</a></li>        </ul>        <!-- /.project-btns -->      </div>      <!-- /.project-info -->    </li>    <!-- /.project -->    <li class=project>      <img src=https://www.dropbox.com/s/lbmdpqvd19ukh5m/florence.jpg?raw=1 alt= />      <div class=project-info>        <ul class=tags>          <li class=tag>HTML</li>          <!-- /.tag -->          <li class=tag>CSS</li>          <!-- /.tag -->        </ul>        <!-- /.tags -->        <h3>Project name</h3>        <p>Sed eu libero eget erat efficitur fermentum in convallis mauris. Sed sit amet ante feugiat, fringilla felis quis, faucibus urna. Vivamus vestibulum congue risus, quis scelerisque leo.</p>        <ul class=project-btns>          <li><a href= class=project-btn><i class=fa fa-plus></i>Info</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-external-link></i>Show</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-github></i>Code</a></li>        </ul>        <!-- /.project-btns -->      </div>      <!-- /.project-info -->    </li>    <!-- /.project -->    <li class=project>      <img src=https://www.dropbox.com/s/lbmdpqvd19ukh5m/florence.jpg?raw=1 alt= />      <div class=project-info>        <ul class=tags>          <li class=tag>HTML</li>          <!-- /.tag -->          <li class=tag>CSS</li>          <!-- /.tag -->        </ul>        <!-- /.tags -->        <h3>Project name</h3>        <p>Sed eu libero eget erat efficitur fermentum in convallis mauris. Sed sit amet ante feugiat, fringilla felis quis, faucibus urna. Vivamus vestibulum congue risus, quis scelerisque leo.</p>        <ul class=project-btns>          <li><a href= class=project-btn><i class=fa fa-plus></i>Info</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-external-link></i>Show</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-github></i>Code</a></li>        </ul>        <!-- /.project-btns -->      </div>      <!-- /.project-info -->    </li>    <!-- /.project -->    <li class=project>      <img src=https://www.dropbox.com/s/lbmdpqvd19ukh5m/florence.jpg?raw=1 alt= />      <div class=project-info>        <ul class=tags>          <li class=tag>HTML</li>          <!-- /.tag -->          <li class=tag>CSS</li>          <!-- /.tag -->        </ul>        <!-- /.tags -->        <h3>Project name</h3>        <p>Sed eu libero eget erat efficitur fermentum in convallis mauris. Sed sit amet ante feugiat, fringilla felis quis, faucibus urna. Vivamus vestibulum congue risus, quis scelerisque leo.</p>        <ul class=project-btns>          <li><a href= class=project-btn><i class=fa fa-plus></i>Info</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-external-link></i>Show</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-github></i>Code</a></li>        </ul>        <!-- /.project-btns -->      </div>      <!-- /.project-info -->    </li>    <!-- /.project -->    <li class=project>      <img src=https://www.dropbox.com/s/lbmdpqvd19ukh5m/florence.jpg?raw=1 alt= />      <div class=project-info>        <ul class=tags>          <li class=tag>HTML</li>          <!-- /.tag -->          <li class=tag>CSS</li>          <!-- /.tag -->        </ul>        <!-- /.tags -->        <h3>Project name</h3>        <p>Sed eu libero eget erat efficitur fermentum in convallis mauris. Sed sit amet ante feugiat, fringilla felis quis, faucibus urna. Vivamus vestibulum congue risus, quis scelerisque leo.</p>        <ul class=project-btns>          <li><a href= class=project-btn><i class=fa fa-plus></i>Info</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-external-link></i>Show</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-github></i>Code</a></li>        </ul>        <!-- /.project-btns -->      </div>      <!-- /.project-info -->    </li>    <!-- /.project -->    <li class=project>      <img src=https://www.dropbox.com/s/lbmdpqvd19ukh5m/florence.jpg?raw=1 alt= />      <div class=project-info>        <ul class=tags>          <li class=tag>HTML</li>          <!-- /.tag -->          <li class=tag>CSS</li>          <!-- /.tag -->        </ul>        <!-- /.tags -->        <h3>Project name</h3>        <p>Sed eu libero eget erat efficitur fermentum in convallis mauris. Sed sit amet ante feugiat, fringilla felis quis, faucibus urna. Vivamus vestibulum congue risus, quis scelerisque leo.</p>        <ul class=project-btns>          <li><a href= class=project-btn><i class=fa fa-plus></i>Info</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-external-link></i>Show</a></li>          <li><a href= target=_blank class=project-btn><i class=fa fa-github></i>Code</a></li>        </ul>        <!-- /.project-btns -->      </div>      <!-- /.project-info -->    </li>    <!-- /.project -->  </ul>  <!-- /.projects-list --></div><!-- /.container -->CSS* {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;}body {  background-color: #efefef;  font-family: 'Lato', sans-serif;  font-weight: 300;}a {  transition: all .2s linear;}.container {  max-width: 1100px;  margin: 0 auto;}.project {  width: 31.333%;  float: left;  margin: 1%;  background: #fff;  position: relative;  overflow: hidden;  box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.3);  font-size: 0;}.project img {  max-width: 100%;  transition: all .4s ease;}.project:hover .project-info {  bottom: 0;}.project:hover .project-info p {  opacity: 1;}.project:hover img {  transform: scale(1.2) rotate(3deg);}.project-info {  position: absolute;  width: 100%;  height: 100%;  bottom: calc(-100% + 50px);  padding: 10px 30px;  background: rgba(255, 255, 255, 0.7);  transition: all .4s ease;  font-size: 14px;  line-height: 20px;}.project-info h3 {  font-size: 20px;  font-family: 'Roboto Slab', serif;  font-weight: 300;  line-height: 30px;  margin-bottom: 10px;}.project-info p {  transition: all 1s ease;  opacity: 0;}.project-info .tags {  position: absolute;  top: 5px;  right: 5px;}.project-info .tag, .project-info .project-btn {  -moz-border-radius: 3px;  -webkit-border-radius: 3px;  border-radius: 3px;}.project-info .tag {  display: inline-block;  background: #333;  color: #fff;  font-size: 10px;  line-height: 10px;  padding: 2px 5px;  font-weight: 400;}.project-info .project-btn {  background: #333;  color: #fff;  text-decoration: none;  display: block;  padding: 5px 10px;  font-size: 13px;  line-height: 20px;}.project-info .project-btn:hover {  background: #fff;  color: #333;}.project-info .fa {  margin: 0 5px;}.project-info .project-btns {  text-align: center;  margin-top: 20px;}.project-info .project-btns li {  display: inline-block;  margin-right: 5px;}@media only screen and (min-width: 768px) and (max-width: 1099px) {  .project {    width: 48%;  }}@media only screen and (max-width: 767px) {  .project {    width: 76%;    margin: 2% auto;    float: none;  }}@media only screen and (max-width: 479px) {  .project {    width: 96%;  }  .project-info {    font-size: 12px;    line-height: 15px;  }}Sass@import 'compass';@import 'compass/reset';$bg-color: #efefef;$bg-project: #fff;$bg-tag: #333;$bg-btn: #333;$color-tag: #fff;$color-btn: #fff;* {  @include box-sizing(border-box);}body {  background-color: $bg-color;  font: {    family: 'Lato', sans-serif;    weight: 300;  }}a {  transition: all .2s linear;}.container {  max-width: 1100px;  margin: 0 auto;}.project {  width: 31.333%;  float: left;  margin: 1%;  background: $bg-project;  position: relative;  overflow: hidden;  box-shadow: 0px 10px 5px -5px rgba(#000,.3);  font-size: 0;  img {    max-width: 100%;    transition: all .4s ease;  }  &:hover .project-info {    bottom: 0;  }  &:hover .project-info p {    opacity: 1;  }  &:hover img {    transform: scale(1.2) rotate(3deg);  }}.project-info {  position: absolute;  width: 100%;  height: 100%;  bottom: calc(-100% + 50px);  padding: 10px 30px;  background: rgba($bg-project,.7);  transition: all .4s ease;  font-size: 14px;  line-height: 20px;  h3 {    font-size: 20px;    font-family: 'Roboto Slab', serif;    font-weight: 300;    line-height: 30px;    margin-bottom: 10px;  }  p {    transition: all 1s ease;    opacity: 0;  }  .tags {    position: absolute;    top: 5px;    right: 5px;  }  %box-radius {    @include border-radius(3px);  }  .tag {    @extend %box-radius;    display: inline-block;    background: $bg-tag;    color: $color-tag;    font-size: 10px;    line-height: 10px;    padding: 2px 5px;    font-weight: 400;  }  .project-btn {    @extend %box-radius;    background: $bg-btn;    color: $color-btn;    text-decoration: none;    display: block;    padding: 5px 10px;    font-size: 13px;    line-height: 20px;    &:hover {      background: $color-btn;      color: $bg-btn;    }  }  .fa {    margin: 0 5px;  }  .project-btns {    text-align: center;    margin-top: 20px;    li {      display: inline-block;      margin-right: 5px;    }  }}@media only screen and (min-width: 768px) and (max-width: 1099px){   .project {    width: 48%;  }}@media only screen and (max-width: 767px){   .project {    width: 76%;    margin: 2% auto;    float: none;  }}@media only screen and (max-width: 479px){   .project {    width: 96%;  }  .project-info {    font-size: 12px;    line-height: 15px;  }}
Small portfolio project with sliding content
html;css