Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

HTMLresponsive

Responsive Web Design ensures web pages are visually appealing on all devices by utilizing CSS and HTML for content adaptation. The document includes examples of HTML code demonstrating responsive design with city information. It highlights the importance of resizing and rearranging content for optimal display across various screen sizes.

Uploaded by

vimal.foruppo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

HTMLresponsive

Responsive Web Design ensures web pages are visually appealing on all devices by utilizing CSS and HTML for content adaptation. The document includes examples of HTML code demonstrating responsive design with city information. It highlights the importance of resizing and rearranging content for optimal display across various screen sizes.

Uploaded by

vimal.foruppo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML Responsive Web Design

Responsive Web Design makes your web page look good on all devices (desktops,
tablets, and phones).

Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or
move the content to make it look good on any screen:

Example
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.</p>
</div>
<div class="city">
<h2>New York</h2>
<p>The City of New York is the most populous city in the United
States.</p>
<p>New York is an important center for international diplomacy and has
been described as the cultural and financial capital of the world.</p>
</div>

</body>
</html>
Another example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<body>
<div class="w3-container w3-orange">
<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div></div>
</body>
</html>

You might also like