Tabs using HTML and CSS only

Hey, developers welcome to Day 58 of our 90Days 90Projects challenge. And in Day 58  we are going to create Tabs using HTML and CSS only.


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

auto-scroll-animation-using-css


Download Image: Click Here

HTML Code

index.html

<!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">
    <title> CSS Tabs </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="main-section">
        <h2>CSS Tabs</h2>
        <input id="home-tab" type="radio" name="tabs" checked>
        <label for="home-tab">Home</label>
        <input id="html-tab" type="radio" name="tabs">
        <label for="html-tab"> HTML </label>
        <input id="css-tab" type="radio" name="tabs">
        <label for="css-tab"> CSS </label>
        <input id="javascript-tab" type="radio" name="tabs">
        <label for="javascript-tab"> JavaScript </label>

        <section id="home-content">
            <h3> Geeks Help </h3>
            <p>Geeks Help is an independent website for Web Developers, Programmers, Computer Science students. We
                provide syllabus and practical problem solutions online. </p>
        </section>
        <section id="html-content">
            <h3> HTML </h3>
            <p>HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and
                web applications. Let's see what is meant by Hypertext Markup Language, and Web page. </p>
        </section>
        <section id="css-content">
            <h3> CSS </h3>
            <p>CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial
                is developed for beginners and professionals.</p>
        </section>
        <section id="javascript-content">
            <h3> JavaScript </h3>
            <p>JavaScript (js) is a light-weight object-oriented programming language which is used by several websites
                for scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic
                interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for
                adding programs to the webpages in the Netscape Navigator browser. </p>
        </section>
    </div>
   
</body>
</html>


CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.main-section {
    width: 500px;
    border-radius: 10px;
    margin: 100px auto;
    padding: 10px 30px 60px;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
}

input,
section {
    clear: both;
    display: none;
    padding-top: 10px;
}

label {
    cursor: pointer;
    font-size: 14px;
    display: block;
    float: left;
    padding: 10px 30px;
    border-top: 2px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: 1px solid #DDD;
}

#home-tab:checked~#home-content,
#html-tab:checked~#html-content,
#css-tab:checked~#css-content,
#javascript-tab:checked~#javascript-content {
    display: block;
}

input:checked+label {
    font-weight: bold;
    border-top-color: #FFB03D;
    border-right-color: #d5caca;
    border-left-color: #d5caca;
    border-bottom-color: transparent;
}

h2 {
    margin-bottom: 1rem;
}

h3 {
    color: #e65b00;
    margin-bottom: 10px;
}

p {
    font-size: 14px;
    line-height: 18px;
}


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad