Scribd
Upload
92 views

Saudi Aramco: Company General Use

The document is a HTML page that demonstrates responsive web design using the W3.CSS framework. It contains three sections that each describe a major city (London, Paris, and Tokyo) and includes their name, country, population details. When the page is resized, the layout adapts accordingly.

Uploaded by

mimrantaj
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
92 views

Saudi Aramco: Company General Use

The document is a HTML page that demonstrates responsive web design using the W3.CSS framework. It contains three sections that each describe a major city (London, Paris, and Tokyo) and includes their name, country, population details. When the page is resized, the layout adapts accordingly.

Uploaded by

mimrantaj
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/ 17

<!

DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<body>

<div class="w3-container w3-green">


<h1>W3Schools 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 city of England.</p>
<p>It is the most populous city in the United Kingdom,

Saudi Aramco: Company General Use


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>

Saudi Aramco: Company General Use


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;

Saudi Aramco: Company General Use


padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;

Saudi Aramco: Company General Use


font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {

Saudi Aramco: Company General Use


/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">

<div class="col-3 col-m-3 menu">


<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>

Saudi Aramco: Company General Use


</ul>
</div>

<div class="col-6 col-m-9">


<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can
be divided in two parts, the old town and the modern city.</p>
</div>

<div class="col-3 col-m-12">


<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the
resizing.</p>
</div>

</body>
</html>

Saudi Aramco: Company General Use


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;

Saudi Aramco: Company General Use


padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">

<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>

Saudi Aramco: Company General Use


<li>The Food</li>
</ul>
</div>

<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can
be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the
resizing.</p>
</div>

</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}

Saudi Aramco: Company General Use


.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>

<h2>Simple Pagination</h2>

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">&raquo;</a>
</div>

</body>
</html>

Saudi Aramco: Company General Use


<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}


</style>
</head>
<body>

Saudi Aramco: Company General Use


<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">&raquo;</a>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;

Saudi Aramco: Company General Use


}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
border-radius: 5px;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>

Saudi Aramco: Company General Use


<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">&raquo;</a>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;

Saudi Aramco: Company General Use


border: 1px solid #ddd;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}


</style>
</head>
<body>

<h2>Pagination with Borders</h2>

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">&raquo;</a>
</div>

</body>
</html>

Saudi Aramco: Company General Use


Saudi Aramco: Company General Use

You might also like