UX Summit

by bryandowning

HTML

<div class="item-grid">

    <div class="row">
        <div class="item1of5"></div>
        <div class="item3of5"></div>
        <div class="item1of5"></div>
    </div>
    <div class="row">
        <div class="item1of5"></div>
        <div class="item1of5"></div>
        <div class="item1of5"></div>
        <div class="item1of5"></div>
        <div class="item1of5"></div>
    </div>
    <div class="row">
        <div class="item1of5"></div>
        <div class="item2of5"></div>
        <div class="item2of5"></div>
    </div>
    
    <div class="row">
        <div class="item4of5"></div>
        <div class="item1of5"></div>
    </div>
    
</div>

<p>This is some standard paragraph text</p>
<br><br>
<a href="#">Regular link</a>
<br><br>
<a href="#" class="button">Register</a>
<br><br>
<a href="#" class="button primary">Register</a>
<br><br>
<a href="#" class="button secondary">Register</a>

CSS

body {
    color: #6d6e70;
    font-size: 16px;
    font-family: 'Open Sans', Arial, sans-serif;
    padding: 32px;
}

/* LINKS */
a {
    color: #26a9e0;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* BUTTONS */
.button {
    display: inline-block;
    
    padding: 8px 32px 8px 32px;

    background-color: #c4c4c4;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c4c4c4), to(#a3a3a3));
    background-image: -webkit-linear-gradient(top, #c4c4c4, #a3a3a3);
    background-image:    -moz-linear-gradient(top, #c4c4c4, #a3a3a3);
    background-image:      -o-linear-gradient(top, #c4c4c4, #a3a3a3);
    background-image:         linear-gradient(to bottom, #c4c4c4, #a3a3a3);

    -webkit-border-radius: 4px;
            border-radius: 4px; 
    background-clip: padding-box;
    
    
  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.5), 0px 2px 2px 0px rgba(0,0,0,0.5);
          box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.5), 0px 2px 2px 0px rgba(0,0,0,0.5);
    
    color: #FFF;
    text-shadow: 0px -1px 0px #666;
    
    
}
.button:hover {
    background-color: #c4c4c4;
    background-image: none;
    text-decoration: none;
}
.button:active {
    
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
          box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
    
    -webkit-transform: translate(0px, 2px);
       -moz-transform: translate(0px, 2px);
         -o-transform: translate(0px, 2px);
        -ms-transform: translate(0px, 2px);
            transform: translate(0px, 2px);
}


.button.primary {
    
  background-color: #f6921e;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6921e), to(#cc7b1e));
  background-image: -webkit-linear-gradient(top, #f6921e, #cc7b1e);
  background-image:    -moz-linear-gradient(top, #f6921e, #cc7b1e);
  background-image:      -o-linear-gradient(top, #f6921e, #cc7b1e);
  background-image:         linear-gradient(to bottom, #f6921e,...