Flex Chart

What is a flex chart How do you make a flex chart? This script and codes were developed by James Zedd on 15 December 2021, Wednesday.

How do I make an flex chart?
  1. Flex Chart Previews
  2. Flex Chart HTML Codes
  3. Flex Chart CSS Codes
Flex Chart Previews

Flex Chart HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Flex Chart</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="tableSS">
  <div class="table-headSS">
    <div class="columnSS" data-label="Products">Model / Flex</div>
    <div class="columnSS" data-label="Description">Player</div>
    <div class="columnSS" data-label="Description">Typical Stick Height</div>
    <div class="columnSS" data-label="Description">Suggested Player Height</div>
    <div class="columnSS" data-label="Description">Suggested Player Weight</div>
  </div>
  <!-- ROW 01 -->
  <div class="rowSS">
    <div class="columnSS rowHeader-mf links-plain" data-mobile-title="Model / Flex">
      <a href="https://www.hockeystickman.com/collections/jr-flex-25-55">JR | 25-55 Flex</a>
    </div>
    <div class="columnSS player">
      <p>For the younger player that is serious about developing his/her shot and how to use flex technology in hockey sticks.</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Typical Stick Height">
      <p>40" - 50"<br />(102 - 127 cm)</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Suggested Player Height">
      <p>Under 5'3"<br />(160 cm)</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Suggested Player Weight">
      <p>Under 120 lbs<br />(54 kg)</p>
    </div>
  </div>
  <!-- ROW 02 -->
  <div class="rowSS">
    <div class="columnSS rowHeader-mf links-plain even" data-mobile-title="Model / Flex">
      <a href="https://www.hockeystickman.com/collections/intermediate">INT | 55-75 Flex</a>
    </div>
    <div class="columnSS even player">
      <p>HockeyStickMan is one of the few places where you can purchase pro stock intermediate sticks! These are designed to allow the player to have the same blade design and feel but at a flex profile that suits their game. Typically used by Pee-Wee and Bantam-aged players and great for Female Hockey.</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Typical Stick Height">
      <p>57" - 60"<br />(145 - 152 cm)</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Suggested Player Height">
      <p>5'3" - 5'8"<br />(160 - 173 cm)</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Suggested Player Weight">
      <p>120 - 150 lbs<br />(54 - 68 kg)</p>
    </div>
  </div>
  <!-- ROW 03 -->
  <div class="rowSS">
    <div class="columnSS rowHeader-mf-dark links-plain dark" data-mobile-title="Model / Flex">
      <a href="https://www.hockeystickman.com/collections/senior-low-flex">SR | 75-82 Flex</a>
    </div>
    <div class="columnSS player">
      <p>For the players seeking maximum load and release potential. Typically used in Bantam - Midget (140lbs - 170lbs) in No Slap Shot Men's Leagues and in Female Hockey.</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Typical Stick Height">
      <p>60" - 63"<br />(152 - 160 cm)</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Suggested Player Height">
      <p>5'8" and up<br />(173 cm+)</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Suggested Player Weight">
      <p>140 - 170 lbs<br />(64 - 77 kg)</p>
    </div>
  </div>
  <!-- ROW 04 -->
  <div class="rowSS">
    <div class="columnSS rowHeader-mf-dark links-plain dark-even" data-mobile-title="Model / Flex">
      <a href="https://www.hockeystickman.com/collections/stick-senior-mid-flex">SR | 85-95 Flex</a>
    </div>
    <div class="columnSS player even">
      <p>The most popular flex rating on the market for Junior and Men's Hockey (170 - 200 lbs), including elite level players. Allows for plenty of load and release potential, quick release and control.</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Typical Stick Height">
      <p>60" - 63"<br />(152 - 160 cm)</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Suggested Player Height">
      <p>5'8" and up<br />(173 cm+)</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Suggested Player Weight">
      <p>170 - 200 lbs<br />(77 - 91 kg)</p>
    </div>
  </div>
  <!-- ROW 05 -->
  <div class="rowSS">
    <div class="columnSS rowHeader-mf-dark links-plain dark" data-mobile-title="Model / Flex">
      <a href="https://www.hockeystickman.com/collections/stick-senior-stiff-flex">SR | 95+ Flex</a>
    </div>
    <div class="columnSS player">
      <p>Designed for players that take all different kinds of shots. The resistance enables harder shots for bigger and stronger players (200 lbs+). A popular choice among taller players as adding an extension decreases the overall flex rating.</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Typical Stick Length">
      <p>60" - 63"<br />(152 - 160 cm)</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Suggested Player Height">
      <p>5'8" and up<br />(173 cm+)</p>
    </div>
    <div class="columnSS numbers" data-mobile-description="Suggested Player Weight">
      <p>185 lbs and up<br />(84 kg+)</p>
    </div>
  </div>
  <!-- ROW 06 -->
  <div class="rowSS">
    <div class="columnSS rowHeader-mf-dark links-plain dark-even" data-mobile-title="Model / Flex">
      <a href="https://www.hockeystickman.com/pages/extended-length-hockey-sticks-for-taller-players">SR | EXT</a>
    </div>
    <div class="columnSS even player">
      <p>Designed for tall and heavy players that take all different kinds of shots. These are usually custom sticks and are not available for sale at most stores. Of course we got them!</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Typical Stick Height">
      <p>63" - 66"<br />(160 - 168 cm)</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Suggested Player Height">
      <p>6' and up<br />(183 cm+)</p>
    </div>
    <div class="columnSS even numbers" data-mobile-description="Suggested Player Height">
      <p>200 lbs and up<br />(91 kg+)</p>
    </div>
  </div>
