Created
August 25, 2014 04:06
-
-
Save Fykec/cfd57c84a8def1ec7946 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/sajaxi/3
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"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| /*CSS reset*/ | |
| body{font-size: 16px; line-height: 1.6;} | |
| *{padding:0;margin: 0; box-sizing: border-box;} | |
| ul, ol{list-style: none;} | |
| a{color:black; text-decoration: none;} | |
| a:hover{color:#248dc1} | |
| p{color:#999;} | |
| p strong{color:#333;} | |
| h1,h2,h3,h4,h5,h6{font-weight: normal;} | |
| img{max-width: 100%;} | |
| .header{overflow: hidden;} | |
| .header{background: #333333;} | |
| .header a{color:white;} | |
| .header {height: 100px} | |
| .logo{float:left;} | |
| .logo{height:100px; margin: 0 0 0 0;} | |
| .nav{float: right;} | |
| .nav ul{overflow: hidden; text-transform: uppercase;} | |
| .nav ul li{float: left;} | |
| .nav ul li a{display: block; height: 100px; padding: 20px; line-height: 60px;} | |
| .nav ul li a.selected{border-bottom: 10px solid #248dc1; } | |
| .nav ul li a.locale{background: #248dc1;} | |
| .nav ul li a img{margin: 0px 0px 0px 100px; width: 15px; height: 15px;} | |
| .main{width: 1200px; margin: 0 auto;} | |
| .main{overflow: hidden;} | |
| .main{margin-top: 100px;} | |
| .main .content{width: 800px; float: left;} | |
| .main .content h1{margin: 36px 0; font-size: 32px; color:#248dc1; font-weight: normal; } | |
| .main .content p{margin: 24px 0;} | |
| .main .aside{width: 330px; float: right;} | |
| .main .aside .title{ color: #ccc; padding-bottom: 36px; border-bottom: 2px solid #ccc;text-transform: uppercase;} | |
| .main .aside ul li {border-bottom: 1px solid #ccc; padding: 36px 0px;} | |
| .main .aside li .banner{position: relative;} | |
| .main .aside li .banner h1{position: absolute; height: 185px; line-height: 185px; color:gray; top: 0; left: 0; width: 100%; text-align: center; text-shadow: 0 0 1px black;} | |
| .footer{background: #333333; height: 340px} | |
| .footer .social{width: 190px; float: left; padding: 20px 20px 25px 10px ; border-right: 1px solid #666666;} | |
| .footer .social .weixin{float: left; width: 160px; } | |
| .footer .social .twitter{float: left; width: 55px; padding: 40px 0 0 0;} | |
| .footer .social .facebook{float: right; width: 55px; padding: 40px 0 0 0px;} | |
| .footer .contact{float: left; margin-left: 15px;} | |
| .footer .links{float: right} | |
| .copyright{background: #222222; text-align: center;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <div class="header"> | |
| <img class="logo" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRIaUncKqM-Nbdx88Te3A9E7xmo-CbUQGiY--jdGr02rV8fh1aUyA" alt=""> | |
| <div class="nav"> | |
| <ul> | |
| <li><a href="/" class=selected>Home</a></li> | |
| <li><a href="/" class=unselected>about us</a></li> | |
| <li><a href="/" class=unselected>project</a></li> | |
| <li><a href="/" class=unselected>team</a></li> | |
| <li><a href="/" class=locale>English, UK</a><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ4zR5SyucUfdh1O9OMzHCW_uiuIkzd38fBwQbHfdRmcpg62_szWA" alt=""></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="main"> | |
| <div class="content"> | |
| <img src="http://www.mobilemag.com/wp-content/uploads/2013/05/apple-wallpaper-logo.jpg" alt=""> | |
| <h1 class="title">News Title</h1> | |
| <p><strong>Beijing National Stadium, officially the National Stadium, is a stadium in Beijing, China. The stadium | |
| was designed for use throughout the 2008 Summer Olympics and Paralympics.</strong></p> | |
| <p>Located at the Olympic Green, the stadium cost US428 million. The design was awarded to a submission from | |
| the Swiss architecture firm Herzog & de Meuron in April 2003 after a bidding process that included 13 final | |
| submissions. The design, which originated from the study of Chinese ceramics, implemented steel beams in | |
| order to hide supports for the retractable roof; giving the stadium the appearance of a bird's nest. Leading | |
| Chinese artist Ai Weiwei was the artistic consultant on the project.[5] The retractable roof was later removed | |
| from the design after inspiring the stadium's most recognizable aspect. Ground was broken on 24 December | |
| 2003 and the stadium officially opened on 28 June 2008. A shopping mall and a hotel are planned to be | |
| constructed to increase use of the stadium, which has had trouble attracting events, football and otherwise, | |
| after the Olympics. </p> | |
| <p><strong>Bidding</strong></p> | |
| <p>Located at the Olympic Green, the stadium cost US428 million. The design was awarded to a submission from | |
| the Swiss architecture firm Herzog & de Meuron in April 2003 after a bidding process that included 13 final | |
| submissions. The design, which originated from the study of Chinese ceramics, implemented steel beams in | |
| order to hide supports for the retractable roof; giving the stadium the appearance of a bird's nest. Leading | |
| Chinese artist Ai Weiwei was the artistic consultant on the project.[5] The retractable roof was later removed | |
| from the design after inspiring the stadium's most recognizable aspect. Ground was broken on 24 December | |
| 2003 and the stadium officially opened on 28 June 2008. A shopping mall and a hotel are planned to be | |
| constructed to increase use of the stadium, which has had trouble attracting events, football and otherwise, | |
| after the Olympics. </p> | |
| </div> | |
| <div class="aside"> | |
| <h2 class="title">News</h2> | |
| <ul> | |
| <li> | |
| <div class="card"> | |
| <div class=banner> | |
| <img src="http://www.mobilemag.com/wp-content/uploads/2013/05/apple-wallpaper-logo.jpg" alt=""> | |
| <h1>New Title</h1> | |
| </div> | |
| <p>Located at the Olympic Green, the stadium cost US428 million. The design was awarded to a submission from | |
| the Swiss architecture firm Herzog & de Meuron in April 2003 after a bidding process that included 13 final | |
| submissions. The design, which originated from the study of Chinese ceramics, implemented steel beams in | |
| order to hide supports for the retractable roof; giving the stadium the appearance of a bird's nest. Leading | |
| Chinese artist Ai Weiwei was the artistic consultant on the project.[5] The retractable roof was later removed | |
| from the design after inspiring the stadium's most recognizable aspect. Ground was broken on 24 December | |
| 2003 and the stadium officially opened on 28 June 2008. A shopping mall and a hotel are planned to be | |
| constructed to increase use of the stadium, which has had trouble attracting events, football and otherwise, | |
| after the Olympics. </p> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="card"> | |
| <div class=banner> | |
| <img src="http://www.mobilemag.com/wp-content/uploads/2013/05/apple-wallpaper-logo.jpg" alt=""> | |
| <h1>New Title</h1> | |
| </div> | |
| <p>Located at the Olympic Green, the stadium cost US428 million. The design was awarded to a submission from | |
| the Swiss architecture firm Herzog & de Meuron in April 2003 after a bidding process that included 13 final | |
| submissions. The design, which originated from the study of Chinese ceramics, implemented steel beams in | |
| order to hide supports for the retractable roof; giving the stadium the appearance of a bird's nest. Leading | |
| Chinese artist Ai Weiwei was the artistic consultant on the project.[5] The retractable roof was later removed | |
| from the design after inspiring the stadium's most recognizable aspect. Ground was broken on 24 December | |
| 2003 and the stadium officially opened on 28 June 2008. A shopping mall and a hotel are planned to be | |
| constructed to increase use of the stadium, which has had trouble attracting events, football and otherwise, | |
| after the Olympics. </p> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="card"> | |
| <div class=banner> | |
| <img src="http://www.mobilemag.com/wp-content/uploads/2013/05/apple-wallpaper-logo.jpg" alt=""> | |
| <h1>New Title</h1> | |
| </div> | |
| <p>Located at the Olympic Green, the stadium cost US428 million. The design was awarded to a submission from | |
| the Swiss architecture firm Herzog & de Meuron in April 2003 after a bidding process that included 13 final | |
| submissions. The design, which originated from the study of Chinese ceramics, implemented steel beams in | |
| order to hide supports for the retractable roof; giving the stadium the appearance of a bird's nest. Leading | |
| Chinese artist Ai Weiwei was the artistic consultant on the project.[5] The retractable roof was later removed | |
| from the design after inspiring the stadium's most recognizable aspect. Ground was broken on 24 December | |
| 2003 and the stadium officially opened on 28 June 2008. A shopping mall and a hotel are planned to be | |
| constructed to increase use of the stadium, which has had trouble attracting events, football and otherwise, | |
| after the Olympics. </p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="social"> | |
| <img class="weixin" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRKwkP34VwJHcXUBqp7_EdUOAqPTEa2ChVKpWjIGyWvqPSIwFBx" alt=""> | |
| <img class="twitter" src="data:image/jpeg;base64,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" alt=""> | |
| <img class="facebook" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSETzsL80VihjpoSptM4j-rAY28mrBkWrvSSr-jJo5Id_pPpjcV" alt=""> | |
| </div> | |
| <div class="contact"> | |
| <p class="contactkey">Phone:</p> | |
| <p class="contactvalue">+44 020 6540 5827</p> | |
| <p class="contactkey">Cell Phone:</p> | |
| <p class="contactvalue">+44 020 6540 5827</p> | |
| <p class="contactkey">E-mail</p> | |
| <p class="contactvalue">Connect@BBG.com</p> | |
| </div> | |
| <div class="links"> | |
| <p>Browser</p> | |
| <ul> | |
| <li>Term Of Use</li> | |
| <li>About Us</li> | |
| <li>Privacy</li> | |
| <li>Project</li> | |
| <li>Accessibility</li> | |
| <li>Team</li> | |
| <li>Sitemap</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"><p>© Brothers Bridge Group</p></div> | |
| </div> | |
| </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
| /*CSS reset*/ | |
| body{font-size: 16px; line-height: 1.6;} | |
| *{padding:0;margin: 0; box-sizing: border-box;} | |
| ul, ol{list-style: none;} | |
| a{color:black; text-decoration: none;} | |
| a:hover{color:#248dc1} | |
| p{color:#999;} | |
| p strong{color:#333;} | |
| h1,h2,h3,h4,h5,h6{font-weight: normal;} | |
| img{max-width: 100%;} | |
| .header{overflow: hidden;} | |
| .header{background: #333333;} | |
| .header a{color:white;} | |
| .header {height: 100px} | |
| .logo{float:left;} | |
| .logo{height:100px; margin: 0 0 0 0;} | |
| .nav{float: right;} | |
| .nav ul{overflow: hidden; text-transform: uppercase;} | |
| .nav ul li{float: left;} | |
| .nav ul li a{display: block; height: 100px; padding: 20px; line-height: 60px;} | |
| .nav ul li a.selected{border-bottom: 10px solid #248dc1; } | |
| .nav ul li a.locale{background: #248dc1;} | |
| .nav ul li a img{margin: 0px 0px 0px 100px; width: 15px; height: 15px;} | |
| .main{width: 1200px; margin: 0 auto;} | |
| .main{overflow: hidden;} | |
| .main{margin-top: 100px;} | |
| .main .content{width: 800px; float: left;} | |
| .main .content h1{margin: 36px 0; font-size: 32px; color:#248dc1; font-weight: normal; } | |
| .main .content p{margin: 24px 0;} | |
| .main .aside{width: 330px; float: right;} | |
| .main .aside .title{ color: #ccc; padding-bottom: 36px; border-bottom: 2px solid #ccc;text-transform: uppercase;} | |
| .main .aside ul li {border-bottom: 1px solid #ccc; padding: 36px 0px;} | |
| .main .aside li .banner{position: relative;} | |
| .main .aside li .banner h1{position: absolute; height: 185px; line-height: 185px; color:gray; top: 0; left: 0; width: 100%; text-align: center; text-shadow: 0 0 1px black;} | |
| .footer{background: #333333; height: 340px} | |
| .footer .social{width: 190px; float: left; padding: 20px 20px 25px 10px ; border-right: 1px solid #666666;} | |
| .footer .social .weixin{float: left; width: 160px; } | |
| .footer .social .twitter{float: left; width: 55px; padding: 40px 0 0 0;} | |
| .footer .social .facebook{float: right; width: 55px; padding: 40px 0 0 0px;} | |
| .footer .contact{float: left; margin-left: 15px;} | |
| .footer .links{float: right} | |
| .copyright{background: #222222; text-align: center;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment