Kashiyatra · pranjal693 · Sep 5, 2022
diff --git a/home_page/bg.jpg b/home_page/bg.jpg
diff --git a/home_page/img1.jfif b/home_page/img1.jfif
diff --git a/home_page/img2.jfif b/home_page/img2.jfif
diff --git a/home_page/img3.jfif b/home_page/img3.jfif
diff --git a/home_page/index.html b/home_page/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content=" width=device-width",initial-scale=1>
+        <title>Home Page</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+         <link rel="stylesheet" type="text/css" href="styles.css"> 
+    </head>
+    <body>
+        <section>
+        <nav class="navbar navbar-dark bg-dark">
+        <a class="navbar-brand" href="#">Kashiyatra</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Why CA <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Duties</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Benefits</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Contacts</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Login</a>
+            </li>
+
+            </ul>
+        </div>
+            </nav>
+
+                <img src="bg.jpg" id="bg" alt="">
+                <img src="moon.png" id="moon" alt="">
+                <img src="mountain.png" id="mountain" alt="">
+                <img src="road.png" id="road" alt="">
+                <h2 id="text">Kashiyatra </h2>
+            </section>
+            <div>
+            <h2> Why become a Campus Ambassador ?</h2><br>
+            <h3>For bringing together a fest which encircles diversity like never before we are reaching out to colleges across the country.
+                The selected Campus Ambassador in his/her tenure will represent Kashiyatra, IIT(BHU) in his/her college and will become a an integral member of the team.</h3><br>
+            <ul class="lead2">
+                <li>Become a Leader</li>
+                <li>Update your organisational skills</li>
+                <li>Polish your communicating & public speaking skills. </li>
+                <li>Get the exposure to online and media marketing</li>
+                <li>Expand your creative  horizons</li>
+            </ul>
+            <a href="#">Become A Campus Ambassador </a>
+
+
+            </div>
+        <section class="contact">
+        <div class="box">
+            <div class="imgBx">
+                <img src="img1.jfif">
+            </div>
+            <div class="content">
+                <h2>Nidhi Shah <br><span>Creative Designer</span></h2>
+            </div>
+        </div>
+        <div class="box">
+            <div class="imgBx">
+                <img src="img2.jfif">
+            </div>
+            <div class="content">
+                <h2>Rohit Saraf <br><span>Influencerr</span></h2>
+            </div>
+        </div>
+        <div class="box">
+            <div class="imgBx">
+                <img src="img3.jfif">
+            </div>
+            <div class="content">
+                <h2>Chris Evans<br><span>American Actor</span></h2>
+            </div>
+        </div> 
+        </section>
+
+        <script type="text/javascript" src="index.js">
+
+
+
+        </script>
+    </body>
+</html>
diff --git a/home_page/index.js b/home_page/index.js
@@ -0,0 +1,35 @@
+let bg = document.getElementById("bg");
+let moon = document.getElementById("moon");
+let mountain = document.getElementById("mountain");
+let road = document.getElementById("road");
+let text = document.getElementById("text");
+
+window.addEventListener('scroll',function(){
+    var value = window.scrollY;
+
+    bg.style.top = value * 0.5 + 'px';
+    moon.style.left = -value * 0.5 + 'px';
+    mountain.style.top = -value * 0.15 + 'px';
+    road.style.top = value * 0.15 + 'px';
+    text.style.top = value * 1 + 'px';
+
+});
+
+const buttons = document.querySelectorAll('a');
+buttons.forEach(btn =>{
+btn.addEventListener('click' , function(e){
+        let x = e.pageX - e.target.offsetLeft;
+        let y = e.pageY - e.target.offsetTop;
+
+         let ripples = document.createElement('span');
+         ripples.style.left = x + 'px';
+         ripples.style.top = y + 'px';
+         this.appendChild(ripples);
+
+         setTimeout(() => {
+            ripples.remove()
+         },1000);
+    });
+});
+
+
diff --git a/home_page/moon.png b/home_page/moon.png
diff --git a/home_page/mountain.png b/home_page/mountain.png
diff --git a/home_page/road.png b/home_page/road.png
diff --git a/home_page/styles.css b/home_page/styles.css
@@ -0,0 +1,245 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+*{
+   margin: 0;
+   padding: 0;
+   font-family: 'poppins',sans-sarif;
+}
+body{
+    background: #0a2a43;
+    min-height: 1500px;
+}
+section{
+    position:relative;
+    width: 100%;
+    justify-content: center ;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+section:before{ 
+    content:'';
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 100px;
+    background: linear-gradient(to top, #0a2a43,transparent);
+    z-index: 10000;
+
+}
+section img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit:cover;
+  pointer-events: none;
+
+}
+section:after{ 
+    content:'';
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 100px;
+    background: #0a2a43;
+    z-index: 10000;
+    mix-blend-mode: color;
+}
+#text{
+    position: relative;
+    color: #fff;
+    font-size: 10em;
+    z-index: 1;
+
+}
+#road{
+    z-index:2;
+}
+
+div{
+
+    position:relative;
+    width: 100%;
+    justify-content: center ;
+    height: 100vh;
+    overflow: hidden;
+    display:block;
+    align-items: center;
+    position: relative;
+    color: #fff;
+    font-size: 1em;
+    padding-top: 5%;
+    text-align: center;
+
+
+}
+a
+{
+    position: relative;
+    display: inline-block;
+    padding: 12px 36px;
+    margin-top: 30px;
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase; 
+    font-size: 18px;
+    letter-spacing: 2px;
+    border-radius: 40px;
+    overflow: hidden;
+    background: linear-gradient(90deg,#0162c8,#55e7fc);
+}
+a:nth-child(2){
+    background: linear-gradient(90deg,#755bea,#ff72c0);
+}
+
+span{
+    position: absolute;
+    background: #fff;
+    transform: translate(-50%, -50%);
+    pointer-events:none;
+    border-radius: 50%;
+    animation: animate 1s linear infinite;
+}
+@keyframes animate
+{
+    0%{
+        width: 0px;
+        height: 0px;
+        opacity: 0.5;
+    }
+    100%{
+        width: 50px;
+        height: 50px;
+        opacity: 0;
+
+    }
+}
+
+
+
+
+section .contact{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    min-height: 100vh;
+    background: #010615;
+
+}
+.box{
+    position: relative;
+    width: 300px;
+    height: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 40px;
+    transition: 0.5s;
+    background: #010615;
+
+}
+
+.box .imgBx {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+.box:hover{
+    height:400px;
+}
+
+.box .imgBx img{
+    max-width: 100%;
+    opacity: 0.1;
+    transition: 0.5s;
+}
+
+.box:hover .imgBx img{
+    opacity:1;
+}
+.box:before{
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: #fff;
+    z-index: -1;
+}
+
+.box:after{
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: #fff;
+    z-index: -2;
+    filter: blur(40px);
+}
+.box:before,
+.box:after{
+  background: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
+}
+
+
+
+.box:nth-child(2):before,
+.box:nth-child(2):after{
+    background: linear-gradient(235deg,#ff005e,#010615,#fbff00);
+}
+
+.box:nth-child(3):before,
+.box:nth-child(3):after{
+    background: linear-gradient(235deg,#772aff,#010615,#2196F3);
+}
+
+.box .content{
+     position: absolute;
+     bottom: 0;
+     left: 10px;
+     right: 10px;
+     bottom: 10px;
+     height: 10px;
+     background: rgba(0,0,0,0.4);
+     display:flex;
+     justify-content: center;
+     align-items: center;
+     text-align: center;
+     opacity:0;
+     transition:0.5s;
+
+}
+.box:hover .content{
+    opacity:1;
+
+}
+
+.box .content h2 {
+    font-size: 20px;
+    color: #fff;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 1px;
+
+}
+
+.box .content span {
+    font-size: 14px;
+    color: #fff;
+    font-weight: 200;
+    letter-spacing: 2px;
+
+}
+
+
+