Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title name</title>
    <link rel="shortcut icon" href="https://reia.neocities.org/etc/favicon.gif" />
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">

<style>
/* paste all of the content inside <style> into style.css + include the the above /style.css code to get the same look on all your pages */

/* if you wish to have a solid colour, remove background-image! */
body {
  background: #00000;
  background-image: url('background link here');
  background-repeat: repeat-y repeat-x;
  font-family: times;
  font-size: 80%
}

.container{
  width:500px;
  background-color:white;
  margin-left: auto;
  margin-right:auto;
  border: 1px solid #ccc;
  height:300px
  }

.container2{
  width:460px;
  background-color:white;
  margin-left: auto;
  margin-right:auto;
  border: 1px solid #ccc;
  height:50px;
  padding:20px;
  overflow:auto;
  }

.tab {
  width:100px
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  height:280px;
  padding: 0px 15px 15px;
  border-top: none;
  text-align:center; /* change to left if you don't like centered text */
  overflow: auto;
}


</style>
</head>

<body>

<div class="container">

<!-- if you wish to use this container as a page instead of a separate html, replace the href with javascript:void(0) ! -->
<!-- the text in ' ' after 'event' is the name of the container page btw -->
<!-- XY is the text that shows up on the navigation -->

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen">Home︎</a></li>
  <li><a href="html page link here" class="tablinks" onclick="openCity(event, 'X')">XY</a></li>
  <li><a href="html page link here" class="tablinks" onclick="openCity(event, 'X')">XY</a></li>
  <li><a href="html page link here" class="tablinks" onclick="openCity(event, 'X')">XY</a></li>
</ul>

<div id="Home" class="tabcontent">
<p>place your content here !</p>
</div>

</div>

<br><br>

<div class="container2">
<div align=center>
<p><a href="https://pastebin.com/gWRHG6N5">code</a></p>
</div>

</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

</body>