Add Tabs and change styling

developer-junaid · Oct 4, 2022 · d8a785b · d8a785b
1 parent 3dc40de
commit d8a785b
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -9,6 +9,45 @@ body {
   margin: 2px 10px;
 }
 
+body {font-family: Arial;}
+
+/* Style the tab */
+.tab {
+  overflow: hidden;
+  border: 2px solid rgb(0, 0, 0);
+  background-color: #9e9c9c;
+}
+
+/* Style the buttons inside the tab */
+.tab button {
+  background-color: inherit;
+  float: left;
+  border: 1px;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.4s;
+  font-size: 22px;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+  background-color: #ddd;
+}
+
+/* Create an active 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;
+}
+
 .body-div {
   height: 100%;
   width: 100%;

diff --git a/index.html b/index.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <link
       rel="stylesheet"
       href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
@@ -34,6 +37,32 @@
       </header>
       <!-- // Header and Nav -->
 
+    <h1>GAME OF THRONES</h1>
+    <div class="tab">
+      <button class="tablinks" onclick="openCity(event, 'HOME')">HOME</button>
+      <button class="tablinks" onclick="openCity(event, 'SEASONS')">SEASONS</button>
+      <button class="tablinks" onclick="openCity(event, 'EPISODES')">EPISODES</button>
+      <button class="tablinks" onclick="openCity(event, 'SERIAL CAST')">SERIAL CAST</button>
+      <button class="tablinks" onclick="openCity(event, 'BEST SCENES')">BEST SCENES</button>
+    </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>
+
+
       <!-- Main -->
       <main>
         <div class="main-div">