Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a browser window example with CSS?
To create a browser window example with CSS, the code is as follows −
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.menuBar {
border: 3px solid #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.menuRow {
padding: 10px;
background: #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.browserField {
float: left;
}
.left {
width: 15%;
}
.right {
width: 10%;
}
.middle {
width: 75%;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuBarDots {
margin-top: 4px;
height: 12px;
width: 12px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
input[type=text] {
width: 100%;
border-radius: 3px;
border: none;
background-color: white;
margin-top: -8px;
height: 25px;
color: #666;
padding: 5px;
}
.menuDots {
width: 5px;
height: 5px;
background-color: #aaa;
margin: 3px 0;
display: block;
border-radius: 50%;
}
.content {
padding: 10px;
}
</style>
</head>
<body>
<div class="menuBar">
<div class="menuRow">
<div class="browserField left">
<span class="menuBarDots" style="background:#ED594A;"></span>
<span class="menuBarDots" style="background:#FDD800;"></span>
<span class="menuBarDots" style="background:#5AC05A;"></span>
</div>
<div class="browserField middle">
<input type="text" value="https://demo.com/">
</div>
<div class="browserField right">
<div style="float:right">
<span class="menuDots"></span>
<span class="menuDots"></span>
<span class="menuDots"></span>
</div>
</div>
</div>
<div class="content">
<h1>Sample Text</h1>
<h2>Welcome to our website</h2>
</div>
</div>
</body>
</html>Output
The above code will produce the following output −
Updated on: 08-May-2020
164 Views
Advertisements