Skip to content

Instantly share code, notes, and snippets.

@ovidiaconescu
Last active December 3, 2021 14:23
Show Gist options
  • Save ovidiaconescu/e335cdcbfb4cece423cd40353b051191 to your computer and use it in GitHub Desktop.
Save ovidiaconescu/e335cdcbfb4cece423cd40353b051191 to your computer and use it in GitHub Desktop.
Create a browser window out of html and css
.fake-browser {
color: black;
}
.fake-browser-bar {
padding: 10px 8px 6px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom: 2px solid #ccc;
background: #ddd;
overflow:hidden;
}
.fake-browser-bar div {
height: 22px;
}
.fake-browser-bar .buttons {
float: left;
padding-top: 6px;
margin-right: 15px;
}
.fake-browser-bar .buttons span {
height: 10px;
width: 10px;
background-color: #ccc;
border-radius: 10px;
border: 1px solid #dadada;
float: left;
margin: 0 0 0 4px;
}
.fake-browser-bar .buttons .bt-1 {
background-color: #FF7F71;
}
.fake-browser-bar .buttons .bt-2 {
background-color: #FFE238;
}
.fake-browser-bar .buttons .bt-3 {
background-color: #5AC05A;
}
.fake-browser-bar .address-bar {
background-color: white;
color: #bbb;
border-radius: 3px;
border-width: 1px;
border-style: solid;
border-color: #d7d3d3;
padding: 3px 7px 4px;
font-size: 10px;
overflow: hidden;
}
.fake-browser-bar .address-bar:hover {
cursor: default;
}
.fake-browser-bar .address-bar .repeat {
display: inline-block;
margin-right: 5px;
font-size: 9px;
}
.fake-browser-bar .address-bar .address-bar-text {
display: inline-block;
}
.fake-browser-bar .hamburger-menu {
float: right;
width: 38px;
padding: 3px 5px 0px 14px;
}
.fake-browser-bar .hamburger-menu span {
display: block;
height: 3px;
width: 100%;
background: #b6b5b5;
border-radius: 3px;
opacity: 1;
left: 0;
margin-bottom: 3px;
}
.fake-browser-container {
background-color: #fff;
width: 100%;
height: 350px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
<div class="fake-browser">
<div class="fake-browser-bar">
<div class="buttons">
<span class="bt-1"></span>
<span class="bt-2"></span>
<span class="bt-3"></span>
</div>
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
<div class="address-bar">
<div class="repeat">
<span class="glyphicon glyphicon-repeat"></span>
</div>
<div class="address-bar-text">
https://somesite
</div>
</div>
</div>
<div class="fake-browser-container">
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment