Merge pull request #29 from RAHUL956777/main

make attractive gallery in home page
Git21221 · Sep 26, 2023 · d946047 · d946047
2 parents 137c5db + 10429d7
commit d946047
Show file tree

Hide file tree

Showing 6 changed files with 962 additions and 27 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,5 +9,5 @@
     "application/javascript": ["js"],
     "video/mp4": ["mp4"]
   },
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5502
 }
diff --git a/css/responsiveness.css b/css/responsiveness.css
@@ -48,6 +48,10 @@
     padding: 10px 30px;
     font-size: 14px;
   }
+  .section-on-body .carousel img{
+    height: 10rem;
+    width: 10rem;
+  }
 }
 
 @media only screen and (max-width: 420px) {

diff --git a/css/style.css b/css/style.css
@@ -14,18 +14,19 @@
   -o-box-sizing: border-box;
   box-sizing: border-box;
 }
-nav:hover, section:hover{
-  cursor: url('/img/cursor-rocket.png'), auto;
+nav:hover,
+section:hover {
+  cursor: url("/img/cursor-rocket.png"), auto;
 }
-#box{
+#box {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
-#box h3{
-  font-family: 'Outfit', sans-serif;
+#box h3 {
+  font-family: "Outfit", sans-serif;
   position: relative;
   top: 100px;
   color: white;
@@ -39,7 +40,7 @@ nav:hover, section:hover{
   background-image: radial-gradient(circle 30px, #fff 100%, transparent 0),
     radial-gradient(circle 5px, #fff 100%, transparent 0),
     radial-gradient(circle 5px, #fff 100%, transparent 0),
-    linear-gradient(#FFF 20px, transparent 0);
+    linear-gradient(#fff 20px, transparent 0);
   background-position: center 127px, 94px 102px, 16px 18px, center 114px;
   background-size: 60px 60px, 10px 10px, 10px 10px, 4px 14px;
   background-repeat: no-repeat;
@@ -48,7 +49,7 @@ nav:hover, section:hover{
 }
 
 #preloader::before {
-  content: '';
+  content: "";
   position: absolute;
   width: 100px;
   height: 100px;
@@ -62,22 +63,22 @@ nav:hover, section:hover{
 }
 
 #preloader::after {
-  content: '';
+  content: "";
   position: absolute;
   height: 80px;
   width: 80px;
   transform: translate(-50%, -55%) rotate(-45deg) rotateY(0deg);
   left: 50%;
   top: 50%;
   box-sizing: border-box;
-  border: 7px solid #FF3D00;
+  border: 7px solid #ff3d00;
   border-radius: 50%;
   animation: rotate 0.5s linear infinite;
 }
 
 @keyframes rotate {
   to {
-    transform: translate(-50%, -55%) rotate(-45deg) rotateY(360deg)
+    transform: translate(-50%, -55%) rotate(-45deg) rotateY(360deg);
   }
 }
 
@@ -166,19 +167,18 @@ a:hover {
   transition: 0.3s linear;
   text-decoration: none;
 }
-.svghighlight{
+.svghighlight {
   padding: 0 10px;
   border-radius: 60px;
   border: 2px solid white;
 }
 
-.navbar-img img{
+.navbar-img img {
   width: 70px;
   height: 70px;
   padding: 10px;
 }
 
-
 /* ========== Navbar style done ============== */
 
 /* ==============explore galaxy btn =============*/
@@ -309,12 +309,12 @@ a:hover {
   height: calc(550px - 34px - 200px);
 }
 
-.cards-text>h2 {
+.cards-text > h2 {
   color: #d1d1d1;
   font-size: 1.5rem;
 }
 
-.cards-text>p {
+.cards-text > p {
   font-size: 18px;
 }
 
@@ -390,13 +390,13 @@ a:hover {
   width: 500px;
 }
 
-#exploreright-txt>p {
+#exploreright-txt > p {
   padding-bottom: 20px;
 }
 
 /* =============== galery start here============= */
 
-.col-sm {
+/* .col-sm {
   display: flex;
   justify-content: center;
 }
@@ -407,8 +407,26 @@ a:hover {
   object-fit: contain;
   border-radius: 20px;
   box-shadow: 1px 3px 10px rgb(235, 235, 235);
-}
+} */
 
+.section-on-body .carousel {
+  height: 70vh;
+  width: 100vw;
+}
+.carousel > ul {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  box-shadow: 5px #fff;
+}
+.carousel img {
+  height: 18rem;
+  width: 18rem;
+  -webkit-box-reflect: below 20px
+    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
+}
 /* ============== contact ================ */
 input:focus,
 textarea:focus,
@@ -534,7 +552,6 @@ select:focus {
 }
 
 @keyframes float {
-
   100%,
   0% {
     transform: translateY(0rem);
@@ -688,7 +705,7 @@ select:focus {
   margin: 0 10px;
 }
 
-#orrery>.first,
+#orrery > .first,
 .second,
 .third {
   animation-name: spin;
@@ -701,15 +718,15 @@ select:focus {
   transform-origin: 50% 50%;
 }
 
-#orrery>.third {
+#orrery > .third {
   animation-duration: 10s;
 }
 
-#orrery>.second {
+#orrery > .second {
   animation-duration: 6.2s;
 }
 
-#orrery>.first {
+#orrery > .first {
   animation-duration: 2.4s;
 }
 
@@ -721,4 +738,4 @@ select:focus {
   to {
     transform: rotate(-360deg);
   }
-}
+}
diff --git a/index.html b/index.html
@@ -39,6 +39,8 @@
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 
   <!-- calling our style -->
+  <!-- css for jquey -->
+  <link rel="stylesheet" href="jquery/jquery.flipster.min.css">
   <link rel="stylesheet" href="css/style.css" type="text/css" />
   <link rel="stylesheet" href="css/responsiveness.css" type="text/css" />
 
@@ -233,7 +235,7 @@ <h1 style="font-weight: 300">
 
 
   <!-- ================== Starting of fifth phase (gallery) ==============   -->
-  <section class="section-on-body">
+  <!-- <section class="section-on-body">
     <div class="section-on-body-headings">
       <h1>Gallery</h1>
     </div>
@@ -256,7 +258,29 @@ <h1>Gallery</h1>
     <a href="gallery/gallery.html">
       <button class="loadmore-btn">Load More..</button>
     </a>
-  </section>
+  </section> -->
+
+  <section class="section-on-body ">
+    <div class="section-on-body-headings">
+      <h1>Gallery</h1>
+    </div>
+    <div class="carousel">
+      <ul>
+          <li><img src="img/gallery2.jpg" ></li>
+          <li><img src="img/gallery3.jpg" ></li>
+          <li><img src="img/gallery4.jpg" ></li>
+          <li><img src="img/gallery7.jpg" ></li>
+          <li><img src="img/gallery8.jpg" ></li>
+          <li><img src="img/gallery9.jpg" ></li>
+          <li><img src="img/gallery10.jpg" ></li>
+
+      </ul>
+  </div>
+  <a href="gallery/gallery.html">
+    <button class="loadmore-btn">Load More..</button>
+  </a>
+    </section>
+
   <!-- ================== Ending of fifth phase (gallery) ============== -->
 
 
@@ -439,6 +463,9 @@ <h4>Community</h4>
   <!-- scroll to top image(close)  -->
 
 
+  <!-- jquery cdn -->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="jquery/jquery.flipster.min.js"></script>
 
   <!-- bootstrap js library -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
@@ -447,6 +474,10 @@ <h4>Community</h4>
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
   <script>
     AOS.init();
+    $('.carousel').flipster({
+            style:'carousel',
+            spacing:-0.3,
+        });
   </script>
   <script src="js/script.js" type="text/javascript"></script>