visits

tanmoy-12 · Mar 26, 2024 · 009b489 · 009b489
1 parent 83b0195
commit 009b489
Show file tree

Hide file tree

Showing 9 changed files with 281 additions and 7 deletions.
diff --git a/1.html b/1.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=
+    , initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* Colors */
+:root {
+  --color-primary-white: rgb(240, 240, 240);
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+  font-family: 'Roboto', sans-serif;
+}
+
+.card {
+  width: 24rem;
+  height: 36rem;
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  color: var(--color-primary-white);
+  box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
+}
+
+.card img {
+  position: absolute;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0.9;
+  transition: opacity .2s ease-out;
+}
+
+.card h2 {
+  position: absolute;
+  inset: auto auto 30px 30px;
+  margin: 0;
+  transition: inset .3s .3s ease-out;
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+.card p,
+.card a {
+  position: absolute;
+  opacity: 0;
+  max-width: 80%;
+  transition: opacity .3s ease-out;
+}
+
+.card p {
+  inset: auto auto 80px 30px;
+}
+
+.card a {
+  inset: auto auto 40px 30px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.card:hover h2 {
+  inset: auto auto 220px 30px;
+  transition: inset .3s ease-out;
+}
+
+.card:hover p,
+.card:hover a {
+  opacity: 1;
+  transition: opacity .5s .1s ease-in;
+}
+
+.card:hover img {
+  transition: opacity .3s ease-in;
+  opacity: 1;
+}
+
+.material-symbols-outlined {
+  vertical-align: middle;
+}
+
+    </style>
+</head>
+<body>
+    <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=Roboto+Condensed&family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+
+    <main>
+      <div class = "card">
+        <img src="" alt="">
+        <div class="card-content">
+          <h2>
+            Name
+          </h2>
+          <p>
+
+          </p>
+          <a href="#" class="button">
+            Find out more 
+            <span class="material-symbols-outlined">
+              arrow_right_alt
+            </span>
+          </a>
+        </div>
+      </div>
+    </main>
+</body>
+</html>
diff --git a/Alumni-Page b/Alumni-Page
diff --git a/Alumni/Alumni1.jpg b/Alumni/Alumni1.jpg
diff --git a/Alumni/Alumni2.jpg b/Alumni/Alumni2.jpg
diff --git a/alumi-data.js b/alumi-data.js
diff --git a/alumni.css b/alumni.css
@@ -0,0 +1,92 @@
+* { 
+    margin : 0;
+    padding: 0;
+    box-sizing : border-box;
+    font-family: "Poppins", sans-serif;
+  }
+
+  .img{
+    height: 360px;
+    width: 260px;
+  }
+
+  .container {
+    margin: 100px auto;
+    margin-top: 50px;
+    position : relative;
+    width: 100%;
+    max-width : 1100px;
+    display : flex;
+    align-items : center;
+    justify-content : center;
+    flex-wrap : warp;
+    padding : 30px;  
+  }
+
+  .container .card {
+    position: relative;
+    max-width : 300px;
+    height : 215px;  
+    background-color : #fff;
+    margin : 30px 10px;
+    padding : 20px 15px;
+
+    display : flex;
+    flex-direction : column;
+    box-shadow : 0 5px 20px rgba(0,0,0,0.5);
+    transition : 0.3s ease-in-out;
+    border-radius : 15px;
+  }
+  .container .card:hover {
+    height : 320px;    
+  }
+
+
+  .container .card .image {
+    position : relative;
+    width : 260px;
+    height : 260px;
+
+    top : -40%;
+    left: 8px;
+    box-shadow : 0 5px 20px rgba(0,0,0,0.2);
+    z-index : 1;
+  }
+
+
+  p{
+    font-size: 18px;
+  }
+  .container .card .image img {
+    max-width : 100%;
+    border-radius : 15px;
+    height: 260px;
+    width: 260px;
+  }
+
+  .container .card .contenta {
+    position : relative;
+    top : -140px;
+    padding : 10px 15px;
+    color : #111;
+    text-align : center;
+
+    visibility : hidden;
+    opacity : 0;
+    transition : 0.3s ease-in-out;
+
+  }
+
+  .container .card:hover .contenta {
+     margin-top : 30px;
+     visibility : visible;
+     opacity : 1;
+     transition-delay: 0.2s;
+
+  }
+
+  @media (max-width:450px) {
+    .gap{
+      height: 100px;
+    }
+  }
diff --git a/alumni.html b/alumni.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="alumni.css">
+    <link rel="stylesheet" href="styles.css">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous">
+
+</head>
+<body>
+    <body>
+         <!-- Navbar -->
+    <div id="pc-view" class="navbar">
+        <div class="logo">
+            <img src="logo.png" height="60px" width="130px">
+        </div>
+        <div class="menu">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="alumni.html">Alumni</a></li>
+            <li><a href="faculty.html">Faculty</a></li>
+        </div>
+    </div>
+
+    <!-- Mobile Navbar Toggle Button -->
+    <nav id="mobile-view">
+        <div class="navbar">
+            <div class="menu-toggler">
+                <h2 onclick="showSidebar()"><i class="fa-solid fa-bars"></i></h2>
+            </div>
+            <div class="logo_mobile">
+                <img src="logo.png" height="60px" width="130px">
+            </div>
+        </div>
+        <ul  class="sidebar">
+            <li id="exit" onclick="hideSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></a></li>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="alumni.html">Alumni</a></li>
+            <li><a href="faculty.html">Faculty</a></li>
+        </ul>
+
+    </nav>
+
+        <div class="gap"></div>
+        <div class = container>
+          <div class = card>
+            <div class = image>
+              <img href = "#" src =Alumni\Alumni1.jpg>
+            </div>
+            <div class = contenta>
+              <h3>--</h3>
+              <p>I am working as a Principal TA Manager at Plutus Solutions - Servicenow platform partner</p>
+            </div>
+          </div>    
+        </div>
+      </body>
+      <script src="script.js"></script>
+</body>
+</html>
diff --git a/faculty.css b/faculty.css
@@ -110,7 +110,7 @@
     }
 
     .gap{
-      height: 1060px;
+      height: 1260px;
     }
   }
 

diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@
                     <li><a href="/">JEE</a></li>
                 </ul>
             </li>
-            <li><a href="#">Alumni</a></li>
+            <li><a href="alumni.html">Alumni</a></li>
             <li><a href="faculty.html">Faculty</a></li>
             <li><a >Contact Us</a></li>
         </div>
@@ -54,8 +54,8 @@ <h2 onclick="showSidebar()"><i class="fa-solid fa-bars"></i></h2>
         </div>
         <ul  class="sidebar">
             <li id="exit" onclick="hideSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></a></li>
-            <li><a href="#">Home</a></li>
-            <li><a href="#">Alumni</a></li>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="alumni.html">Alumni</a></li>
             <li><a href="faculty.html">Faculty</a></li>
         </ul>
 
@@ -412,9 +412,8 @@ <h2>Get UP and Join US Today!</h2>
         <div class="visitor">
             <!-- Footer Content -->
             <p>Total No of Visitors</p>
-            <!-- hitwebcounter Code START -->
-<a href="https://www.hitwebcounter.com" target="_blank">
-    <img src="https://hitwebcounter.com/counter/counter.php?page=12230927&style=0006&nbdigits=7&type=ip&initCount=0" title="Counter Widget" Alt="Visit counter For Websites"   border="0" /></a>    
+            <a href='http://www.freevisitorcounters.com'>Free counter</a> <script type='text/javascript' src='https://www.freevisitorcounters.com/auth.php?id=c97430bbb78dbda1c9c5211cb19d5b7963736171'></script>
+            <script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/1163452/t/5"></script>
 
         </div>
     </footer>
-Original file line number
+Diff line change
@@ Expand Up / @@ -110,7 +110,7 @@ @@
         }
         .gap{
-          height: 1060px;
+          height: 1260px;
         }
       }
@@ Expand Down @@