Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                #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;
  
}
              
            
!

JS

              
                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");
  
}


              
            
!
999px

Console