Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- body {font-family: Arial;}
- /* Style the tab */
- .tab {
- overflow: hidden;
- border: 1px solid #ccc;
- background-color: #f1f1f1;
- }
- img {
- border-radius: 50%;
- }
- /* Style the buttons inside the tab */
- .tab button {
- background-color: inherit;
- float: left;
- border: none;
- outline: none;
- cursor: pointer;
- padding: 14px 16px;
- transition: 0.3s;
- font-size: 17px;
- }
- /* Change background color of buttons on hover */
- .tab button:hover {
- background-color: #FFFF00;
- }
- /* Create an active/current tablink class */
- .tab button.active {
- background-color: #FFFF33;
- }
- /* Style the tab content */
- .tabcontent {
- display: none;
- padding: 100px 250px;
- border: 1px solid #ccc;
- border-top: none;
- }
- </style>
- </head>
- <body>
- <h2>Stefan Angelov' s site about UX design</h2>
- <img src="img_avatar.png" alt="Avatar" style="width:200px">
- <p>Here is the information about all my previus assignments</p>
- <div class="tab">
- <button class="tablinks" onclick="openCity(event, 'Assignment 1')">Assignment 1</button>
- <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
- <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
- </div>
- <div id="Assignment 1" class="tabcontent">
- <h3>Assignement 1</h3>
- <p>Kur za litex</p>
- </div>
- <div id="Paris" class="tabcontent">
- <h3>Paris</h3>
- <p>Paris is the capital of France.</p>
- </div>
- <div id="Tokyo" class="tabcontent">
- <h3>Tokyo</h3>
- <p>Tokyo is the capital of Japan.</p>
- </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";
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement