Mandarin Design - TEXT Demonstration

M	A	N	D	A	R	I	N
				d	e	s	i	g	n

Main Services Gallery Web Help About Us Guestbook Contact Us

only you can hear the sound of one hand clapping

Pure Text

a page without graphics

.........................
                         .
                          .
                           ..............

text and characters

                ~|_ 
                 (_)\_

This purpose of this page is to explore and demonstrate the use of the following:

type
size
weight
color
space
position
warm colors forward
cool colors back

.........................
                         .
                          .
                           ..............

type, size and weight

This is big and this is small.
Loud
quiet
Loud
quiet
Loud
quiet

.........................
                         .
                          .
                           ..............

browser safe colors

Do you still dream in browser-safe colors? Okay, lets use only a select few of the 216 browser safe colors in this text-only page.

And, no cheating by using the font tag. Let's do it all with

.........................
                         .
                          .
                           ..............

inline style

Using Inline Style instead of an external style sheet will allow you to right-click to view the source code and the styles used.

.........................
                         .
                          .
                           ..............

font sizes

Varying the font sizes may add

some interest to your layout.

WHERE DO WE GO FROM HERE?

This little ditty is done with the DIV tag.

.........................
                         .
                          .
                           ..............

Source Code

View the source code for this entire page.

...there is nothing more difficult to carry out, nor more doubtful of success, nor more dangerous to handle, than to initiate a new order of things.

For the reformer

has enemies in all those who profit by the old order,and only lukewarm defenders in all those who would profit by the new order,

this lukewarmness arising partly from fear of their adversaries, who have the laws in their favor;

and partly from the incredulity of mankind, who do not truly believe in anything new until they have had actual experience of it.

Thus it arises that in every opportunity for attacking the reformer, his opponents do so with the zeal of partisan,

the others only defend him half-heartedly, so that between them he runs great danger.

It is necessary, however, in order to investigate thoroughly this question,

to examine whether these innovators are independent,

or whether they depend on others,

that is to say, whether in order to carry out their designs they have to entreat or are able to compel.

In the first case they invariably suceed ill, and accomplish nothing;

but when they can depend on their own strength...
they rarely fail...
MACHIAVELLI
The Prince
1542

<HTML><HEAD><TITLE>Mandarin Design - TEXT Demonstration</TITLE>

<style type="text/css"> 
A:link {
color: #000066; 
}   /* unvisited link */

A:visited { 
color: #333366;
}   /* visited links */
 
A:hover {
      	color: #FF3300;
	text-decoration:underline;
}

A:active {
	color: yellow;
	background-color : White;
}

H3.spaced {
    font-family:arial, verdana;
	color: #990000;
	letter-spacing : 4px;
	font-size: small; 
	background : transparent;
	}

hr.mandarin {
          color: #FF6600; 
          width: 50%; 
}

hr.mandarin2 {
          color: #000000; 
          width: 50%; 
}

small {
	color: white;
}

big {
	color: white;
}

body {
	margin-left: .0in;
	margin-right: .0in;
	margin-top: .0in;
	margin-bottom: .0in;
	background : black;
}

PRE {
	color: #3366ff;
}
 
 LI {
	color: #00FF00;
}                           
 
H2.mymainhead {
font:  26pt times, serif;
color: #FF6600
}

H2.myhead {
position: relative;
top: 0px;
font:  italic bold 52pt  times, serif;
color: maroon;
margin-left: 5px;
}

H3.myhead
{
position: relative;
top: -47px;
font: normal normal normal 16pt Haettenschweiler, sans-serif;
color: #CCFF00;
margin-left: 30px;
}

.navbutton {
  background-color: #FFFFFF; 
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: black;
  border-bottom-color: black;
  border-width: thin;
  border-style: outset;
  }

p.indent60
{
	margin-left: 60px;
	}

p.small
{
	color: #FF0000;
	margin-left: 60px;
	font:  10pt verdana, times, sans-serif;
	}

p.smaller
{
	color: #FF0000;
	margin-left: 60px;
	font:  8pt verdana, times, sans-serif;
	}
	
p.orange 
{
	color: #FF6600;
    font-weight: bold; 
	font-size: 12px;
	line-height: 24px; 
  	margin-left: 60px;
    font-family: Verdana, Geneva, Arial, sans-serif; 
	}
	
p.red
{
	color: #FF0000;
	font-weight: bold; 
	font-size: 12px;
	line-height: 24px; 
 	margin-left: 60px;
	font-family: Verdana, Geneva, Arial, sans-serif 
	}	
	
.yellowbig 
{ 
color: #ff0; 
font-style: normal; 
font-weight: bold; 
font-size: 14px; 
line-height: 24px; 
font-family: Verdana, Geneva, Arial, sans-serif 
}

.textlime
{ 
color: #00FF00; 
font-style: normal; 
}

.heading12{
	color: #990000;
	font-weight: bold;
	font-size: 12px;
	font-family: Arial Narrow;
}

table.sample1{
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	font-family: Arial Narrow;
    margin-left:   1.50in;
    margin-right:  1.50in; 
}

table.sample2{
	font-size: 10px;
	line-height: 16px;
	font-family: Verdana;
   
}

path{
	font-size: 10px;
	color: #003399
}
</style>

</HEAD>
 
<BODY bgcolor="White" >
<table class="sample1"  border=0 cellpadding=5 cellspacing=5 width="50%"  
  align="center" >
<tr>
    <td bgcolor="#ff6600">M</td>
    <td bgcolor="#ff3333">A</td>
    <td bgcolor="#ff3366">N</td>
    <td bgcolor="#ff3399">D</td>
    <td bgcolor="#ff33CC">A</td>
    <td bgcolor="#ff33FF">R</td>
    <td bgcolor="#FF33CC">I</td>
    <td bgcolor="#ff6600">N</td>
    <td bgcolor="black"> </td>
