M/s VIKASH TECH - We Write Imaginations to Codes..!!

Pure Css Tabs

Hello readers, Today in this blog you’ll learn how to create Tabs with Indicator using only HTML & CSS.
A tabbed interface or simply a tab is a graphical control element one can use to contain multiple panels or documents onto a single window for users to access. CSS tabs are the easiest way to attract more to your users.
In this program [Pure CSS Tabs with Slide Indicator], on the webpage, there is the content box with tabs and each tab have there own content. These tabs have click events or actions that means when you click on the particular tab then there is shown the content of your current or active tab. If you’re feeling difficult to understand what I am saying. You can try Own with below code copy and paste it.

HTML

<!DOCTYPE html>
<!-- Created By Praveen Kumar - www.vikashtech.com.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Pure CSS Tabs Design | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="wrapper">
    <header>Pure CSS Tabs</header>
    <input type="radio" name="slider" checked id="home">
    <input type="radio" name="slider" id="blog">
    <input type="radio" name="slider" id="code">
    <input type="radio" name="slider" id="help">
    <input type="radio" name="slider" id="about">
    <nav>
      <label for="home" class="home"><i class="fas fa-home"></i>Home</label>
      <label for="blog" class="blog"><i class="fas fa-blog"></i>Blog</label>
      <label for="code" class="code"><i class="fas fa-code"></i>Code</label>
      <label for="help" class="help"><i class="far fa-envelope"></i>Help</label>
      <label for="about" class="about"><i class="far fa-user"></i>About</label>
      <div class="slider"></div>
    </nav>
    <section>
      <div class="content content-1">
        <div class="title">MS VIKASHTECH</div>
        <p>M/s VIKASH TECH has a team of trained and certified consultants having rich experience in deploying server virtualization solutions offered by VMware, Citrix, Microsoft, Red Hat, ProXMox. While multiple Virtual Machine’s deployment is seen as a challenge in corporate environments, we provide onsite solutions to our clients as well as remote solutions round the clock ensuring high availability of infrastructure at all times.</p>
      </div>
      <div class="content content-2">
        <div class="title">This is a Blog content</div>
        <p>Nowadays industries are being replaced by automation and robotics. All processes and works are being carried out by machines and robotics processes.
        M/s VIKASH TECH works on to make things completely automated as per our customer’s requirements. We work on “AUTOMATION AND SECURITY”.
        We are focused on providing industry-standard tools and security. Our team comprises of highly certified engineers and network security experts.
</p>
      </div>
      <div class="content content-3">
        <div class="title">This is a Code content</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, debitis nesciunt! Consectetur officiis, libero nobis dolorem pariatur quisquam temporibus. Labore quaerat neque facere itaque laudantium odit veniam consectetur numquam delectus aspernatur, perferendis repellat illo sequi excepturi quos ipsam aliquid est consequuntur.</p>
      </div>
      <div class="content content-4">
        <div class="title">This is a Help content</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit null itaq, odio repellat asperiores vel voluptatem magnam praesentium, eveniet iure ab facere officiis. Quod sequi vel, rem quam provident soluta nihil, eos. Illo oditu omnis cumque praesentium voluptate maxime voluptatibus facilis nulla ipsam quidem mollitia! Veniam, fuga, possimus. Commodi, fugiat aut ut quorioms stu necessitatibus, cumque laborum rem provident tenetur.</p>
      </div>
      <div class="content content-5">
        <div class="title">This is a About content</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia sequi aliquam. Voluptatem distinctio nemo culpa veritatis nostrum fugit rem adipisci ea ipsam, non veniam ut aspernatur aperiam assumenda quis esse soluta vitae, placeat quasi. Iste dolorum asperiores hic impedit nesciunt atqu, officia magnam commodi iusto aliquid eaque, libero.</p>
      </div>
    </section>
  </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  overflow: hidden;
  padding: 0 20px;
  background: #17a2b8;
}
::selection{
  background: rgba(23,162,184,0.3);
}
.wrapper{
  max-width: 700px;
  width: 100%;
  margin: 200px auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.wrapper nav{
  position: relative;
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
}
.wrapper nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  color: #17a2b8;
  font-size: 17px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
}
.wrapper nav label:hover{
  background: rgba(23,162,184,0.3);
}
#home:checked ~ nav label.home,
#blog:checked ~ nav label.blog,
#code:checked ~ nav label.code,
#help:checked ~ nav label.help,
  #about:checked ~ nav label.about{
  color: #fff;
}
nav label i{
  padding-right: 7px;
}
nav .slider{
  position: absolute;
  height: 100%;
  width: 20%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 5px;
  background: #17a2b8;
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#blog:checked ~ nav .slider{
  left: 20%;
}
#code:checked ~ nav .slider{
  left: 40%;
}
#help:checked ~ nav .slider{
  left: 60%;
}
#about:checked ~ nav .slider{
  left: 80%;
}
section .content{
  display: none;
  background: #fff;
}
#home:checked ~ section .content-1,
#blog:checked ~ section .content-2,
#code:checked ~ section .content-3,
#help:checked ~ section .content-4,
#about:checked ~ section .content-5{
  display: block;
}
section .content .title{
  font-size: 21px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}
section .content p{
text-align: justify;
}
Category :

Comments

No comments found.

Leave a Reply

Latest Posts

telegram bot

How to send message via Telegram Bot using PHP - Telegram API

Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…

SuiteCRM, an open source tool for startups to use from an early stage.

When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

%d bloggers like this: