Added gallery to home😁

TinkerHubKMCTCE · May 17, 2022 · 02b4a71 · 02b4a71
2 parents 51616f0 + 25bd767
commit 02b4a71
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 0 deletions.
diff --git a/src/App.js b/src/App.js
@@ -6,6 +6,7 @@ import Ambassadar from "./components/Ambassadar/Ambassadar";
 import Alumni from "./components/Alumni/Alumni";
 import ContactUs from "./components/ContactUs/ContactUs";
 import PreLoader from "./pages/PreLoader/PreLoader";
+import { Gallery } from "./pages/Gallery/Gallery";
 
 function App() {
   return (
@@ -16,6 +17,7 @@ function App() {
       <Events />
       <Ambassadar />
       <Alumni />
+      <Gallery />
       <ContactUs />
     </Fragment>
   );

diff --git a/src/pages/Gallery/Gallery.css b/src/pages/Gallery/Gallery.css
@@ -0,0 +1,103 @@
+.galleryHeading {
+  text-align: center;
+  margin: 20px auto 10px;
+}
+
+.desc {
+  max-width: 500px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 20px;
+}
+
+/* Main page */
+
+.container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.gallery-folders {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-gap: 20px;
+  margin: 20px;
+}
+
+.gallery-folders:hover .card img {
+filter: grayscale(1);
+}
+
+.gallery-folders .card {
+  background-color: black;
+  border-radius: 10px;
+  text-align: center;
+  overflow: hidden;
+  border: 2px solid skyblue;
+}
+
+
+
+.gallery-folders .card img {
+  width: 100%;
+  transition: transform .2s ease-out;
+}
+
+.gallery-folders .card:hover img {
+filter: none;
+transform: scale(1.1);
+width: 100%;
+}
+
+.gallery-folders .card .card-content {
+  padding: 20px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 2px;
+}
+
+.row:hover .gallery-img{
+filter: grayscale(1);
+}
+
+.column {
+  flex: 25%;
+  max-width: 25%;
+  padding: 0 2px;
+}
+
+.img-wrapper {
+margin-top: 4px;
+overflow: hidden;
+}
+
+.img-wrapper:hover .gallery-img {
+filter: none;
+}
+
+.gallery-img {
+  vertical-align: middle;
+  width: 100%;
+  transition: all .3s ease-out;
+}
+
+.gallery-img:hover {
+transform: scale(1.1);
+}
+
+@media screen and (max-width: 800px) {
+  .column {
+    flex: 50%;
+    max-width: 50%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .column {
+    flex: 100%;
+    max-width: 100%;
+  }
+}
diff --git a/src/pages/Gallery/Gallery.js b/src/pages/Gallery/Gallery.js
@@ -0,0 +1,91 @@
+import "./Gallery.css"
+import React, { Fragment } from 'react'
+
+export const Gallery = () => {
+  return (
+    <Fragment className="">
+    <h2 className="galleryHeading">Gallery</h2>
+    <div class="row">
+        <div class="column">
+            <div class="img-wrapper">
+                <img src="https://raw.githubusercontent.com/TinkerHubKMCTCE/Karma-KMCT/dev/public/assets/GalleryImages/1.jpg"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/2.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/3.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/4.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/5.jpg?raw=true"
+                    alt="" class="gallery-img" />
+
+            </div>
+        </div>
+        <div class="column">
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/6.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/7.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/8.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/9.jpg?raw=true"
+                    alt="" class="gallery-img" />
+
+            </div>
+        </div>
+        <div class="column">
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/10.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/11.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/12.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/13.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+        </div>
+        <div class="column">
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/15.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/16.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/17.jpg?raw=true"
+                    alt="" class="gallery-img" />
+            </div>
+            <div class="img-wrapper">
+                <img src="https://github.com/TinkerHubKMCTCE/Karma-KMCT/blob/dev/public/assets/GalleryImages/15.jpg?raw=true"
+                    alt="" class="gallery-img" />
+
+            </div>
+        </div>
+    </div>
+</Fragment>
+  )
+}