W3Schools Tryit Editor

<!DOCTYPE html>

<html>
<title>W3.CSS Cafe 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=Inconsolata">

.bgimg {
  background-position:center;
  background-size:cover;
  background-image:url("/w3images/coffeehouse.jpg");
  min-height:75%;
}

.menu {
  display:none;
}
</style>

<body>

<a href="#about"
class="w3-button w3-black"
style="flex:1">
ABOUT
</a>

<a href="#where"
class="w3-button w3-black"
style="flex:1">
WHERE
</a>

</nav>
</div>

<div class="w3-display-bottomright
  w3-center w3-padding-large">
    <span class="w3-text-white">
    15 Adr street, 5015
    </span>
  </div>

</header>

<h5 class="w3-center w3-padding-64">
  <span class="w3-tag w3-wide">ABOUT THE CAFE</span>
</h5>

<p>
The Cafe was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>

<p>
In addition to our full espresso and brew bar menu, we serve fresh
made-to-order breakfast and lunch sandwiches, as well as a selection
of sides and salads and other good stuff.
</p>

<p>
  <i>
  "Use products from nature for what it's worth - but never too early,
  nor too late." Fresh is the new sweet.
  </i>
  </p>

<p>
  Chef, Coffeeist and Owner: Liam Brown
  </p>

</div>

<p>
<b>Opening hours:</b> everyday from 6am to 5pm.
</p>

<p>
<b>Address:</b> 15 Adr street, 5015, NY
</p>

</div>

</section>

<div class="w3-flex w3-card w3-padding">

<a href="javascript:void(0)"
  onclick="openMenu(event,'Drinks')"
  class="tablink w3-center"
  style="flex:1">
  Drink
  </a>

</div>

<div id="Eat"
class="w3-container menu w3-padding-48 w3-card">

<h5>Bread Basket</h5>
  <p class="w3-text-grey">
  Assortment of fresh baked fruit breads and muffins 5.50
  </p>

<br>

<h5>Honey Almond Granola with Fruits</h5>
  <p class="w3-text-grey">
  Natural cereal of honey toasted oats, raisins, almonds and dates 7.00
  </p>

<br>

<h5>Belgian Waffle</h5>
  <p class="w3-text-grey">
  Vanilla flavored batter with malted flour 7.50
  </p>

<br>

<h5>Scrambled Eggs</h5>
  <p class="w3-text-grey">
  Scrambled eggs, roasted red pepper and garlic,
  with green onions 7.50
  </p>

<br>

<h5>Blueberry Pancakes</h5>
  <p class="w3-text-grey">
  With syrup, butter and lots of berries 8.50
  </p>

</div>

<div id="Drinks"
class="w3-container menu w3-padding-48 w3-card">

<h5>Coffee</h5>
  <p class="w3-text-grey">Regular coffee 2.50</p>

<br>

<h5>Chocolato</h5>
  <p class="w3-text-grey">
  Chocolate espresso with milk 4.50
  </p>

<br>

<h5>Corretto</h5>
  <p class="w3-text-grey">
  Whiskey and coffee 5.00
  </p>

<br>

<h5>Iced Tea</h5>
  <p class="w3-text-grey">
  Hot tea, except not hot 3.00
  </p>

<br>

<h5>Soda</h5>
  <p class="w3-text-grey">
  Coke, Sprite, Fanta, etc. 2.50
  </p>

</div>

<img src="/w3images/coffeehouse2.jpg"
alt="Coffee"
style="width:100%;margin-top:32px">
```

</div>

</section>

```
<h5 class="w3-center w3-padding-48">
  <span class="w3-tag w3-wide">
  WHERE TO FIND US
  </span>
</h5>

<p>
Find us at some address at some place.
</p>

<p>
<span class="w3-tag">FYI!</span>
We offer full-service catering for any event, large or small.
We understand your needs and will cater the food to satisfy
both look and taste.
</p>

<p>
<b>Reserve</b> a table, ask for today's special,
or just send us a message:
</p>

<p>
  <button class="w3-button w3-black"
  type="submit">
  SEND MESSAGE
  </button>
  </p>

</form>

</div>

</section>

</div>

<p>
Powered by
<a href="https://www.w3schools.com/w3css/default.asp"
title="W3.CSS"
target="_blank"
class="w3-hover-text-green">
w3.css
</a>
</p>

</footer>

x = document.getElementsByClassName("menu");

for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

tablinks = document.getElementsByClassName("tablink");

for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className =
      tablinks[i].className.replace(" w3-dark-grey","");
  }

document.getElementById(menuName).style.display = "block";
  evt.currentTarget.className += " w3-dark-grey";
}

document.getElementById("myLink").click();
</script>

</body>
</html>