-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathDataPage.html
58 lines (55 loc) · 2.5 KB
/
DataPage.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Page</title>
<link rel="stylesheet" href="vendor/tachyons/tachyons.min.css">
<script src="js/d3.v6.js"></script>
</head>
<body class="Roboto pa1">
<section class="cf w-100 pv3 ba flex flex-wrap">
<div class="fl w-100 f4">
<h1>Basic Experimenting Interaction </h1>
</div>
<div class="pv3 ba w-50 w-100-m">
<svg width="500" height="300" class="bg-green"></svg>
</div>
<div class="pv3 ba w-50 w-100-m">
<img src="./images/pythonPack.png"></img>
</div>
</section>
<section class="cf w-100 pv1 ph3 ph4-ns ba">
<div class="flex">
<div class="fl w-third">
<p class="f6 b ttc pv0">Question 1</p>
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(./images/pythonPack.png);" class="cover bg-center aspect-ratio--object"></span>
</div>
<p class="lh-copy f7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis</p>
</div>
<div class="fl w-third">
<p class="f6 b ttc pv0">Question 2</p>
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(https://picsum.photos/id/80/200/300);" class="cover bg-center aspect-ratio--object"></span>
</div>
<p class="lh-copy f7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis</p>
</div>
<div class="fl w-third">
<p class="f6 b ttc pv0">Question 3</p>
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(https://picsum.photos/id/10/200/300);" class="cover bg-center aspect-ratio--object"></span>
</div>
<p class="lh-copy f7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis</p>
</div>
</div>
</section>
</body>
</html>