Skip to content

Commit 522866e

Browse files
AristurtleDevAristurtleDev
authored
Add carousel for docs landing page (#197)
1 parent bccf470 commit 522866e

File tree

3 files changed

+167
-1
lines changed

3 files changed

+167
-1
lines changed

‎images/learn/2d-tutorial.webp‎

6.44 KB
Loading

‎index.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,59 @@ description: MonoGame Documentation Hub
1010
Whether you are just starting out with MonoGame or you have been using it for years, you can find all documentation and
1111
tutorials here.
1212
</p>
13+
<div id="learnCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
14+
<div class="carousel-indicators">
15+
<button type="button" data-bs-target="#learnCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="2D Tutorial Slide"></button>
16+
<!-- <button type="button" data-bs-target="#learnCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> -->
17+
<!-- <button type="button" data-bs-target="#learnCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> -->
18+
</div>
19+
<div class="carousel-inner">
20+
<div class="carousel-item active">
21+
<img src="/images/learn/2d-tutorial.webp">
22+
<div class="container">
23+
<div class="carousel-caption text-start">
24+
<h1>Build Your First 2D Game</h1>
25+
<p class="opacity-75">
26+
Follow our step-by-step guide to create your first MonoGame 2D project.
27+
</p>
28+
<p>
29+
<a class="btn btn-lg btn-primary" href="/articles/tutorials/building_2d_games/index.html">Start Tutorial</a>
30+
</p>
31+
</div>
32+
</div>
33+
</div>
34+
<!--
35+
<div class="carousel-item">
36+
<img src="/images/learn/shader-tutrial.png">
37+
<div class="container">
38+
<div class="carousel-caption text-start">
39+
<h1>Master Shaders</h1>
40+
<p class="opacity-75">
41+
Learn how to bring your graphics to life with custom effects
42+
</p>
43+
<p>
44+
<a class="btn btn-lg btn-pirmary" href="#">Coming Soon</a>
45+
</p>
46+
</div>
47+
</div>
48+
</div>
49+
<div class="carousel-item">
50+
<img src="/images/learn/mobile-tutorial.png">
51+
<div class="container">
52+
<div class="carousel-caption text-start">
53+
<h1>Deploy to Mobile</h1>
54+
<p class="opacity-75">
55+
Take your MonoGame project to Android and iOS.
56+
</p>
57+
<p>
58+
<a class="btn btn-lg btn-pirmary" href="#">Coming Soon</a>
59+
</p>
60+
</div>
61+
</div>
62+
</div>
63+
-->
64+
</div>
65+
</div>
1366
</section>
1467
<section class="container-xxl mb-5" >
1568
<div class="row">

‎templates/monogame/public/main.css‎

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,4 +308,117 @@ td > .xref {
308308

309309
.question-answer.revealed * {
310310
opacity: 1;
311-
}
311+
}
312+
313+
/*******************************************************************************
314+
*** Section: Carousel for docs landing page
315+
*******************************************************************************/
316+
.carousel {
317+
margin-bottom: 3rem;
318+
border: 1px solid;
319+
border-color: var(--bs-body-color);
320+
border-radius: .5rem;
321+
overflow: hidden;
322+
}
323+
324+
.carousel-item {
325+
height: 400px;
326+
position: relative;
327+
}
328+
329+
.carousel-item img {
330+
width: 100%;
331+
height: 100%;
332+
object-fit: cover;
333+
object-position: center;
334+
}
335+
336+
.carousel-item::after {
337+
content: '';
338+
position: absolute;
339+
top: 0;
340+
left: 0;
341+
right: 0;
342+
bottom: 0;
343+
background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 50%);
344+
pointer-events: none;
345+
}
346+
347+
.carousel-caption {
348+
bottom: 0;
349+
left: 0;
350+
right: auto;
351+
text-align: left;
352+
padding: 3rem;
353+
z-index: 10;
354+
max-width: 600px;
355+
color: white;
356+
}
357+
358+
.carousel-caption h1 {
359+
margin-top: 0;
360+
font-weight: 700;
361+
color: white;
362+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
363+
}
364+
365+
.carousel-caption p {
366+
color: white;
367+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
368+
margin-bottom: 1.5rem;
369+
}
370+
371+
.carousel-caption .btn {
372+
background-color: var(--mg-orange-primary);
373+
border-color: var(--mg-orange-primary);
374+
color: white;
375+
font-weight: 600;
376+
padding: 0.75rem 2rem;
377+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
378+
transition: all 0.2s ease-in-out;
379+
}
380+
381+
.carousel-caption .btn:hover,
382+
.carousel-caption .btn:focus {
383+
background-color: var(--mg-orange-secondary);
384+
border-color: var(--mg-orange-secondary);
385+
transform: translateY(-2px);
386+
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.4);
387+
}
388+
389+
.carousel-indicators {
390+
margin-bottom: 1rem;
391+
}
392+
393+
.carousel-indicators [data-bs-target] {
394+
background-color: var(--mg-orange-secondary) !important;
395+
opacity: 0.6;
396+
width: 12px;
397+
height: 12px;
398+
border-radius: 50%;
399+
border: none;
400+
}
401+
402+
.carousel-indicators .active {
403+
opacity: 1;
404+
background-color: var(--mg-orange-primary) !important;
405+
}
406+
407+
@media (max-width: 768px) {
408+
.carousel-item {
409+
height: 300px;
410+
}
411+
412+
.carousel-caption {
413+
padding: 2rem 1rem;
414+
max-width: 100%;
415+
}
416+
417+
.carousel-caption h1 {
418+
font-size: 1.75rem;
419+
}
420+
421+
.carousel {
422+
margin-bottom: 3rem;
423+
}
424+
}

0 commit comments

Comments
 (0)