<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/frytyler/pen/Krmvj?depth=everything&order=popularity&page=87&q=mobile&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">/* #3a99a7 #465f70 */
* {
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 16px;
height: 16px;
overflow: visible;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
background-clip: padding-box;
border: solid transparent;
min-height: 28px;
padding: 100px 0 0;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
::-webkit-scrollbar-track-piece {
background: #f5f5f5;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-corner {
background: transparent;
}
.browser, .browser * {
transition: width .3s ease;
}
html {
width: 100%;
height: 100%;
overflow: hidden;
padding-top: 20px;
background-color: #fd863f;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMTAwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhOTlhNyIvPjxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiMzYTk5YTciIHN0b3Atb3BhY2l0eT0iMC45OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ2NWY3MCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSIxMzAlIiByPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzgzYWE3Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzgzYWE3IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMTAlIiByPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDY1ZjcwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDY1ZjcwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -moz-radial-gradient(0% 100%, ellipse cover, #3a99a7 0%, rgba(58, 153, 167, 0.99) 1%, rgba(70, 95, 112, 0) 100%), -moz-radial-gradient(100% 130%, ellipse cover, #783aa7 0%, rgba(120, 58, 167, 0) 100%), -moz-radial-gradient(0% 10%, ellipse cover, #465f70 0%, rgba(70, 95, 112, 0) 100%);
background-image: -webkit-radial-gradient(0% 100%, ellipse cover, #3a99a7 0%, rgba(58, 153, 167, 0.99) 1%, rgba(70, 95, 112, 0) 100%), -webkit-radial-gradient(100% 130%, ellipse cover, #783aa7 0%, rgba(120, 58, 167, 0) 100%), -webkit-radial-gradient(0% 10%, ellipse cover, #465f70 0%, rgba(70, 95, 112, 0) 100%);
background-image: radial-gradient(ellipse cover at 0% 100%, #3a99a7 0%, rgba(58, 153, 167, 0.99) 1%, rgba(70, 95, 112, 0) 100%), radial-gradient(ellipse cover at 100% 130%, #783aa7 0%, rgba(120, 58, 167, 0) 100%), radial-gradient(ellipse cover at 0% 10%, #465f70 0%, rgba(70, 95, 112, 0) 100%);
}
body {
position: relative;
}
.devices {
margin: 0 auto 20px;
width: 600px;
text-align: center;
}
.devices a {
margin: 0 20px;
}
.devices .mobile {
width: 40px;
height: 60px;
border: 2px solid #f5f5f5;
border-top-width: 5px;
border-bottom-width: 8px;
background: #b0b0b0;
display: inline-block;
border-radius: 3px;
position: relative;
}
.devices .mobile:hover {
background: #8f8f8f;
}
.devices .mobile:before {
content: '';
display: block;
background: #888;
width: 17px;
height: 1px;
border-radius: 2px;
position: absolute;
top: -3px;
left: 50%;
margin-left: -8px;
}
.devices .mobile:after {
content: '';
display: block;
background: #888;
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -1px;
}
.devices .tablet {
width: 100px;
height: 133px;
border: 2px solid #f5f5f5;
border-top-width: 5px;
border-bottom-width: 8px;
background: #b0b0b0;
display: inline-block;
border-radius: 3px;
position: relative;
}
.devices .tablet:hover {
background: #8f8f8f;
}
.devices .tablet:before {
content: '';
display: block;
background: #888;
width: 1px;
height: 1px;
border-radius: 2px;
position: absolute;
top: -3px;
left: 50%;
}
.devices .tablet:after {
content: '';
display: block;
background: #888;
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -1px;
}
.devices .laptop {
width: 237px;
height: 150px;
border: 8px solid #f5f5f5;
background: #b0b0b0;
display: inline-block;
border-radius: 3px 3px 0 0;
position: relative;
}
.devices .laptop:hover {
background: #8f8f8f;
}
.devices .laptop:after {
content: " ";
background: #e8e8e8;
display: block;
width: 120%;
position: absolute;
bottom: -10px;
margin-left: -10%;
height: 10px;
border-radius: 0 0 5px 5px;
}
.browser {
position: relative;
margin: 20px auto;
width: 320px;
min-height: 640px;
background: #f5f5f5;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.browser.mobile {
width: 335px;
}
.browser.mobile .btn {
width: 20%;
}
.browser.mobile input[type="url"] {
width: 78%;
}
.browser.tablet {
width: 790px;
}
.browser.tablet .btn {
width: 14%;
}
.browser.tablet input[type="url"] {
width: 85%;
}
.browser.laptop {
width: 90%;
}
.browser.laptop .btn {
width: 9%;
}
.browser.laptop input[type="url"] {
width: 90%;
}
.browser .searchbar {
border-radius: 5px 5px 0 0;
background: #dddddd;
height: 33px;
width: 100%;
padding: 5px;
position: relative;
}
.browser .searchbar .btn {
position: absolute;
top: 6px;
right: 5px;
border: none;
display: block;
text-align: center;
background: #3a99a7;
color: #fff;
text-decoration: none;
font-size: 11px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
padding: 3px 8px;
border-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
transition: background-color .3s ease;
}
.browser .searchbar .btn:hover {
background: #368f9c;
}
.browser .searchbar input[type="url"] {
height: 20px;
padding: 5px;
border-radius: 3px;
border: none;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
outline: none;
font-size: 9px;
color: #aaa;
}
iframe {
width: 99.9%;
height: 607px;
}
</style></head><body>
<div class="devices">
<a href="#" class="mobile"></a>
<a href="#" class="tablet"></a>
<a href="#" class="laptop"></a>
</div>
<div class="browser mobile">
<div class="searchbar">
<form>
<input type="url" class="url" value="http://" />
<button class="btn">Browse</button>
</form>
</div>
<div class="iframe"></div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var url = $('.url'),
btn = $('.btn'),
device = $('.devices a');
btn.on('click',function(e){
e.preventDefault();
$('.iframe').html($('<iframe />').attr({"src":url.val()}));
});
device.on('click',function(e){
e.preventDefault();
var type = $(this).attr('class');
console.log(type);
$('.browser').attr('class','browser '+type);
});
//# sourceURL=pen.js
</script>
</body></html>
