<!DOCTYPE html>
<html>
  <head>
    <title>event form</title>
  <style>
  body{
    font-family: Arial;
    background: lightyellow;
  }
  .container{
    display:flex;
    gap:20px;
  }
  
  h2,h3{
    colour: red;
    text-align:center;
  }
  
  input,textarea,select{
    background-color: lightgrey;
    width: 30%;
  }
  
  button{
    background: green;
    color: white;
  }
  
  button:hover{
    background-color: darkgreen;
  }
  
  @media(max-width:600px){
    .container(flex-direction:column)
  }
  
  </style>
  </head>
  <body>
    <h2>Event</h2>
    <img src="image.jpg" width="200"><br>
    <video src="vido.mp4" width="200" controls></video><br>
    <audio src="audio.mp3" width="200" controls></audio><br>
    <h3>register</h3>
    
    <label>name:</label>
    <input type="text" id=name><br>
    <label>email:</label>
    <input type="email" id=email><br>
    <label>date:</label>
    <input type="date" id=date><br>
    <label>gender:</label>
    <input type="radio" name="g">M
    <input type="radio" name="g">F<br>
    <label>enter:</label>
    <select>
      <option>workshop</option>
      <option>hackathon</option>
    </select><br>
    <label>desc:</label>
    <textarea></textarea><br>
    
    <input type="file"><br>
    
    <button type="submit">Register</button><br>
    
  </body>
</html>
