Scribd
Upload
4 views4 pages

DOCTYPE HTML

The document is an HTML mockup of a browser window designed using HTML and CSS. It features a header with buttons for closing, minimizing, and maximizing, as well as an address bar displaying a URL. The main content area includes a welcome message and a brief description of the mockup.

Uploaded by

inishadurai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views4 pages

DOCTYPE HTML

The document is an HTML mockup of a browser window designed using HTML and CSS. It features a header with buttons for closing, minimizing, and maximizing, as well as an address bar displaying a URL. The main content area includes a welcome message and a brief description of the mockup.

Uploaded by

inishadurai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Browser Window Mockup</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

.browser-window {

width: 80%;

max-width: 1000px;

background-color: #fff;

border: 1px solid #ccc;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

.browser-header {

display: flex;

align-items: center;

padding: 8px;
background-color: #e0e0e0;

border-bottom: 1px solid #ccc;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

.browser-header .buttons {

display: flex;

gap: 8px;

margin-right: 16px;

.browser-header .buttons .button {

width: 12px;

height: 12px;

border-radius: 50%;

.button.close {

background-color: #ff5f56;

.button.minimize {

background-color: #ffbd2e;

.button.maximize {

background-color: #27c93f;

.address-bar {

flex-grow: 1;

padding: 4px 8px;


background-color: #fff;

border: 1px solid #ccc;

border-radius: 4px;

font-size: 14px;

color: #333;

.browser-content {

padding: 16px;

</style>

</head>

<body>

<div class="browser-window">

<div class="browser-header">

<div class="buttons">

<div class="button close"></div>

<div class="button minimize"></div>

<div class="button maximize"></div>

</div>

<input type="text" class="address-bar" value="https://www.example.com" readonly>

</div>

<div class="browser-content">

<h1>Welcome to Example.com</h1>

<p>This is a mockup of a browser window created using HTML and CSS.</p>

</div>

</div>

</body>
</html>

You might also like