Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 37 | Author: karbonsites 
  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
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CampusConnect - Connect Your Campus</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <header class="header-landing">
        <div class="container nav-bar-landing">
            <div class="logo">CampusConnect</div>
            <div class="nav-actions">
                <button id="theme-toggle-landing" class="theme-toggle-btn">
                    <span class="material-icons">brightness_4</span>
                </button>
                <a href="login.html" class="btn btn-secondary">Login</a>
                <a href="signup.html" class="btn btn-primary">Sign Up</a>
            </div>
        </div>
    </header>

    <main class="landing-content">
        <!-- Hero Section -->
        <section class="hero-section">
            <div class="container grid-hero">
                <div class="hero-text">
                    <h1>The Pulse of Indian Campuses.</h1>
                    <p class="tagline">Connect, Collaborate, and Thrive. The premium social network built exclusively for university life across India.</p>
                    <div class="cta-group">
                        <a href="signup.html" class="btn btn-primary btn-large">Join Now</a>
                        <a href="#features" class="btn btn-ghost btn-large">Explore Features</a>
                    </div>
                </div>
                <div class="hero-illustration">
                    <!-- Mock Feed Preview -->
                    <div class="mock-feed-card">
                        <div class="mock-post">
                            <div class="post-header">
                                <div class="avatar-small"></div>
                                <div class="user-info">
                                    <span class="username-mock">@IIT_Delhi_Dev</span>
                                    <span class="timestamp-mock">2h ago</span>
                                </div>
                            </div>
                            <p class="post-content-mock">Just finished the final review for the Capstone project! Feeling the relief. Who's up for coffee near the library?</p>
                            <div class="post-actions-mock">
                                <span class="material-icons icon-like">favorite_border</span> <span>42</span>
                                <span class="material-icons icon-comment">comment</span> <span>8</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section id="features" class="features-section">
            <div class="container">
                <h2>Designed for Student Success</h2>
                <div class="bento-grid">
                    <div class="bento-item community">
                        <span class="material-icons icon-large">group</span>
                        <h3>Community Hub</h3>
                        <p>Find your tribe, share knowledge, and build lasting professional networks across institutions.</p>
                    </div>
                    <div class="bento-item events">
                        <span class="material-icons icon-large">event_available</span>
                        <h3>Campus Events</h3>
                        <p>Never miss out. Centralized calendar for all college workshops, fests, and seminars.</p>
                    </div>
                    <div class="bento-item notes">
                        <span class="material-icons icon-large">notes</span>
                        <h3>Study Notes</h3>
                        <p>Securely share and access verified academic resources from peers.</p>
                    </div>
                    <div class="bento-item networking">
                        <span class="material-icons icon-large">business_center</span>
                        <h3>Pro Networking</h3>
                        <p>Connect with alumni and industry professionals entering the job market.</p>
                    </div>
                    <div class="bento-item rewards span-2">
                        <span class="material-icons icon-large">star</span>
                        <h3>Rewards & Recognition</h3>
                        <p>Earn points for valuable contributions and unlock exclusive badges visible on your profile.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

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

  <a href="https://karbonsites.space/home" target="_blank" id="karbon-promo-banner">
      <span>✨</span>
      <div>Built with <b>Karbon Sites</b></div>
  </a>
</body>
</html>

Share this file: