Skip to content

Commit 9c0175a

Browse files
mrleeiomrleeio
committed
Update index.html
1 parent 6474088 commit 9c0175a

File tree

4 files changed

+116
-35
lines changed

4 files changed

+116
-35
lines changed

‎_layouts/layout.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,20 @@
5151
{{ content }}
5252
</div>
5353

54+
<div class="container">
55+
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
56+
<p class="col-md-4 mb-0 text-body-secondary">© 2025 VanRuby</p>
57+
58+
<a class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" href="{{ site.baseurl }}/">
59+
<img src="/images/van_ruby_logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
60+
</a>
61+
62+
<ul class="nav col-md-4 justify-content-end">
63+
<li class="nav-item"><a href="{{ site.baseurl }}/" class="nav-link px-2 text-body-secondary">Home</a></li>
64+
</ul>
65+
</footer>
66+
</div>
67+
5468
<script src="js/bootstrap.bundle.min.js" defer></script>
5569
<script src="js/toggle-color-mode.js" defer></script>
5670
</body>

‎images/events/janeapp-sept-2024.jpg‎

987 KB
Loading

‎images/events/klue-oct-2024.jpg‎

1020 KB
Loading

‎index.html‎

Lines changed: 102 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -40,44 +40,111 @@ <h5 class="card-title">Community Driven</h5>
4040
</div>
4141
</div>
4242

43-
<div class="pb-2 pt-4 mb-4 bg-body-tertiary rounded-3 theme-dependent-bg">
44-
<div class="container-fluid">
45-
<div class="row">
46-
<div class="col-12">
47-
<h2 class="text-center mb-4">Upcoming Events</h2>
48-
<iframe
49-
src="https://lu.ma/embed/calendar/cal-ek97jTetLbE3c6t/events"
50-
width="100%"
51-
height="500"
52-
frameborder="0"
53-
style="border-radius: 6px;"
54-
allowfullscreen=""
55-
aria-hidden="false"
56-
tabindex="0"
57-
></iframe>
43+
<div id="carouselExampleCaptions" class="carousel slide">
44+
<div class="carousel-indicators">
45+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
46+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
47+
</div>
48+
<div class="carousel-inner rounded-3">
49+
<div class="carousel-item active">
50+
<img src="/images/events/janeapp-sept-2024.jpg" class="d-block w-100 carousel-image" alt="Jane App October 2024">
51+
<div class="carousel-caption d-none d-md-block">
52+
<h5>Jane App</h5>
53+
<p>October 2024</p>
54+
</div>
55+
</div>
56+
<div class="carousel-item">
57+
<img src="/images/events/klue-oct-2024.jpg" class="d-block w-100 carousel-image" alt="Klue September 2024">
58+
<div class="carousel-caption d-none d-md-block">
59+
<h5>Klue</h5>
60+
<p>September 2024</p>
5861
</div>
5962
</div>
6063
</div>
64+
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
65+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
66+
<span class="visually-hidden">Previous</span>
67+
</button>
68+
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
69+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
70+
<span class="visually-hidden">Next</span>
71+
</button>
6172
</div>
6273

