First Commit
This commit is contained in:
LeviM0323 committed
commit
d861a1a02c
36 files changed
+2996
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
@@ -0,0 +1,256 @@
|
||||
<!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>
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
/* body */
|
||||
body {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
/* navigation */
|
||||
.tabs {
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tabs li.tab {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tabs .tab a {
|
||||
padding: 0;
|
||||
color: #0c090a;
|
||||
}
|
||||
|
||||
.tabs .tab a:hover, .tabs .tab a.active {
|
||||
color:#0c090a;
|
||||
}
|
||||
|
||||
.tabs .tab a:focus, .tabs .tab a:focus.active {
|
||||
padding: 0;
|
||||
background: #c1e1dc;
|
||||
color:#0c090a;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
background: #fcfcfc;
|
||||
border:1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* h1 */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #333;
|
||||
font-family: 'Alatsi', sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 44px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
|
||||
h6:nth-child(2) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* typeface */
|
||||
.heading-typogrpahy {
|
||||
font-family: 'Alatsi', sans-serif;
|
||||
}
|
||||
|
||||
.typeface {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #1995ad;
|
||||
font-size: 140px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.typeface p, .typeface-content p {
|
||||
color: #f1f1f2
|
||||
}
|
||||
|
||||
.content-typogrpahy {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
.typeface-content {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #1995ad;
|
||||
font-size: 140px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
line-height: 150%;
|
||||
}
|
||||
/* color */
|
||||
.card-image {
|
||||
background: #1995ad;
|
||||
height: 80px;
|
||||
/* width: 120px; */
|
||||
}
|
||||
|
||||
.main-color {
|
||||
background: #1995ad;
|
||||
}
|
||||
.card .card-title {
|
||||
text-align:center;
|
||||
font-size: 12px
|
||||
}
|
||||
.card .card-content {
|
||||
text-align:center;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.second-color {
|
||||
background: #a1d6e2;
|
||||
}
|
||||
|
||||
.functional-color-first {
|
||||
background: #f1f1f2;
|
||||
}
|
||||
|
||||
.functional-color-second {
|
||||
background: #bcbabe
|
||||
}
|
||||
|
||||
.functional-color-third {
|
||||
background: #0c090a;
|
||||
}
|
||||
|
||||
.functional-color-fourth {
|
||||
background: #c1e1dc;
|
||||
}
|
||||
|
||||
.feedback-color-first {
|
||||
background: #fa6e59
|
||||
}
|
||||
|
||||
.feedback-color-first p {
|
||||
color: #FA4C39
|
||||
}
|
||||
|
||||
.feedback-color-second {
|
||||
background: #ffdb5c
|
||||
}
|
||||
|
||||
.feedback-color-third {
|
||||
background: #52958b
|
||||
}
|
||||
Reference in new issue
Block a user