Ajax Loader
×
HTML 
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&amp;subset=latin,cyrillic,cyrillic-ext" media="all" rel="stylesheet" type="text/css" />
1
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&amp;subset=latin,cyrillic,cyrillic-ext" media="all" rel="stylesheet" type="text/css" />
2
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'>
3
 
4
.b-exp
5
  .divider.b-exp__item
6
    .divider__side.b-exp__avatar-container
7
      %img.b-exp__avatar{src: "http://lorempixel.com/50/50/"}
8
    .divider__base.b-exp__body
9
      %a.b-exp__author{href: "#"} Ivan Lukyanovich
10
      %br
11
      %small.b-exp__small
12
        told his story 2 hours ago
13
        %br
14
        to idea
15
        %a.b-exp__idea-link{href: "#"} "We need to expand our budget"
16
      .b-exp__story
17
        %h2.b-exp__title Russian government expanded their budget at the expense of the lower strata
18
        .b-exp__content He do subjects prepared bachelor juvenile ye oh. He feelings removing informed he as ignorant we prepared. Evening do forming observe spirits is in. Country hearted be of justice sending. On so they as with room cold ye. Be call four my went mean. Celebrated if remarkably especially an. Going eat set she books found met aware.
19
        .divider.b-exp__actions
20
          %a.divider__side.divider__side_r{href: "#"}
21
            %i.icon-chat
22
            12 comments
23
          %a.divider__base{href: "#"}
24
            Read next
25
            %i.icon-arrow
26
 
27
  .divider.b-exp__item
28
    .divider__side.b-exp__avatar-container
29
      %img.b-exp__avatar{src: "http://lorempixel.com/50/50/?another"}
30
    .divider__base.b-exp__body
31
      %a.b-exp__author{href: "#"} Johnny Concent
32
      %br
33
      %small.b-exp__small
34
        told his story 2 hours ago
35
        %br
36
        to idea
37
        %a.b-exp__idea-link{href: "#"} "Kept in sent gave feel will oh it we."
38
      .b-exp__story
39
        %h2.b-exp__title Next his only boy meet the fat rose when. Do repair at we misery wanted remove remain income.
40
        .b-exp__content Rooms oh fully taken by worse do. Points afraid but may end law lasted. Was out laughter raptures returned outweigh. Luckily cheered colonel me do we attacks on highest enabled. Tried law yet style child. Bore of true of no be deal. Frequently sufficient in be unaffected. The furnished she concluded depending procuring concealed.
41
        .divider.b-exp__actions
42
          %a.divider__side.divider__side_r{href: "#"}
43
            %i.icon-chat
44
            3 comments
45
          %a.divider__base{href: "#"}
46
            Read next
47
            %i.icon-arrow
 
CSS 
@font-face
1
@font-face
2
  font-family: 'fontello'
3
  src: url('http://ge.tt/api/1/files/6mVv8es/0/blob?download')
4
  src: url('http://ge.tt/api/1/files/6mVv8es/0/blob?download#iefix') format("embedded-opentype"), url('http://ge.tt/api/1/files/6mVv8es/2/blob?download') format("woff"), url('http://ge.tt/api/1/files/6mVv8es/3/blob?download') format("truetype"), url('http://ge.tt/api/1/files/6mVv8es/1/blob?download') format("svg")
5
  font-weight: normal
6
  font-style: normal
7
 
8
[class^="icon-"]:before, [class*=" icon-"]:before
9
  font-family: "fontello"
10
  font-style: normal
11
  font-weight: normal
12
  speak: none
13
  display: inline-block
14
  text-decoration: inherit
15
  width: 1em
16
  margin-right: .2em
17
  text-align: center
18
  font-variant: normal
19
  text-transform: none
20
  line-height: 1em
21
  margin-left: .2em
22
 
23
.icon-arrow:before
24
  content: '\e800'
25
 
26
.icon-chat:before
27
  content: '\e801'
28
 
29
body
30
  font-size: 14px
31
  font-family: "PT Sans"
32
  padding: 10px
33
  box-sizing: border-box
34
 
35
a
36
  color: #ff5146
37
 
38
  &:hover
39
    color: lighten(#ff5146, 10%)
40
41
.divider__side
42
  float: left
43
 
44
.divider__side_r
45
  float: right
46
 
47
.divider__base
48
  overflow: hidden
49
  display: block
50
 
51
.divider__side, .divider__base
52
  word-wrap: break-word
53
 
54
.divider
55
  &:before
56
    content: "\0020"
57
    display: block
58
    height: 0
59
    visibility: hidden
60
  &:after
61
    content: "\0020"
62
    display: block
63
    height: 0
64
    visibility: hidden
65
    clear: both
66
  
67
.b-exp__item
68
  margin-bottom: 30px
69
 
70
.b-exp__avatar
71
  width: 50px
72
  height: 50px
73
  border-radius: 100px
74
 
75
.b-exp__body
76
  padding-left: 15px
77
 
78
.b-exp__author
79
  font-size: 16px
80
 
81
.b-exp__small
82
  color: #999
83
84
  & a
85
    color: #999
86
  
87
    &:hover
88
      color: darken(#999, 10%)
89
 
90
.b-exp__story
91
  background-color: #f7f7f7
92
  padding: 15px
93
  margin-top: 15px
94
  border: 1px solid #eaeaea
95
  box-shadow: inset 0 -1px 0 #fefefe
96
 
97
.b-exp__title
98
  margin: 0 0 10px 0
99
 
100
.b-exp__content
101
  line-height: 1.5em
102
 
103
.b-exp__actions
104
  margin-top: 10px
105
106
  a
107
    text-decoration: none
 

Untitled

CSSDeck G+