A Pen by Paul Serraino.

customizable-css-brower.markdown

customizable css brower

Easily show case your work, just add a background-image to .content and change the url.

A Pen by Paul Serraino on CodePen.

License.

index.html

<!-- licence MIT -->
<div class="container">
		<div class="browser">
			<div class="top">
				<ul class="nav-list">
					<li class="ctrl-icon"></li>
					<li class="ctrl-icon"></li>
					<li class="ctrl-icon"></li>
				</ul>
				<span class="search-bar" contenteditable>brand.com</span>
			</div>
			<div class="content">
			</div>
		</div>	
	</div>

style.css

/* licence MIT */
body {
		padding: 25px;
		font-family: 'futura', Helvetica, Arial;
	}
	.container {
		max-width: 760px;
		margin: 0 auto;
	}
	.browser {
		width: 700px;
		height: 400px;
		border-radius: 5px;
		box-shadow: 0px 0px 35px 0px #333;
	}

	.top {
		background-color: whitesmoke;
		border-radius: 5px;
		height: 35px;
	}

	.nav-list { 
		float: left;
		margin: 6px;
		padding: 0; 
	}

	.nav-list li{
		display: inline-block;
	}

	.search-bar {
		float: left;
		width: 560px;
		height: 22px;
		border: 1px solid #eee;
		background-color: #FFF;
		display: block;
		border-radius: 5px;
		margin: 6px 7px 0px 0px;
	}

	.ctrl-icon {
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.content {
		background-image: url('your-brand-image.png');
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width: 100%;
		height: 363px;
	}

	.ctrl-icon:nth-child(1) { background-color: crimson; }
	.ctrl-icon:nth-child(2) { background-color: orange; }
	.ctrl-icon:nth-child(3) { background-color: lightgreen; }