#17 Images: IMG.Caption

Author: Daniell Mesquita

elements.html

@@ -5,7 +5,7 @@
 <link rel="icon" href="icon.png" />
 <browsertab color="#CD5C5C">
 <icon src="icon.svg">
-<title color="#CD5C5C">Framework.js Elements</title>
+<title color="#CD5C5C">Plasmmer UI Elements</title>
 <meta name="pehtml" content="true">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
 <meta name="directory" content="rsc">
@@ -16,7 +16,7 @@
 <div class="content">
 <article>
 <nopehtml><blockquote style="background:#D6D6D6;border-top:1px solid #E7534F;border-bottom:1px solid #E7534F;border-left:10px solid #E7534F;border-right:10px solid #E7534F;border-radius:20px;margin:0 auto;text-align:center"><div style="margin-top: -7px;margin-left: 5px;width: 80px;height: 80px;clear: left;float: left"><img src="rsc/warning.svg" width="80px" height="80px"/></div><h1 style="font-size:40px;margin-top:-5px;margin-bottom:-1px">Aviso</h1><br>Seu navegador não suporta sites construídos em PEHTML. Isso significa que esse site não será exibido corretamente em seu atual navegador. <br><a href="../boat">Baixe o navegador Internet Boat</a> para experimentar todo o poder do PEHTML e aproveitar todos os recursos desse site.<br/><p>Don't know what is PEHTML? Learn <a href="https://developers.plasmmer.com/PEHTML" target="blank">here</a>.</p></blockquote></nopehtml>
-<p>After follow the <a href="index.html#instructions" target="blank">instructions</a>, here is the page for you start inserting elements to your page/app that uses the power of Framework.js!</p>
+<p>After follow the <a href="index.html#instructions" target="blank">instructions</a>, here is the page for you start inserting elements to your page/app that uses the power of Plasmmer UI Framework!</p>
 <h1>Popunders</h1><br/>
 <h4>Fullscreen</h4>
 <h6>Action to activate</h6>
@@ -61,6 +61,10 @@ <h6>Heading 6 <span class="badge">Badge</span></h6>
 &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>
+<h1>Images</h1>
+<h4>IMG.Caption</h4>
+<div class="caption"><img class="caption" title="This is the image caption" src="https://placeholdit.imgix.net/~text?txtsize=43&bg=00A185&txtclr=7ECFC1&txt=400x350&w=400&h=350&fm=png" width="400" height="350"><span>This is the image caption</span></div><br/>
+<textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height: 44px;">&lt;div class="caption"&gt;&lt;img class="caption" title="This is the image caption" src="https://placeholdit.imgix.net/~text?txtsize=43&amp;bg=00A185&amp;txtclr=7ECFC1&amp;txt=400x350&amp;w=400&amp;h=350&amp;fm=png" width="400" height="350"&gt;&lt;span&gt;This is the image caption&lt;/span&gt;&lt;/div&gt;</textarea>
 <script type="text/javascript" src="rsc/jquery.min.js"></script>
 </body>
 </html>

rsc/common.css

@@ -13,6 +13,10 @@ h1 .badge{font-size:40px;top:-14px}h2 .badge{font-size:35px;top:-12px}h3 .badge{
 
 .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}
 
+div.caption{border:1px solid #333;padding:3px;max-width:100%;display:inline-block;height:auto}
+div.caption img{display:block;padding:0;margin:0;width:100%;height:auto}
+div.caption span{color:#333;font-size:14px}
+
 .blockquotebtn {
 	background-color: #e7534f;
 	border-top: 1px solid #333;