/* Browser mockup code * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f * Live example: https://updown.io */ .browser-mockup { border-top: 2em solid rgba(230, 230, 230, 0.7); box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28); position: relative; border-radius: 3px 3px 0 0; } .browser-mockup:before { display: block; position: absolute; content: ''; top: -1.25em; left: 1em; width: 0.5em; height: 0.5em; border-radius: 50%; background-color: #f44; box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; } .browser-mockup.with-tab:after { display: block; position: absolute; content: ''; top: -2em; left: 5.5em; width: 20%; height: 0; border-bottom: 2em solid white; border-left: 0.8em solid transparent; border-right: 0.8em solid transparent; } .browser-mockup.with-url:after { display: block; position: absolute; content: ''; top: -1.6em; left: 5.5em; width: ~"calc(100% - 6em)"; height: 1.2em; border-radius: 2px; background-color: white; } .browser-mockup > * { display: block; }