LACROSSE

In this example below you will see how to do a LACROSSE with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ChloeWaldhart29, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ChloeWaldhart29 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>LACROSSE</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <title> Lacrosse </title>
  </head>
  <body>
<div id="background"></div>
    <div class="header">
      <h1>Women's Lacrosse</h1>
    </div>
    <div class="menu">
      <ul>
        <li><a class="active" id="homeLink" href="#home" onclick="showHome()">Home</a></li>
        <li><a href="#history" id="historyLink" onclick="showHistory()">History</a></li>
        <li><a href="#rules" id="rulesLink" onclick="showRules()">Rules</a></li>
        <li><a href="#nighthawks" id="nighthawksLink" onclick="showNighthawks()"> Lady Nighthawks</a></li>
      </ul>
    </div>
    <div id="main" class="main">
      <h1>Lacrosse</h1>
      <p style="font-size:130%;"> This website is about lacrosse. The History behind it, The rules of lacrosse. Also the team that I play on which is the Lady Nighthawks, the team is located in Waukesha, Wisconsin.</p>
    </div>
    <div id="history" class="main" style="display:none;">
      <h1>History section</h1>
      <img src= "https://landsharklacrosse.weebly.com/uploads/1/9/7/9/19794245/2090781_orig.jpg" alt="womens lacrosse" />
      <p style="font-size:130%;">Lacrosse was started by the Native American Indians and was originally known as stickball. The game was initially played in the St. Lawrence Valley area by the Algonquian tribe and they were followed by other tribes in the eastern half of North America, and around the western Great Lakes. St. Leonards School, in St Andrews, Scotland claims to be the first girls’ school to have played lacrosse in 1890. The first Headmistress, Miss Lumsden, watched a game played in Canada, in 1884, between the Canghuwaya Indians and the Montreal Club, in Montreal and thought it “beautiful and graceful.” As a result the game was introduced at the school. </p> 
    </div>
    <div id="rules" class="main" style="display:none;">
      <h1>Rules section</h1>
      <p style="font-size:130%;">The basic rules are there are 12 people on the field at one time. 11 field players and 1 goulie. The positions are 1 goulie, 3 defenders, 3 midfielder, 3 attckers. </p>
        <p style="font-size:130%;">On draw controls, the two opposing players must move the ball with an up-and-away motion with their lacrosse sticks. A downward or outward motion is illegal, and the ball is awarded to the non-offending team with a free position. </p>
        <p style="font-size:130%;">Restrainling line an offside is called when a team has more than seven players on or over the restraining line in its offensive end or more than eight players on or over the restraining line in its defensive end. Girls’ lacrosse encourages ball movement when the person with the ball is closely guarded within the restraining area.</p>
        <p style="font-size:130%;">The 3 second rule Girls’ lacrosse encourages ball movement when the person with the ball is closely guarded within the restraining area. The offensive player has three seconds to pass the ball or change her cradle – either switching her hands or the level she is holding the ball. If the ball remains stationary for more than three seconds, the referee awards the defense with a free position. This lacrosse rule is exempt if the offensive player is behind the goal and the defensive player guarding her is in front of the goal and mirroring her.</p>
        <p style="font-size:130%;">Avoid the goalie circle Players must stay out of the goalie circle. A goal does not count if the shooter or another offensive player steps on or into the goal circle or interferes with the goalie. A defensive player can reach her stick inside the goal circle to block or redirect a shot. Below the ninth-grade level, a shooter may not follow through with her lacrosse stick into the goalie circle.</p>
        <p style="font-size:130%;">Free position or indirect free position. The penalty for fouls is a free position. When a team is awarded the ball after a foul, the player can run, pass or shoot it. However, an indirect free position is awarded for minor defensive fouls inside the 12-meter fan, and the player who restarts the ball can’t shoot until a defensive player or a teammate touches it. Only a goalie can take a free position within the 8-meter circle and no free position can be taken within four meters of a field boundary.
        <p style="font-size:130%;">Major or minor fouls. All players must stand at least four meters away from the player restarting a free position or indirect free position. On a major foul, the offending player must stand four meters behind the player taking the free position. On a minor foul, the offending player stands four meters away in the direction from which she approached before committing the foul. </p>
        <p style="font-size:130%;">Empty stick check.  In girls’ lacrosse a player can’t check another player’s stick that isn’t in contact with the ball. This applies only when the opponent could have gained possession of the ball.</p>
        <p style="font-size:130%;">Offensive charging. A girls’ lacrosse player with the ball cannot push into a defensive player who has established position. This major foul often occurs within the 12-meter fan when a player is going toward the goal.</p>
        <p style="font-size:130%;">Pick or screen?  An illegal screen occurs when a player without the ball, by her positioning, forces an opponent to take another route. To be legal, the player must be set within the visual field of the opponent, allowing the defender time and space to change her direction.</p>
      <p style="font-size:130%;"> In this picture below is where player are on the field 