</div><!-- table -->
  
  
</body>
</html>

Flex Chart CSS Codes

body {
  background: #fff;
  padding: 30px 100px 100px 100px;
  font-family: 'Roboto', sans-serif;
}

.tableSS {
	display:table;
	font-size:16px;
	color:#222222;
	margin:10px 0;
	width: 100%;
}

.table-fixed {
  table-layout: fixed;
}

.table-headSS {
	 display: table-header-group;
}

.table-headSS .columnSS { /* Column inside the table-head */
	background:#222222;
	color:#ffffff;
	border-right:1px solid #fff;
	border-bottom: 0;
}

.rowSS .columnSS {
  font-size: 14px;
}

.table-headSS .column:hover{ /* Column hover inside the table-head */
	background:#222222;
}

.rowSS {
	display:table-row; /* Defines a table row */
}

.columnSS{
	display:table-cell; /* Defines a table cell */
	padding:10px 20px;
	border-right:1px solid #fff;
	background:#EFF0F1;
	text-align: center;
  min-width: 100px !important;
}

.even { 
  background: #E0E0E0 !important;
}

.dark {
  background: #333333 !important;
  color: #f1f1f1 !important;
}

.dark-even {
  background: #222222 !important;
  color: #f1f1f1 !important;
}

.budget {
  width: 35%;
}

.budget-description {
  vertical-align: middle;
}

.budget-description p {
  display: inline;
}

/* -- Column Specific CSS -- */

.links a, .links-plain a {
  text-decoration: none;
  display: block;
  padding: 6px 12px;
  background-color: #af1f31;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 14px;
  color: #ffffff;
  text-align: left;
  width: 145px;
  margin-bottom: 10px;
  transition: all 300ms ease-in-out;
}

.links a:hover, .links-plain a:hover {
  background-color: #c02b3e;
}

.links:before {
  content: ""attr(data-)"";
  display: block;
  text-align: left;
  font-family: "Lato", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #222222;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.brand p {
  font-style: italic;
}

.brand p span {
  font-weight: 700;
  font-style: normal;
}

.specs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.specs ul li {
  margin-bottom: 12px;
}

.tabs {
  display: none;
}

.pics {
  position: relative;
}

.view-img {
  position: absolute;
  top: 20px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%,0%);
  display: block;
  text-decoration: none;
  color: #b9b9b9;
  background: #ffffff;
  border: 4px solid #b9b9b9;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 5px 10px;
}

.view-img:before {
  content: "";
  display: block;
  font-family: FontAwesome;
  font-size: 48px;
  color: #b9b9b9;
  margin-bottom: 10px;
}

/*
==============
Responsive 
==============
*/

@media (max-width: 991px) {
  
  .table-headSS {
    display: none;
  }
  
  .tableSS, .rowSS, .columnSS {
    display: block;
  }
  
  .rowSS {
    margin-bottom: 20px;
  }
  
  .columnSS {
    margin-right: 0;
    padding: 1px;
  }
  
  .links:before {
    background-color: #222222;
    color: #ffffff;
    width: 100%;
    padding: 20px 0;
    text-indent: 20px;
  }
  
  .rowHeader-mf {
    background: #c4c4c4 !important;
  }
  
  .rowHeader-mf p, .rowHeader-mf-dark p {
  font-weight: 500;
}
  
  .rowHeader-mf:before {
    content: ""attr(data-mobile-title)"";
    display: block;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 12px;
  }
  
  .rowHeader-mf-dark:before {
    content: ""attr(data-mobile-title)"";
    display: block;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 12px;
  }

  .numbers:before {
    content: ""attr(data-mobile-description)"";
    display: block;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #606060;
    margin: 12px 0 0;
  }
  
  .player p {
    margin: 10px 22px;
  }
  
  .links a, .links-plain a {
    display: inline-block;
    padding: 6px 12px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    width: 44%;
    margin-bottom: 5px;
    text-align: center;
  }
  
  .pics {
    clear: both;
  }
  
  .view-img {
    position: initial;
    margin-right: 0;
    transform: none;
    padding: 10px 0;
    background: #af1f31;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-weight: 400;
    color: #ffffff;
    transition: all 300ms ease-in-out;
  }
  
  .view-img:hover {
    background-color: #c02b3e;
  }
  
  .view-img:before {
    display: inline;
    font-size: 18px;
    margin-bottom: 0;
    margin-right: 6px;
    color: #ffffff;
  }
  
  /* -- tabbed content CSS -- */
  
  .description, .brand, .specs {
    display: none;
  }
  
  .tabs {
    display: inherit;
    background-color:inherit;
  }
  
  .tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: table;
    width: 100%;
    table-layout: fixed;
    background-color: inherit;
  }
  
  .tabs ul li {
    display: table-cell;
    float: none;
    background-color: #b8c9cf;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-weight: 700;
    padding: 8px 0;
  }
  
  .active-tab {
    background-color: #989898 !important;
  }
  
  .active-column {
    background: #989898 !important;
  }
  
  .specs ul li {
    background-color: transparent;
    display: block;
    font-weight: 400;
  }
  .specs ul {
    margin: 14px 0;
  }
  
  .budget {
    width: initial;
  }
  
  .budget-description p {
    display: block;
  }
  
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.