-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (152 loc) · 7.77 KB
/
index.html
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery refactor link -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<!-- ======= Nav Bar Section & Head Tag files imported from another file ======= -->
<div id="nav-placeholder"></div>
<script>
$.get("navBar.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="container"> <!--data-aos="fade-in" data-aos-delay="100"-->
<div class="row d-flex align-items-center">
<div class="col-lg-6 py-5 py-lg-5 order-1 order-lg-1">
<h1>We Use Machine Learning to Read Terms and Conditions For You</h1>
<h2></br>Nobody reads web site Terms & Conditions.</br></br>But they should.<span class="emphasis"> 91% of all users</span> consent without reading at all. The 9% who do read usually stop after the first paragraph.</h2>
<h2>ClearTerms helps Internet users better understand the policies they are implicitly agreeing to <span class="emphasis">by highlighting the important ones.</span></h2>
<br>
<!-- <div class="d-flex justify-content-center">
<a href="browse.html" class="btn-get-started">Browse Companies</a>
</div> -->
</div>
<div class="col-lg-6 px-5 order-2 order-lg-2 company-img">
<a href="company.html"><img src="assets/img/uniqlo_logo.png" width=22% height=22% alt="website placeholder"></a>
<a href="company3.html"><img src="assets/img/logitech-squarelogo.png" width=22% height=22% alt="website placeholder"></a>
<a href="company4.html"><img src="assets/img/hp-logo.png" width=22% height=22% alt="website placeholder"></a>
<a href="company2.html"><img src="assets/img//Samsung-logo-2017-square.png" width=22% height=22% alt="website placeholder"></a>
</br>
<a href="company4.html"><img src="assets/img/hp-logo.png" width=22% height=22% alt="website placeholder"></a>
<a href="company.html"><img src="assets/img/uniqlo_logo.png" width=22% height=22% alt="website placeholder"></a>
<a href="company2.html"><img src="assets/img//Samsung-logo-2017-square.png" width=22% height=22% alt="website placeholder"></a>
<a href="company3.html"><img src="assets/img/logitech-squarelogo.png" width=22% height=22% alt="website placeholder"></a>
</br>
</br>
<div class="d-flex justify-content-center">
<a href="browse.html" class="btn-get-started">Browse All Companies</a>
</div>
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about section-bg1">
<div class="container">
<div class="row">
<div class="image col-xl-5 d-flex align-items-stretch justify-content-center justify-content-lg-start"></div>
<div class="col-xl-7 pl-0 pl-lg-5 pr-lg-1 d-flex align-items-stretch">
<div class="content d-flex flex-column">
<h3>How does ClearTerms work?</h3>
<div class="row">
<div class="col-md-6">
<!-- <i class="bx bx-receipt"></i> -->
<h4>Pairwise comparison</h4>
<p>Rather than asking volunteers to read entire documents and flag all of the important terms,
<span class="emphasis">ClearTerms breaks the complex task into small parts;</span> individuals only need to compare two items at a time.</p>
</div>
<div class="col-md-6">
<!-- <i class="bx bx-images"></i> -->
<h4>Open definition of "importance"</h4>
<p>Existing solutions use pre-defined criteria, which may innaccurately reflect what people really care about.</p>
<p>We do not assume a priori what consumers find important. Instead, we let individuals define “importance” on their own terms - and it turns out that <span class="emphasis">people tend to agree.</span></p>
</div>
</div>
<br>
<div class="d-flex justify-content-center">
<a href="faq.html" class="btn-get-started">Frequently Asked Questions</a>
</div>
</div><!-- End .content-->
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Slider Section ======= -->
<section id="services" class="about section-bg2">
<div class="container">
<div class="row">
<div class="col-xl-7 pl-0 pl-lg-5 pr-lg-1 d-flex align-items-stretch">
<div class="content d-flex flex-column">
<h3>Hundreds of ecommerce sites, with terms ranked by users like you.</h3>
</div>
</div>
</div>
<br>
<!-- slick slider here -->
<div class="row centermode-slick">
<div class="slick-item"><a href="company.html">
<img src="assets/img/uniqlo_logo.png" alt="company placeholder"></a>
</div>
<div class="slick-item"><a href="company2.html">
<img src="assets/img//Samsung-logo-2017-square.png" alt="website placeholder"></a>
</div>
<div class="slick-item"><a href="company3.html">
<img src="assets/img/logitech-squarelogo.png" alt="website placeholder"></a>
</div>
<div class="slick-item"><a href="#">
<img src="assets/img/company-placeholder.png" alt="website placeholder"></a>
</div>
<div class="slick-item"><a href="company4.html">
<img src="assets/img/hp-logo.png" alt="website placeholder"></a>
</div>
<div class="slick-item"><a href="company5.html">
<img src="assets/img/selfridges.png" alt="website placeholder"></a>
</div>
</div>
<br>
<br>
<div class="d-flex justify-content-center">
<a href="crowd.html" class="btn-get-started">Help Us Rank Terms & Conditions</a>
</div>
<br>
<div class="d-flex justify-content-center">
<a href="crowd.html" class="btn-get-started">Browse Companies</a>
</div>
</div>
</section><!-- End Slider Section -->
</main><!-- End #main -->
<!-- ======= Footer & JS files + Firebase imported from another file ======= -->
<div id="footer-placeholder"></div>
<script>
$.get("footer.html", function(data){
$("#footer-placeholder").replaceWith(data);
});
</script>
<!-- Top of page arrow -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
<!-- slick slider -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<!-- FIREBASE -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
<!-- Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script>
<!-- END FIREBASE -->
</body>
</html>