256 lines
12 KiB
HTML
256 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--Import Google Icon Font-->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<!--Import materialize.css-->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
|
<!--Let browser know website is optimized for mobile-->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="stylesheet" href="main.css"/>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Alatsi&family=Quicksand&display=swap" rel="stylesheet"> </head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col s3">
|
|
<img src="./images/techit.png" alt="logo"/>
|
|
</div>
|
|
<div class="col s9">
|
|
<h1>TECHIT Pattern Library</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s3 h-100">
|
|
<ul class="tabs">
|
|
<li><h6>General</h6></li>
|
|
<li class="tab"><a href="#test1" class="active">Typography</a></li>
|
|
<li class="tab"><a href="#test2">Color</a></li>
|
|
<li class="tab"><a href="#test3">Page Layout</a></li>
|
|
<li class="tab"><a href="#test4">Data Visualization</a></li>
|
|
|
|
<li><h6>Elements</h6></li>
|
|
|
|
<li class="tab"><a href="#test5">Buttons</a></li>
|
|
<li class="tab"><a href="#test6">Form</a></li>
|
|
<li class="tab"><a href="#test7">Notifications</a></li>
|
|
<li class="tab"><a href="#test8">Tables</a></li>
|
|
<li class="tab"><a href="#test9">Stat/Data</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col s9">
|
|
<div id="test1" class="col s12">
|
|
<h3>Typography</h3>
|
|
|
|
<div>
|
|
<h4>Headings</h4>
|
|
<div class="row heading-typogrpahy">
|
|
<div class="col m3 typeface">
|
|
<p>Aa</p>
|
|
</div>
|
|
<div class="col m9">
|
|
<p>Typeface | Alatsi</p>
|
|
<p>font-family | 'Alatsi', sans-serif</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="headings">
|
|
<h1>TECHIT Brand Heading One</h1>
|
|
<hr>
|
|
<p>56px | normal | Alatsi </p>
|
|
</div>
|
|
<div class="headings">
|
|
<h2>TECHIT Brand Heading Two Alatsi</h2>
|
|
<hr>
|
|
<p>50px | normal | Alatsi </p>
|
|
</div>
|
|
<div class="headings">
|
|
<h3>TECHIT Brand Heading Three Alatsi</h3>
|
|
<hr>
|
|
<p>44px | normal | Alatsi </p>
|
|
</div>
|
|
<div class="headings">
|
|
<h4>TECHIT Brand Heading Four Alatsi</h4>
|
|
<hr>
|
|
<p>38px | normal | Alatsi </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4>Contents</h4>
|
|
<div class="row content-typogrpahy">
|
|
<div class="col m3 typeface-content">
|
|
<p>Aa</p>
|
|
</div>
|
|
<div class="col m9">
|
|
<p>Typeface | Quicksand</p>
|
|
<p>font-family | 'Quicksand', sans-serif</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<p class="main-content">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
|
|
</p>
|
|
<hr>
|
|
<p>18px | normal | Quicksand | 150% </p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<p class="main-content">
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
|
|
</p>
|
|
<hr>
|
|
<p>18px | normal | Quicksand | 150% </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="test2" class="col s12">
|
|
<h3>Color</h3>
|
|
|
|
<div class="card-panel">
|
|
<h5>Brand Color</h5>
|
|
<div class="row">
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image main-color">
|
|
<p class="card-title">#1995ad</p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Glacier Blue</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image second-color">
|
|
<p class="card-title">#a1d6e2</p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Ice</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Functional Color</h5>
|
|
<div class="row">
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image functional-color-first">
|
|
<p class="card-title">#f1f1f2</p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Overcast</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image functional-color-second">
|
|
<p class="card-title">#bcbabe</p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Warm Gray</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image functional-color-third">
|
|
<p class="card-title">#0c090a</p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Night</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image functional-color-fourth">
|
|
<p class="card-title">#c1e1dc</p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Baby Blue</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Feedback Color</h5>
|
|
<div class="row">
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image feedback-color-first">
|
|
<p class="card-title">#fa6e59</p>
|
|
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Watermeon</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image feedback-color-second">
|
|
<p class="card-title">#ffdb5c</p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Banana</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m2">
|
|
<div class="card">
|
|
<div class="card-image feedback-color-third">
|
|
<p class="card-title">#52958b</p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>Lichen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="test3" class="col s12">
|
|
<h3>Page Layout</h3>
|
|
</div>
|
|
<div id="test4" class="col s12">
|
|
<h3>Data Visualization</h3>
|
|
</div>
|
|
<div id="test5" class="col s12">
|
|
<h3>Buttons</h3>
|
|
</div>
|
|
<div id="test6" class="col s12">
|
|
<h3>Dialogs</h3>
|
|
</div>
|
|
<div id="test7" class="col s12">
|
|
<h3>Notifications</h3>
|
|
</div>
|
|
<div id="test8" class="col s12">
|
|
<h3>Tables</h3>
|
|
</div>
|
|
<div id="test9" class="col s12">
|
|
<h3>Stat/Data</h3>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
M.AutoInit();
|
|
});
|
|
</script>
|
|
<!--JavaScript at end of body for optimized loading-->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|