Skip to content

Commit 834fc2d

Browse files
francelufrancelu
committed
feat: unify background image and misc
1 parent ae428f8 commit 834fc2d

8 files changed

Lines changed: 62 additions & 4855 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,15 @@
88

99
[Milestone 1](#milestone-1) • [Milestone 2](#milestone-2) • [Milestone 3](#milestone-3)
1010

11-
[Here](https://com-480-data-visualization.github.io/DataRizz/) is the link to our website.
11+
Go see our [website](https://com-480-data-visualization.github.io/DataRizz/).
1212

1313
## Milestone 1 (20th March, 5pm)
1414

1515
You can find our report for Milestone 1 in [this file](milestones/milestone1/Milestone1.md)
1616

1717
## Milestone 2 (17th April, 5pm)
1818

19-
**10% of the final grade**
20-
19+
You can find our report for Milestone 2 in [this file](milestones/milestone2/Report_M2.pdf)
2120

2221
## Milestone 3 (29th May, 5pm)
2322

‎milestones/milestone2/Milestone2.md‎

Whitespace-only changes.

‎milestones/milestone2/Report_M2.pdf‎

1.33 MB
Binary file not shown.

‎report_laura.ipynb‎

Lines changed: 0 additions & 4807 deletions
This file was deleted.

‎website/data/delegations_summer.jpg‎

85.9 KB
Loading

‎website/data/delegations_summer.png‎

-131 KB
Binary file not shown.

‎website/index.html‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,15 @@
1313
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css">
1414
<link rel="preconnect" href="https://fonts.googleapis.com">
1515
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16-
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik+Dirt&family=Special+Elite&display=swap"> -->
1716
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Carter+One&family=Delius&display=swap">
1817
</head>
1918

20-
<body>
19+
<body style="--bg-img: url('data/intro_background.jpg')">
2120
<!-- fullPage.js wrapper — must not be <body> -->
2221
<div id="website">
2322

2423
<!-- Each .section becomes a full-screen panel -->
25-
<div class="section" data-anchor="introduction" style="--bg-img: url('data/intro_background.jpg')">
24+
<div class="section" data-anchor="introduction">
2625
<h1>Olympic Inequalities</h1>
2726
<h2>How have sociocultural, economic, and geopolitical contexts been reflected in the Olympics over time?</h2>
2827
<p>
@@ -48,7 +47,7 @@ <h2>How have sociocultural, economic, and geopolitical contexts been reflected i
4847
</p>
4948
</div>
5049

51-
<div class="section" data-anchor="delegations" style="--bg-img: url('data/delegations_background.jpg')">
50+
<div class="section" data-anchor="delegations">
5251
<h2>Where Do the Medal Winners Come From?</h2>
5352
<div class="container" data-anchor="delegations-container">
5453
<div class="text-container" data-anchor="delegations-text">
@@ -69,13 +68,13 @@ <h2>Where Do the Medal Winners Come From?</h2>
6968
</p>
7069
</div>
7170
<div class="image-container" data-anchor="delegations-graph">
72-
<img data-src="data/delegations_summer.png" alt="Delegations Summer" class="full-width">
71+
<img data-src="data/delegations_summer.jpg" alt="Delegations Summer">
7372
</div>
7473
</div>
7574
</div>
7675

77-
<div class="section" data-anchor="gender" style="--bg-img: url('data/gender_background.png')">
78-
<h2>How are women represented in the Olympic Games compared to men?</h2>
76+
<div class="section" data-anchor="gender">
77+
<h2>How has gender representation evolved across Olympic sports and disciplines over time?</h2>
7978
<div class="container" data-anchor="gender-container">
8079
<div class="text-container" data-anchor="gender-text">
8180
<p>
@@ -95,12 +94,12 @@ <h2>How are women represented in the Olympic Games compared to men?</h2>
9594
</p>
9695
</div>
9796
<div class="image-container" data-anchor="gender-graph">
98-
<img data-src="data/gender_evolution.png" alt="Gender Evolution" class="full-width">
97+
<img data-src="data/gender_evolution.png" alt="Gender Evolution">
9998
</div>
10099
</div>
101100
</div>
102101

103-
<div class="section" data-anchor="body" style="--bg-img: url('data/body_background.png');">
102+
<div class="section" data-anchor="body">
104103
<h2>Which body type excels in a particular discipline?</h2>
105104
<div class="container" data-anchor="body-container">
106105
<div class="text-container" data-anchor="body-text">
@@ -121,27 +120,26 @@ <h2>Which body type excels in a particular discipline?</h2>
121120
</p>
122121
</div>
123122
<div class="image-container" data-anchor="body-graph">
124-
<img data-src="data/body_types.png" alt="Body Types" class="full-width">
123+
<img data-src="data/body_types.png" alt="Body Types">
125124
</div>
126125
</div>
127126
</div>
128127

129-
<div class="section" data-anchor="geopolitics" style="--bg-img: url('data/geopolitics_background.jpg');">
128+
<div class="section" data-anchor="geopolitics">
130129
<div class="slide" data-anchor="geopolitics-map">
131-
<h2>How Do Geopolitical Conflicts Affect the Concerned Countries?</h2>
132-
<p>Select a year, then pick a county in conflict.</p>
133-
<p>PS: Swipe right for the statistics.</p>
134-
<img data-src="data/geopolitics_map.png" alt="Geopolitical map" class="full-width">
130+
<h2>How do geopolitical conflicts affect the Olympic Games?</h2>
131+
<p>Select a year and swipe right for the statistics.</p>
132+
<img data-src="data/geopolitics_map.png" alt="Geopolitical map">
135133
</div>
136134
<div class="slide" data-anchor="geopolitics-graphs">
137-
<h2>How Do Geopolitical Conflicts Affect the Concerned Countries?</h2>
138-
<p>Countries in conflict during the period xxx to yyy.</p>
139-
<p>PS: Swipe left to select the conflict.</p>
140-
<img data-src="data/geopolitics_graphs.png" alt="Geopolitical graphs" class="full-width">
135+
<h2>How do geopolitical conflicts affect the Olympic Games?</h2>
136+
<p>Countries in conflict during the year XXX.</p>
137+
<p>PS: Swipe left to select another year.</p>
138+
<img data-src="data/geopolitics_graphs.png" alt="Geopolitical graphs">
141139
</div>
142140
</div>
143141

144-
<div class="section" data-anchor="fair" style="--bg-img: url('data/fair_background.jpg');">
142+
<div class="section" data-anchor="fair">
145143
<h2>What would a fair distribution of Olympic medals look like?</h2>
146144
<div class="container" data-anchor="body-container">
147145
<div class="text-container" data-anchor="body-text">
@@ -162,12 +160,12 @@ <h2>What would a fair distribution of Olympic medals look like?</h2>
162160
</p>
163161
</div>
164162
<div class="image-container" data-anchor="body-graph">
165-
<img data-src="data/fair_medal_distribution.png" alt="Fair Medal Distribution" class="full-width">
163+
<img data-src="data/fair_medal_distribution.png" alt="Fair Medal Distribution">
166164
</div>
167165
</div>
168166
</div>
169167

170-
<div class="section" data-anchor="conclusion" style="--bg-img: url('data/conclusion_background.jpg');">
168+
<div class="section" data-anchor="conclusion">
171169
<h2>Conclusion</h2>
172170
<p>
173171
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -192,7 +190,7 @@ <h2>Conclusion</h2>
192190
</p>
193191
</div>
194192

195-
<div class="section fp-auto-height" data-anchor="about" style="background-color: rgb(23, 23, 111);">
193+
<div class="section fp-auto-height" data-anchor="about">
196194
<footer>
197195
<h2>About the Team</h2>
198196
<p style="text-align: center;">
@@ -201,35 +199,38 @@ <h2>About the Team</h2>
201199
<div class="container" data-anchor="about-container">
202200
<div class="about-container" data-anchor="about-text">
203201
<div class="about-person" data-anchor="about-hana">
204-
<div class="about-image" data-anchor="about-hana-image">
205-
<img data-src="data/about-hana.png" alt="Hana Salvetová" class="full-width">
202+
<div class="about-people-image" data-anchor="about-hana-image">
203+
<img data-src="data/about-hana.png" alt="Hana Salvetová">
206204
</div>
207205
<div class="text-container" data-anchor="about-hana-text">
208206
<h3>Hana Salvetová</h3>
209207
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
210208
</div>
211209
</div>
212210
<div class="about-person" data-anchor="about-laura">
213-
<div class="about-image" data-anchor="about-laura-image">
214-
<img data-src="data/about-laura.jpg" alt="Laura Taghizad" class="full-width">
211+
<div class="about-people-image" data-anchor="about-laura-image">
212+
<img data-src="data/about-laura.jpg" alt="Laura Taghizad">
215213
</div>
216214
<div class="text-container" data-anchor="about-laura-text">
217215
<h3>Laura Taghizad</h3>
218216
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
219217
</div>
220218
</div>
221219
<div class="about-person" data-anchor="about-france">
222-
<div class="about-image" data-anchor="about-france-image">
223-
<img data-src="data/about-france.jpg" alt="France Lu" class="full-width">
220+
<div class="about-people-image" data-anchor="about-france-image">
221+
<img data-src="data/about-france.jpg" alt="France Lu">
224222
</div>
225223
<div class="text-container" data-anchor="about-france-text">
226224
<h3>France Lu</h3>
227225
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
228226
</div>
229227
</div>
230228
</div>
231-
<div class="about-team-image" data-anchor="about-team-image">
232-
<img data-src="data/about-datarizz.jpg" alt="About DataRizz" class="full-width">
229+
<div class="about-team" data-anchor="about-team">
230+
<div class="about-team-image" data-anchor="about-team-image">
231+
<img data-src="data/about-datarizz.jpg" alt="About DataRizz">
232+
</div>
233+
<h3>DataRizz</h3>
233234
</div>
234235
</div>
235236
</footer>
@@ -259,7 +260,11 @@ <h2>Project Gamma</h2>
259260
navigation: true,
260261
navigationPosition: 'right',
261262
scrollingSpeed: 700,
263+
slidesNavigation: true,
262264
controlArrows: false,
265+
continuousHorizontal: false,
266+
loopHorizontal: false,
267+
scrollHorizontally: true,
263268
});
264269
</script>
265270

‎website/styles.css‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,25 @@
2525

2626
body {
2727
text-align: center;
28-
}
29-
30-
.section {
3128
background-attachment: fixed;
3229
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--bg-img);
3330
background-position: center;
3431
background-repeat: no-repeat;
3532
background-size: cover;
33+
}
34+
35+
.section {
3636
padding: 3%;
3737
}
3838

