73592350

by ajmeese7

HTML

<head>
  <title> Fungi Cheat Sheet </title>
  <link rel="stylesheet" href="main.css" />
</head>


<body>

<div class="header">
  <h1>Fungi Cheat Sheet</h1>
</div>

<div class="navbar">
  <a href="#">Home</a>
  <a href="#" class="right">Contact</a>
  <a href="#" class="right">How To</a>
  <a href="#" class="right">About</a>

</div>


<div id="list1" class="dropdown-check-list" tabindex="100">
	<span class="anchor"><b>Spore Print Color 1</b></span>
	<ul class="items">
		<li><label>Select All 1<input onClick = "toggle(this, 'option1')" class="option1" type="checkbox" value="Select All (Key 1)" checked/></label></li>
		<li><label>----------</label></li>		<li><label>Brown 1<input class="option1" type="checkbox" value="Brown 1" checked/></label></li>
		<li><label>Other 1<input class="option1" type="checkbox" value="Other 1" checked/></label></li>
		<li><label>Dark (non-brown) 1<input class="option1" type="checkbox" value="Dark (non-brown) 1" checked/></label></li>
		<li><label>Pale 1<input class="option1" type="checkbox" value="Pale 1" checked/></label></li>
		<li><label>Pink 1<input class="option1" type="checkbox" value="Pink 1" checked/></label></li>
	</ul>
</div>
<div id="list1" class="dropdown-check-list" tabindex="100">
	<span class="anchor"><b>Spore Print Color 2</b></span>
	<ul class="items">
		<li><label>Select All 2<input onClick = "toggle(this, 'option2')" class="option2" type="checkbox" value="Select All (Key 2)" checked/></label></li>
		<li><label>----------</label></li>		<li><label>Chocolate-Brown 2<input class="option2" type="checkbox" value="Chocolate-Brown 2" checked/></label></li>
		<li><label>Purple-Brown 2<input class="option2" type="checkbox" value="Purple-Brown 2" checked/></label></li>
		<li><label>Gray-Green 2<input class="option2" type="checkbox" value="Gray-Green 2" checked/></label></li>
		<li><label>Olive 2<input class="option2" type="checkbox" value="Olive 2" checked/></label></li>
		<li><label>Black 2<input class="option2" type="checkbox"...

CSS

html, body, h1 {
	margin: 0;
	padding: 0;

}

html, body { min-height: 100%; }

  
body{
    background-image: url("agaricus.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-size: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    width: 100%;

}


  /* Style the header */
  .header {
    padding: 10px;
    text-align: center;
    background: #832bfd7c;
    color: white;
  }
  
  /* Increase the font size of the h1 element */
  .header h1 {
    font-size: 40px;
  }
  
  /* Style the top navigation bar */
  .navbar {
    overflow: hidden;
    background-color: #333;

    margin-bottom: 20px;
  }
  
  /* Style the navigation bar links */
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }
  
  /* Right-aligned link */
  .navbar a.right {
    float: right;
  }
  
  /* Change color on hover */
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }







/* CSS to hide key columns */
th:nth-child(4), th:nth-child(5), th:nth-child(6), th:nth-child(8), th:nth-child(11), th:nth-child(12), th:nth-child(13), th:nth-child(15) {
    display: none
}
td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(8), td:nth-child(11), td:nth-child(12), td:nth-child(13), td:nth-child(15) {
    display: none
}


/* CSS for checkboxes*/

.dropdown-check-list {
    display: inline-block;
    position: relative;
    font-family: Verdana, sans-serif;
    padding: 5px;
    margin-top: 10px;
    background-color: rgb(255, 255, 255);


}

.dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid #ccc;

    min-width: 100px;
}

.dropdown-check-list .anchor:after {
    position: absolute; 
    content: "";
    border-left: 2px solid black;
   ...