contextlab.github.io/index.html at main · ContextLab/contextlab.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contextual Dynamics Lab</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="homepage">
    <!-- Header (hidden on homepage) -->
    <header class="site-header">
        <div class="header-inner">
            <a href="index.html" class="logo">
                <img src="images/CDL_Avatar.png" alt="Contextual Dynamics Lab">
                <span class="logo-text">contextual dynamics lab</span>
            </a>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">contextual dynamics lab</a></li>
                    <li class="dropdown">
                        <span class="dropdown-toggle">about</span>
                        <ul class="dropdown-menu">
                            <li><a href="research.html">research</a></li>
                            <li><a href="people.html">people</a></li>
                            <li><a href="news.html">news</a></li>
                        </ul>
                    </li>
                    <li><a href="publications.html">publications</a></li>
                    <li><a href="software.html">software</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
                <div class="social-icons">
                    <a href="https://github.com/organizations/ContextLab" target="_blank" title="GitHub">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                        </svg>
                    </a>
                    <a href="http://x.com/contextmemlab/" target="_blank" title="X (Twitter)">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                        </svg>
                    </a>
                    <a href="mailto:contextualdynamics@gmail.com" title="Email">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                        </svg>
                    </a>
                </div>
            </nav>
        </div>
    </header>

    <!-- Info Button (top right) -->
    <div class="info-button">
        <span>i</span>
    </div>

    <!-- Main Content -->
    <main class="homepage-main">
        <!-- Hero container with animating brain and text -->
        <div class="hero-container">
            <div class="brain-wrapper">
                <img src="images/BrainDoodle_Home.png" alt="how does memory work and what are its limits?" class="brain-image">
            </div>
            <div class="info-text">
                <h2>how does memory work and what are its limits?</h2>
                <p>Our lab uses powerful computational models and brain recording methods to understand how we extract information from the world around us.</p>
                <a href="research.html" class="read-more">READ MORE >></a>
            </div>
        </div>
    </main>

    <!-- Footer Navigation -->
    <nav class="footer-nav">
        <div class="footer-nav-inner">
            <button class="mobile-menu-toggle" aria-label="Toggle menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <a href="index.html" class="logo">
                <img src="images/CDL_Avatar.png" alt="CDL">
            </a>
            <ul>
                <li><a href="index.html">contextual dynamics lab</a></li>
                <li class="dropdown">
                    <span class="dropdown-toggle">about</span>
                    <ul class="dropdown-menu">
                        <li><a href="research.html">research</a></li>
                        <li><a href="people.html">people</a></li>
                        <li><a href="news.html">news</a></li>
                    </ul>
                </li>
                <li><a href="publications.html">publications</a></li>
                <li><a href="software.html">software</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </div>
    </nav>

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