W3Schools Tryit Editor

<!DOCTYPE html>

<html>
<title>W3.CSS Food Blog Template</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://fonts.googleapis.com/css?family=Karma">

.w3-bar-block .w3-bar-item {
  padding:20px
}
</style>

<body>

<a href="javascript:void(0)"
onclick="w3_close()"
class="w3-bar-item w3-button">
Close Menu </a>

<a href="#about"
onclick="w3_close()"
class="w3-bar-item w3-button">
About </a>

</nav>

```
<button class="w3-button w3-padding-16"
onclick="w3_open()">
☰
</button>

<div class="w3-padding-16">
Mail
</div>
```

</div>

```
<h3>The Perfect Sandwich, A Real NYC Classic</h3>

<p>
Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.
</p>
```

</article>

```
<h3>Let Me Tell You About This Steak</h3>

<p>
Once again, some random text to lorem lorem lorem lorem ipsum text
praesent tincidunt ipsum lipsum.
</p>
```

</article>

```
<h3>Cherries, Interrupted</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
<p>What else?</p>
```

</article>

```
<h3>Once Again, Robust Wine and Vegetable Pasta</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
```

</article>

```
<h3>All I Need Is a Popsicle</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
```

</article>

```
<h3>Salmon For Your Skin</h3>

<p>
Once again, some random text to lorem lorem lorem lorem ipsum text
praesent tincidunt ipsum lipsum.
</p>
```

</article>

```
<h3>The Perfect Sandwich, A Real Classic</h3>

<p>
Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.
</p>
```

</article>

```
<h3>Le French</h3>

<p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
```

</article>

</div>

<h3>About Me, The Food Man</h3>

```
<h4><b>I am Who I Am!</b></h4>

<h6><i>With Passion For Real, Good Food</i></h6>

<p>
Just me, myself and I, exploring the universe of unknownment.
I have a heart of love and an interest in lorem ipsum and mauris
neque quam blog. I want to share my world with you.
Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.
</p>
```

</div>

</section>

<hr>

<div>

```
<h3>FOOTER</h3>

<p>
Praesent tincidunt sed tellus ut rutrum.
Sed vitae justo condimentum, porta lectus vitae,
ultricies congue gravida diam non fringilla.
</p>

<p>
Powered by
<a href="https://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a>
</p>
```

</div>

<div>

```
<h3>BLOG POSTS</h3>

<span class="w3-large">Lorem</span><br>
    <span>Sed mattis nunc</span>
  </li>

<span class="w3-large">Ipsum</span><br>
    <span>Praes tinci sed</span>
  </li>

</ul>
```

</div>

```
<h3>POPULAR TAGS</h3>

<p>
  <span class="w3-tag w3-black w3-margin-bottom">Travel</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dinner</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Salmon</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">France</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Drinks</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Ideas</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Flavors</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Cuisine</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Chicken</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dressing</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fried</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fish</span>
  <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Duck</span>
</p>
```

</div>

</footer>

</main>

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>

</body>
</html>