HTML
<div class="ns-container">
<ul class="note-strips">
<li class="red">
<span class="big">Note</span>
<span>Don't start a company unless it's an obsession and something you love.</span>
</li>
<li class="blue">
<span>If you have an exit strategy. it's not an obsession.</span>
</li>
<li class="green">
<span>Hire People who you think will love working there.</span>
</li>
<li class="pink">
<span>Sales cure all.</span>
</li>
<li class="orange">
<span>Know your core competencies and focus on being great at them.</span>
</li>
<li class="dark-green">
<span>Lunch is chance to get out of the office and talk.</span>
</li>
<li class="grey">
<span>No offices. These is nothing private in a startup.</span>
</li>
<li class="red">
<span>As far as technology, go with what you know.</span>
</li>
<li class="blue">
<span>Keep the organization flat.</span>
</li>
<li class="green">
<span>Never buy swag.</span>
</li>
<li class="pink">
<span>Never hire a PR firm.</span>
</li>
<li class="orange">
<span>Make the job fun for employees.</span>
</li>
</ul>
</div>
CSS
body {
background-color: #F5F5F5;
font-family: 'Tangerine', serif;
font-size: 50px;
text-shadow: 4px 4px 4px #555;
}
.ns-container {
margin: 20px auto;
width: 50%;
}
ul.note-strips {
padding: 0;
margin: 0;
color: #F9FEDD;
}
ul.note-strips li {
padding: 10px;
margin: 0;
list-style: none;
-webkit-box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.7);
-moz-box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.7);
box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.7);
}
ul.note-strips li span {
font-size: 25px;
}
ul.note-strips li .big {
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
}
ul.note-strips .red {
background-color: #BE4757;
}
ul.note-strips .green {
background-color: #8FB367;
}
ul.note-strips .blue {
background-color: #6D94C3;
}
ul.note-strips .orange {
background-color: #F2A02B;
}
ul.note-strips .pink {
background-color: #FA6766;
}
ul.note-strips .dark-green {
background-color: #3AA78B;
}
ul.note-strips .grey {
background-color: #49515F;
}
1 Response