LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
#container
 #sidebar
   .profile-image-container
     h2.profile-name
       .fa.fa-star-o
       span justinseiter
     image.profile-image-bg(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/362859/YPjw2mXN.jpg')
   .profile-meta
     h3 Justin S.
     p Justin is a web designer that loves sketching, bass fishing, and Destiny (the video game, not the stuff of tomorrow).
     ul
       li
         .fa.fa-map-marker
         span Nashville, TN
       li
         .fa.fa-link
         span http://justinseiter.com
       li
         .fa.fa-clock-o
         span Joined: September 2007
 #content
   .fa.fa-rss
   h1.page-title Posts
   article.post-snippet
     .timestamp Nov 2, 2015
     h1.title
       a(href="https://medium.com/@justinseiter/reducing-bugs-with-typography-1d9b65a03dab") Reducing Bugs With Typography
     p As a web designer I understand the importance of typography in applications. So I'm constantly checking whether things like scale and measure are consistent in my presentation. Applying best practices when dealing with type creates a very clean environment for delivering...
    article.post-snippet
     .timestamp Nov 1, 2015
     h1.title
       a(href="#") How I Accidentally Learned JavaScript Closures
     p I’m learning JavaScript. So of course it wasn’t until after I finished writing a solution to a problem I actually realized how it was working. 
     p The exercise was to write a function that could only be executed once. I needed a solution that would wrap an existing function and be able to reference the number of times it ran...
   article.post-snippet
     .timestamp Oct 22, 2015
     h1.title
       a(href="#") Add A JavaScript Library To Console
     p I found this tip buried in a JavaScript video over at iLoveCoding. By the way, check out some of the videos over there as Aziz has a knack for explaining complexity through simple examples...
CSS
body {
  background: #e1eff1;
  font-family: 'Lato';
  color: rgba(0,0,0,0.65);
}
#container {
  margin-left: 360px;
}
#content {
  max-width: 36rem;
  min-width: 22rem;
  font-size: 1rem;
  padding: 0 4rem 0;
  margin: auto;
}
#content a {
  color: #666;
  text-decoration: none;
  background: #ffffeb;
  padding: 0 0.2rem;
}
#content a:hover {
  background: #e94e77;
  color: #ffffe5;
}
#content .fa-rss {
  float: right;
  font-size: 2rem;
  opacity: 0.2;
  position: relative;
  top: 1.7rem;
}
#content .fa-rss:hover {
  opacity: 1;
  color: #e94e77;
  cursor: pointer;
}
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 360px;
  background: #e94e77;
  box-shadow: 1px 0 1px rgba(0,0,0,0.4);
}
.profile-image-container {
  height: 340px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #33666d;
}
.profile-image-container:hover .profile-name {
  color: #ffc;
  color: rgba(225,239,241,0.6);
}
.profile-image-container:hover .profile-image-bg {
  max-width: 100%;
  top: 0;
}
.profile-name {
  position: absolute;
  color: rgba(225,239,241,0.6);
  color: #ffc;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  z-index: 1;
  letter-spacing: 0.06rem;
  top: 0;
  height: 100%;
  bottom: 0em;
  left: 0;
  right: 0;
  margin: 0;
  line-height: 1;
  font-weight: 300;
  padding: 280px 1.4em 0;
  font-size: 1.4rem;
  background: rgba(67,134,144,0.5);
}
.profile-name .fa.fa-star-o {
  float: right;
  position: relative;
  top: -1px;
}
.profile-name .fa.fa-star-o:hover {
  cursor: pointer;
  color: #e94e77;
}
.profile-meta {
  color: rgba(225,239,241,0.96);
  letter-spacing: 0.03rem;
  padding: 1.2rem 2rem;
  line-height: 1.6;
  font-weight: 300;
  box-sizing: border-box;
}
.profile-meta ul {
  list-style: none;
  margin: 0;
  padding: 1rem;
  font-size: 0.9rem;
  opacity: 0.8;
}
.profile-meta ul li {
  margin-bottom: 0.75rem;
}
.profile-meta ul li .fa {
  margin-right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border: 1px solid;
  border-radius: 100%;
}
.profile-meta h3 {
  margin-bottom: 0;
  line-height: 1;
  font-weight: 400;
}
.profile-meta .section-heading {
  text-transform: uppercase;
  opacity: 0.5;
}
.profile-image-bg {
  position: absolute;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.page-title {
  font-size: 3.5rem;
  font-weight: 300;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 1rem;
}
.post-snippet {
  margin-bottom: 4rem;
}
.post-snippet .timestamp {
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  opacity: 0.5;
}
.post-snippet .title {
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 0;
}
.post-snippet p {
  margin-bottom: 1rem;
  line-height: 1.5;
}
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:43

Related Codes

Pen ID
Pen ID
Pen ID