Skip to content

Commit b855100

Browse files
francelufrancelu
committed
feat: add background images (opacity 0.5)
1 parent cb0c578 commit b855100

10 files changed

Lines changed: 32 additions & 24 deletions

‎website/data/body_background.png‎

1.76 MB
Loading

‎website/data/conclusion_background.jpg‎

1.98 MB
Loading

‎website/data/delegations_background.jpg‎

685 KB
Loading

‎website/data/fair_background copy.jpg‎

337 KB
Loading

‎website/data/fair_background.jpg‎

337 KB
Loading

‎website/data/gender_background.png‎

1.33 MB
Loading

‎website/data/geopolitics_background.jpg‎

211 KB
Loading

‎website/data/intro_background.jpg‎

1.79 MB
Loading

‎website/index.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,16 @@
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">
16+
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik+Dirt&family=Special+Elite&display=swap"> -->
17+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Carter+One&family=Special+Elite&display=swap">
1718
</head>
1819

1920
<body>
2021
<!-- fullPage.js wrapper — must not be <body> -->
2122
<div id="website">
2223

2324
<!-- Each .section becomes a full-screen panel -->
24-
<div class="section" data-anchor="introduction">
25+
<div class="section" data-anchor="introduction" style="--bg-img: url('data/intro_background.jpg')">
2526
<h1>Olympic Inequalities</h1>
2627
<h2>How have sociocultural, economic, and geopolitical contexts been reflected in the Olympics over time?</h2>
2728
<p>
@@ -36,32 +37,32 @@ <h2>How have sociocultural, economic, and geopolitical contexts been reflected i
3637
</p>
3738
</div>
3839

39-
<div class="section" data-anchor="delegations">
40+
<div class="section" data-anchor="delegations" style="--bg-img: url('data/delegations_background.jpg')">
4041
<h2>Which delegations perform the best in the disciplines?</h2>
4142
<img data-src="data/delegations_summer.png" alt="Delegations Summer" class="full-width">
4243
</div>
4344

44-
<div class="section" data-anchor="gender">
45+
<div class="section" data-anchor="gender" style="--bg-img: url('data/gender_background.png')">
4546
<h2>How unbalanced are the Olympic Games between men and women?</h2>
4647
<img data-src="data/gender_evolution.png" alt="Gender Evolution" class="full-width">
4748
</div>
4849

49-
<div class="section" data-anchor="body">
50+
<div class="section" data-anchor="body" style="--bg-img: url('data/body_background.png');">
5051
<h2>Which body type excels in a particular discipline?</h2>
5152
<img data-src="data/body_types.png" alt="Body Types" class="full-width">
5253
</div>
5354

54-
<div class="section" data-anchor="geopolitics">
55-
<h2>How do geopolitical conflicts influence the concerned delagations at the Olympic Gymes?</h2>
55+
<div class="section" data-anchor="geopolitics" style="--bg-img: url('data/geopolitics_background.jpg');">
56+
<h2>How do geopolitical conflicts influence the concerned delagations at the Olympic Games?</h2>
5657
<img data-src="data/geopolitical_conflicts.png" alt="Geopolitical conflicts" style="max-width: fit-content; max-height: fit-content;">
5758
</div>
5859

59-
<div class="section" data-anchor="fair">
60+
<div class="section" data-anchor="fair" style="--bg-img: url('data/fair_background.jpg');">
6061
<h2>How would a fair distribution of medals look like?</h2>
6162
<img data-src="data/fair_medal_distribution.png" alt="Fair Medal Distribution" class="full-width">
6263
</div>
6364

64-
<div class="section" data-anchor="conclusion">
65+
<div class="section" data-anchor="conclusion" style="--bg-img: url('data/conclusion_background.jpg');">
6566
<h2>Conclusion</h2>
6667
<p>
6768
Lorem ipsum dolor sit amet consectetur adipiscing elit.
@@ -75,7 +76,7 @@ <h2>Conclusion</h2>
7576
</p>
7677
</div>
7778

78-
<div class="section fp-auto-height" data-anchor="footer">
79+
<div class="section fp-auto-height" data-anchor="footer" style="background-color: black;">
7980
<footer>
8081
<p>Made by France Lu, Laura Taghizad, and Hana Salvetová for COM-480 Data Visualization at EPFL.</p>
8182
</footer>

‎website/styles.css‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
/* =============================================
22
Import Google Fonts
33
=========================================== */
4-
.special-elite-regular {
5-
font-family: "Special Elite", system-ui;
4+
.carter-one-regular {
5+
font-family: "Carter One", system-ui;
66
font-weight: 400;
77
font-style: normal;
88
}
99

10-
.rubik-dirt-regular {
11-
font-family: "Rubik Dirt", system-ui;
10+
.special-elite-regular {
11+
font-family: "Special Elite", system-ui;
1212
font-weight: 400;
1313
font-style: normal;
1414
}
1515

16-
1716
/* =============================================
1817
General styles
1918
=========================================== */
@@ -23,27 +22,35 @@ body {
2322
}
2423

2524
.section {
26-
padding: 5%;
25+
background-attachment: fixed;
26+
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--bg-img);
27+
background-repeat: no-repeat;
28+
background-size: cover;
29+
padding: 3%;
2730
}
2831

2932
/* =============================================
3033
Headers and paragraphs
3134
=========================================== */
35+
h1, h2, p {
36+
color: white;
37+
}
3238

33-
h1 {
34-
font-family: "Rubik Dirt", system-ui;
35-
font-size: 40px;
39+
h1, h2 {
40+
font-family: "Carter One", sans-serif;
3641
text-align: center;
3742
}
3843

44+
h1 {
45+
font-size: 60px;
46+
}
47+
3948
h2 {
40-
font-family: "Rubik Dirt", system-ui;
41-
font-size: 32px;
42-
text-align: center;
49+
font-size: 40px;
4350
}
4451

4552
p {
4653
font-family: "Special Elite", system-ui;
54+
font-size: 24px;
4755
text-align: justify;
48-
}
49-
56+
}

0 commit comments

Comments
 (0)