mirror of https://github.com/akveo/blur-admin
new typography page init
alex
parent
385ad9bc67
commit
9e51c66b36
|
|
@ -18,44 +18,276 @@ a {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 38px;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 14px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
line-height: 38px;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
line-height: 42px;
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 19px;
|
||||
line-height: 43px;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
line-height: 45px;
|
||||
font-size: 15px;
|
||||
line-height: 35px;
|
||||
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 {
|
||||
margin-bottom: 12px;
|
||||
color: $default-text;
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
p.small-text {
|
||||
|
|
@ -65,16 +297,7 @@ p.small-text {
|
|||
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 {
|
||||
margin-bottom: 50px;
|
||||
|
|
@ -121,114 +344,30 @@ a.learn-more {
|
|||
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 {
|
||||
position: relative;
|
||||
padding-top: 17px;
|
||||
margin-bottom: 27px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.large-banner-wrapper {
|
||||
overflow: hidden;
|
||||
height: 252px;
|
||||
height: 400px;
|
||||
img {
|
||||
height: 100%;
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.banner-text-wrapper {
|
||||
margin-top: -261px;
|
||||
height: 261px;
|
||||
margin-top: -400px;
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
padding: 30px 20px;
|
||||
padding: 85px 90px 60px;
|
||||
display: inline-block;
|
||||
margin: 67px auto;
|
||||
background: #fff;
|
||||
|
|
@ -237,19 +376,32 @@ ol.blur {
|
|||
background: rgba(0, 0, 0, 0.75);
|
||||
color: #ffffff;
|
||||
|
||||
h3 {
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p {
|
||||
color: $warning;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
font-weight: 300;
|
||||
color: $primary;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.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 {
|
||||
padding-bottom: 12px;
|
||||
|
|
@ -301,7 +441,11 @@ ol.blur {
|
|||
}
|
||||
|
||||
.section {
|
||||
padding-top: 7px;
|
||||
padding-bottom: 12px;
|
||||
padding: 0 20px 50px 20px;
|
||||
}
|
||||
|
||||
div.banner-column-panel{
|
||||
padding: 0;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,180 +1,272 @@
|
|||
<div class="widgets">
|
||||
<div class="widgets-block">
|
||||
<div class="panel panel-default invisible" zoom-in>
|
||||
<div class="panel-body content-panel">
|
||||
<div class="section-block">
|
||||
<h1>H1. Blur Admin Heading</h1>
|
||||
|
||||
<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="section-block">
|
||||
<h2>H2. Blur Admin Heading</h2>
|
||||
|
||||
<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. </p>
|
||||
</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 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 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">
|
||||
<h2>Columns</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
|
||||
<p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
|
||||
href>dapibus</a> magna rutrum. Ornare neque 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,
|
||||
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed penatibus
|
||||
arcu nulla.</p>
|
||||
<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="col-sm-6">
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h1>H1. Heading 1</h1>
|
||||
|
||||
<div class="separator"></div>
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl </p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h4>Column heading example</h4>
|
||||
<p>pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque, mi nam.</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Yet another column heading example</h4>
|
||||
<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="col-sm-4">
|
||||
<h4>Third column heading example</h4>
|
||||
<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>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
|
||||
<p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
|
||||
maecenas</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
<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="col-sm-4">
|
||||
<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
|
||||
velit</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
|
||||
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
<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="separator"></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>
|
||||
|
||||
<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>
|
||||
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
|
||||
|
||||
<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>
|
||||
<p> pellentesque, mi nam.</p>
|
||||
</div>
|
||||
|
||||
<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 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 class="photo-desc"><p class="small-text">Banner Description Text</p></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="links">
|
||||
<h2>Links</h2>
|
||||
<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>
|
||||
|
||||
<p><a href>Active link — #41bee9</a></p>
|
||||
<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>
|
||||
|
||||
<p class="hovered"><a href>Hover link — #9d498c</a></p>
|
||||
<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="panel panel-default invisible with-scroll" zoom-in>
|
||||
<div class="panel-body content-panel banner-column-panel">
|
||||
<div class="banner">
|
||||
<div class="large-banner-wrapper">
|
||||
<img src="img/banner.png" alt=""/>
|
||||
</div>
|
||||
<div class="banner-text-wrapper">
|
||||
<div class="banner-text">
|
||||
<h1>Simple Banner Text</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
|
||||
<p>Odio amet viverra rutrum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Columns</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
|
||||
<p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
|
||||
href>dapibus</a> magna rutrum. Ornare neque 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,
|
||||
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
|
||||
penatibus
|
||||
arcu nulla.</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h4>Column heading example</h4>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Yet another column heading example</h4>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Third column heading example</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
|
||||
<p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
|
||||
maecenas</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<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
|
||||
velit</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
|
||||
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator"></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