<!-- Tab links --> <div class="tab"> <button class="tablinks tab-font" onclick="openCity(event, 'footer')">Footer</button> <button class="tablinks tab-font" onclick="openCity(event, 'projects')">Projects</button> <button class="tablinks tab-font" onclick="openCity(event, 'disclaimer')">disclaimer</button> </div> <!-- Tab content --> <div id="projects" class="tabcontent"> <h2>Projects</h2> <h3>Hey, If your reading this you obviously wanna find out about more of my projects</h3> </div> <div id="footer" class="tabcontent"> <h3><a href="./index.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Home</strong></a></h3> <h3><a href="./pages/about.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>About</strong></a></h3> <h3><a href="./pages/projects.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Projects</strong></a></h3> <h3><a href="#" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Contact</strong></a></h3> <p class="copyright">©2020 WHY?</p> </div> <div id="disclaimer" class="tabcontent"> <h2>Disclaimer</h2> <p><strong>THIS IS JUST A JOKE! <br> <br> I dont truely think this of python, I think python is a great language and would love to learn,<br> all of the acusations above are comepletely false and should not be followed.<br> Please respect what i am doing and dont hate on the joke.</strong> </p> </div> <!-- CSS --> <style> .-link { color: rgb(0, 0, 0); text-decoration: none; } .-link-title { color: #000000; text-decoration: none; padding-left: 5rem; } .tablinl { padding: 5px } .tab-font { font-weight: bold; } .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } </style>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter