mirror of https://github.com/akveo/blur-admin
new typography page init
alex
parent
385ad9bc67
commit
9e51c66b36
|
|
@ -18,44 +18,276 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 36px;
|
font-size: 32px;
|
||||||
line-height: 38px;
|
line-height: 40px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 26px;
|
font-size: 24px;
|
||||||
line-height: 38px;
|
line-height: 40px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 22px;
|
font-size: 20px;
|
||||||
line-height: 42px;
|
line-height: 40px;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 19px;
|
font-size: 18px;
|
||||||
line-height: 43px;
|
line-height: 38px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
line-height: 45px;
|
line-height: 35px;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.typography-document-samples {
|
||||||
|
|
||||||
|
|
||||||
|
.typography-document{
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typography-widget {
|
||||||
|
|
||||||
|
div.panel{
|
||||||
|
height: 620px;
|
||||||
|
}
|
||||||
|
height: 100%;
|
||||||
|
.panel-body {
|
||||||
|
padding: 15px 30px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typography-widget-header {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-widget {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
width: 100%;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-text-widget {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gray {
|
||||||
|
color: #767676;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black {
|
||||||
|
color: #585858;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-text {
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regular-text {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upper-text {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold-text {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-text {
|
||||||
|
padding: 5px 0 24px 0;
|
||||||
|
p {
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 100;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.color-widget {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 300;
|
||||||
|
p {
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-block{
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-text p{
|
||||||
|
color: $dribble-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-text p{
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
&.hovered {
|
||||||
|
a {
|
||||||
|
color: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists-widget{
|
||||||
|
|
||||||
|
|
||||||
|
font-weight: 100;
|
||||||
|
.list-header{
|
||||||
|
width: 100%;
|
||||||
|
font-weight: 100;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
margin-top: 44px;
|
||||||
|
color: $dribble-color;
|
||||||
|
line-height: 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
padding-left: 11px;
|
||||||
|
border-left: 4px solid $dribble-color;
|
||||||
|
margin-left: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.blur, ol.blur {
|
||||||
|
padding-left: 13px;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
list-style: none;
|
||||||
|
padding-top: 1px;
|
||||||
|
li {
|
||||||
|
margin-top: 5px;
|
||||||
|
color: $default-text;
|
||||||
|
font-size: 14px;
|
||||||
|
ul, ol {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.blur {
|
||||||
|
li {
|
||||||
|
&:before {
|
||||||
|
content: "• ";
|
||||||
|
color: $dribble-color;
|
||||||
|
width: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol.blur {
|
||||||
|
counter-reset: section;
|
||||||
|
li {
|
||||||
|
color: $dribble-color;
|
||||||
|
padding-left: 0;
|
||||||
|
line-height: 14px;
|
||||||
|
position: relative;
|
||||||
|
span {
|
||||||
|
color: $default-text;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
content: counters(section, ".") ".";
|
||||||
|
counter-increment: section;
|
||||||
|
width: 19px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > li {
|
||||||
|
span {
|
||||||
|
padding-left: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
counter-reset: section;
|
||||||
|
& > li {
|
||||||
|
&:before {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
padding-left: 27px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
& > li {
|
||||||
|
&:before {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.columns-section{
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
color: $default-text;
|
color: $default-text;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p.small-text {
|
p.small-text {
|
||||||
|
|
@ -65,16 +297,7 @@ p.small-text {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accent {
|
|
||||||
margin-top: 5px;
|
|
||||||
color: $danger;
|
|
||||||
line-height: 24px;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 36px;
|
|
||||||
padding-left: 24px;
|
|
||||||
border-left: 6px solid $danger;
|
|
||||||
margin-left: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cols-two {
|
.cols-two {
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
|
|
@ -121,114 +344,30 @@ a.learn-more {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.blur, ol.blur {
|
|
||||||
padding-left: 32px;
|
|
||||||
margin-bottom: 19px;
|
|
||||||
list-style: none;
|
|
||||||
padding-top: 1px;
|
|
||||||
li {
|
|
||||||
line-height: 22px;
|
|
||||||
color: $default-text;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
ul, ol {
|
|
||||||
padding-left: 20px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 8px;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.blur {
|
|
||||||
li {
|
|
||||||
&:before {
|
|
||||||
content: "• ";
|
|
||||||
color: $danger;
|
|
||||||
width: 15px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.blur {
|
|
||||||
counter-reset: section;
|
|
||||||
li {
|
|
||||||
color: $danger;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left: 0;
|
|
||||||
position: relative;
|
|
||||||
span {
|
|
||||||
color: $default-text;
|
|
||||||
font-weight: normal;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
padding-left: 0;
|
|
||||||
margin-left: 34px;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
content: counters(section, ".") ".";
|
|
||||||
counter-increment: section;
|
|
||||||
width: 19px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > li {
|
|
||||||
span {
|
|
||||||
padding-left: 19px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
counter-reset: section;
|
|
||||||
& > li {
|
|
||||||
&:before {
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
padding-left: 30px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
& > li {
|
|
||||||
&:before {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
padding-left: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 17px;
|
margin-bottom: 20px;
|
||||||
margin-bottom: 27px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-banner-wrapper {
|
.large-banner-wrapper {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 252px;
|
height: 400px;
|
||||||
img {
|
img {
|
||||||
|
height: 100%;
|
||||||
display: block
|
display: block
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-text-wrapper {
|
.banner-text-wrapper {
|
||||||
margin-top: -261px;
|
margin-top: -400px;
|
||||||
height: 261px;
|
height: 400px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-text {
|
.banner-text {
|
||||||
padding: 30px 20px;
|
padding: 85px 90px 60px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 67px auto;
|
margin: 67px auto;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -237,19 +376,32 @@ ol.blur {
|
||||||
background: rgba(0, 0, 0, 0.75);
|
background: rgba(0, 0, 0, 0.75);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
||||||
h3 {
|
h1 {
|
||||||
|
font-weight: bold;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
color: $warning;
|
font-size: 24px;
|
||||||
|
line-height: 30px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: $primary;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.banner-text {
|
.banner-text {
|
||||||
min-width: 0px;
|
padding: 55px 60px 30px;
|
||||||
|
min-width: 0;
|
||||||
|
h1{
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -274,19 +426,7 @@ ol.blur {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
&.hovered {
|
|
||||||
a {
|
|
||||||
color: $danger;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-block {
|
.section-block {
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
|
|
@ -301,7 +441,11 @@ ol.blur {
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
padding-top: 7px;
|
padding: 0 20px 50px 20px;
|
||||||
padding-bottom: 12px;
|
}
|
||||||
|
|
||||||
|
div.banner-column-panel{
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,212 @@
|
||||||
<div class="widgets">
|
<div class="widgets">
|
||||||
|
<div class="typography-document-samples row-fluid">
|
||||||
|
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
|
||||||
|
<div class="widgets-block typography-widget">
|
||||||
|
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||||
|
<div class="panel-body content-panel heading-widget">
|
||||||
|
<div class="section-block">
|
||||||
|
<h2 class="typography-widget-header">Text Size</h2>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h1>H1. Heading 1</h1>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl </p>
|
||||||
|
|
||||||
|
<p>pulvinar, lacinia scelerisque pharetra, placerat
|
||||||
|
vestibulum eleifend pellentesque, mi nam.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h2>H2. Heading 2</h2>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||||
|
vestibulum eleifend pellentesque, mi nam.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h3>H3. Heading 3</h3>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||||
|
vestibulum eleifend pellentesque, mi nam.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h4>H4. Heading 4</h4>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||||
|
vestibulum eleifend pellentesque, mi nam.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h5>H5. Heading 5</h5>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
|
||||||
|
<div class="widgets-block typography-widget">
|
||||||
|
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||||
|
<div class="panel-body content-panel more-text-widget">
|
||||||
|
<div class="section-block">
|
||||||
|
<h2 class="typography-widget-header">Some more text</h2>
|
||||||
|
</div>
|
||||||
|
<div class="section-block light-text">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
||||||
|
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||||
|
ornare
|
||||||
|
nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
|
||||||
|
parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-block regular-text">
|
||||||
|
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna
|
||||||
|
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
||||||
|
ridiculus
|
||||||
|
mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block upper-text bold-text">
|
||||||
|
<p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||||
|
quis
|
||||||
|
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||||
|
ornare
|
||||||
|
nulla. </p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block bold-text">
|
||||||
|
<p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||||
|
quis
|
||||||
|
ullam-corper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||||
|
ornare
|
||||||
|
nulla.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block small-text">
|
||||||
|
<p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
|
||||||
|
|
||||||
|
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
|
||||||
|
|
||||||
|
<p> pellentesque, mi nam.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
|
||||||
|
<div class="widgets-block typography-widget">
|
||||||
|
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||||
|
<div class="panel-body content-panel lists-widget">
|
||||||
|
<div class="section-block">
|
||||||
|
<h2 class="typography-widget-header">Lists</h2>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h5 class="list-header">Unordered list:</h5>
|
||||||
|
<ul class="blur">
|
||||||
|
<li>Lorem ipsum dolor sit amet</li>
|
||||||
|
<li>Сlacinia scelerisque pharetra
|
||||||
|
<ul>
|
||||||
|
<li>Dui rhoncus quisque integer lorem
|
||||||
|
<ul>
|
||||||
|
<li>Libero iaculis vestibulum eu vitae</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Nisl lectus nibh habitasse suspendisse ut</li>
|
||||||
|
<li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
|
||||||
|
</ul>
|
||||||
|
<h5 class="list-header">Ordered Lists:</h5>
|
||||||
|
<ol class="blur">
|
||||||
|
<li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
|
||||||
|
<li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
|
||||||
|
<ol>
|
||||||
|
<li><span>Interdum et justo nulla</span>
|
||||||
|
<ol>
|
||||||
|
<li><span>Magna amet, suscipit suscipit non amet</span></li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li><span>Metus duis eu non eu ridiculus turpis</span></li>
|
||||||
|
<li>
|
||||||
|
<span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
|
||||||
|
pulvinar,
|
||||||
|
lacinia scelerisque pharetra.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
|
||||||
|
<div class="widgets-block typography-widget">
|
||||||
|
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||||
|
<div class="panel-body content-panel color-widget">
|
||||||
|
<div class="section-block">
|
||||||
|
<h2 class="typography-widget-header">Text Color</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-block red-text ">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
||||||
|
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||||
|
ornare
|
||||||
|
nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
|
||||||
|
dis
|
||||||
|
parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-block blue-text ">
|
||||||
|
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
|
||||||
|
urna
|
||||||
|
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
||||||
|
ridiculus
|
||||||
|
mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-block links">
|
||||||
|
<p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||||
|
quis
|
||||||
|
<a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a
|
||||||
|
href>mattis</a> vel eros. In sed ornare
|
||||||
|
nulla.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-block links">
|
||||||
|
<p><a href>Active link — #41bee9</a></p>
|
||||||
|
|
||||||
|
<p class="hovered"><a href>Hover link — #9d498c</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="col-lg-12 col-sm-12 col-xs-12">
|
||||||
<div class="widgets-block">
|
<div class="widgets-block">
|
||||||
<div class="panel panel-default invisible" zoom-in>
|
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||||
<div class="panel-body content-panel">
|
<div class="panel-body content-panel banner-column-panel">
|
||||||
<div class="section-block">
|
<div class="banner">
|
||||||
<h1>H1. Blur Admin Heading</h1>
|
<div class="large-banner-wrapper">
|
||||||
|
<img src="img/banner.png" alt=""/>
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
|
||||||
vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
|
|
||||||
ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
|
|
||||||
id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
|
|
||||||
fusce.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="section-block">
|
<div class="banner-text-wrapper">
|
||||||
<h2>H2. Blur Admin Heading</h2>
|
<div class="banner-text">
|
||||||
|
<h1>Simple Banner Text</h1>
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
<p>Lorem ipsum dolor sit amet</p>
|
||||||
vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
|
|
||||||
ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
|
<p>Odio amet viverra rutrum</p>
|
||||||
id dolor sollicitudin. </p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="section-block">
|
|
||||||
<h3>H3. Blur Admin Heading</h3>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
|
||||||
vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
|
|
||||||
ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
|
|
||||||
id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
|
|
||||||
fusce.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="section-block">
|
|
||||||
<h4 class="color">H4. Color Blur Admin Heading</h4>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
|
||||||
vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
|
|
||||||
ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
|
|
||||||
id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
|
|
||||||
fusce.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="section-block">
|
|
||||||
<h5 class="color">H5. Color Blur Admin Heading</h5>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
|
||||||
vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
|
|
||||||
ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
|
|
||||||
id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
|
|
||||||
fusce.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,
|
|
||||||
lacinia scelerisque pharetra, placerat vestibulum eleifend pellentesque, mi nam. Lorem ipsum dolor sit amet,
|
|
||||||
id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum eleifend pellentesque,
|
|
||||||
mi nam.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-block">
|
|
||||||
<p class="small-text">Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia
|
|
||||||
scelerisque pharetra, placerat vestibulum eleifend pellentesque, mi nam.</p>
|
|
||||||
|
|
||||||
<p class="small-text">Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque
|
|
||||||
pharetra, placerat vestibulum eleifend pellentesque, mi nam.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>Columns</h2>
|
<h2>Columns</h2>
|
||||||
|
|
||||||
|
|
@ -71,13 +217,16 @@
|
||||||
href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
|
href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
|
||||||
href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
|
href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
|
||||||
href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
|
href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
|
||||||
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed penatibus
|
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
|
||||||
|
penatibus
|
||||||
arcu nulla.</p>
|
arcu nulla.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
|
<div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
|
||||||
<p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla, fermentum
|
<p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
|
||||||
lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce aliquet
|
fermentum
|
||||||
|
lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
|
||||||
|
aliquet
|
||||||
fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
|
fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -104,7 +253,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-4">
|
<div class="col-sm-4">
|
||||||
<div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
|
<div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
|
||||||
<p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat in
|
<p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
|
||||||
|
in
|
||||||
velit</p>
|
velit</p>
|
||||||
<a href class="learn-more">Lean more</a>
|
<a href class="learn-more">Lean more</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -114,67 +264,9 @@
|
||||||
<a href class="learn-more">Lean more</a>
|
<a href class="learn-more">Lean more</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
|
|
||||||
<h5>Unordered list:</h5>
|
|
||||||
<ul class="blur">
|
|
||||||
<li>Lorem ipsum dolor sit amet</li>
|
|
||||||
<li>Сlacinia scelerisque pharetra
|
|
||||||
<ul>
|
|
||||||
<li>Dui rhoncus quisque integer lorem
|
|
||||||
<ul>
|
|
||||||
<li>Libero iaculis vestibulum eu vitae phasellus enim</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>Nisl lectus nibh habitasse suspendisse ut</li>
|
|
||||||
<li>Posuere cursus hac, vestibulum wisi nulla bibendum fames, magna vel turpis dis nibh</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h5>Ordered Lists:</h5>
|
|
||||||
<ol class="blur">
|
|
||||||
<li><span>Eu non nec cursus quis mollis, amet quam nec quam</span></li>
|
|
||||||
<li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
|
|
||||||
<ol>
|
|
||||||
<li><span>Interdum et justo nulla</span>
|
|
||||||
<ol>
|
|
||||||
<li><span>Magna amet, suscipit suscipit non amet fames sed erat</span></li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
<li><span>Metus duis eu non eu ridiculus turpis</span></li>
|
|
||||||
<li><span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<div class="banner">
|
|
||||||
<div class="large-banner-wrapper">
|
|
||||||
<img src="img/banner.png" alt=""/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="banner-text-wrapper">
|
|
||||||
<div class="banner-text">
|
|
||||||
<h3>Sample Banner Text</h3>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet</p>
|
|
||||||
|
|
||||||
<p>Odio amet viverra rutrum</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="photo-desc"><p class="small-text">Banner Description Text</p></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="links">
|
|
||||||
<h2>Links</h2>
|
|
||||||
|
|
||||||
<p><a href>Active link — #41bee9</a></p>
|
|
||||||
|
|
||||||
<p class="hovered"><a href>Hover link — #9d498c</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 813 KiB After Width: | Height: | Size: 335 KiB |
Loading…
Reference in New Issue