63-
<script>
64-
document.addEventListener('DOMContentLoaded', function() {
65-
const theme = document.documentElement.getAttribute('data-bs-theme');
66-
const themeDependentBg = document.querySelector('.theme-dependent-bg');
67-
const iframe = document.getElementById('eventsIframe');
74+
<style>
75+
.carousel-image {
76+
max-height: 500px;
77+
object-fit: cover;
78+
object-position: center;
79+
}
80+
</style>
6881

69-
if (theme === 'dark') {
70-
themeDependentBg.style.backgroundColor = 'rgba(33, 35, 37, 1)';
71-
iframe.onload = function() {
72-
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
73-
iframeDocument.body.style.backgroundColor = 'rgba(33, 35, 37, 1)';
74-
};
75-
} else {
76-
themeDependentBg.style.backgroundColor = 'rgba(244, 245, 246, 1)';
77-
iframe.onload = function() {
78-
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
79-
iframeDocument.body.style.backgroundColor = 'rgba(244, 245, 246, 1)';
80-
};
81-
}
82-
});
83-
</script>
82+
<div class="container px-4 py-2" id="hanging-icons">
83+
<div class="row g-4 py-4 row-cols-1 row-cols-lg-3">
84+
<div class="col d-flex align-items-start">
85+
<div class="icon-square text-body-emphasis fs-4 me-3">
86+
<svg class="bi" width="1em" height="1em" fill="currentColor"><use xlink:href="/images/icons/bootstrap-icons.svg#people"></use></svg>
87+
</div>
88+
<div>
89+
<h3 class="fs-2 text-body-emphasis">3000+ Members</h3>
90+
<p>A growing community, welcoming developers of all backgrounds and skill levels to learn, share, and connect.</p>
91+
</div>
92+
</div>
93+
<div class="col d-flex align-items-start">
94+
<div class="icon-square text-body-emphasis fs-4 me-3">
95+
<svg class="bi" width="1em" height="1em" fill="currentColor"><use xlink:href="/images/icons/bootstrap-icons.svg#calendar-event"></use></svg>
96+
</div>
97+
<div>
98+
<h3 class="fs-2 text-body-emphasis">200+ Events</h3>
99+
<p>Organized hundreds of events, including meetups, workshops, and hackathons, to connect and inspire developers.</p>
100+
</div>
101+
</div>
102+
<div class="col d-flex align-items-start">
103+
<div class="icon-square text-body-emphasis fs-4 me-3">
104+
<svg class="bi" width="1em" height="1em" fill="currentColor"><use xlink:href="/images/icons/bootstrap-icons.svg#brilliance"></use></svg>
105+
</div>
106+
<div>
107+
<h3 class="fs-2 text-body-emphasis">18+ Years</h3>
108+
<p>Fostering a strong and supportive developer community through mentorship, knowledge-sharing, and engagement.</p>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
114+
<div class="container px-4 py-5">
115+
<h2 class="pb-2 border-bottom">Upcoming Events</h2>
116+
<div class="row row-cols-1 row-cols-lg-2 align-items-md-center g-5 py-5">
117+
<div class="col d-flex flex-column align-items-start gap-2">
118+
<iframe
119+
src="https://lu.ma/embed/calendar/cal-ek97jTetLbE3c6t/events?compact=true"
120+
width="100%"
121+
height="325px"
122+
frameborder="0"
123+
style="border: 1px solid #bfcbda88; border-radius: 6px;"
124+
allowfullscreen=""
125+
aria-hidden="false"
126+
tabindex="0"
127+
></iframe>
128+
</div>
129+
<div class="col">
130+
<div class="row row-cols-1 row-cols-lg-2 g-4">
131+
<div class="col d-flex flex-column gap-2">
132+
<h4 class="fw-semibold mb-0 text-body-emphasis">Free Registration</h4>
133+
<p class="text-body-secondary">Registration is free to make our events accessible to the entire community.</p>
134+
</div>
135+
<div class="col d-flex flex-column gap-2">
136+
<h4 class="fw-semibold mb-0 text-body-emphasis">Inclusivity</h4>
137+
<p class="text-body-secondary">Everyone is valued, respected, and able to participate, regardless of their background, identity, or abilities.</p>
138+
</div>
139+
<div class="col d-flex flex-column gap-2">
140+
<h4 class="fw-semibold mb-0 text-body-emphasis">MINASWAN</h4>
141+
<p class="text-body-secondary">Matz is nice, so we are nice. VanRuby embodies the philosophy of the Ruby programming community.</p>
142+
</div>
143+
<div class="col d-flex flex-column gap-2">
144+
<h4 class="fw-semibold mb-0 text-body-emphasis">Opportunity</h4>
145+
<p class="text-body-secondary">Network with developers and local employers; we do our best to connect talent with job opportunities.</p>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
</div>

0 commit comments

Comments
 (0)