W3Schools Tryit Editor

<!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/5/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-amber.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

</div>
</div>

<div class="w3-container w3-padding-32 w3-theme-d1">
  <h1>Places to Visit</h1>
</div>

<div class="w3-third w3-section">
<div class="w3-card-4">
<img src="img_5terre.jpg" style="width:100%">
<div class="w3-container w3-white">
<h4>Cinque Terre</h4>
<p>The Cinque Terre (five lands) is a portion of the Italian Riviera. The coastline with five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore
is a UNESCO World Heritage Site.</p>
</div>
</div>
</div>

<div class="w3-third w3-section">
<div class="w3-card-4">
<img src="img_monterosso.jpg" style="width:100%">
<div class="w3-container w3-white">
<h4>Monterosso</h4>
<p>Monterosso al Mare is located at the center of a small natural gulf, protected by a small artificial reef,
in the Riviera of La Spezia. It is the northernmost village of the Cinque Terre.</p>
</div>
</div>
</div>

<div class="w3-third w3-section">
<div class="w3-card-4">
<img src="img_vernazza.jpg" style="width:100%">
<div class="w3-container w3-white">
<h4>Vernazza</h4>
<p>Vernazza is another of the five towns in the region. Vernazza is the fourth town heading north. It has no car traffic, and is one of the truest
"fishing villages" on the Italian Riviera.
</div>
</div>
<br><br><br>
</div>
</div>
<div class="w3-container w3-theme-d4">
<p class="w3-large">Europe Italy</p>
</div>

</body>
</html>

​x
 
<!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/5/w3.css"><link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-amber.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><body>​<div class="w3-row w3-padding w3-theme-d2 w3-xlarge">  <div class="w3-quarter">    <div class="w3-bar">      <a href="#" class="w3-bar-item w3-button"><i class="fa fa-bars"></i></a>    </div>  </div>​  <div class="w3-half">    <input type="text" class="w3-amber w3-border-0 w3-padding" style="width:100%">  </div>​  <div class="w3-quarter">    <div class="w3-bar w3-xlarge">      <a href="#" class="w3-bar-item w3-button w3-left"><i class="fa fa-search"></i></a>      <a href="#" class="w3-bar-item w3-button w3-right"><img class="w3-hide-small w3-circle" src="img_avtar.jpg" style="height:40px;"></a>    </div>​  </div></div>