Last active
August 29, 2015 14:13
-
-
Save misscs/786dbf3a87729a00f4cd to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="team-grid"><article class="member h-card"><span style="background-image:url(https://pbs.twimg.com/profile_images/488829281561112576/VaBLKvWY.jpeg)" class="member-photo"></span><h3 class="p-name">Robert Anthony Bellamy</h3><p class="p-job-title">This member has a very long job title ong job title ong job title ong job title ong job title</p><a href="http://twitter.com/rabellamy" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/rabellamy" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://pbs.twimg.com/profile_images/461495643291140096/td52Mi15.jpeg)" class="member-photo"></span><h3 class="p-name">Nicholas Frota</h3><p class="p-job-title">Interface Designer</p><a href="http://twitter.com/nonlinear" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/nonlinear" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://pbs.twimg.com/profile_images/487299875071983616/lUCC6fIy.jpeg)" class="member-photo"></span><h3 class="p-name">Aisha Green</h3><p class="p-job-title">Front-End Developer</p><a href="http://twitter.com/skyefaerie" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/skyfaerie" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://media.licdn.com/media/p/7/005/08a/131/33fafc8.jpg)" class="member-photo"></span><h3 class="p-name">Robert James</h3><p class="p-job-title">Developer</p><a href="http://twitter.com/bkrjames" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/rmjames" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://s-media-cache-ec0.pinimg.com/avatars/adekunleoduye_1346033824_600.jpg)" class="member-photo"></span><h3 class="p-name">Adekunyle Oduye</h3><p class="p-job-title">Product Designer</p><a href="http://twitter.com/adekunleoduye" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/adekunleoduye" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://pbs.twimg.com/profile_images/495784294204194817/loX5dUlx.jpeg)" class="member-photo"></span><h3 class="p-name">Claudina Sarahe</h3><p class="p-job-title">Front-End Developer</p><a href="http://twitter.com/itsmisscs" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/misscs" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article></div2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @import "compass"; | |
| .team-grid { | |
| @include display-flex; | |
| @include flex-wrap(wrap); | |
| flex-direction: row; // not really needed since this is the default | |
| background: blue; | |
| height: 700px; // just playing around | |
| align-content: flex-start; // just playing around | |
| } | |
| .member { | |
| @include flex(1 25em); | |
| background: #aaa; | |
| margin: 1em; | |
| } | |
| .p-job-title { | |
| font-size: 20px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .team-grid { | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| flex-direction: row; | |
| background: blue; | |
| height: 700px; | |
| align-content: flex-start; | |
| } | |
| .member { | |
| -webkit-flex: 1 25em; | |
| flex: 1 25em; | |
| background: #aaa; | |
| margin: 1em; | |
| } | |
| .p-job-title { | |
| font-size: 20px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="team-grid"><article class="member h-card"><span style="background-image:url(https://pbs.twimg.com/profile_images/488829281561112576/VaBLKvWY.jpeg)" class="member-photo"></span><h3 class="p-name">Robert Anthony Bellamy</h3><p class="p-job-title">This member has a very long job title ong job title ong job title ong job title ong job title</p><a href="http://twitter.com/rabellamy" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/rabellamy" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://pbs.twimg.com/profile_images/461495643291140096/td52Mi15.jpeg)" class="member-photo"></span><h3 class="p-name">Nicholas Frota</h3><p class="p-job-title">Interface Designer</p><a href="http://twitter.com/nonlinear" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/nonlinear" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://pbs.twimg.com/profile_images/487299875071983616/lUCC6fIy.jpeg)" class="member-photo"></span><h3 class="p-name">Aisha Green</h3><p class="p-job-title">Front-End Developer</p><a href="http://twitter.com/skyefaerie" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/skyfaerie" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://media.licdn.com/media/p/7/005/08a/131/33fafc8.jpg)" class="member-photo"></span><h3 class="p-name">Robert James</h3><p class="p-job-title">Developer</p><a href="http://twitter.com/bkrjames" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/rmjames" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://s-media-cache-ec0.pinimg.com/avatars/adekunleoduye_1346033824_600.jpg)" class="member-photo"></span><h3 class="p-name">Adekunyle Oduye</h3><p class="p-job-title">Product Designer</p><a href="http://twitter.com/adekunleoduye" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/adekunleoduye" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article><article class="member h-card"><span style="background-image:url(https://pbs.twimg.com/profile_images/495784294204194817/loX5dUlx.jpeg)" class="member-photo"></span><h3 class="p-name">Claudina Sarahe</h3><p class="p-job-title">Front-End Developer</p><a href="http://twitter.com/itsmisscs" rel="me" class="u-url"><i class="fa fa-twitter"></i>twitter</a><a href="http://github.com/misscs" rel="me" class="u-url"><i class="fa fa-github"></i>github</a></article></div2 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment