browser-window-with-css

Designing a portfolio of website designs for customers can show prospective clients the quality of your work. However, creating image after image in various device templates can be a nightmare. Simplify the process by using CSS to create browser window containers.

Tutorial

For detailed instructions, view Solodev's How to Make a Browser Window with CSS article.

Demo

Try out a working example on JSFiddle.

HTML

The portfolio contains the following basic HTML markup.

<div class="container browser-container">
  <h2>Browser Window</h2>
  <div class="browser-window">
    <img src="https://raw.githubusercontent.com/solodev/browser-window-with-css/master/images/LunarCorp.jpg" alt="Browser Window">
  </div>
</div>
<div class="container tablet-container">
  <h2>Tablet Window</h2>
  <div class="tablet-window">
    <img src="https://raw.githubusercontent.com/solodev/browser-window-with-css/master/images/LunarCorp2.jpg" alt="Tablet Window">
  </div>
</div>
<div class="container phone-container">
  <h2>Phone Window</h2>
  <div class="phone-window">
    <img src="https://raw.githubusercontent.com/solodev/browser-window-with-css/master/images/LunarCorp3.jpg" alt="Phone Window">
  </div>
</div>

CSS

All required CSS can be found in portfolio.scss

JavaScript

This tutorial contains no need javascript.

External Includes

This tutorial contains no third party resources.