Open In App

How to Create Browsers Window using HTML and CSS ?

Last Updated : 12 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The browser window is a tool to view the pages from the internet. It is used to search the content on the internet and get relevant information from the internet.

Creating Structure: In this section, we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons which will be used as a menu icon.

CDN links for the Icons from the Font Awesome:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

HTML code:  

html




<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href=
</head>
 
<body>
 
    <div class="container">
        <div class="geeks">
            <div class="gfg left">
                <i class="fa fa-google"
                   aria-hidden="true">
                      oogle
                  </i>
 
            </div>
 
            <!-- Google icon from font awesome-->
            <div class="gfg middle">
                <input type="text"
                       value=
                <i class="fa fa-search"
                   aria-hidden="true">
                  </i>
            </div>
            <div class="gfg right">
                <div style="float:right">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </div>
 
        <div class="body">
            <h3>GeeksforGeeks</h3>
            <p>A Computer Science Portal for Geeks</p>
        </div>
    </div>
 
</body>
 
</html>


Designing Structure: In the previous section, we created the structure of the basic website that we are going to use as browser window. In this section, we will design the structure for the browser window. 

CSS Code: 

CSS




<style>
    * {
    box-sizing: border-box;
    }
     
    /* Container Design */
    .container {
    border: 2px solid #bdc3c7;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }
     
    .geeks {
    padding: 10px;
    background: #f1f1f1;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    }
     
    /* Input field design */
    input[type=text] {
    width: 100%;
    border-radius: 3px;
    border: none;
    background-color: white;
    margin-top: -8px;
    height: 25px;
    color: gray;
    padding: 5px;
    }
     
    .gfg {
    float: left;
    }
     
    .middle {
    width: 75%;
    position: relative;
    }
     
    .left {
    width: 15%;
    }
     
    .right {
    width: 10%;
    }
     
    .middle i {
    position: absolute;
    left: 430px;
    top: 2px;
    color: gray;
    }
     
    .geeks:after {
    content: "";
    display: table;
    clear: both;
    }
     
    /* Address bar design */
    .bar {
    width: 15px;
    height: 3px;
    margin: 3px 0;
    display: block;
    background-color: #aaa;
    }
     
    .body {
    padding: 15px;
    }
</style>


Final Solution: This is the final code after combining the above sections. It will the browsers window. 

html




<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href=
    <style>
        * {
            box-sizing: border-box;
        }
 
        /* Container Design */
        .container {
            border: 2px solid #bdc3c7;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }
 
        .geeks {
            padding: 10px;
            background: #f1f1f1;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
 
        /* Input field design */
        input[type=text] {
            width: 100%;
            border-radius: 3px;
            border: none;
            background-color: white;
            margin-top: -8px;
            height: 25px;
            color: gray;
            padding: 5px;
        }
 
        .gfg {
            float: left;
        }
 
        .middle {
            width: 75%;
            position: relative;
        }
 
        .left {
            width: 15%;
        }
 
        .right {
            width: 10%;
        }
 
        .middle i {
            position: absolute;
            left: 430px;
            top: 2px;
            color: gray;
        }
 
        .geeks:after {
            content: "";
            display: table;
            clear: both;
        }
 
        /* Address bar design */
        .bar {
            width: 15px;
            height: 3px;
            margin: 3px 0;
            display: block;
            background-color: #aaa;
        }
 
        .body {
            padding: 15px;
        }
    </style>
</head>
 
<body>
 
    <div class="container">
        <div class="geeks">
            <div class="gfg left">
                <i class="fa fa-google"
                   aria-hidden="true">
                  oogle
                  </i>
 
            </div>
 
            <!-- Google icon from font awesome-->
            <div class="gfg middle">
                <input type="text"
                       value="https://www.geeksforgeeks.org/">
                <i class="fa fa-search"
                   aria-hidden="true">
                  </i>
            </div>
            <div class="gfg right">
                <div style="float:right">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </div>
 
        <div class="body">
            <h3>GeeksforGeeks</h3>
            <p>A Computer Science Portal for Geeks</p>
        </div>
    </div>
 
</body>
 
</html>


Output: 

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari


Previous Article
Next Article

Similar Reads

Difference between window.location.href, window.location.replace and window.location.assign in JavaScript
Window.location is a property that returns a Location object with information about the document's current location. This Location object represents the location (URL) of the object it is linked to i.e. holds all the information about the current document location (host, href, port, protocol, etc.) All three commands are used to redirect the page t
4 min read
How to align checkboxes and their labels on cross-browsers using CSS ?
For aligning the checkboxes or radio buttons with their labels can be achieved in many ways. Some of the simplest methods to achieve this are described below with proper code and output in different browsers. Now styling can be done in various ways to align the checkboxes and their labels. For this article, we are using internal stylesheet which is
2 min read
How to change text selection color in the browsers using CSS ?
Most of the browsers by default highlight the selected text in a blue background. This can be changed by using the ::selection pseudo selector in CSS. The ::selectionselector is used for setting the CSS property to the part of the document that is selected by the user (such as clicking and dragging the mouse across text). Only some CSS properties a
1 min read
Why do browsers match CSS selectors from right to left ?
Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independently of the HTML that makes up each web page. It describes how a webpage should look: it prescribes color
3 min read
What are different video formats supported by browsers in HTML ?
In this article, we will see what are the different video formats that are supported by the browser, along with understanding their implementation. Browsers support text in different colors with different fonts and along with supporting various media which includes images, music, videos, animations, etc. A video exists in different formats such as
3 min read
Javascript Window Blur() and Window Focus() Method
Javascript Window Blur() method is used to remove focus from the current window. i.e, It sends the new open Window to the background. Syntax: Window.blur() Parameter: It does not require any parameters. Return Value: It does not return any value. Below examples illustrate the window.blur() method of JavaScript: Example: The below example illustrate
2 min read
Difference between window.onkeypress and window.document.body.onkeypress
The onkeypress event can be triggered in JavaScript using both: window.onkeypresswindow.document.body.onkeypress To understand the difference between the two we need to have a look at the HTML DOM (Document Object Model): DOM is a model that represents the HTML document as a tree structure.The tree structure has the root node as a Document object.O
2 min read
How to Configure Mouse Wheel Speed Across Browsers using JavaScript ?
The mouse wheel's scrolling speed varies with the choice of the web browser, even the DOM events and methods to change the scrolling speed are not the same. To provide zoom and animation on a web page, it is generally required to configure mouse speed. The speed of the wheel can be controlled by normalizing the distance the wheel has traveled. Ther
3 min read
How to detect page zoom level in all modern browsers using JavaScript ?
In this article, we will discuss how the current amount of Zoom can be found on a webpage. These are the following methods: Table of Content Using outerWidth and innerWidth PropertiesUsing clientWidth and clientHeight PropertiesMethod 1: Using outerWidth and innerWidth PropertiesIt is easier to detect the zoom level in Webkit browsers like Chrome a
3 min read
Web Window API | Window locationbar property
In Web API Window.locationbar property returns the object of locationbar, for which we can check the visibility. Syntax: objectReference = window.locationbar Example: Check the visibility. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; Window locationbar property &lt;/title&gt; &lt;style&gt; a:focus { background-color: magenta; }
1 min read