Untitled

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Charter by Matthew Carter</title>
        <link rel="stylesheet" media="all" title="style de la page" href="afficher_cacher_div.css" />
        <script type="text/javascript" src="afficher_cacher_div.js"></script>


    <script type="text/javascript">
        function afficher_cacher(id)
		{
		if(document.getElementById(id).style.visibility=="hidden")
		{
		document.getElementById(id).style.visibility="visible";
		document.getElementById('bouton_'+id).innerHTML='hide info';
		}
		else
		{
		document.getElementById(id).style.visibility="hidden";
		document.getElementById('bouton_'+id).innerHTML='show info';
		}
		return true;
		}
    </script>


<style type="text/css">

	body
		{
		background-color: #000000;
		}

	.headline
		{
		font-family: Times, Times New Roman, serif;
		color: #BEFDFF;
		}

	#left_headline
		{
		position: fixed;
		font-size: 35px;
		font-style: normal;
		top: 15px;
		margin-left: 15px;
		z-index: 10000;
		}

	#middle_headline
		{
		position: fixed;
		background-color: #000000;
		width: 100%;
		height: 90px;
		top: 0px;
		z-index: 1000;
		}

	.bouton
		{
		position: fixed;
		font-size: 35px;
		font-style: normal;
		top: 15px;
		right: 15px;
		z-index: 100;
		color:#BEFDFF;
		font-size:35px;
		cursor:pointer;
		z-index: 1000;
		}
	.bouton:hover
		{
		text-decoration:none;
		z-index: 1000;
		}
	.texte
		{
		position: fixed;
		font-size: 15px;
		line-height: 17px;
		top: 100px;
  		right: 15px;
  		width: 170px;
		color:#BEFDFF;
		z-index: 1000;
		}

	#spine
		{
		margin-top: 50px;
		margin-right: 30%;
		margin-left: 30%;
		text-align: center;
		z-index: 10;
		}

	#headline_noise
		{
		position: fixed;
		top: 0px;
		width: 1400px;
		height: 100%;
		z-index: 100;
		}


	h1
		{
		font-size: 35px;
		font-family: Times, Times New Roman, serif;
		color: #BEFDFF;
		margin-top: 15px;
		margin-left: auto;
		margin-right: auto;
		width: 100px;

		}

	img
		{
		width: 100%;
		text-align: center;
		margin: 8px;
		}


	#q_cap_roman
		{width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-image: url('images/letters_focus/q_cap_roman.png');
				display: inline-block;
				z-index: 10000;

		}

		#q_cap_roman:hover {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-image:url('images/letters_focus_hover/q_cap_roman_hover.png');
				display: inline-block;
				z-index: 10000;
		}


</style>

</head>

<body>


<div id="q_cap_roman"></div>


		<div id="headline_bloc"></div>

		<div id="left_headline" class="headline">Matthew Carter</div>

		<div id="middle_headline" class="headline">
			<h1>Charter</h1>
		</div>

		<div id="right_headline" class="headline">show info</div>


		<div id="spine">

			<img src="images/letters_focus/n_lowercase_italic.png">
			<img src="images/letters_focus/v_lowercase_italic.png">
			<img src="images/letters_focus/c_lowercase_roman.png">
			<img src="images/letters_focus/k_cap-bold_italic.png">
			<img src="images/letters_focus/r_cap_black.png">
			<img src="images/letters_focus/b_cap_italic.png">
			<img src="images/letters_focus/m_cap_bold_italic.png">
			<img src="images/letters_focus/2_roman.png">
			<img src="images/letters_focus/k_lowercase_black.png">
			<img src="images/letters_focus/7_roman.png">
			<img src="images/letters_focus/y_lowercase_italic.png">
			<img src="images/letters_focus/8_roman.png">
			<img src="images/letters_focus/f_lowercase_bold.png">
			<img src="images/letters_focus/3_roman.png">
			<img src="images/letters_focus/d_lowercase_italic.png">
			<img src="images/letters_focus/q_lowercase_italic.png">
			<img src="images/letters_focus/5_roman.png">
			<img src="images/letters_focus/a_lowercase_roman.png">
			<img src="images/letters_focus/s_lowercase_italic.png">
			<img src="images/letters_focus/z_lowercase_italic.png">
			<img src="images/letters_focus/f_cap_bold.png">
			<img src="images/letters_focus/n_cap_roman.png">
			<img src="images/letters_focus/k_cap_roman.png">
			<img src="images/letters_focus/j_lowercase_black.png">
			<img src="images/letters_focus/f_cap_black.png">
		</div>

		<div id="headline_noise">
			<img src="images/headline_noise.png">
		</div>


<span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span>
<div id="texte" class="texte">
The Charter is a glyphic serif typeface designed by Matthew Carter in 1987 for Bitstream Inc.
			<br><br>
		Designed on very angular lines, it offers fine detail when it is used in small and becomes almost abstract when it is used in big. This is what gives it its greatest feature, drops cut and rounded broken. This gives it stability while keeping a good tenderness with some round loops or its drawing version italic.
			<br><br>
		A new version was released in 2004 with an expanded character set : additional symbols, ranging figures (old-style) and small capitals. Some still consider the Charter to be one of the best free fonts available.
			<br><br>
		The Charter typeface is licensed through Bitstream’s online interface MyFonts.
</div>
<script type="text/javascript">
//<!--
afficher_cacher('texte');
//-->
</script>


</body>
</html>