# data[].attributes.body
<!DOCTYPE html>

<html>
<title>W3.CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

<div class="w3-green w3-cell-row">
<div class="w3-container w3-blue w3-cell" > 1 </div>
<div class="w3-container w3-red w3-cell"> 2 </div>
</div>

<div class="w3-green w3-cell-row">

<div class="w3-cell">
<div class="w3-red"> 3 </div>
<div class="w3-red"> 4 </div>
</div>

<div class="w3-cell-row">
<div class="w3-purple w3-cell"> 5 </div>
<div class="w3-purple w3-cell"> 6 </div>
</div>

</body>

</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<!-- Sidebar -->
<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%">
<h3 class="w3-bar-item">Menu</h3>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<!-- Page Content -->
<div style="margin-left:25%">

<div class="w3-container w3-teal">
<h1>My Page</h1>
</div>

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
<h2>Sidebar Navigation Example</h2>
<p>The sidebar with is set with "style="width:25%".</p>
<p>The left margin of the page content is set to the same value.</p>
</div>

</div>

</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
<h2>Navigation Bars</h2>
<p>The <strong>w3-bar</strong> class is a container for displaying HTML elements horizontally.</p>
<p>The <strong>w3-bar-item</strong> class defines the container elements.</p>
<p>It it a perfect tool for creating navigation bars:</p>
</div>

<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
<h2>Navigation Bars</h2>
<p>The <strong>w3-bar</strong> class is a container for displaying HTML elements horizontally.</p>
<p>The <strong>w3-bar-item</strong> class defines the container elements.</p>
<p>It it a perfect tool for creating navigation bars:</p>
</div>

<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>

</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
<h2>Card Example</h2>

<div class="w3-card-4 w3-dark-grey" style="width:50%">

<div class="w3-container w3-center">
<h3>Friend Request</h3>
<img src="img_avatar3.png" alt="Avatar" style="width:80%">
<h5>John Doe</h5>

<div class="w3-section">
<button class="w3-button w3-green">Accept</button>
<button class="w3-button w3-red">Decline</button>
</div>
</div>

</div>
</div>

</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-red">
<h1>Header</h1>
</div>

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>

<div class="w3-container w3-red">
<h5>Footer</h5>
</div>

</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
<h2>Displaying Panels</h2>
<p>Panels are the same as containers except for an added top and bottom margin.</p>

<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
<div class="w3-panel w3-green">
<p>I am a panel.</p>
</div>

<div class="w3-container w3-red">
<p>I am a container.</p>
</div>
<div class="w3-container w3-green">
<p>I am a container.</p>
</div>
</div>

</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div>
<h2>Without a Container</h2>
<p>The w3-container class is one of the most important of the w3.CSS classes. It provides correct margins, padding, alignments, and more to common HTML elements.</p>
</div>

<div class="w3-container w3-blue">
<h2>With a Container - Blue</h2>
<p>The w3-container class is one of the most important of the w3.CSS classes. It provides correct margins, padding, alignments, and more to common HTML elements.</p>
</div>

<div class="w3-container w3-red">
<h2>With a Container - Blue</h2>
<p>The w3-container class is one of the most important of the w3.CSS classes. It provides correct margins, padding, alignments, and more to common HTML elements.</p>
</div>

</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
</body>
</html>

# data[].attributes.body
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>

<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>

</body>
</html>