CSS Browser

CSS Browser Mockup

HTML
<div class="browser dark">
	<div class="header bg-black">
	     <div class="circle circle-1"></div>
	     <div class="circle circle-2"></div>
	     <div class="circle circle-3"></div>
	     <p class="text-dark">https://www.google.com</p>
	</div>
	<div class="content bg-black-light"></div>
</div>

<div class="browser white">
	<div class="header bg-white">
	     <div class="circle circle-1"></div>
	     <div class="circle circle-2"></div>
	     <div class="circle circle-3"></div>
	     <p>https://www.google.com</p>
	</div>
	<div class="content bg-grey"> 
	    <form>
	        <input class="form-control" type="search" placeholder="Search">
	    </form>
	</div>
</div>
CSS
.bg-black{
     background: #000;
}

.bg-black-light{
     background: #353535;
}

.bg-grey{
     background: #eaeaea;
}

.bg-white{
     background: #FFF;
}

.browser{
     border-radius: 10px;
     background: #FFF;
     width: 550px;
     height: 350px;
     margin: 0 auto;
}

.browser.dark{
    position: absolute;
    top: 30%;
    left: 35%;
    transform: translate(-30%,-35%);
}

.browser.white{
    position: absolute;
    top: 60%;
    left: 55%;
    transform: translate(-60%,-55%);
}

.header{
    background: #FFF;
    height: 10%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px;
    box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
}

.header p{
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    padding-left: 10px;
    margin-bottom: 0px;
}

.circle{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0px 5px;
}

.circle-1{
    background: #fc605c;
}

.circle-2{
     background: #fdbc40;
}

.circle-3{
     background: #35c74a;
}

.content{
     height: 90%;
     display: flex;
     justify-content: center;
     align-items: center; 
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
}

.content .form-control{
     border-radius: 0;
     border: none;
     box-shadow:none;
     background: #d6d6d6;
     width: 350px;
}

DEMO

View Demo
756 Views
54980cookie-checkCSS Browser

Leave a Reply

Your email address will not be published. Required fields are marked *