#34 Labels

Author: Daniell Mesquita

elements.html

@@ -45,6 +45,22 @@ <h6>Heading 6</h6>
 <br/><h1>Blockquotes</h1>
 <blockquote><p>Phrase</p><span>Creator</span></blockquote><br/>
 <textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height:16px">&lt;blockquote&gt;&lt;p&gt;Phrase&lt;/p&gt;&lt;span&gt;Creator&lt;/span&gt;&lt;/blockquote&gt;</textarea>
+<h1>Badges</h1>
+<h1>Heading 1 <span class="badge">Badge</span></h1>
+<h2>Heading 2 <span class="badge">Badge</span></h2>
+<h3>Heading 3 <span class="badge">Badge</span></h3>
+<h4>Heading 4 <span class="badge">Badge</span></h4>
+<h5>Heading 5 <span class="badge">Badge</span></h5>
+<h6>Heading 6 <span class="badge">Badge</span></h6>
+<p>Paragraph <span class="badge">Badge</span></p>
+<span>Span <span class="badge mini">BADGE</span></span><br/>
+<textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height: 44px;">&lt;h1&gt;Heading 1 &lt;span class="badge"&gt;Badge&lt;/span&gt;&lt;/h1&gt;
+&lt;h2&gt;Heading 2 &lt;span class="badge"&gt;Badge&lt;/span&gt;&lt;/h2&gt;
+&lt;h3&gt;Heading 3 &lt;span class="badge"&gt;Badge&lt;/span&gt;&lt;/h3&gt;
+&lt;h4&gt;Heading 4 &lt;span class="badge"&gt;Badge&lt;/span&gt;&lt;/h4&gt;
+&lt;h5&gt;Heading 5 &lt;span class="badge"&gt;Badge&lt;/span&gt;&lt;/h5&gt;
+&lt;h6&gt;Heading 6 &lt;span class="badge"&gt;Badge&lt;/span&gt;&lt;/h6&gt;
+&lt;p&gt;Paragraph &lt;span class="badge mini"&gt;Badge&lt;/span&gt;&lt;/p&gt;</textarea>
 <script type="text/javascript" src="rsc/jquery.min.js"></script>
 </body>
 </html>

rsc/common.css

@@ -6,8 +6,9 @@ body{background:rgb(239, 239, 239);font-family:Arial;-webkit-font-smoothing:anti
 .h5, h5{font-size:40px;font-weight:bold;color:#333;margin:25px 0px 0px 0px}
 .h6, h6{font-size:30px;font-weight:bold;color:#333;margin:25px 0px 0px 0px}
 
-.badge{background-color:#e7534f;font-family:Arial;font-size:12px;font-weight:bold;padding:3px 8px;border-radius:3px;color:#fff;position:relative;top:-2px;margin-left:8px;display:inline}.badge.blue{background-color:#5b6ed6}.badge.green{background-color:#53a93f}
-
+.badge{background-color:#e7534f;font-family:Arial;font-weight:bold;padding:3px 8px;border-radius:3px;color:#fff;position:relative;margin-left:8px;display:inline}
+h1 .badge{font-size:40px;top:-14px}h2 .badge{font-size:35px;top:-12px}h3 .badge{font-size:30px;top:-12px}h4 .badge{font-size:25px;top:-10px}h5 .badge{font-size:20px;top:-8px}h6 .badge{font-size:15px;top:-6px}
+.badge.blue{background-color:#5b6ed6}.badge.green{background-color:#53a93f}
 .badge.mini{font-size:7px;-webkit-user-select:none;-moz-user-select:none;user-select:none}
 
 .p,p{color:#585b55;font-weight:bold;font-size:12px}.span,span{color:#888;font-size:10px}.blockquote,blockquote{padding:10px;background:#d6d6d6;color:#585b55;font-size:12px;font-weight:bold}