Skip to content

Commit

Permalink
Merge pull request OSCode-Community#1067 from Pragati-3003/gallery
Browse files Browse the repository at this point in the history 
gallery section updated
  • Loading branch information
@Vaishnavi-Patil2211
Vaishnavi-Patil2211 authored Jul 19, 2023
2 parents 96e9bc2 + 43cba9b commit 2abe03b
Show file tree
Hide file tree
Showing 3 changed files with 359 additions and 51 deletions.
82 changes: 53 additions & 29 deletions assets/css/gallery.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,58 @@
---------------------------*/

.number {
color: rgb(253, 253, 253) !important;
font-family: "Montserrat", sans-serif;
font-size: 40px;
margin-top: -40px;
}
color: rgb(24, 21, 21) !important;
text-shadow: 2px 2px 3px rgb(77, 76, 76);
font-size: 40px;
margin-top: 40px;
letter-spacing: 1.5px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#gallery {
background-image: linear-gradient(
to right,
#0f0c29,
#302b63,
#24243e,
rgb(69, 69, 107)
);
}
background-image: linear-gradient(
to right,
#0f0c29,
#302b63,
#24243e,
rgb(69, 69, 107)
);
}
.image-slideshow {
max-width: 700px;
position: relative;
margin: auto;
margin-top: 40px;
}
.image-slideshow img {
width: 100%
}
.fade {
animation-name: fade;
animation-duration: 2s;
}
@keyframes fade {
from {opacity: .5}
to {opacity: 1}
}
max-width: 700px;
transition: 3s ease-in;
margin: auto;
position: relative;
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
cursor: pointer;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
margin-top: 40px;
}
.image-slideshow img {
width: 100%;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.image-slideshow img:hover{
transition: 3s ease-in;
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
transform:scale(1.1);
}
.image-slideshow:hover {
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
position: relative;
}
.fade {
animation-name: fade;
animation-duration: 2s;
}
@keyframes fade {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
304 changes: 304 additions & 0 deletions assets/gallery.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,304 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />

<title>OS-CODE | Events</title>
<meta name="description"
content="Multi-College Tech Community empowering students to Learn in Public. Join us to connect with like-minded individuals and foster campus learning culture." />
<link rel="canonical" href="/index.html" />
<!-- Favicons -->
<link href="/assets/img/logo.jpeg" rel="icon" />

<!-- Google Fonts -->
<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=Playfair+Display:wght@500&family=Roboto:wght@300&display=swap"
rel="stylesheet" />

<!-- Vendor CSS Files -->
<link href="../vendor/aos/aos.css" rel="stylesheet" />
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="../vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
<link href="../vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link href="../vendor/glightbox/css/glightbox.min.css" rel="stylesheet" />
<link href="../vendor/remixicon/remixicon.css" rel="stylesheet" />
<link href="../vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />

<!-- Bootstrap Script -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>

<!-- Template Main CSS File -->

<!-- <link href="/assets/css/events.css" rel="stylesheet" /> -->
<link href="/assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/css/gallery.css">
<link rel="stylesheet" href="/assets/css/override.css">
<link rel="stylesheet" href="/assets/css/join_us.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/37377042d1.js" crossorigin="anonymous"></script>

<!-- for overriding bootstrap css -->
<link rel="stylesheet" href="/assets/css/override.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="glassmorphic fixed-top d-flex align-items-center newFlex">
<div class=" mainContainer container d-flex align-items-center">

<!-- logo and name together -->

<div class="logoAndName">
<img class="logo1" src="../assets/img/logo.jpeg" width="60px" height="60px" alt="logo" />

<!-- company name -->

<h1 class="logo me-auto"><a href="https://www.oscode.co.in">OS-CODE</a></h1>

</div>

<!-- navbar list excluding contact part -->

</div>
<div class="navListAndContact">

<div id="navbar" class="navbar order-last order-lg-0 me-4">
<ul>
<li><a class="nav-link scrollto " style="text-decoration: none;" href="/">HOME</a></li>
<li><a class="nav-link scrollto" style="text-decoration: none;"
href="/#mainabout">ABOUT</a></li>
<li>
<a class="nav-link scrollto" style="text-decoration: none;" href="/chapters/chapter.html">CHAPTERS</a>
</li>
<li><a class="nav-link scrollto" style="text-decoration: none;" href="https://blog.oscode.co.in/">BLOGS</a>
</li>
<li><a class="nav-link scrollto active" href="gallery.html" style="text-decoration: none;">GALLERY</a></li>

<li><a class="nav-link scrollto " href="events.html" style="text-decoration: none;">EVENTS</a></li>
<li><a class="nav-link scrollto" href="/#contact" style="text-decoration: none;">CONTACT</a></li>
<li>
<a
class="nav-link scrollto"
href="/contributors/contributor.html"
style="text-decoration: none"
>CONTRIBUTORS</a
>
</li>
<li>
<a href="/login/login.html">
<div class="get-started-btn-1 scrollto cntctBtn">
<i class="fa-regular fa-user"></i>
</div>
</a>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</div>
<span>
<a href="/login/login.html" class="get-started-btn-1 scrollto cntctBtn"></a>
</span>
<!-- navbar list ends here -->

<!-- <a href="https://www.oscode.co.in/#contact" class="get-started-btn scrollto cntctBtn">CONTACT US</a> -->

</div>

</header>
<!-- End Header -->

<section id="gallery">
<div class="container" data-aos="fade-up">
<div class="section-header">
<h1 class="number text-center">Gallery</h1>
<hr class="line hr-center">
</div>
<div class="image-slideshow">
<div class="image fade">
<img src="https://i.ibb.co/7R9h3wZ/csg1.jpg" height=500>
</div>
<div class="image fade">
<img src="https://i.ibb.co/gRQLhDs/csg2.jpg" height=500>
</div>
<div class="image fade">
<img src="https://i.ibb.co/6FkjN8w/csg3.jpg" height=500>
</div>
<div class="image fade">
<img src="https://i.ibb.co/fxnWnMf/csg5.jpg" height=500>
</div>
</div>
</div>

</section>

<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top" style="padding-left:20px;">
<div class="container modifiedFooterTop">
<div class="row modifyRow">
<div class="col-lg-3 col-md-6 footer-contact">
<h3>OS-Code</h3>
<p>
OS-CODE headquarter, Shanbough<br>
Krinshappa Ln Mavalli, <br>
Bengaluru, Karnataka 560004<br>
<strong>Phone:</strong> +91-7667109405<br />
</p>
</div>

<div class="col-lg-3 col-md-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#hero">Home</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Services</a>
</li>
<li>
<i class="bx bx-chevron-right"></i>
<a href="/policy/policy.html">Terms of service</a>
</li>
<li>
<i class="bx bx-chevron-right"></i>
<a href="/policy/policy.html">Privacy policy</a>
</li>
</ul>
</div>

<div class="col-lg-3 col-md-6 footer-links">
<h4>Our Services</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Web Design</a>
</li>
<li>
<i class="bx bx-chevron-right"></i><a href="#">Web Development</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">App Development</a>
</li>
</ul>
</div>

<div class="col-lg-3 col-md-6 footer-links">
<h4>Community</h4>
<!-- <form action="mailto:[email protected]" method="post" enctype="text/plain">
<input type="email" name="email" /><input type="submit" value="Subscribe" />
</form> -->
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="../index.html#mainabout">About us</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="../index.html#benefits">Benefits</a>
</li>
<li>
<i class="bx bx-chevron-right"></i><a href="../index.html#achievement">Accomplishments</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="../index.html#faq">FAQ</a>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="container py-4 modifiedFooter">
<div class="social-links text-md-end pt-3 pt-md-0 socialLinkMod">
<div class="textSocials">Stay in the loop?</div>
<a href="https://twitter.com/oscodecommunity" target="_blank" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="https://www.facebook.com/profile.php?id=100090940131222&mibextid=ZbWKwL" target="_blank"
class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="https://www.instagram.com/os_code_community/" target="_blank" class="instagram"><i
class="bx bxl-instagram"></i></a>
<a href="https://www.youtube.com/@oscodecommunity" target="_blank" class="youtube"><i
class="fab fa-youtube"></i></a>
<a href="https://www.linkedin.com/company/oscode/" target="_blank" class="linkedin"><i
class="bx bxl-linkedin"></i></a>

<a href="https://discord.com/channels/945676223101698060" target="_blank" class="discord"><i
class="bi bi-discord"></i></a>

<a href="https://github.com/OSCode-Community/OSCodeCommunitySite" target="_blank" class="github"><i
class="bi bi-github"></i></a>

</div>

<div class="me-md-auto text-md-start crMod">
<div class="copyright">
&copy; Copyright <strong><span>OS-Code</span></strong>. All Rights Reserved
</div>
<div class="credits">Designed by <a href="#">OS-Code</a></div>
</div>
</div>
</footer>
<!-- End Footer -->

<!-- Vendor JS Files -->
<script src="../vendor/purecounter/purecounter_vanilla.js"></script>
<script src="../vendor/aos/aos.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../vendor/glightbox/js/glightbox.min.js"></script>
<script src="../vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="../vendor/swiper/swiper-bundle.min.js"></script>
<script src="../vendor/php-email-form/validate.js"></script>

<!-- Template Main JS File -->
<script src="../assets/js/main.js"></script>
<script>
const container = document.getElementById("card");
const url = "./events.json";
fetch(url)
.then((response) => response.json())
.then((data) => {
let cardsHtml = "";

data = data.slice().reverse();
data.forEach((item) => {
const cardHtml = `
<div class="card" data-aos="zoom-in" data-aos-delay="100">
<div class="for-image-div">
<img src="${item.image}" alt="" id="image-for-card">
</div>
<div>
<span><h2 id="event-h1" >${item.title}</h2></span>
</div>
<div id="event-p-div">
<em><p id="event-p">${item.date}</p></em>
</div>
<div id="event-p-div">
<p id="event-p">${item.description}</p>
</div>
</div>`;

cardsHtml += cardHtml;
});
container.innerHTML = cardsHtml;
})
.catch((error) => {
console.error("Error:", error);
});
</script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>

</body>
</html>
Loading

0 comments on commit 2abe03b

Please sign in to comment.