<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glug & Robotics Club</title>
<link rel="icon" type="image/png" href="img/logo_gar.png" />
<script src="js/aboutus.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Swiper css -->
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- Add the FontAwesome CSS link below -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script defer src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="styles.css">
<!---custom css link--->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/card.css">
<link rel="stylesheet" type="text/css" href="css/joinus.css">
<link rel="stylesheet" type="text/css" href="css/aboutus.css">
<!---boxicons link--->
<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<!---remixicons link--->
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<!---google fonts link--->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 5px;
padding: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
display: block;
padding: 10px;
margin: 5px 0;
text-align: center;
text-decoration: none;
color: black;
border: 2px solid black;
border-radius: 5px;
}
.dropdown-content a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<header>
<div class="header-left">
<img src="img/revelogo.png" alt="Logo" class="logo-image">
<img src="img/logo_gar.png" alt="Logo" class="logo-image">
<a href="#" class="logo">Glug & Robotics Club</a>
</div>
<ul class="navlist">
<li><a href="#">Home</a></li>
<li><a href="#aboutus">About Us</a></li>
<li>
<a href="https://github.com/Glug-and-Robotics-Club" target="_blank">
<span class="github-icon"><i class="fab fa-github fa-lg"></i></span>
Github
</a>
</li>
<li class="dropdown"><a href="#">Events</a>
<div class="dropdown-content">
<a href="https://glug-and-robotics-club.github.io/Code-Quest/">Cook with Prompt</a>
<a href="#">Code-quest 2023<br> <p style="color: red;">closed!</p></a>
</div>
</li>
<li><a href="#joinus">Join us</a></li>
<li><a href="#teams">Contact us</a></li>
</ul>
<div class="bx bx-menu" id="menu-icon"></div>
</header>
<section class="hero">
<div class="hero-text">
<!-- <h5>#2 Trending</h5> -->
<h4 id="home"> Welcome to</h4>
<h1>Glug and Robotics Club</h1>
<p class="cse">By School of Computer Science & Engineering</p>
<a href="#joinus">Join us</a>
<a href="#teams" class="ctaa"><i class="ri-team-fill"></i>Our Team</a>
</div>
<div class="hero-img">
<img src="img/img2.png">
</div>
</section>
<div class="icons">
<a href="https://instagram.com/glugandroboticsclub_ru?igshid=MzRlODBiNWFlZA==" target="_blank"><i class="ri-instagram-line"></i></a>
<a href="https://www.linkedin.com/in/glug-and-robotics-club-reva-university-786776294" target="_blank"><i
class="ri-linkedin-fill"></i></a>
<a href="https://www.facebook.com/profile.php?id=61552210734091&mibextid=2JQ9oc" target="_blank"><i class="ri-facebook-fill"></i></a>
<a href="https://github.com/Glug-and-Robotics-Club" target="_blank"><i class="ri-github-line"></i></a>
<a href="https://twitter.com/club_glug44968" target="_blank"><i class="ri-twitter-line"></i></a>
</div>
<!-- ----------- Abous us -------------- -->
<center>
<section class="hero2" id="aboutus">
<div class="hero-text2" id="aboutus">
<center>
<h1 style="font-family: 'Arno Pro',
serif;
font-style: italic;
font-size: 300%;
line-height: 1;
color: #1E527E;
align-items: center;
margin: 0 0 45px;
display: block;
border-bottom: 3px solid currentColor;
width: 50%;
padding-top:8%">About us</h1>
</center>
<p>
Welcome to our open-source club, where students gather to explore and embrace the ever-evolving world of
technology. We foster an environment that encourages learning and innovation, empowering students to
present their
groundbreaking ideas on a global stage.
At our club, we believe in challenging the status quo. We provide students with a platform to confront
the
obstacles that come with their innovations. Through hands-on experiences and live industrial projects,
our members
gain invaluable knowledge and expertise. The journey of learning doesn't stop here - successful
completion of
projects earns students well-deserved experience certificates and rewards.
</p>
</div>
</section>
</center>
<div id="technology">
<center>
<h1 style="font-family: 'Arno Pro',
serif;
font-style: italic;
font-size: 300%;
line-height: 1;
color: #1E527E;
align-items: center;
margin: 0 0 45px;
display: block;
border-bottom: 3px solid currentColor;
width: 50%;
padding-top:8%">Technology Stack</h1>
</center>
<div class="center">
<div class="property-cards-container">
<!-- First Card -->
<div class="property-card">
<div class="property-image" style="background-image: url('img/pic2.jpg');">
<div class="property-image-title">
<!-- Optional <h5>Card Title</h5> If you want it, turn on the CSS also. -->
</div>
</div>
<div class="property-description">
<h5>Linux</h5>
<p>Linux is a powerful and versatile operating system that can be used for a variety of tasks,
including
programming, web development, data science, and machine learning.
</p>
</div>
<a href="#">
<div class="property-social-icons">
<!-- I would usually put multipe divs inside here set to flex. Some people might use Ul li. Multiple Solutions -->
</div>
</a>
</div>
<!-- Add more cards as needed -->
<div class="property-card">
<div class="property-image" style="background-image: url('img/pic3.jpg');">
<div class="property-image-title">
<!-- Optional <h5>Card Title</h5> If you want it, turn on the CSS also. -->
</div>
</div>
<div class="property-description">
<h5>Robotics</h5>
<p>Robotics is an interdisciplinary branch of electronics and communication, computer science and
engineering.
Robotics involves the design, construction, operation, and use of robots.
</p>
</div>
<a href="#">
<div class="property-social-icons">
<!-- I would usually put multipe divs inside here set to flex. Some people might use Ul li. Multiple Solutions -->
</div>
</a>
</div>
<!-- Second Card -->
<div class="property-card">
<div class="property-image" style="background-image: url('img/pic1.jpg');">
<div class="property-image-title">
<!-- Optional <h5>Card Title</h5> If you want it, turn on the CSS also. -->
</div>
</div>
<div class="property-description">
<h5>AI & ML</h5>
<p>AI & ML represents an important evolution in computer science and data processing that is quickly
transforming a vast
array of industries.
</p>
</div>
<a href="#">
<div class="property-social-icons">
<!-- I would usually put multipe divs inside here set to flex. Some people might use Ul li. Multiple Solutions -->
</div>
</a>
</div>
<div class="property-card">
<div class="property-image" style="background-image: url('img/img5.jpg');">
<div class="property-image-title">
<!-- Optional <h5>Card Title</h5> If you want it, turn on the CSS also. -->
</div>
</div>
<div class="property-description">
<h5>Many More</h5>
<p>Learn many more technologies from our professionals and industrial experts.
</p>
</div>
<a href="#">
<div class="property-social-icons">
<!-- I would usually put multipe divs inside here set to flex. Some people might use Ul li. Multiple Solutions -->
</div>
</a>
</div>
</div>
</div>
</div>
<div class="joinus">
<div class="card" id="joinus">
<form>
<h2 class="title"> Join us</h2>
<a class="cta-btn" href="https://forms.office.com/r/dsQTjJjK0s" target="_blank">Student</a>
<p class="or"><span>or</span></p>
<a class="cta-btn" href="https://forms.office.com/r/wCsYVrFNvV" target="_blank"
target="blank">Professor/Lecturer </a>
<!-- <p class="or"><span>.</span></p> -->
</form>
</div>
</div>
<iframe src="team.html" id="teams" height="600px" width="100%" title="Iframe Example"></iframe>
<footer>
<ul class="social-icons">
<!-- Replace the links with your social media profiles -->
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
</ul>
<p><i>© 2023 GLUG & Robotics club by REVA University. All rights reserved.</i></p>
</footer>
<div class="scroll-down">
<a href="#teams"><i class="ri-arrow-down-s-fill"></i></a>
</div>
<script>
// Get the button element by its id
const redirectButton = document.getElementById('redirectButton');
// Add a click event listener to the button
redirectButton.addEventListener('click', function () {
// Define the URL you want to redirect to
const redirectURL = 'https://example.com';
// Redirect to the specified URL
window.location.href = redirectURL;
});
</script>
<!---scrollreveal effect--->
<script src="https://unpkg.com/scrollreveal"></script>
<!---custom js link--->
<script src="js/script.js"></script>
<script src="js/card.js"></script>
<script src="js/aboutus.js"></script>
</body>
<!-- Swiper JS -->
<script src="js/swiper-bundle.min.js"></script>
</html>