Created
March 19, 2017 23:31
-
-
Save nickjackson/ed818b1bb0f09d2ff89611e3822b538f to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/yinesat
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .social { | |
| margin:20px; | |
| font-size:15px; | |
| width:33em; | |
| } | |
| .instagram { | |
| font-family: "proxima-nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; | |
| background-color:white; | |
| border:1px solid rgb(219, 219, 219); | |
| border-radius:3px; | |
| } | |
| .instagram header { | |
| display:flex; | |
| align-items:center; | |
| padding:0.5em; | |
| } | |
| .instagram header .user-avatar { | |
| width:40px; | |
| height:40px; | |
| } | |
| .instagram header .user-avatar img { | |
| border-radius:50%; | |
| width:40px; | |
| height:40px; | |
| } | |
| .instagram header .user-name { | |
| font-weight:bold; | |
| color: #404040; | |
| margin-left:10px; | |
| font-size:1em; | |
| flex: 1 1 auto; | |
| } | |
| .instagram header .post-time { | |
| margin-right:10px; | |
| color: #3a3a3a | |
| } | |
| .instagram section img { | |
| width:100%; | |
| margin:0; | |
| } | |
| .instagram p { | |
| margin:0; | |
| padding: 1em; | |
| font-size:1.1em; | |
| } | |
| .instagram footer { | |
| text-align:center; | |
| } | |
| .logo { | |
| } | |
| .facebook { | |
| background-color:white; | |
| font-family: -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; | |
| border-radius: 3px; | |
| border: 1px solid #d8d8d8; | |
| } | |
| .facebook header { | |
| display:flex; | |
| align-items:center; | |
| padding:0.8em; | |
| } | |
| .facebook header .user-avatar, | |
| .facebook header .user-avatar img { | |
| width:40px; | |
| height:40px; | |
| } | |
| .facebook header .user-name-post-time { | |
| margin-left:10px; | |
| } | |
| .facebook header .user-name { | |
| font-weight:bold; | |
| color:#365899; | |
| } | |
| .facebook header .post-time { | |
| font-size: 0.9em; | |
| color:grey; | |
| margin-top:4px; | |
| } | |
| .facebook section { | |
| padding:0.3em 0.8em; | |
| } | |
| .facebook section p { | |
| margin:0 0 10px 0; | |
| } | |
| .facebook section img { | |
| width:100%; | |
| } | |
| .facebook footer { | |
| text-align:center; | |
| padding:0.8em; | |
| } | |
| .twitter { | |
| font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif; | |
| background-color:white; | |
| border:1px solid rgb(219, 219, 219); | |
| border-radius:3px; | |
| } | |
| .twitter section.picture img { | |
| width:100%; | |
| } | |
| .twitter header { | |
| padding:0.8em; | |
| display:flex; | |
| align-items:center; | |
| } | |
| .twitter header .user-avatar, | |
| .twitter header .user-avatar img { | |
| width:40px; | |
| height:40px; | |
| } | |
| .twitter header .user-name-group { | |
| margin-left:10px; | |
| } | |
| .twitter header .user-full-name { | |
| font-weight:bold; | |
| font-size:1.1em; | |
| } | |
| .twitter header .user-name { | |
| font-size:0.9em; | |
| color:#697882; | |
| } | |
| .twitter section.body { | |
| padding:0 0.8em; | |
| } | |
| .twitter section.body p { | |
| margin:0px 0px 10px 0px; | |
| font-size:1.1em; | |
| } | |
| .twitter section.body .post-time { | |
| font-size:0.9em; | |
| color:#697882; | |
| } | |
| .twitter footer { | |
| text-align:center; | |
| padding:0.8em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="social instagram"> | |
| <header> | |
| <div class="user-avatar"> | |
| <img src="https://instagram.flhr3-2.fna.fbcdn.net/t51.2885-19/s150x150/14719833_310540259320655_1605122788543168512_a.jpg" /> | |
| </div> | |
| <div class="user-name"> | |
| </div> | |
| <div class="post-time"> | |
| 10 minutes ago | |
| </div> | |
| </header> | |
| <section> | |
| <img src="https://instagram.flhr3-2.fna.fbcdn.net/t51.2885-15/e15/1538350_1528374764070564_1190643161_n.jpg"></img> | |
| <p> | |
| <strong>Instagram </strong> | |
| We’re putting the Weekend Hashtag Project on hold this weekend. Instead, we’re challenging people around the world to participate in the 10th Worldwide InstaMeet! Grab a few good friends or meet up with a larger group in your area and share your best photos and videos from the InstaMeet with the #WWIM10 hashtag for a chance to be featured on our blog Monday morning. Be sure to include the name of the location where your event took place along with the unique hashtag you've chosen for your InstaMeet in your caption. Photo by @sun_shinealight</p> | |
| </section> | |
| <footer> | |
| <img class="logo" src="http://vectorlogo4u.com/wp-content/uploads/2016/05/instagram-glyph-new-vector-720x340.png" width="100" /> | |
| </footer> | |
| </div> | |
| <div class="social facebook"> | |
| <header> | |
| <div class="user-avatar"> | |
| <img src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-1/p50x50/2525_10153793811847464_6612420053459288149_n.jpg?oh=b80484e389d3f187bc4333cb1bd37054&oe=5962CAEA" /> | |
| </div> | |
| <div class="user-name-post-time"> | |
| <div class="user-name"> | |
| Nick Jackson | |
| </div> | |
| <div class="post-time"> | |
| 10 minutes ago | |
| </div> | |
| </div> | |
| </header> | |
| <section> | |
| <p>This is a post body, #hashtag. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste sit quaerat quos cumque. Ullam quas assumenda, deleniti quidem temporibus quis voluptatibus repudiandae obcaecati fugit in. Dolor provident, nulla inventore consectetur.</p> | |
| <img src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/10599315_744014948973668_5439038432502074441_n.jpg?oh=c9f3e0e3582f84277855647a56771d16&oe=595EFF25" /> | |
| </section> | |
| <footer> | |
| <img class="logo" src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" width="30"/> | |
| </footer> | |
| </div> | |
| <div class="social twitter"> | |
| <header> | |
| <div class="user-avatar"> | |
| <img src="https://pbs.twimg.com/profile_images/432081479/DOI_LOGO_normal.jpg" /> | |
| </div> | |
| <div class="user-name-group"> | |
| <div class="user-full-name"> | |
| Nick Jackson | |
| </div> | |
| <div class="user-name"> | |
| @nickjjackson | |
| </div> | |
| </div> | |
| </header> | |
| <section class="body"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, non! In nobis quam possimus amet cumque rem earum necessitatibus doloremque laboriosam quis mollitia veniam voluptate, incidunt officia neque et a?<p> | |
| <div class="post-time"> | |
| 10 minutes ago | |
| </div> | |
| </section> | |
| <footer> | |
| <img class="logo" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" width="30"/> | |
| </footer> | |
| </div> | |
| <div class="social twitter"> | |
| <section class="picture"> | |
| <img src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/10599315_744014948973668_5439038432502074441_n.jpg?oh=c9f3e0e3582f84277855647a56771d16&oe=595EFF25" /> | |
| </section> | |
| <header> | |
| <div class="user-avatar"> | |
| <img src="https://pbs.twimg.com/profile_images/432081479/DOI_LOGO_normal.jpg" /> | |
| </div> | |
| <div class="user-name-group"> | |
| <div class="user-full-name"> | |
| Nick Jackson | |
| </div> | |
| <div class="user-name"> | |
| @nickjjackson | |
| </div> | |
| </div> | |
| </header> | |
| <section class="body"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, non! In nobis quam possimus amet cumque rem earum necessitatibus doloremque laboriosam quis mollitia veniam voluptate, incidunt officia neque et a?<p> | |
| <div class="post-time"> | |
| 10 minutes ago | |
| </div> | |
| </section> | |
| <footer> | |
| <img class="logo" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" width="30"/> | |
| </footer> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">.social { | |
| margin:20px; | |
| font-size:15px; | |
| width:33em; | |
| } | |
| .instagram { | |
| font-family: "proxima-nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; | |
| background-color:white; | |
| border:1px solid rgb(219, 219, 219); | |
| border-radius:3px; | |
| } | |
| .instagram header { | |
| display:flex; | |
| align-items:center; | |
| padding:0.5em; | |
| } | |
| .instagram header .user-avatar { | |
| width:40px; | |
| height:40px; | |
| } | |
| .instagram header .user-avatar img { | |
| border-radius:50%; | |
| width:40px; | |
| height:40px; | |
| } | |
| .instagram header .user-name { | |
| font-weight:bold; | |
| color: #404040; | |
| margin-left:10px; | |
| font-size:1em; | |
| flex: 1 1 auto; | |
| } | |
| .instagram header .post-time { | |
| margin-right:10px; | |
| color: #3a3a3a | |
| } | |
| .instagram section img { | |
| width:100%; | |
| margin:0; | |
| } | |
| .instagram p { | |
| margin:0; | |
| padding: 1em; | |
| font-size:1.1em; | |
| } | |
| .instagram footer { | |
| text-align:center; | |
| } | |
| .logo { | |
| } | |
| .facebook { | |
| background-color:white; | |
| font-family: -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; | |
| border-radius: 3px; | |
| border: 1px solid #d8d8d8; | |
| } | |
| .facebook header { | |
| display:flex; | |
| align-items:center; | |
| padding:0.8em; | |
| } | |
| .facebook header .user-avatar, | |
| .facebook header .user-avatar img { | |
| width:40px; | |
| height:40px; | |
| } | |
| .facebook header .user-name-post-time { | |
| margin-left:10px; | |
| } | |
| .facebook header .user-name { | |
| font-weight:bold; | |
| color:#365899; | |
| } | |
| .facebook header .post-time { | |
| font-size: 0.9em; | |
| color:grey; | |
| margin-top:4px; | |
| } | |
| .facebook section { | |
| padding:0.3em 0.8em; | |
| } | |
| .facebook section p { | |
| margin:0 0 10px 0; | |
| } | |
| .facebook section img { | |
| width:100%; | |
| } | |
| .facebook footer { | |
| text-align:center; | |
| padding:0.8em; | |
| } | |
| .twitter { | |
| font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif; | |
| background-color:white; | |
| border:1px solid rgb(219, 219, 219); | |
| border-radius:3px; | |
| } | |
| .twitter section.picture img { | |
| width:100%; | |
| } | |
| .twitter header { | |
| padding:0.8em; | |
| display:flex; | |
| align-items:center; | |
| } | |
| .twitter header .user-avatar, | |
| .twitter header .user-avatar img { | |
| width:40px; | |
| height:40px; | |
| } | |
| .twitter header .user-name-group { | |
| margin-left:10px; | |
| } | |
| .twitter header .user-full-name { | |
| font-weight:bold; | |
| font-size:1.1em; | |
| } | |
| .twitter header .user-name { | |
| font-size:0.9em; | |
| color:#697882; | |
| } | |
| .twitter section.body { | |
| padding:0 0.8em; | |
| } | |
| .twitter section.body p { | |
| margin:0px 0px 10px 0px; | |
| font-size:1.1em; | |
| } | |
| .twitter section.body .post-time { | |
| font-size:0.9em; | |
| color:#697882; | |
| } | |
| .twitter footer { | |
| text-align:center; | |
| padding:0.8em; | |
| }</script> | |
| </body> | |
| </html> |
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
| .social { | |
| margin:20px; | |
| font-size:15px; | |
| width:33em; | |
| } | |
| .instagram { | |
| font-family: "proxima-nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; | |
| background-color:white; | |
| border:1px solid rgb(219, 219, 219); | |
| border-radius:3px; | |
| } | |
| .instagram header { | |
| display:flex; | |
| align-items:center; | |
| padding:0.5em; | |
| } | |
| .instagram header .user-avatar { | |
| width:40px; | |
| height:40px; | |
| } | |
| .instagram header .user-avatar img { | |
| border-radius:50%; | |
| width:40px; | |
| height:40px; | |
| } | |
| .instagram header .user-name { | |
| font-weight:bold; | |
| color: #404040; | |
| margin-left:10px; | |
| font-size:1em; | |
| flex: 1 1 auto; | |
| } | |
| .instagram header .post-time { | |
| margin-right:10px; | |
| color: #3a3a3a | |
| } | |
| .instagram section img { | |
| width:100%; | |
| margin:0; | |
| } | |
| .instagram p { | |
| margin:0; | |
| padding: 1em; | |
| font-size:1.1em; | |
| } | |
| .instagram footer { | |
| text-align:center; | |
| } | |
| .logo { | |
| } | |
| .facebook { | |
| background-color:white; | |
| font-family: -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; | |
| border-radius: 3px; | |
| border: 1px solid #d8d8d8; | |
| } | |
| .facebook header { | |
| display:flex; | |
| align-items:center; | |
| padding:0.8em; | |
| } | |
| .facebook header .user-avatar, | |
| .facebook header .user-avatar img { | |
| width:40px; | |
| height:40px; | |
| } | |
| .facebook header .user-name-post-time { | |
| margin-left:10px; | |
| } | |
| .facebook header .user-name { | |
| font-weight:bold; | |
| color:#365899; | |
| } | |
| .facebook header .post-time { | |
| font-size: 0.9em; | |
| color:grey; | |
| margin-top:4px; | |
| } | |
| .facebook section { | |
| padding:0.3em 0.8em; | |
| } | |
| .facebook section p { | |
| margin:0 0 10px 0; | |
| } | |
| .facebook section img { | |
| width:100%; | |
| } | |
| .facebook footer { | |
| text-align:center; | |
| padding:0.8em; | |
| } | |
| .twitter { | |
| font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif; | |
| background-color:white; | |
| border:1px solid rgb(219, 219, 219); | |
| border-radius:3px; | |
| } | |
| .twitter section.picture img { | |
| width:100%; | |
| } | |
| .twitter header { | |
| padding:0.8em; | |
| display:flex; | |
| align-items:center; | |
| } | |
| .twitter header .user-avatar, | |
| .twitter header .user-avatar img { | |
| width:40px; | |
| height:40px; | |
| } | |
| .twitter header .user-name-group { | |
| margin-left:10px; | |
| } | |
| .twitter header .user-full-name { | |
| font-weight:bold; | |
| font-size:1.1em; | |
| } | |
| .twitter header .user-name { | |
| font-size:0.9em; | |
| color:#697882; | |
| } | |
| .twitter section.body { | |
| padding:0 0.8em; | |
| } | |
| .twitter section.body p { | |
| margin:0px 0px 10px 0px; | |
| font-size:1.1em; | |
| } | |
| .twitter section.body .post-time { | |
| font-size:0.9em; | |
| color:#697882; | |
| } | |
| .twitter footer { | |
| text-align:center; | |
| padding:0.8em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment