<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../lib/w3.css">
<body>
<div class="w3-image w3-animate-opacity">
<img src="img_sailboat.jpg" alt="Boat" style="width:100%;min-height:200px;max-height:400px;">
</div>
<div class="w3-container">
<h2>Welcome to Sailing</h2>
<p>Sailing comprises wind propulsion of a craft by means of sails and steering it over water,
ice or land, depending on the type of craft.
A sailor manages the force of the wind on the sails by adjusting their angle with respect
to the moving sailing craft.....</p>
<p>
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">Register</button></p>
</div>
<form id="id01" action="form.asp" class="w3-modal w3-pale-yellow">
<button onclick="document.getElementById('id01').style.display='none'"
class="w3-btn w3-right w3-large w3-hover-red w3-clear">X</button>
<div class="w3-clear"></div>
<div class="w3-container">
<h2>Class Registration</h2>
<p>
<input class="w3-input" type="text" name="first" style="width:90%" required>
<label class="w3-label w3-validate">First Name</label></p>
<p>
<input class="w3-input" type="text" name="last" style="width:90%" required>
<label class="w3-label w3-validate">Last Name</label></p>
<p>
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label></p>
<p>
<input class="w3-radio" type="radio" name="gender" value="female">
<label class="w3-validate">Female</label></p>
<p>
<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label></p>
<p>
<button class="w3-btn w3-ripple w3-hover-green">Register</button></p>
</div>
</form>
</body>
</html>