Portfolio Item

index.html

<article>
  <header>
    <img src="https://scontent.xx.fbcdn.net/t31.0-8/s960x960/12593766_619378064882983_8323228428124820053_o.jpg" />
    <h1>Riders Share</h1>
  </header>
  <div class="content">
    <p>A web based ride sharing platform designed to give motorcyclists the opportunity to rent out their unused bikes, and for enthusiasts from all over the country to indulge in their favorite mode of transportation. Free on the open road, and away from the four wheel cage.</p>
    <h2>Skills used:</h2>
    <ul class="tags">
      <li class="html">HTML</li>
      <li class="css">CSS</li>
      <li class="js">JS</li>
      <li class="css">ReactJS</li>
      <li class="html">Meteor</li>
      <li class="js">NodeJs</li>
      <li class="html">AWS</li>
    </ul>
  </div>
</article>

Portfolio Item.markdown

Portfolio Item

Just trying out a layout for the items on my portfolio website.

A Pen by Raj K Singh on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto);

body {
  background: #333333;
  font-family: 'Roboto';
  color: #333;
  font-size: 1em;
  line-height: 1.5;
}

p { margin-bottom: 1.5em; }

article {
  width: 500px;
  margin: 100px auto 0;
}

header {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

header img {
  display: block;
  width: 600px;
  height: 400px;
  position: absolute;
  top: 50%;
  margin-top: -200px;
  left: 50%;
  margin-left: -300px;
  transform-origin: 50% 50%;
  transform: scale(0.9) rotate(-5deg);
  transition: all 1s ease-in-out;
}

header:hover img {
  transform: scale(1) rotate(0);
}

header h1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 2.5em;
  color: #fff;
  text-transform: uppercase;
  background: rgba(0,0,0,0.8);
  padding: 0 0.3em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.content {
  float: left; /* float left to restore height from floated tags */
  background: #fff;
  padding: 1em;
}

h2 {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 1.875em;
  margin-bottom: 0.25em;
}

.tags li {
  float: left;
  background: #f2f2f2;
  padding: 0 0.5em;
  margin: 0 0.5em 0 0;
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

.tags .html { border-bottom-color: #fdb729; }
.tags .css { border-bottom-color: #cc0000; }
.tags .js { border-bottom-color: #336699; }