JavaScript-Projects/tabs-project/index.html at main · amit265/JavaScript-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="description"
        content="Build an interactive tabbed interface using this basic JavaScript Tabs Project for better content organization." />
    <meta name="keywords"
        content="tabs project, JavaScript tabs, tabbed interface, basic tabs project, content organization" />
    <meta property="og:title" content="Tabs Project" />
    <meta property="og:description"
        content="Build an interactive tabbed interface using this basic JavaScript Tabs Project for better content organization." />
    <meta property="og:image" content="https://coderespite.com/image/js-projects/tabs-project.png" />
    <meta property="og:url" content="https://coderespite.com/projects/js-projects/tabs-project" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Tabs Project" />
    <meta name="twitter:description"
        content="Build an interactive tabbed interface using this basic JavaScript Tabs Project for better content organization." />
    <meta name="twitter:image" content="https://coderespite.com/image/js-projects/tabs-project.png" />

    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabs</title>
</head>

<body>
    <div class="main">
        <div class="header">
            <img src="sample.jpg" alt="">
        </div>
        <div class="content">
            <div class="tabTitle">
                <h2 class="button live" data-id="tab1">Tab 1</h2>
                <h2 class="button" data-id="tab2">Tab 2</h2>
                <h2 class="button" data-id="tab3">Tab 3</h2>

            </div>
            <div class="tabs">
                <div class="tab live" id="tab1">
                    <h3>Tab 1</h3>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quam vero veniam quae
                        ipsam! Iure hic quisquam quasi doloribus consequuntur laudantium, magni quos amet saepe ipsam
                        ea, ex tenetur vitae.
                        Quasi animi provident cupiditate deleniti voluptatum, in aliquam dolorem quam possimus enim
                        voluptatibus nam vel. Amet illum, temporibus deserunt itaque nulla laborum necessitatibus
                        voluptatem ea delectus dolores. Officiis, obcaecati sequi?
                    </p>
                </div>
                <div class="tab" id="tab2">
                    <h3>Tab 2</h3>

                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto impedit libero repellendus
                        quas dicta iusto, doloribus itaque reprehenderit. Et, est! Atque, repudiandae ducimus deleniti
                        natus officiis recusandae tempora sit veniam?
                        Quasi nobis nulla voluptas at sequi assumenda laudantium saepe blanditiis odio animi voluptate
                        consectetur suscipit distinctio, libero illo praesentium voluptatem dolores explicabo a omnis
                        adipisci rerum alias aut eius! Expedita!
                        Dolorem, officiis neque ducimus et at fuga ipsam voluptate sed illo, nisi nostrum est! Eum
                        repudiandae tempore similique tenetur sunt doloribus alias odio. Veritatis nobis est saepe
                        beatae. Nemo, at.</p>
                </div>
                <div class="tab" id="tab3">
                    <h3>Tab 3</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos accusantium reprehenderit
                            dolorem officiis adipisci modi quia explicabo fuga facere magnam cum aliquid excepturi
                            possimus eveniet, suscipit praesentium, eos consectetur earum?</p>
                </div>
            </div>

        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>