</p>
      <img src="https://qph.ec.quoracdn.net/main-qimg-3bfd946bb9f4cd48f281bc4b95566246" alt="field"/>
    </div>
    <div id="nighthawks" class="main" style="display:none;">
      <h1>Lady Nighthawks section</h1>
      <img src="http://files.leagueathletics.com/Images/Club/11063/lax%20pic.jpg" alt="nighthawks"/>
      <p style="font-size:130%;"> The lady nighthawks is in Waukesha Wisconsin. They have teams for people in 3rd to 12th grade. They have 2 teams for high school girls but they pratice together. JV and Varsity </p>
    </div>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ChloeWaldhart29/lacrosse-MbQxVz */
#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('http://media.xceleratelacrosse.com/assets/Gallery/XLR8/Xcelerate-Lacrosse-Girls-Stick.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    opacity: 0.3;
    filter:alpha(opacity=40);
}

<div id="background">
  
</div>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: ;}

li a {
    display: block;
    color: black;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #000099;
    color: white;
}

li a:hover:not(.active) {
    background-color: #e0e0eb;
    color: white;
}
* {
    box-sizing: border-box;
}
.header {
    --border: 1px solid red;
    padding: 15px;
 
    
}
.menu {
    width: 25%;
    float: left;
    padding: 15px;
    --border: 1px solid red;
  text-align:center;
}
.main {
    width: 75%;
    float: left;
    padding: 15px;
    --border: 1px solid red;
  
}

/*Downloaded from https://www.codeseek.co/ChloeWaldhart29/lacrosse-MbQxVz */
function showHistory() 
{
  var id1 = document.getElementById("main");
  var id2 = document.getElementById("rules");
  var id3 = document.getElementById("nighthawks");
  
  id1.style.display = "none";
  document.getElementById("homeLink").classList.remove("active");
  id2.style.display = "none"; 
  document.getElementById("rulesLink").classList.remove("active");
  id3.style.display = "none";
  document.getElementById("nighthawksLink").classList.remove("active");
  
  var id4 = document.getElementById("history");
  id4.style.display = "block";
  var historyLinkClasses = document.getElementById("historyLink").classList.add("active");
}

function showHome() 
{
  var id1 = document.getElementById("rules");
  var id2 = document.getElementById("history");
  var id3 = document.getElementById("nighthawks");
  
  id1.style.display = "none";
  document.getElementById("rulesLink").classList.remove("active");
  id2.style.display = "none"; 
  document.getElementById("historyLink").classList.remove("active");
  id3.style.display = "none";
  document.getElementById("nighthawksLink").classList.remove("active");
  
  var id4 = document.getElementById("main");
  id4.style.display = "block";
  document.getElementById("homeLink").classList.add("active");
}

function showRules()
{
 var id1 = document.getElementById("main");
  var id2 = document.getElementById("history");
  var id3 = document.getElementById("nighthawks");
  
  id1.style.display = "none";
  document.getElementById("homeLink").classList.remove("active");
  id2.style.display = "none"; 
  document.getElementById("historyLink").classList.remove("active");
  id3.style.display = "none";
  document.getElementById("nighthawksLink").classList.remove("active");
  
  var id4 = document.getElementById("rules");
  id4.style.display = "block";
  document.getElementById("rulesLink").classList.add("active");
  
}

function showNighthawks()
{
  var id1 = document.getElementById("main");
  var id2 = document.getElementById("history");
  var id3 = document.getElementById("rules");
  
  id1.style.display = "none";
  document.getElementById("homeLink").classList.remove("active");
  id2.style.display = "none"; 
  document.getElementById("historyLink").classList.remove("active");
  id3.style.display = "none";
  document.getElementById("rulesLink").classList.remove("active");
  
  var id4 = document.getElementById("nighthawks");
  id4.style.display = "block";
  document.getElementById("nighthawksLink").classList.add("active");
  
}

Comments