3939
/* =============================================
40-
Layout for the slides
40+
Styles for the navigation dots
4141
=========================================== */
4242

43-
.slide img {
44-
width: 100%;
45-
height: auto;
46-
display: block;
43+
/* active dot */
44+
#fp-nav ul li a.active span,
45+
.fp-slidesNav ul li a.active span {
46+
background: white; /* active color */
4747
}
4848

4949
/* =============================================
@@ -52,7 +52,6 @@ body {
5252

5353
.container {
5454
display: flex;
55-
flex-direction: row;
5655
gap: 2%;
5756
align-items: center; /* vertical alignment */
5857
justify-content: start; /* horizontal alignment */
@@ -72,6 +71,17 @@ body {
7271
display: block;
7372
}
7473

74+
/* =============================================
75+
Layout for the slides
76+
=========================================== */
77+
78+
.slide img {
79+
width: 100%;
80+
height: auto;
81+
display: block;
82+
position: center;
83+
}
84+
7585
/* =============================================
7686
Headers and paragraphs
7787
=========================================== */
@@ -109,19 +119,19 @@ p {
109119
/* =============================================
110120
Layout for the "About the Team" section
111121
=========================================== */
112-
.about-container {
113-
flex: 1;
122+
.about-container,
123+
.about-team {
114124
display: flex;
115125
flex-direction: column;
116126
gap: 2%;
117127
align-items: center;
118128
}
119129

120-
.about-team-image {
130+
.about-team {
121131
width: 25%;
122132
}
123133

124-
.about-image img,
134+
.about-people-image img,
125135
.about-team-image img {
126136
border-radius: 50%;
127137
height: auto;
@@ -131,7 +141,7 @@ p {
131141
.about-team-image img {
132142
width: 300px;
133143
}
134-
.about-image img {
144+
.about-people-image img {
135145
background-color: white;
136146
width: 150px;
137147
}

0 commit comments

Comments
 (0)