169 lines
2.2 KiB
CSS
169 lines
2.2 KiB
CSS
/* 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
|
|
} |