Last active
August 19, 2023 13:51
-
-
Save jadaradix/74c6b8a323f8a908c9b9 to your computer and use it in GitHub Desktop.
Safari-esque HTML/CSS Browser frame for embedding an <iframe>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Web Browser</title> | |
| <style> | |
| body { | |
| margin: 24px; | |
| } | |
| .browser { | |
| font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif; | |
| font-size: 14px; | |
| border-radius: 4px; | |
| border: 1px solid #C3C1C3; | |
| box-shadow: 0px 8px 32px #666666; | |
| width: 1224px; | |
| height: 768px; | |
| } | |
| .browser .chrome-top, .browser .chrome { | |
| background-color: #D4D2D4; | |
| } | |
| .browser .chrome-top { | |
| height: 28px; | |
| } | |
| .browser .chrome { | |
| height: 40px; | |
| box-sizing: border-box; | |
| padding-top: 6px; | |
| border-bottom: 1px solid #C3C1C3; | |
| } | |
| .browser .chrome input { | |
| display: block; | |
| width: 60%; | |
| height: 28px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| line-height: 24px; | |
| padding-left: 4px; | |
| padding-right: 4px; | |
| border: 1px solid #C3C1C3; | |
| border-radius: 4px; | |
| color: #404040; | |
| font: inherit; | |
| text-align: center; | |
| } | |
| .browser .chrome-top .buttons { | |
| float: left; | |
| width: 60px; | |
| height: 28px; | |
| margin-left: 4px; | |
| } | |
| .browser .chrome-top .buttons .button { | |
| display: block; | |
| float: left; | |
| width: 12px; | |
| height: 12px; | |
| margin: 7px 3px 7px 3px; | |
| border: 1px solid black; | |
| border-radius: 50%; | |
| } | |
| .browser .chrome-top .buttons .button.close { | |
| background-color: #FC615D; | |
| border-color: #DE4643; | |
| } | |
| .browser .chrome-top .buttons .button.minimise { | |
| background-color: #FDBE41; | |
| border-color: #DD9E33; | |
| } | |
| .browser .chrome-top .buttons .button.maximise { | |
| background-color: #34C84A; | |
| border-color: #26A934; | |
| } | |
| .browser .chrome-top .title { | |
| float: left; | |
| width: 1154px; /* 1224 - 60 - 8 (margin) - 2 (?) */ | |
| height: 28px; | |
| line-height: 28px; | |
| margin-left: 6px; | |
| color: #404040; | |
| text-align: center; | |
| } | |
| .browser .main { | |
| clear: both; | |
| height: 700px; /* 540 - 28 - 40*/ | |
| } | |
| .browser .main > * { | |
| border-bottom-left-radius: 4px; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .browser .main .content { | |
| padding: 8px; | |
| } | |
| .browser .main iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="browser"> | |
| <div class="chrome-top"> | |
| <div class="buttons"> | |
| <span class="button close"></span> | |
| <span class="button minimise"></span> | |
| <span class="button maximise"></span> | |
| </div> | |
| <div class="title">Breaking News, U.S., World, Weather, Entertainment & Video News - CNN.com</div> | |
| </div> | |
| <div class="chrome"> | |
| <input type="text" value="http://edition.cnn.com/"> | |
| </div> | |
| <div class="main"> | |
| <iframe src="http://edition.cnn.com/"></iframe> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment