Skip to content

Instantly share code, notes, and snippets.

@hdbham

hdbham/index.slim

Created December 28, 2023 06:37
Show Gist options
  • Save hdbham/6b3bb14e33b794891a88147c7a6111bc to your computer and use it in GitHub Desktop.
Save hdbham/6b3bb14e33b794891a88147c7a6111bc to your computer and use it in GitHub Desktop.
Download ZIP
This is our awesome team
Raw
index.slim
.container
.row
h1.title
| This is our awesome team
br
small Present your team in an interesting way
.col-sm-10.col-sm-offset-1
.col-md-4.col-sm-6
.card-container
.card
.front
.cover
img src="https://ct-freebies.herokuapp.com/images/rotating_card_thumb2.png" /
.user
img.img-circle src="https://ct-freebies.herokuapp.com/images/rotating_card_profile3.png" /
.content
.main
h3.name John Marvel
p.profession CEO
h5
i.fa.fa-map-marker.fa-fw.text-muted
| Paris, France
h5
i.fa.fa-building-o.fa-fw.text-muted
| Creative Tim Inc.
h5
i.fa.fa-envelope-o.fa-fw.text-muted
| john@creative-tim.com
.footer
.rating
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
/! end front panel
.back
.header
h5.motto "To be or not to be, this is my awesome motto!"
.content
.main
h4.text-center Experince
p In the project since 2011
h4.text-center Areas of Expertise
p Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...
.footer
.social-links.text-center
a.facebook href="http://cretive-tim.com"
i.fa.fa-facebook.fa-fw
a.google href="http://cretive-tim.com"
i.fa.fa-google-plus.fa-fw
a.twitter href="http://cretive-tim.com"
i.fa.fa-twitter.fa-fw
/! end back panel
/! end card
/! end card-container
/! end col-md-4 col-sm-6
.col-md-4.col-sm-6
.card-container
.card
.front
.cover
img src="https://ct-freebies.herokuapp.com/images/rotating_card_thumb.png" /
.user
img.img-circle src="https://ct-freebies.herokuapp.com/images/rotating_card_profile2.png" /
.content
.main
h3.name Andrew Mike
p.profession Web Developer
h5
i.fa.fa-map-marker.fa-fw.text-muted
| Bucharest, Romania
h5
i.fa.fa-building-o.fa-fw.text-muted
| Creative Tim Inc.
h5
i.fa.fa-envelope-o.fa-fw.text-muted
| mike@creative-tim.com
.footer
.rating
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
/! end front panel
.back
.header
h5.motto "To be or not to be, this is my awesome motto!"
.content
.main
h4.text-center Experince
p Mike was working with our team since 2012.
h4.text-center Areas of Expertise
p Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...
.footer
.social-links.text-center
a.facebook href="http://cretive-tim.com"
i.fa.fa-facebook.fa-fw
a.google href="http://cretive-tim.com"
i.fa.fa-google-plus.fa-fw
a.twitter href="http://cretive-tim.com"
i.fa.fa-twitter.fa-fw
/! end back panel
/! end card
/! end card-container
/! end col sm 3
.col-md-4.col-sm-6
.card-container
.card
.front
.cover
img src="https://ct-freebies.herokuapp.com/images/rotating_card_thumb3.png" /
.user
img.img-circle src="https://ct-freebies.herokuapp.com/images/rotating_card_profile.png" /
.content
.main
h3.name Inna Corman
p.profession Product Manager
h5
i.fa.fa-map-marker.fa-fw.text-muted
| Paris, France
h5
i.fa.fa-building-o.fa-fw.text-muted
| Creative Tim Inc.
h5
i.fa.fa-envelope-o.fa-fw.text-muted
| inna@creative-tim.com
.footer
.rating
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
/! end front panel
.back
.header
h5.motto "To be or not to be, this is my awesome motto!"
.content
.main
h4.text-center Experince
p Inna was working with our team since 2012.
h4.text-center Areas of Expertise
p Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...
.footer
.social-links.text-center
a.facebook href="http://cretive-tim.com"
i.fa.fa-facebook.fa-fw
a.google href="http://cretive-tim.com"
i.fa.fa-google-plus.fa-fw
a.twitter href="http://cretive-tim.com"
i.fa.fa-twitter.fa-fw
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.sass
@import bourbon
body
margin-top: 60px
font-size: 14px
font-family: "Helvetica Nueue",Arial,Verdana,sans-serif
background-color: #E5E9ED
/* entire container, keeps perspective */
.card-container
-webkit-perspective: 800px
-moz-perspective: 800px
-o-perspective: 800px
perspective: 800px
margin-bottom: 30px
&:hover .card, &.hover .card
+transform (rotateY(180deg))
&.static
&:hover .card, &.hover .card
-webkit-transform: none
-moz-transform: none
-o-transform: none
transform: none
/* flip the pane when hovered */
/* flip speed goes here */
.card
-webkit-transition: -webkit-transform .5s
-moz-transition: -moz-transform .5s
-o-transition: -o-transform .5s
transition: transform .5s
+transform-style(preserve-3d)
position: relative
/* hide back of pane during swap */
.front, .back
-webkit-backface-visibility: hidden
-moz-backface-visibility: hidden
-o-backface-visibility: hidden
backface-visibility: hidden
position: absolute
top: 0
left: 0
background-color: #FFF
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14)
/* front pane, placed above back */
.front
z-index: 2
/* back, initially hidden pane */
.back
+transform(rotateY(180deg))
/* Style*/
.card
background: none repeat scroll 0 0 #FFFFFF
border-radius: 4px
color: #444444
.card-container, .front, .back
width: 100%
height: 420px
border-radius: 4px
.card
.cover
height: 105px
overflow: hidden
border-radius: 4px 4px 0 0
img
width: 100%
.user
border-radius: 50%
display: block
height: 120px
margin: -55px auto 0
overflow: hidden
width: 120px
img
background: none repeat scroll 0 0 #FFFFFF
border: 4px solid #FFFFFF
width: 100%
.content
background-color: rgba(0, 0, 0, 0)
box-shadow: none
padding: 10px 20px 20px
.main
min-height: 160px
.back .content .main
height: 215px
.name
font-size: 22px
line-height: 28px
margin: 10px 0 0
text-align: center
text-transform: capitalize
h5
margin: 5px 0
font-weight: 400
line-height: 20px
.profession
color: #999999
text-align: center
margin-bottom: 20px
.footer
border-top: 1px solid #EEEEEE
color: #999999
margin: 30px 0 0
padding: 10px 0 0
text-align: center
.social-links
font-size: 18px
a
margin: 0 7px
.header
padding: 15px 20px
height: 90px
.motto
border-bottom: 1px solid #EEEEEE
color: #999999
font-size: 14px
font-weight: 400
padding-bottom: 10px
text-align: center
/* Just for presentation*/
.title
color: #506A85
text-align: center
font-weight: 300
font-size: 44px
margin-bottom: 90px
line-height: 90%
small
font-size: 17px
color: #999
text-transform: uppercase
margin: 0
.space-50
height: 50px
display: block
.space-200
height: 200px
display: block
.white-board
background-color: #FFFFFF
min-height: 200px
padding: 60px 60px 20px
.ct-heart
color: #F74933
pre.prettyprint
background-color: #ffffff
border: 1px solid #999
margin-top: 20px
padding: 20px
text-align: left
.atv, .str
color: #05AE0E
.tag, .pln, .kwd
color: #3472F7
.atn
color: #2C93FF
.pln
color: #333
.com
color: #999
Raw
styles
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
Raw
this-is-our-awesome-team.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment