Skip to content

Commit c4a4a6d

Browse files
swz-gitswz-git
authored
Languages are now in two collumns when page is wide enough (#45)
Co-authored-by: SWZ <[email protected]>
1 parent 07eb7f1 commit c4a4a6d

File tree

2 files changed

+87
-62
lines changed

2 files changed

+87
-62
lines changed

‎css/style.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,24 @@ img:hover.gray-to-color {
102102
a h1, a:hover h1 {
103103
color: rgb(33, 37, 41);
104104
}
105+
106+
.languages {
107+
display: flex;
108+
flex-wrap: wrap;
109+
gap: 2%
110+
}
111+
112+
.languages a {
113+
width: 100%;
114+
}
115+
116+
@media (min-width: 1200px) {
117+
.languages a {
118+
width: 49%;
119+
}
120+
}
121+
122+
.languages .card {
123+
height: 8rem;
124+
margin-bottom: 1rem;
125+
}

‎index.html

Lines changed: 66 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -60,76 +60,80 @@ <h5 class="card-title">What is RLBot?</h5>
6060
</div>
6161
</div>
6262

63-
<a href="https://github.com/RLBot/RLBotScratchInterface">
64-
<div class="card mb-3">
65-
<div class="card-body">
66-
<img src="scratchcat.png" class="card-image-right">
67-
<h5 class="card-title">Scratch</h5>
68-
<p>Program your first bot using Scratch!</p>
63+
<div class="languages">
64+
<a href="https://github.com/RLBot/RLBotScratchInterface">
65+
<div class="card">
66+
<div class="card-body">
67+
<img src="scratchcat.png" class="card-image-right">
68+
<h5 class="card-title">Scratch</h5>
69+
<p>Program your first bot using Scratch!</p>
70+
</div>
6971
</div>
70-
</div>
71-
</a>
72-
73-
<a href="https://github.com/RLBot/RLBotPythonExample">
74-
<div class="card mb-3">
75-
<div class="card-body">
76-
<img src="python.png" class="card-image-right">
77-
<h5 class="card-title">Python</h5>
78-
<p>Write a more advanced bot in Python!</p>
72+
</a>
73+
74+
<a href="https://github.com/RLBot/RLBotPythonExample">
75+
<div class="card">
76+
<div class="card-body">
77+
<img src="python.png" class="card-image-right">
78+
<h5 class="card-title">Python</h5>
79+
<p>Write a more advanced bot in Python!</p>
80+
</div>
7981
</div>
80-
</div>
81-
</a>
82-
83-
<a href="https://github.com/RLBot/RLBotJavaExample">
84-
<div class="card mb-3">
85-
<div class="card-body">
86-
<img src="java.png" class="card-image-right">
87-
<h5 class="card-title">Java</h5>
88-
<p>Build an <em>enterprise</em> bot in Java!</p>
82+
</a>
83+
84+
<a href="https://github.com/RLBot/RLBotJavaExample">
85+
<div class="card">
86+
<div class="card-body">
87+
<img src="java.png" class="card-image-right">
88+
<h5 class="card-title">Java</h5>
89+
<p>Build an <em>enterprise</em> bot in Java!</p>
90+
</div>
8991
</div>
90-
</div>
91-
</a>
92-
93-
<a href="https://github.com/RLBot/RLBotCSharpExample">
94-
<div class="card mb-3">
95-
<div class="card-body">
96-
<img src="csharp.png" class="card-image-right">
97-
<h5 class="card-title">C#</h5>
98-
<p>Create a <em>professional</em> bot in C# (or any other .NET language)!</p>
92+
</a>
93+
94+
<a href="https://github.com/RLBot/RLBotCSharpExample">
95+
<div class="card">
96+
<div class="card-body">
97+
<img src="csharp.png" class="card-image-right">
98+
<h5 class="card-title">C#</h5>
99+
<p>Create a <em>professional</em> bot in C# (or any other .NET language)!</p>
100+
</div>
99101
</div>
100-
</div>
101-
</a>
102-
103-
<a href="https://github.com/kipje13/CPPExampleBot">
104-
<div class="card mb-3">
105-
<div class="card-body">
106-
<img src="cpp.png" class="card-image-right">
107-
<h5 class="card-title">C++</h5>
108-
<p>Create an <em>incredible</em> bot in C++!</p>
102+
</a>
103+
104+
<a href="https://github.com/kipje13/CPPExampleBot">
105+
<div class="card">
106+
<div class="card-body">
107+
<img src="cpp.png" class="card-image-right">
108+
<h5 class="card-title">C++</h5>
109+
<p>Create an <em>incredible</em> bot in C++!</p>
110+
</div>
109111
</div>
110-
</div>
111-
</a>
112-
113-
<a href="https://crates.io/crates/rlbot">
114-
<div class="card mb-3">
115-
<div class="card-body">
116-
<img src="rust.svg" class="card-image-right">
117-
<h5 class="card-title">Rust</h5>
118-
<p>Create a <em>blazingly fast</em> bot in Rust!</p>
112+
</a>
113+
114+
<a href="https://crates.io/crates/rlbot">
115+
<div class="card">
116+
<div class="card-body">
117+
<img src="rust.svg" class="card-image-right">
118+
<h5 class="card-title">Rust</h5>
119+
<p>Create a <em>blazingly fast</em> bot in Rust!</p>
120+
</div>
119121
</div>
120-
</div>
121-
</a>
122-
123-
<a href="https://github.com/SWZ-github/EasyRLBotExample">
124-
<div class="card mb-3">
125-
<div class="card-body">
126-
<img src="javascript.png" class="card-image-right">
127-
<h5 class="card-title">JavaScript</h5>
128-
<p>Make a supersonic <em>V8-powered</em> bot with JavaScript!</p>
122+
</a>
123+
124+
<a href="https://github.com/SWZ-github/EasyRLBotExample">
125+
<div class="card">
126+
<div class="card-body">
127+
<img src="javascript.png" class="card-image-right">
128+
<h5 class="card-title">JavaScript</h5>
129+
<p>Make a supersonic <em>V8-powered</em> bot with JavaScript!</p>
130+
</div>
129131
</div>
130-
</div>
131-
</a>
132+
</a>
133+
</div>
134+
132135
</div>
136+
133137
<div class="col-lg-4">
134138

135139
<a href="./tournament">

0 commit comments

Comments
 (0)