Web-UI/index.html at master · Kickstarter-Success/Web-UI · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Kickstarter Success</title>

    <link rel="stylesheet" href="css/index.css">
    <!--<link href="https://fonts.googleapis.com/css?family=Muli|Prompt&display=swap" rel="stylesheet">-->
    <link href="https://fonts.googleapis.com/css?family=Lato|Prata&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://kit.fontawesome.com/2f1c9aced8.js" crossorigin="anonymous"></script>
    <link rel="icon" href="img/KICK-2.png">
    <!-- <link rel="icon"
      type="image/png"
      href="img/favicon4.png"> -->

</head>
<body>
    <div class="upper-portion">
        <div class="container">
                <div class="navigation">
                    <div class="kickstarter-success-logo">
                    <img src="img/KICK-2.png" alt="K and S stylized">
                    <p>Kickstarter Success</p>
                    </div>
                    <nav>
                        <a href="index.html">HOME</a>
                        <a href="https://kickstartersuccess.now.sh/">LOGIN</a>
                        <a href="about.html">TEAM</a>
                        <!-- <a href="#about-section-link">ABOUT</a> -->

                    </nav>
                </div>

                <div class="container-top">


                        <section class="intro-section">
                        <div class="cta-text">
                            <div class="white-line">

                            </div>
                            <h1>Predict the success of your Kickstarter Campaign</h1>


                            <!--<button onclick="window.location.href = 'about.html'">Sign Up</button>-->
                        </div>
                        <img src="img/Artboard 1 (1).png" alt="Man Jumping with money in the air">
                    </section>
                </div>
            </div>
    </div>
    <div class="body">

    <div class="body-content">
        <div class="what-is-section">
            <h1>How we make the magic happen</h1>
            <p><b class="bold">Kickstarter Success </b>predicts whether your campaign will be successful so you can take the guessing out of your next fundraising effort! Just input  your  campaign details and we’ll tell you whether your campaign will be successful or help you make adjustments </p>
        </div>
        <div class="chart">
            <div class="chart-inner-content">
            <div>
                <h2>A World of Kickstarters</h2>
                <p>Spin to your hearts desire to see details about campaigns in each country!</p>
            </div>
            <iframe src="https://jbti-kickstarter-success.s3.us-east-2.amazonaws.com/visualizations/staticvisual.html" height="100%" width="50%"></iframe>
        </div>
        </div>

        <div class="kickstarter-stats-container">
            <div class="kickstarter-stats-top">
                <div id="about-section-link"></div>
                <!-- <h1>35%</h1> -->
                <p class="green-4"><b>53.4%</b> of Kickstarter campaigns are successful</p>

                <!-- <h1>$4.5M</h1> -->
                <p class="green-3"><b>$4.5M</b> raised on Kickstarter to date</p>

                <p class="green-2">Successful campains on average last <b>32</b> days</p>

                <p class="green-1">Successful campaigns raise an average of <b>$25K</b></p>
            </div>

            <div class="kickstarter-stats-bot">
                <p class="green-1"><b>Tabletop Games</b> is the top category on Kickstarter</p>

                <p class="green-2">Successful campaigns had an average of <b>289</b> backers</p>

                <p class="green-3b">Campaigns that were successful raised an average of <b>$15k</b> above their goal!</p>

                <p class="green-4"><b>3d Printing</b> is the category with most money raised successfully on average</p>
            </div>
        </div>

        <div class="bottom-portion">
            <div class="natural-language">
                    <img src="img/romain-vignes-ywqa9IZB-dU-unsplash.jpg" alt="zoomed in view of book">


                    <div class="natural-text">
                        <div class="green-line"></div>
                        <h2>Natural Language Processing</h2>
                        <p>From our database of over 280K kickstarter campaigns, we use natural language processing (NLP) to analyze the campaign names and descriptions. The NLP outputs new features used to train our models in order to understand what words and phrases impact a campaign’s performance.</p>
                    </div>
                </div>

                <div class="machine-learning">
                    <div class="machine-text">
                        <div class="green-line"></div>
                        <h2>Machine Learning</h2>
                        <p>Our machine learning model is trained on the kickstarter dataset of over 280K campaigns including information like the campaign name, short description,  category, monetary goal, duration, and country to make predictions on the outcome of your campaign.</p>
                    </div>

                    <img src="img/adi-goldstein-EUsVwEOsblE-unsplash.jpg" alt="computer parts">
                </div>


                <div class="data-analysis">

                    <img src="img/luke-chesser-JKUTrJ4vK00-unsplash.jpg" alt="">
                    <div class="data-text">
                        <div class="green-line"></div>
                        <h2>Data Analysis</h2>
                        <p>We use SQL to query our Database tailored to each user’s project design. It allows for unique results that continuously provide feedback based on the current set-up or any changes that the user would like to make.</p>
                    </div>
                </div>
        </div>

    </div>


    <footer>Copyright</footer>

</div>

</body>
</html>