Teline's Typography |
Wednesday, 28 February 2007 08:59 AM America/New_York |
This page presents most of typographical aspects of JA Teline. Make your readers happy with great Typography and User Experience! This is an Heading 1Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. This is an Heading 2Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Below is a sample of <pre> or <div class="code"> #ja-rightcol { width: 180px; float: right; color: #EEEEEE; } This is an Heading 3Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
This is an Heading 4Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
This is a sample Bubble. Use <div class="bubble1"> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div>Bubble
</div>
This is a sample Bubble. Use <div class="bubble2"> <div> Your Bubble goes here! </div>Bubble
</div>
SQUARE SPEECH BUBBLE.
This is a sample Bubble. Use <div class="bubble3"> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div>Bubble
</div>
This is a sample Bubble. Use <div class="bubble4"> <div> Your Bubble goes here! </div>Bubble
</div>
SQUARE THINKING BUBBLE.
This is a sample sticky note. Use <p class="stickynote">Your sticky note goes here!</p> to form a sticky note! This is a sample pin note. Use <p class="pinnote">Your clip note goes here!</p> to form a clip note! This is a sample newspaper note. Use <p class="clipnote">Your clip note goes here!</p> to form a clip note! This is a sample clip note. Use <p class="newspaper">Your clip note goes here!</p> to form a clip note! This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote! This is a sample Blockquote. Use <div class="blockquote"><blockquote>Your quote goes here!</blockquote></div> to form a quote! This is a sample Blockquote Highlight. Use <div class="quote-hilite"><blockquote>Your quote goes here!</blockquote></div> to form a quote! 01This is a sample block number. Use <p class="blocknumber"><span class="bignumber">01.</span>Your content goes here!</p> to form a block number! 02This is a sample block number. Use <p class="blocknumber"><span class="bignumber">02.</span>Your content goes here!</p> to form a block number! 03This is a sample block number. Use <p class="blocknumber"><span class="bignumber">03.</span>Your content goes here!</p> to form a block number! This is a sample error message. Use <p class="error">Your error message goes here!</p>. This is a sample tips message. Use <p class="tips">Your tips goes here!</p>. This is a sample video link Watch video Now!. Use <span class="video"><a href="/Your link" title="Your title">amp</a></span>. This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>. This is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Teline bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words. Use <p class="box-grey">Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p> Use <p class="box-hilite">Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p> Story High LightThis is a sample Caption Box Use. <div class="story-hilite"><h3>Story Highlight</h3>Your content go there!</div>
This is a sample image border. Use <img src="/your url" title="Your title" alt="Image name" class="border" />
|