Merge pull request #75 from shantanugondane/shantanu

Shantanu
Niraj-1729 · Oct 24, 2023 · f7209fd · f7209fd
2 parents bd58d2a + 6629fcf
commit f7209fd
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 2 deletions.
diff --git a/parallax_effect/index.html b/parallax_effect/index.html
@@ -15,7 +15,13 @@
   </head>
   <body>
     <div id="wrapper">
-      <div class="nav-container">
+      <div class="nav-bar">
+        <a href="index.html" class="nav">Home</a>
+        <a href="#section7" class="nav">About</a>
+        <a href="#section1" class="nav">Storie</a>
+
+      </div>
+      <!-- <div class="nav-container">
         <nav>
           <ul>
             <li><a href="index.html">Home</a></li>
@@ -33,7 +39,7 @@
                 </li>
             </ul>
           </nav>
-      </div>
+      </div> -->
       <div class="container bg">
         <img src="assets/2222765.jpg" class="background" />
         <img

diff --git a/parallax_effect/main.css b/parallax_effect/main.css
@@ -13,6 +13,68 @@
 
   background-color: rgb(39, 33, 33);
 }
+body {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+	background: #222;
+}
+:root {
+	--clr-primary: #ffffff;
+}
+.nav-bar {
+
+  margin-left: 40rem;
+	display:inline;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+.nav {
+	position: relative;
+	padding: 0.5em 1em;
+	color: #777;
+	font-size: 1.6em;
+	text-align: center;
+	text-decoration: none;
+	font-family: Inter, Arial;
+	font-weight: 600;
+	transition: color 0.3s ease-out;
+}
+.nav::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--clr-primary);
+	transform: scaleY(0);
+	transition: transform 0.3s ease-out;
+	mix-blend-mode: difference;
+	transform-origin: bottom;
+}
+.nav:hover {
+	color: var(--clr-primary);
+}
+.nav:focus {
+	color: var(--clr-primary);
+}
+.nav:focus::before {
+	transform: scaleY(1) scaleX(1);
+	transform-origin: top;
+}
+.nav:nth-child(2n):focus::before {
+	transform-origin: bottom;
+}
+.nav:nth-child(2n)::before {
+	transform-origin: top;
+}
+
 
 .container {
   position: relative;