<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1><span>TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</span> - Preview of mobile portrait/lanscape modes. Check <a href="http://harunpehlivantebimtebitagem.business.site">business.site</a> on your phone. </h1> <div class="frame"> <iframe frameborder="0" src="http://harunpehlivanprofile.bitballoon.com/" id="landscape"></iframe> <div class="btn"> </div> </div> <div class="frame"> <iframe frameborder="0" width="540" height="320" src="http://harunpehlivancreativeuserprofile.bitballoon.com/" id="portrait"></iframe> </div> </div>

body { color: white; font-family: sans-serif; font-weight: normal; font-size: 14px; text-align: center; padding: 0; margin: 0; background-image: url('http://static-cache.tr.uaprom.net/image/se/busines_head_42.jpg?r=143818'); background-size: cover; background-repeat: no-repeat; background-position: center center; } a { color: white; } .frame { display: inline-block; padding: 50px 20px; margin: 10px; border: 1px solid white; border-radius: 30px; background-color: rgba(0, 0, 0, 0.8); vertical-align: top; &:nth-child(1){ padding: 20px 50px; } } #landscape { width: 540px; height: 320px; background-size: cover; background: url(http://d2f0ora2gkri0g.cloudfront.net/bkpam2342416_argeprojeegitimesnasndahallerim-1.jpg); } #portrait { width: 320px; height: 540px; background-size: cover; background: url(http://d2f0ora2gkri0g.cloudfront.net/bkpam2342416_argeprojeegitimesnasndahallerim-1.jpg); } h1 { font-weight: 400; font-size: 24px; text-align: center; span { font-weight: bold; } }