<?php
//enable visitors to see the PHP source code of current file
$me basename($_SERVER['PHP_SELF']);
if(isset(
$_GET['showPHP'])){
    
show_source("$me");    
    die();
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="assets/css.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Dynamic pangrams</title>
<!--This meta element defines keywords for my page:-->
<meta name="keywords" content="Dynamic, pangrams" /> 

<style>
form {
    border:5px inset;
    }
    
form fieldset{border:0;}
form dd, form ul{margin:0;padding:0;list-style:none;}
/*notice child selector here*/ 
form dt>label{position:relative; top:15px; display:inline-block;}
/*notice attribute selector here */ 
form input[name="animal"]{position:relative; top:15px;}
/*attribute selectors with adjacent sibling selectors*/  
form input
[checked="checked"]+label{text-decoration:underline;} 
form input[value="red"]+label{color:red;} 
form input[value="blue"]+label{color:blue;}
form input[value="green"]+label{color:green;}
form input[value="brown"]+label{color:brown;} 
form input[value="yellow"]+label{color:yellow;}
</style>

<?php 
include("includes/header.inc.php");
?>
</head>
<body>
<div id="wrapper">
    <div id="center-box">
<?php 
include("includes/top-navigation.inc.php");
?>


<?php 
include("includes/header_img.inc.php");
?>
        <div id="left-right-padding">
<?php 
include("includes/navigation.inc.php");
?>
            <div style="clear: left;"></div>
            
                        <h1>Pangram</h1> 
            
            <form method="get" action="pangram-for-students.php"> 
                <fieldset> 
                    <legend>Create a pangram</legend> <dl> <dt> 
                    <label for="animal">Write the name of some animal</label> </dt> 
                    <dd> <input type="text" name="animal" id="animal" value="fox"/> </dd> 
                    <br/>
                    <dt> <input type="submit" value="create pangram"/>
                    </dt>
                    </dl> 
                    
                    <dl><dt>Choose a colour</dt> <dd> <ul> <li> 
                    <input type="radio" name="colour" value="red" id="red"/>
                    <label for="red">Red</label> </li> <li> 
                    <input type="radio" name="colour" value="brown" checked="checked" id="brown" />
                    <label for="brown" >Brown</label> </li> <li> 
                    <input type="radio" name="colour" value="yellow" id="yellow"/> 
                    <label for="yellow">Yellow</label> </li> <li> 
                    <input type="radio" name="colour" value="blue" id="blue"/> 
                    <label for="blue">Blue</label> </li> <li> 
                    <input type="radio" name="colour" value="green" id="green"/> 
                    <label for="green">Green</label> </li> </ul> </dd> </dl>
                </fieldset>
            </form>

            
            
            <p>&nbsp;</p>
            <h2>What is a Pangram?</h2>
            <div id="navcontainer">
              <ul>
                <li><a href="http://en.wikipedia.org/wiki/Pangram" rel="nofollow">Pangram</a></li>
              </ul>
            </div>
        </div>
        <br/>
        <br/>
        

<?php 
include("includes/footer.inc.php");
?>

    </div>
</div>
</body>
</html>