Pure CSS Vertical TABS Designing.
In this tutorial we are providing Source Code of Designing Pure Vertical CSS Tabs. Here we have creates pages with navigation bar(vertical) and displayed how you will seen different pages as you click on particular navigation list item. We hope you will really like this code.
PROGRAM SOURCE CODE :)
1) HTML CODE :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="google.png">
<title>Vertical Tab Designing</title>
<link rel="stylesheet" href="VerticalTab.css">
</head>
<body>
<div class="main-div">
<div class="contain-div">
<ul>
<li>
<input type="radio" id="i1" name="i" checked>
<label for="i1">home</label>
<div class="text" >
<h1>MAIN-PAGE</h1>
<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Facilis deleniti exercitationem obcaecati quia i
ncidunt voluptates consequatur excepturi repellendus dicta
adipisci, placeat esse aperiam consequuntur quasi,
laboriosam qui iure. Sint incidunt corrupti placeat maxime fugiat,
voluptatibus suscipit architecto officia necessitatibus,
temporibus nisi ipsa adipisci, iste aspernatur accusamus
enim ex velit delectus.
</p>
</div>
</li>
<li>
<input type="radio" id="i2" name="i">
<label for="i2">about us</label>
<div class="text">
<h1>ABOUT US</h1>
<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit.Ad reprehenderit dolor fugiat eum sed, rerum ut
pariatur, consequuntur assumenda dolorum blanditiis inventore
non distinctio quidem veritatis maioreseligendi fugit cumque.
</p>
</div>
</li>
<li>
<input type="radio" id="i3" name="i">
<label for="i3">services</label>
<div class="text">
<h1>SERVICES</h1>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tempore, amet quia. Ratione totam ipsam
blanditiis vero doloremque corrupti saepe fugiat cupiditate
impedit corporis ut quaerat accusamus, numquam nesciunt
sequi deleniti doloribus autem dolorem tempora iusto nobis
adipisci fugit delectus. Vel nobis, corrupti dolorem repellat esse
accusamus eum consequuntur exercitationem vitae quae aliquid
quod. Quasi deleniti rem et similique, consequatur debitis ipsum
dolorem architecto qui! Repellendus aliquam, sint saepe deserunt at, aliquid inventore est
perspiciatis architecto iusto, veniam amet natus maiores.
</p>
</div>
</li>
<li>
<input type="radio" id="i4" name="i">
<label for="i4">contact us</label>
<div class="text color">
<h1 style="text-decoration: underline;font-family: 'Lucida Sans';">
CONTACT US</h1>
<h3>Name:</h3>
<input type="text" title="Enter Your Full name" required/>
<h3>Email:</h3>
<input type="email" title="Enter Your Email ID" required/>
<h3>Phone :</h3>
<input type="number" title="Enter Your Phone Number" required/>
<center><button type="submit">Submit</button></center>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
2) CSS CODE :)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style:none;
}
html{
font-size: 62.5%;
}
:root{
--w:#fff;
}
body{
overflow-x: hidden;
user-select: none;
user-zoom: none;
background-color:rgb(0, 9, 2);
}
h1{
font-size: 3rem;
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
padding-bottom: 5rem;
}
.main-div{
width: 100vw;
color: var(--w);
position: relative;
}
.contain-div{
width: 100%;
height: 100vh;
}
ul{
width: 100%;
margin-top: 10rem;
margin-left: 5rem;
display: inline-block;
}
li{
padding: 2rem 0rem 2rem 3rem;
}
label{
font-size: 2.5rem;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-transform:capitalize;
cursor: pointer;
padding-right: 5rem;
}
.text{
position: absolute;
top: 45%;
left: 57%;
transform: translate(-50%,-50%);
display: none;
padding: 3rem;
}
.color{
border-radius: 5rem;
background-color:blueviolet;
}
.text p{
text-indent: 40%;
font-size: 1.5rem;
line-height: 3rem;
font-family: sans-serif;
}
input[type="radio"]{
display: none;
}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{
display: none;
}
button{
padding: 1rem 2rem;
color: var(--w);
background-color: green;
font-size: 2rem;
outline: none;
cursor: pointer;
}
.text input{
width:30rem;
height: 5rem;
padding: 0rem 1.5rem;
border: none;
outline: none;
background: transparent;
border-bottom: .3rem solid var(--w);
color: var(--w);
font-size: 2rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 1rem 0rem 3rem 0rem;
}
.text h3{
font-size: 2.8rem;
}
.contain-div input[id^="i"]:checked ~ .text{
display: block;
}
.contain-div input[id^="i"]:checked ~ label{
border-right: .3rem solid greenyellow;
color: red;
text-decoration-line: underline;
}
@media(max-width:800px) {
html{
font-size: 50%;
}
.text{
position:absolute;
left:70%;
padding: 0;
}
.color{
padding: 3rem;
}
}
