TestSite/template.html at main · ojrocket/TestSite · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TestSite</title>
    <link rel="stylesheet" href="template.css">
    <script src="template.js" defer></script>

</head>
<body>
    <header class="header">
        <nav class="navbar">
            <div class = "login">
                <a href="fourm.html" class = "button-link" >Login</a>
            </div>
            <div class="nav-brand">
                <i class="fas fa-seedling"></i>
                <span>TestSite</span>
            </div>
            <ul class="nav-menu">
                <li><a href="#home">Home</a></li>
                <li><a href="#Org-Struct">Organization-Structure</a></li>
                <li><a href="#Events">Events</a></li>
                <li><a href="#About">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!--home-->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>Welcome to TestSite</h1>
            <p>Your gateway to knowledge and community.</p>
            </div>
        <div class=" quick-vid" >
            <a href="https://youtu.be/xvFZjo5PgG0?si=hzhpYG-cp7XEM9Bl" class = "button-vid">See this</a>
        </div>
    </section>

    <!--Organization-Structure-->
    <section id="Org-Struct" class="Org-Struct">
        <div class="og">
            <h2>Organization Structure</h2>
            <p>Details about the organization's structure will be provided here.</p>
            <p>More information about the organization can be added as needed.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quisquam illo quae,
                voluptas consequuntur ab aperiam cupiditate aspernatur! Quod, ratione sequi quos
                 ut corporis incidunt iure assumenda reiciendis vel optio!</p>
            <div class=" Org-Member">
                <a href="org-members.html" class="orgmembers">Look At Us</a>
            </div>

        </div>

    </section>

    <!--Events-->
    <section id="Events" class="Events">
        <div class="events-container">
            <div class="en-cards1">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Event 1" />
                <h3>Event 1</h3>
                <p>Description for Event 1.</p>
            </div>
            <div class="en-cards2">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Event 2" />
                <h3>Event 2</h3>
                <p>Description for Event 2.</p>
            </div>
            <div class="en-cards3">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Event 3" />
                <h3>Event 3</h3>
                <p>Description for Event 3.</p>
            </div>
            <div class="en-cards4">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29kZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Event 4" />
                <h3>Event 4</h3>
                <p>Description for Event 4.</p>
            </div>
        </div>
    </section>
    <!--About-->
    <section id="About" class="About">
        <div class="about-container">
            <h2>About Us</h2>
            <p>This section contains information about the organization.</p>
            <p>Additional details and history can be included here.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quisquam illo quae,
                voluptas consequuntur ab aperiam cupiditate aspernatur! Quod, ratione sequi quos
                 ut corporis incidunt iure assumenda reiciendis vel optio!</p>
        </div>
    </section>
    <!--Contact-->
    <footer id="contact" class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>TestSite</h3>
                    <p>This section contains information about the organization.</p>
                </div>
                <div class="footer-section">
                    <h3>Contact</h3>
                    <p>Email: nsmixd14jashwanth@gmail.com</p>
                    <p>Phone: +91-9392986415</p>
                </div>
            </div>
            <div class="footer-bottom">

            </div>
        </div>
    </footer>
</body>
</html>