How TO – Browser Window CSS – New Code 2020

Learn how to create a browser window example with CSS.

body { font-family: Arial; } * { box-sizing: border-box; } .dot { height: 12px; width: 12px; background-color: #bbb; border-radius: 50%; display: inline-block; } .container { border: 3px solid #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } .top { padding: 10px; background: #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } .content { padding: 10px; }
body { font-family: Arial } * { box-sizing: border-box; } /* The browser window */ .container { border: 3px solid #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } /* Container for columns and the top “toolbar” */ .row { padding: 10px; background: #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } /* Create three unequal columns that floats next to each other */ .column { float: left; } .left { width: 15%; } .right { width: 10%; } .middle { width: 75%; } /* Clear floats after the columns */ .row:after { content: “”; display: table; clear: both; } /* Three dots */ .dot { margin-top: 4px; height: 12px; width: 12px; background-color: #bbb; border-radius: 50%; display: inline-block; } /* Style the input field */ input[type=text] { width: 100%; border-radius: 3px; border: none; background-color: white; margin-top: -8px; height: 25px; color: #666; padding: 5px; } /* Three bars (hamburger menu) */ .bar { width: 17px; height: 3px; background-color: #aaa; margin: 3px 0; display: block; } /* Page content */ .content { padding: 10px; }