</tr>
<tr><td bgcolor="black"></td>
    <td bgcolor="black"></td>
    <td bgcolor="black"></td>
    <td bgcolor="black"></td>
    <td bgcolor="#ff3399">d</td>
    <td bgcolor="#ff33CC">e</td>
    <td bgcolor="#ff33FF">s</td>
    <td bgcolor="#FF33CC">i</td>
    <td bgcolor="#ff6600">g</td>
    <td bgcolor="#ff3300">n</td>
</tr>
</table>

<table border=1 bordercolor="#ffffcc" bgcolor=white valign="top" width="100%" 
align="center" cellspacing="0" cellpadding="0">
<tr><td height="20" align=center nowrap>
                                           
<a href="index.html">Main         </a>    
<a href="services.html">Services  </a>    
<a href="gallery.html">Gallery    </a>     
<a href="vegas.html">Web Help     </a>    
<a href="about.html">About Us     </a>    
<a href="guestbook.html">Guestbook</a>    
<a href="mailto:webmaster@mandarindesign.com">Contact Us</a>
</td>
</tr>
</table>

<TABLE align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr><td width="10%">only you can hear the sound of one hand clapping</td>
<td> 
<h2 class=myhead>Pure Text</h2> 
<h3 class=myhead>a page without graphics</h3>
<pre>
.........................
                         .
                          .
                           ..............
</pre> 
<h3 class=myhead>text and characters</h3>

<pre>
                ~|_ 
                 (_)\_
</pre> 			   
<p class="red" > 
This purpose of this page 
is to explore and demonstrate the use of the following:
</p>

<p class="indent60">
<span class="textlime">
<br>type 
<br>size 
<br>weight 
<br>color 
<br>space
<br>position 
<br>warm colors forward 
<br>cool colors back 
</span>
</p>

<br><br><br><pre>
.........................
                         .
                          .
                           ..............
</pre> 
<h3 class="myhead">type, size and weight</h3>

<p class="indent60"> 
<big>This is big </big>
<small> and this is small.</small>
<br>
<big> Loud</big><br>
<small> quiet</small><br>  
<big> Loud</big><br>
<small> quiet</small><br>
<big> Loud</big><br>
<small> quiet</small><br>
</p> 
<br><br><br><pre>
.........................
                         .
                          .
                           ..............
</pre> 
<h3 class="myhead">browser safe colors</h3>

<p class="orange">  
Do you still dream in browser-safe colors? 
Okay, lets use only a select few 
of the 216 browser safe colors in this text-only page.  
</p>

<p class="orange"> 
And, no cheating by using the font tag. Let's do it all with 
</p>

<br><br><br><pre>
.........................
                         .
                          .
                           ..............
</pre> 
<h3 class="myhead">inline style</h3>

<p class="red"> 
Using <b>Inline Style</b> instead of an external 
style sheet will allow you to right-click
to view the source code and the styles used.
</p>

<br><br><br><pre>
.........................
                         .
                          .
                           ..............
</pre> 
<h3 class="myhead">font sizes</h3> 
<p class="small" > 
Varying the font sizes may add
</p>
<p class="smaller">  
some interest to your layout.  
</p>

<p><span class="yellowbig">WHERE DO WE GO FROM HERE?</span></p>
 
<div style="width:200px;text-align:left;padding:5px;background-color:#FFFFFF;border:1px dotted red;font-size:12px;">This little ditty is done with the DIV tag. </div>
</td>
</tr>
</table>

<table class="sample2" align="right"  cellpadding=10 cellspacing=0 width="20%" bgcolor=#ff6600 border=0>
<tr><td   bgcolor="#ff0000">
<br><br> 
...there is nothing more difficult to carry out, nor more doubtful of success, nor more dangerous to handle,
than to initiate a new order of things.</td></tr>

<tr><td   bgcolor="#ff6600" align="center"> For the reformer</td></tr>
<tr><td   bgcolor="#ff9900">has enemies in all those who profit by the old order,and only lukewarm defenders in all those who would profit by the new order,</td></tr>
<tr><td   bgcolor="#ffcc00">this lukewarmness arising partly from fear of their adversaries, who have the laws in their favor; </td></tr>
<tr><td   bgcolor="#ffff00">and partly from the incredulity of mankind, who do not truly believe in anything new until they have had actual experience of it.</td></tr>
<tr><td   bgcolor="#ffff33">Thus it arises that in every opportunity for attacking the reformer, his opponents do so with the zeal of partisan, </td></tr>
<tr><td   bgcolor="#ffff66">the others only defend him half-heartedly, so that between them he runs great danger. </td></tr>

<tr><td   bgcolor="#ffff99">It is necessary, however, in order to investigate thoroughly this question, </td></tr>
<tr><td   bgcolor="#ffffcc">to examine whether these innovators are independent, </td></tr>
<tr><td   bgcolor="#ff3300" align="center">or whether they depend on others, </td></tr>
<tr><td   bgcolor="#ff6600">that is to say, whether in order to  carry out their designs they have to entreat or are able to compel. </td></tr>
<tr><td   bgcolor="#ff9900">In the first case they invariably suceed ill, and accomplish nothing; </td></tr>
<tr><td   bgcolor="#ffffcc">but when they can depend on their own strength...
<br>they rarely fail... 
<br>
MACHIAVELLI<br>The Prince<br>1542

</td></tr>
</table>
</body>
</html>

Scrollbar Color Picker