Flex Chart

Developer
James Zedd
Size
4,111 Kb
Views
18,207

How do I make an flex chart?

What is a flex chart? How do you make a flex chart? This script and codes were developed by James Zedd on 11 October 2022, Tuesday.

Flex Chart Previews
IQ Test

Flex Chart - Script Codes 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 - Script Codes 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; }
}
Flex Chart - Script Codes
Flex Chart - Script Codes
Home Page Home
Developer James Zedd
Username james_zedd
Uploaded October 11, 2022
Rating 3
Size 4,111 Kb
Views 18,207
Do you need developer help for Flex Chart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Zedd (james_zedd) Script Codes
Name
Pure CSS Slide Out Menu
Responsive Multi-Column Table with Links
The Lonely Planet
Flex
Price
Simple jQuery Selector Class Change
FS Core Values
Simple Package Tier Display
Modern Responsive Product Comparison Table for E-commerce
A Pen by James Zedd
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!