Responsive CSS Web Browser

index.html

<h2>Iframe Web Browser</h2>
<div class="browser-window-osx">
  <div class="header">
    <div class="menu">
      <span class="close"></span>
      <span class="minimize"></span>
      <span class="maximize"></span>
    </div>
    <div class="search">
      <p><span>https://</span>tristanwhite.info</p>
    </div>
  </div>
  <div class="window">
    <iframe src="https://tristanwhite.info"></iframe>
  </div>
</div>

responsive-css-web-browser.markdown

Responsive CSS Web Browser

A Pen by Tristan White on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.scss

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  h2 {
    text-align: center;
    margin: 50px 0 0 0;
    color: #555;
  }
}


/* OSX Safari Browser */
.browser-window-osx {
  box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.11);
  border: 1px solid rgb(195, 195, 195);
  width: 90%;
  margin: 10px auto;
  padding: 0;
  border-radius: 5px;
  position: relative;
  .header {
    background: #e8e8e8;
    height: 45px;
    border-radius: 5px 5px 0 0;
    padding: 10px 10px 0 10px;
    .menu {
      width: 70px; 
      display: inline-block;
      height: 25px;
      @media (max-width: 750px) {
        display: none;
      }
      span {
        margin: 6px 4px;
        padding: 0;
        height: 12px;
        width: 12px;
        display: block;
        float: left;
        border-radius: 50%;
        &.close {
          background: #df7065;
        }
        &.minimize {
          background: #e6bb46;
        }
        &.maximize {
          background: #5bcc8b;
        }
      }
    }
    .search {
      background: white;
      width: 50%;
      display: inline-block;
      height: 25px;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      @media (max-width: 750px) {
        width: 100%;
      }
      p {
        color: #555555;
        font-size: 12px;
        margin: 6px 10px;
        letter-spacing: 0.6px;
        position: absolute;
        span {
          color: #7ED321;
        }
      }
    }
  }
  .window {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: scale(1);
    border-radius: 0 0 5px 5px;
    iframe {
      width: 100%;
      height: 75vh;
      border: 0;
      margin: 0 0 -4px 0;
    }
  }   
}