How to Create Browsers Window using HTML and CSS?

In this article, we will understand how to create a simple browser window using HTML and CSS with the help of some examples. When a user requests a web page from a particular website, the web browser retrieves the necessary content from a web server and then displays the page on the user’s device.

What is a Browser window?

A web browser or a browser allows a user to view websites or applications on the internet. A browser window can be viewed in full screen or scaled-down and re-positioned on a device’s screen.

Following are the various examples of creating browser windows using HTML and CSS.

Example 1:

  <! DOCTYPE html>  <html>  <head>    <meta charset = “UTF-8”>    <meta name = “viewport” content = “width=device-width, initial-scale=1.0”>    <meta http-equiv = “X-UA-Compatible” content = “ie=edge”>    <title> Example of How to Create Browsers Window using HTML and CSS? </title>  <link rel = “stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>  </head>  <style>  <style>  * {  box-sizing: border-box;  }  .container {  border: 2px solid #bdc3c7;  border-top-left-radius: 6px;  border-top-right-radius: 6px;  }  .design {  padding: 10px;  background: #f1f1f1;  border-top-left-radius: 4px;  border-top-right-radius: 4px;  }  input[type=text] {  width: 100%;  border-radius: 3px;  border: none;  background-color: white;  margin-top: -8px;  height: 25px;  color: gray;  padding: 5px;  }  .jt {  float: left;  }  .middle {  width: 75%;  position: relative;  }  .left {  width: 15%;  }  .right {  width: 10%;  }  .middle i {  position: absolute;  left: 430px;  top: 2px;  color: gray;  }  .design:after {  content: ” “;  display: table;  clear: both;  }  .bar {  width: 15px;  height: 3px;  margin: 3px 0;  display: block;  background-color: #aaa;  }    @import url(“https://fonts.googleapis.com/css2?family=Heebo:wght@400;600&display=swap”);  body {    background-color: #473333;    -moz-background-color: #473333;    color: #fff;    padding: 52px;    font-size: 13px;    font-family: ‘Heebo’ !important;    margin-left: 80px;    line-height: 18.4px;  }  h1 {    font-weight: normal;    font-size: 40px;    font-weight: normal;    text-transform: uppercase;    text-align: center;   }  h2 {   text-align: center;   color: #46a294;   font-size: 28px;   width: 100%;   margin: 10px 10;   position: relative;   line-height: 58px;   font-weight: 400;   }  h2:before {   content: ” “;   position: absolute;   left: 50%;   bottom: 0;   width: 100px;   height: 2px;  font-weight: bold;   background-color: #2079df;   margin-left: -50px;   }   p {    text-align: justify;    hyphens: auto;  }  ttzz {    color: #ffa500;    font-size: 52px;    display: inline-block;    font-weight: 600;  }  p:first-of-type:first-letter {    font-size: 2.2rem;    font-weight: bold;    float: left;    display: inline-block;    padding-right: 0.15rem;    color: white;  }  p:first-of-type:first-line {    font-weight: bold;  }  </style>  <body>  <h1> Example </h1>  <h2> How to Create Browsers Window using HTML and CSS? </h2>  <div class = “container”>  <div class = “design”>  <div class = “jt left”>  <ttzz> <i class = “fa fa-google”  aria-hidden = “true”> oogle </i> </ttzz>  </div>  <div class = “jt middle”>                           <input type = “text? value = “https://tutoraspire.com/”>  <i class = “fa fa-search”  aria-hidden = “true”> </i>  </div>  <div class = “jt right”>  <div style = “float:right”>  <span class = “bar”> </span>  <span class = “bar”> </span>  <span class = “bar”> </span>  </div>  </div>  </div>  <div class = “body”>  <h3> <ttzz> J </ttzz> avatpoint </h3>  <p> A Computer Science Portal providing Online Training for Web Development Courses </p>  </div>  </div>  </body>  </html>  

Explanation:

In the above example, we have created a browser window using HTML and CSS.

Output:

Following is the output of this example.

Example 2:

  <! DOCTYPE html>  <html>  <head>    <meta charset = “UTF-8”>    <meta name = “viewport” content = “width=device-width, initial-scale=1.0”>    <meta http-equiv = “X-UA-Compatible” content = “ie=edge”>    <title> Example of How to Create Browsers Window using HTML and CSS? </title>  <link rel = “stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>  <style>  @import url(https://fonts.googleapis.com/css?family=Signika);  @import url(https://fonts.googleapis.com/css?family=Lobster);  body  {     background: #191919;  }  h1 {    font-weight: normal;    font-size: 40px;    font-weight: normal;    text-transform: uppercase;    text-align: center;   }  h2 {   text-align: center;   color: #46a294;   font-size: 28px;   width: 100%;   margin: 10px 10;   position: relative;   line-height: 58px;   font-weight: 400;   }  h2:before {   content: ” “;   position: absolute;   left: 50%;   bottom: 0;   width: 100px;   height: 2px;  font-weight: bold;   background-color: #2079df;   margin-left: -50px;   }  .browser  {     margin: 10px auto 60px auto;     width: 800px;     height: 400px;     background: white;     border: 6px solid #373C49;     border-radius: 6px;     box-shadow: 20px 20px #cc0044;  }  .nav  {     width: 100%;     height: 40px;     background: #373C49;     cursor: pointer;  }  .url  {     width: 540px;     margin-top: 2px;     margin-left: 40px;     padding: 6px;     background-color: #454B5B;     color: #9299a0;     border-style: solid;     border-width: 1px;     border-color: #373C49;  }  .url:hover, .url:focus { color: #C5D4D7; }  .lt  {     font-family: ‘Signika’;     font-size: 22px;     font-weight: bold;     color: #fff;     margin-left: 20px;  }  .gt  {     font-family: ‘Signika’;     font-size: 22px;     font-weight: bold;     color: #fff;     margin-left: 20px;  }  .others  {    font-family: ‘Signika’;    font-size: 16px;    color: #fff;    margin-left: 20px;  }  .page  {     width: 100%;     height: 300px;     background: #FFF;  }    .h1  {     text-align: center;     font-family: ‘Lobster’;     font-size: 32px;  }  .bloc  {     margin-top: -150px;     margin-left: 60px;     background-color: #0099e6;     width: 160px;     height: 160px;  }  .line-1  {     margin-left: 260px;     background: #b300b2;     width: 220px;     height: 20px;  }  h1 {      position: relative;      padding: 0;      margin: 0;      font-family: “Raleway”, sans-serif;      font-weight: 200;      font-size: 40px;      color: red;      -webkit-transition: all 0.4s ease 0s;      -o-transition: all 0.4s ease 0s;      transition: all 0.4s ease 0s;    }    .line-2  {     margin-top: 20px;     margin-left: 260px;     background: #00e68a;     width: 380px;     height: 10px;  }  .line-3  {     margin-top: 10px;     margin-left: 260px;     background: #00e68a;     width: 420px;     height: 10px;  }  .line-4  {     margin-top: 10px;     margin-left: 260px;     background: #00e68a;     width: 400px;     height: 10px;  }  .line-5  {     margin-top: 10px;     margin-left: 260px;     background: #00e68a;     width: 390px;     height: 10px;  }  .line-6  {     margin-top: 30px;     margin-left: 260px;     background: #ff4d4d;     width: 50px;     height: 10px;  }  img {    display: block;    width: 160px;  }  img::before  {    content: ‘ ‘;    width: 90%;    height: 90%;    background-color: #FFF;    z-index: 2;  }  .line-7  {     margin-top: -10px;     margin-left: 325px;     background: #ff7733;     width: 50px;     height: 10px;  }  .frame-bottom {    background: #853d2d;    font-size: 22px;    padding-top: 7px;    padding-left: 15px;    position: absolute;    bottom: 10;    left: 0;    color: #888888;    width: 98.5%;    height: 32px;    z-index: 100;  }  </style>  <body>  <h1> Example </h1>  <h2> How to Create Browsers Window using HTML and CSS? </h2>  <div class = “browser”>     <div class = “nav”>        <span class = “lt”> < </span>        <span class = “gt”> > </span>        <span class = “others”> <i class = “fa fa-refresh”> </i> </span>        <input type = “text” class = “url” placeholder = “https://tutoraspire.com/”/>        <span class = “others”> <i class = “fa fa-heart”> </i> </span>        <span class = “others”> <i class = “fa fa-cog”> </i> </span>     </div>     <div class = “page”>        <p class = “h1”> Welcome </p>        <div class = “line-1”> A Computer Science Portal </div>        <div class = “line-2”> providing Online Training </div>        <div class = “line-3”> for Web Development Courses </div>        <div class = “line-4”> </div>        <div class = “line-5”> </div>        <div class = “line-6”> </div>        <div class = “line-7”> </div>        <div class = “bloc”> <img src = “4.png”> </div>     </div>     <div class = “frame-bottom”>        tutoraspire      </div>  </div>  </body>  </html>  

Explanation:

In the above example, we have created a browser window using HTML and CSS.

Output:

Following is the output of this example.

Next Topic#

How to Create Browsers Window using HTML and CSS

How to Create Browsers Window using HTML and CSS?

What is a Browser window?

Example 1:

Example 2:

Install Git on Mac

HTML 5 accept attribute

You may also like