Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vizendus Project Enabled #58

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Vizendus Project Enabled #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ body {
.events-card-content {
position: relative;
padding: 1.5em 2em;
height: 320px;
height: 380px;
}

.events-card-desc {
Expand Down
Binary file added img/event3_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
170 changes: 88 additions & 82 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,103 +140,108 @@ <h4 id="welcome-uni" class="title is-4 mt-0">
</div>
</div>

<div id="upcoming-events" class="events-section">
<!--Events area with Slider-->
<section id="upcoming-events" class="events-section">
<h3 class="title is-3 events-title">Events</h3>
<div class="container">
<div class="columns">
<div id="slider">
<div class="column">
<div class="card events-card blue-gradient hvr-icon-wobble-horizontal">
<div class="events-card-content content">
<div class="columns">
<div class="column is-mobile shadow p-3 mb-5 bg-white rounded">
<center><img class="events-card-image " src="img/vz_logo.png" alt="" />
<center>

</div>
<div class="column is-7 is-mobile">
<h1 class="title is-5 mb-1">VISENDUS 2022</h1>
<p class="events-card-desc">
What is the universe like? The universe, per se, is magical as we hurtle through
space and time, traversing across while we comprehend what we grasp by the
naked eye, the telescopes, astrophotography, spectroscopy, digital technology,
and so on. VISENDUS 2022: A Visit to Sri Lanka Planetarium aims at educating
the enthusiasts and acknowledging the service done by the Sri Lanka
Planetarium throughout the years. Join and anticipate a spellbinding event
across the universe as horizons will be expanded beyond Earth where far-off
galaxies are being born and stars collide.

</p>

<a href="..\competitions\VISENDUS/index.html" target="_blank"
rel="noopener noreferrer" class="button is-primary nav-signup is-rounded">
<span>Learn More</span>
<span class="icon is-small">
<i class="fa fa-long-arrow-alt-right hvr-icon"></i>
</span>
</a>

<div class="column">
<div class="card events-card blue-gradient hvr-icon-wobble-horizontal">
<div class="events-card-content content">
<div class="columns">
<div class="column is-mobile">
<center><img class="events-card-image" src="img/event1_logo.png" alt="" />
<center>
</div>
<div class="column is-7 is-mobile">
<h1 class="title is-5 mb-1">Into The Stars</h1>
<p class="events-card-desc">
Are you ready to expand your knowledge about space exploration including night
sky mapping, rockets, rovers, satellites, space suits, and build friendships
along the way? Well... Here is your opportunity! SEDS University of Colombo,
representing SEDS Sri Lanka proudly presents Into the Stars! Register today and
reserve your seat for the exploration of the unknown!!
</p>
<a href="./competitions/into-the-stars" target="_blank" rel="noopener noreferrer"
class="button is-primary nav-signup is-rounded">
<span>Learn More</span>
<span class="icon is-small">
<i class="fa fa-long-arrow-alt-right hvr-icon"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- <div class="column">
<div class="card events-card blue-gradient hvr-icon-wobble-horizontal">
<div class="events-card-content content">
<div class="columns">
<div class="column is-mobile">
<center><img class="events-card-image" src="img/event2_logo.png" alt="" /></center>
</div>
<div class="column is-7 is-mobile">
<h1 class="title is-5 mb-1">CubeHack 2021</h1>
<p class="events-card-desc">
Bringing together ingenuity and creativity, "CubeHack" is a joint venture by
SEDS UOC, SEDS OUSL, SEDS SLIIT and the Satellite Division of SEDS SL that
showcases
putting ideas, into a scientific construct. Teams will gather and construct a
model of a Cube Satellite using designing tools and resources available at their
fingertips, and a report shall be submitted for evaluation.
</p>
<a href="./competitions/cubehack" class="button is-primary nav-signup is-rounded">
<span>Learn More</span>
<span class="icon is-small">
<i class="fa fa-long-arrow-alt-right hvr-icon"></i>
</span>
</a>
</div>
<div class="column">
<div class="card events-card blue-gradient hvr-icon-wobble-horizontal">
<div class="events-card-content content">
<div class="columns">
<div class="column is-mobile">
<center><img class="events-card-image" src="img/event1_logo.png" alt="" />
<center>
</div>
<div class="column is-7 is-mobile">
<h1 class="title is-5 mb-1">Into The Stars</h1>
<p class="events-card-desc">
Are you ready to expand your knowledge about space exploration including night
sky mapping, rockets, rovers, satellites, space suits, and build friendships
along the way? Well... Here is your opportunity! SEDS University of Colombo,
representing SEDS Sri Lanka proudly presents Into the Stars! Register today and
reserve your seat for the exploration of the unknown!!
</p>
<a href="..\competitions\into-the-stars/index.html" target="_blank"
rel="noopener noreferrer" class="button is-primary nav-signup is-rounded">
<span>Learn More</span>
<span class="icon is-small">
<i class="fa fa-long-arrow-alt-right hvr-icon"></i>
</span>
</a>
</div>
</div>
</div>
</div> -->
<div class="column">
<div class="card events-card blue-gradient hvr-icon-wobble-horizontal">
<div class="events-card-content content">
<div class="columns">
<div class="column is-mobile">
<center><img class="events-card-image" src="img/wsw.png" alt="" /></center>
</div>
<div class="column is-7 is-mobile">
<h1 class="title is-5 mb-1">World Space Week 2021</h1>
<p class="events-card-desc">
World Space Week 2021 is an event that is held throughout the globe and joins in
participants of all ages and nations together, opening up a whole plethora of
opportunities to boost awareness and knowledge...

With this thought, World Space Week in Sri Lanka, 2021 a series of events
organized by the SEDS UOC Chapter, in collaboration with the SEDS Sri Lanka body
is
held in this week.
</p>
<a href="./events/world-space-week/"
class="button is-primary nav-signup is-rounded">
<span>Learn More</span>
<span class="icon is-small">
<i class="fa fa-long-arrow-alt-right hvr-icon"></i>
</span>
</a>
</div>
</div>
</div>

<div class="column">
<div class="card events-card blue-gradient hvr-icon-wobble-horizontal">
<div class="events-card-content content">
<div class="columns">
<div class="column is-mobile">
<center><img class="events-card-image" src="img/event2_logo.png" alt="" /></center>
</div>
<div class="column is-7 is-mobile">
<h1 class="title is-5 mb-1">CubeHack 2021</h1>
<p class="events-card-desc">
Bringing together ingenuity and creativity, "CubeHack" is a joint venture by
SEDS UOC, SEDS OUSL, SEDS SLIIT and the Satellite Division of SEDS SL that
showcases
putting ideas, into a scientific construct. Teams will gather and construct a
model of a Cube Satellite using designing tools and resources available at their
fingertips, and a report shall be submitted for evaluation.
</p>
<a href="../competitions/cubehack/index.html" target="_blank" class="button is-primary nav-signup is-rounded">
<span>Learn More</span>
<span class="icon is-small">
<i class="fa fa-long-arrow-alt-right hvr-icon"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End events area with Slider-->

<!-- Start about section -->
<section id="about-seds-uoc" class="section">
Expand Down Expand Up @@ -472,7 +477,7 @@ <h3 class="title has-text-white justify-text">About</h3>
<hr />
<div id="footer-copyright" class="content has-text-centered">
<p class="has-text-white">
(C) 2021 SEDS UOC - Maintained by the
(C) 2022 SEDS UOC - Maintained by the
<a href="mailto:[email protected]" class="has-text-white">Web Team</a>.
</p>
</div>
Expand All @@ -481,6 +486,7 @@ <h3 class="title has-text-white justify-text">About</h3>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-carousel.min.js"></script>
<script src="js/navbar.js"></script>
<script src="js/landing.js"></script>
<script src="js/carousel2.js"></script>
</body>

</html>
120 changes: 120 additions & 0 deletions js/carousel2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
function ready(handler) {
if (/complete|loaded|interactive/.test(document.readyState) && document.body) {
handler();
} else {
document.addEventListener('DOMContentLoaded', handler, false);
}
}

var _clickEvents = ['click', 'touch'];

ready(function () {
const burgers = document.querySelectorAll('.burger');
[].forEach.call(burgers, burger => {
_clickEvents.forEach(clickEvent => {
burger.addEventListener(clickEvent, e => {
e.preventDefault();

const node = e.currentTarget;
if (node) {
node.classList.toggle('is-active');
// Get the target from the "data-target" attribute
let target = node.dataset.target;
if (target) {
const targetNode = document.querySelector(node.dataset.target);
if (targetNode) {
targetNode.classList.toggle('is-active');
}
}
}
});
});
});

const menus = document.querySelectorAll('.menu');
[].forEach.call(menus, menu => {
// Open menu which contains the current active item
let activeMenus = menu.querySelectorAll('.menu-item:not(.has-dropdown).is-active');
[].forEach.call(activeMenus, (activeMenu) => {
activeMenu = activeMenu.closest('.menu-item.has-dropdown');
if (activeMenu) {
activeMenu.classList.add('is-active');
}
});

let dropdownMenus = menu.querySelectorAll('.menu-item.has-dropdown > .menu-title');
[].forEach.call(dropdownMenus, (dropdownMenu) => {
dropdownMenu.addEventListener('click', e => {
e.preventDefault();
let currentMenu = e.currentTarget;

// Toggle current menu
currentMenu.closest('.menu-item.has-dropdown').classList.toggle('is-active');

// Close all other active menus
let otherActiveMenus = menu.querySelectorAll('.menu-item.has-dropdown.is-active');
[].forEach.call(otherActiveMenus, otherActiveMenu => {
if (!currentMenu.isEqualNode(otherActiveMenu.querySelector('.menu-title'))) {
otherActiveMenu.classList.remove('is-active');
}
});
});
});
});

let tabs = document.querySelectorAll('.tabs li a');
[].forEach.call(tabs, tab => {
if (window.location.hash) {
let tabToShow = tab.closest('.tabs').querySelector('[href="' + window.location.hash + '"]');
let tabContentToShow = document.querySelector(window.location.hash);
if (tabToShow && tabContentToShow) {
let tabToHide = tab.closest('.tabs').querySelector('li.is-active');
if (tabToHide) {
let tabToHideLink = tabToHide.querySelector('a');
let tabContentToHide = document.querySelector(tabToHideLink.getAttribute('href'));
if (tabContentToHide) {
tabContentToHide.classList.remove('is-active');
}
tabToHideLink.classList.remove('is-active');
tabToHide.classList.remove('is-active');
}
tabToShow.closest('li').classList.add('is-active');
tabContentToShow.classList.add('is-active');
}
}

_clickEvents.forEach(clickEvent => {
tab.addEventListener(clickEvent, event => {
event.preventDefault();
const tab = event.currentTarget;

let tabToHide = tab.closest('.tabs').querySelector('li.is-active');
if (tabToHide) {
let tabToHideLink = tabToHide.querySelector('a');
let tabContentToHide = document.querySelector(tabToHideLink.getAttribute('href'));
if (tabContentToHide) {
tabContentToHide.classList.remove('is-active');
}
tabToHideLink.classList.remove('is-active');

tabToHide.classList.remove('is-active');
}
tab.closest('li').classList.add('is-active');

let tabContentToShow = document.querySelector(tab.getAttribute('href'));
if (tabContentToShow) {
tabContentToShow.classList.add('is-active');
}
});
});
});
});

ready(function () {
bulmaCarousel.attach('#slider', {
slidesToScroll: 1,
slidesToShow: 2,
autoplay: true,
autoplaySpeed: 7000,
});
});