bxb-website/index.html at master · bit-by-bit-coding/bxb-website · 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
---
layout: homepage
title: "Bit by Bit"
banner-title: "Diversifying the next generation of thinkers/coders/leaders"
scripts:
- "particles.js"
- "app.js"
style: index.css
---
<div class="section blue-box" id="nomargin-top">
    <div class="details-container">
        <div class="details-item" id="righttext">
            <h1>What We Do</h1>
            <p id="action-statement">
                We provide low-cost and no-cost programs that teach and encourage people, especially underrepresented
                youths, to code, lead, and improve their understanding of the world.
            </p>
        </div>
    </div>
</div>

<div class="section">
    <h1>Open Programs</h1>
    <p id="programs-text">
        Free project based learning in a 3 : 1 student teacher ratio.
    </p>
    <div id="programs">
        <div class="details-container">
            <div class="details-item program-info">
                <img class="program-photo" class="details-item" src="/imgs/something.png">
                <h2 class="noslashes">Form and Function</h2>
                <p> Form and Function is an online after-school program for middle school students to develop web
                    development skills using HTML, CSS, and JavaScript.
                    <!-- Form and Function gives middle schoolers the power to crack the “code” of web development!
                    Our free weekly after-school program helps you transform the web into a canvas for your
                    ideas. Interactive projects, demos, and individual help will teach you how to use HTML,
                    CSS, and JavaScript to create your own unique website. -->
                </p>
                <a href="{{ 'formfunction.html' | relative_url| remove: '.html' }}">
                    Learn more →
                </a>
            </div>
           <!-- <div class="details-item program-info" id="middle-box">
                <img class="program-photo" class="details-item" src="/imgs/BunnyEars.jpg">
                <h2 class="noslashes">Hello World</h2>

                <p> Hello World is an online, two-week long summer camp for motivated girls to learn to build their own
                    websites, getting down-and-dirty with real code.
                    Hello World is a summer camp for motivated girls to learn to build their own websites, getting
                    down-and-dirty with real code. Every camper will learn the principles of front-end web development
                    and the heart of CSS, HTML, and JavaScript. Moreover, she’ll get the techniques, resources, and
                    passion to continue tinkering with code for the rest of her life!
                </p>
                <a href="{{ 'helloworld.html' | relative_url | remove: '.html' }}">
                    Learn more →
                </a>
            </div>-->
            <div class="details-item program-info">
                <img class="program-photo" class="details-item" src="/imgs/momentum.jpg">
                <h2 class="noslashes">Momentum</h2>
                <p>
                    Momentum is a free, project-based program that teaches the fundamentals of AI.
                    Students build their own neural networks with guidance of MIT mentors.
                </p>
                <a href="https://www.mitmomentum.org/">
                    Learn more →
                </a>
            </div>
        </div>
    </div>
</div>

<div class="section blue-box">
    <h1>Our Impact</h1>
    <div id="stats" class="details-container">
        <div class="details-item">
            <p class="stats-numbers">1000+</p>
            <p class="stats-words">students</p>
        </div>
        <div class="details-item">
            <p class="stats-numbers">120</p>
            <p class="stats-words">volunteers</p>
        </div>
        <div class="details-item">
            <p class="stats-numbers">8</p>
            <p class="stats-words">countries</p>
        </div>
        <div class="details-item">
            <p class="stats-numbers">21</p>
            <p class="stats-words">states</p>
        </div>
    </div>
</div>

<div class="section">
    <div class="details-container" id="testimonial">
        <div class="details-item">
            <img id="testimonial-photo" src="imgs/Row.jpg">
        </div>
        <div class="details-item">
            <p id="testimonial-text">
                "I really enjoyed this program because it brought out my inner coder in me and it's a very
                fun journey to go on. We get to learn so many new thing which include in making our own
                websites and games. I highly recommend this program for other coders that are out their
                and that are willing to have a great experience" <br>
                - Ishrita
            </p>
        </div>
    </div>
</div>