W3.CSS Website Code Examples by Jonathan https://padlet.com/jonathan_shore/71sne8eqav42 Made with an open mind en-us 2018-03-14 14:04:01 UTC 2026-03-07 02:55:51 UTC hello@padlet.com Example 1 - The Basics jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241887344 <!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>]]> 2018-03-14 14:09:39 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241887344 Example 2 - Containers jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241889331 <!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>]]> 2018-03-14 14:12:29 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241889331 Example 3 - Images jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241894308 <!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>]]> 2018-03-14 14:20:18 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241894308 Example 4 - Panels jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241917662 <!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>]]> 2018-03-14 14:53:49 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241917662 Example 5 - Card jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241919587 <!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>

]]> 2018-03-14 14:56:50 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241919587 Example 6 - Layout jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241921281 <!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>]]> 2018-03-14 14:59:36 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241921281 Example 7 - layouts Again jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241926270 <!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>

]]> 2018-03-14 15:06:53 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241926270 Example 8 - Horizontal Navigation jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241938669 <!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>

]]> 2018-03-14 15:25:43 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241938669 Example 9 - Veritcal Navigation jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241940169 <!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>

]]> 2018-03-14 15:28:16 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241940169 Example 10 - Sidebar jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/241942400 <!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>

]]> 2018-03-14 15:31:46 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/241942400 Example 11 - Rows and Columns jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/246908084 <!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>]]> 2018-03-28 14:09:03 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/246908084 Example 11 - jonathan_shore https://padlet.com/jonathan_shore/71sne8eqav42/wish/246908147 2018-03-28 14:09:10 UTC https://padlet.com/jonathan_shore/71sne8eqav42/wish/246908147