-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (75 loc) · 4.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Rainbow 6 Nephew Tracker</title>
</head>
<body>
<header id="showcase" class="grid">
<!-- Seperate image to add opacity etc so Header text is not faded -->
<div class="bg-image"></div>
<div class="content-wrap">
<h1>Rainbow 6 Nephew Tracker</h1>
<div id="portrait"></div>
<!-- <a href="steam://rungameid/359550" class="btn">Let's play..</a> -->
<p>How many hours a week is Jack playing Rainbow 6? Is he Diamond yet? Is he still using shotguns?</p>
</div>
</header>
<!-- Main area-->
<main id="main">
<section id="section-a" class="grid">
<div class="content-wrap">
<h2 class="content-title">Jack's Rainbow 6 Stats</h2>
<div id="rank" class="grid"></div>
<div class="content-text">
<p>
Below are some of Jack's statistics taken from the uPlay database. These are updated in real time and I'm trying to fill in the content here to see if the grid is working.
</p>
</div>
<section id="section-b" class="grid">
<ul>
<li>
<div class="card">
<img src="https://ubistatic19-a.akamaihd.net/resource/en-us/game/rainbow6/siege-v3/r6-operators-list-caveira_317261.png" alt="operatorCard1">
<p>Jacks most played operator is <div id="mostPlayed"> Caveira..</p>
</div>
</li>
<li>
<div class="card">
<img src="https://ubistatic19-a.akamaihd.net/resource/en-us/game/rainbow6/siege-v3/r6-operators-list-thatcher_317283.png" alt="operatorCard2">
<p>Jacks operator with the highest win rate is <div id="highestWinRate">Thatcher </p>
</div>
</li>
<li>
<div class="card">
<img src="https://ubistatic19-a.akamaihd.net/resource/en-us/game/rainbow6/siege-v3/r6-operators-list-twitch_317285.png" alt="operatorCard3">
<p>Jacks most used weapon is Twitch's FA-MAS..</p>
</div>
</li>
</ul>
</section>
<section id="section-c" class="grid">
<div class="content-wrap">
<h2 class="content-title">Not sure what to put here</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem inventore ducimus aut ad rem soluta in sint quae error dicta ipsa expedita facilis nulla asperiores ex sunt quas itaque placeat quia blanditiis nam labore, voluptate dolore. Ratione deserunt asperiores in, animi ut nobis beatae magnam fuga alias consequuntur minima aperiam.</p>
</div>
</section>
<section id="section-d" class="grid">
<div class="box">
<h2 class="content-title">Contact us</h2>
<p>If you have any questions please get in touch on the below e-mail address: </p>
<a>[email protected]</a>
</div>
<div class="box">
<h2 class="content-title">About the application</h2>
<p>This is a project based on a CSS Grid tutorial and incorporates technology from a widget I created to work with the now defunct R6DB.com (RIP).</p>
</div>
</section>
</section>
</main>
<script type="text/javascript" src="scrapeandbake.js"></script>
</body>
</html>