PURE CSS TABS DESIGNING.

We have designed Pure Tabs using HTML and CSS code. We have designed this code such that it will be very simple to use anywhere. If you like this code then comment below and tell us what do you like about our code. 👍👍

PROGRAM SOURCE CODE :)

HTML CODE :-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width:device-width,intial-scale=1.0">
    <title>Navigation Tab</title>
    <link rel="stylesheet" type="text/css" href="Tab.css">
</head>
<body>
    <div class="nav">
        <ul>
        <li>
            <input type="radio" name="tb" id="i1" checked>
            <label for="i1">C Program</label>
            <div class="text">
                <pre>
#include&lt;stdio.h&gt;
int main() 
{ 
int f=0,s=1,A,i,n;
printf(&quot;Enter number of terms: &quot;);
scanf(&quot;%d&quot;,&amp;n);
printf(&quot;\n It is %d terms Fibonacci series:\n&quot;,n);
for(i=0;i&lt;n;i++)
{
  if(i&lt;=1)
   {
     A=i;
    }
  else
    {
      A=f+s;
      f=s;
      s=A;
    }
 printf(&quot;%d,&quot;,A);
}
 return 0;
}
                </pre>
            </div>
        </li>
        <li>
            <input type="radio" name="tb" id="i2">
            <label for="i2">Java Program</label>
            <div class="text">
                <pre>
import java.io.*;
public class Armstrong{
      public static void main(String[] args)
{
    int m , i , rem , sum;
    System.out.println(&quot;Armstrong number between  1 and 1000 are : &quot;);
    for ( i = 1 ; i &lt;= 1000 ; i++)
            {
        sum = 0;
        m = i;
        while( m &gt; 0)
        {
            rem = m % 10;
            sum = sum + rem * rem * rem ;
            m = m / 10;
        }
    if ( sum == i)
    {
        System.out.println(&quot;\t\t&quot;+sum);
    }
            }
}
}
</pre>
            </div>
        </li>
        <li>
            <input type="radio" name="tb" id="i3">
            <label for="i3">Python Program</label>
            <div class="text">
                <pre>
n=int(input(&quot;Enter a Binary number:&quot;))
num=n
d=0
base=1
while(n&gt;0):
    rem=n %10
    d=d+ rem * base
    n=n//10 
    base=base * 2
print (&quot;Decimal number of&quot;,num,&quot;is:&quot;,d)
</pre>
            </div>
        </li>
        <li>
            <input type="radio" name="tb" id="i4">
            <label for="i4">C++ Program</label>
            <div class="text">
                <pre>
#include&lt;iostream&gt;
using namespace std;
int main()
{
  int j,a,r,sum;
  cout&lt;&lt;&quot; Armstrong number are :&quot;;
  for(j=1;j&lt;1000;j++)
  {
    sum=0;
    a=j;
    while(a&gt;0)
    {
     r=a%10;
     sum=sum+r*r*r;
     a=a/10;
    }
    if(sum==j)
    cout&lt;&lt;&quot;\n\t\t&quot;&lt;&lt;j;
   }
 return 0;
}
</pre>
        </div>
        </li>
        <li>
            <input type="radio" name="tb" id="i5">
            <label for="i5">C# Program</label>
            <div class="text">
                <pre>
using System;
namespace opop
{
    class Data
    {
        static void Main(string[] args)
        {
            Console.WriteLine(&quot;Enter a Number :&quot;);
            int a = Convert.ToInt32(Console.ReadLine());
            Console.WriteLine(&quot;Enter a Your name here :&quot;);
            String name = Console.ReadLine();
            int c = a * a * a;
            Console.WriteLine(&quot;Hey &quot;+name+&quot; here is your answer:&quot;+c);
        }
    }
}
            </pre>
        </div>
    </li>
  </ul>
  </div>
</body>
</html>

CSS CODE :-

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background-color:yellow;
    overflow-x: hidden;
}

html{
    font-size: 62.5%;
    /*1rem = 10px*/
}

.nav{
    width: 100vw;
    background-color: #000;
    color: #fff;
    padding: 2rem 0rem 2rem 0rem;
}

.nav ul{
    display:flex;
    justify-content: space-around;
}

.nav ul li{
    list-style: none;
    text-align: center;
}

input{
    display: none;
}


.nav ul li label{
    font-weight: bolder;
    font-size: 3rem;
    font-family: sans-serif;
    cursor: pointer;
    padding: 4rem;
}

.text{
    font-family: cursive;
    font-size:3rem;
    color: blue;
    background-color:yellow;
    width: 100%;
    text-align: left;
    line-height:4rem;
    position: absolute;
    top:12rem;
    left:2rem;
    display: none;
}
.nav input[id^="i"]:checked ~ .text{
    display: block;
}
.nav input[id^="i"]:checked + label{
    background-color: yellow;
    color: blue;
}