Merge pull request #28 from arunsingh009/arunnavbar

navbar update + fully responsive
ishika1727 · Oct 5, 2021 · 20d0fd5 · 20d0fd5
2 parents 5353c78 + 9ba629a
commit 20d0fd5
Show file tree

Hide file tree

Showing 3 changed files with 429 additions and 235 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/css/clone.css b/css/clone.css
@@ -1,11 +1,29 @@
-#one
-{
+* {
+    margin: 0;
+    padding: 0;
+}
 
+.nav {
+    position: sticky;
+    top: 0;
+    background-color: black;
+    height: 20vh;
+    width: 100%;
+    margin-bottom: 0;
+}
+#one::before {
+    content: "";
+    height: 132vh;
+    width: 100%;
     background: linear-gradient( 135deg, rgba(252, 207, 49, 0.5), rgba(245, 85, 85, 0.7) 100%), url("../assests/landing-page.jpg") no-repeat 0% 50%;
+    position: absolute;
+    top: 20vh;
+    background-position: center;
     background-size: cover;
-    margin: 0;
-    padding: 0;
+    z-index: -1;
+    opacity: 0.8;
 }
+
 #one1
 {
     color: white;
@@ -29,6 +47,84 @@ a:hover, a:active
 {
     color: greenyellow;
 }
+.navbtn{
+    position: absolute;
+    top:20px;
+    right: 10px;
+}
+.navbtn1{
+    position: absolute;
+    top:20px;
+    right: 10px;
+    visibility: hidden ;
+}
+/* navbar responsive  */
+@media(max-width:1600px){
+    #one2{
+        display: block;
+    }
+    #one_2{
+        display: none;
+    }
+    .navbtn{
+        display: none;
+    }
+}
+@media(max-width:1200px) {
+    a:link, a:visited {
+        font-size: 18px;
+        padding: 4px 15px;
+    }    
+}
+@media(max-width:850px) {
+    #one::before {
+        height: 120vh;
+    }
+    a:link, a:visited {
+        padding: 4px 5px;
+    }
+
+}
+@media(max-width:950px){
+    .nav{
+        height: 15vh;
+    }
+    #one2{
+        display: none;
+    }
+    #one::before{
+        top:15vh;
+    }
+    #one_2{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 40vh;
+        background-color: black;
+        justify-content: flex-start;
+        align-items: left;
+        margin: 0;
+        visibility: hidden;
+    }
+    #one_2 a{
+        text-align: left;
+        padding-left: 5%;
+
+    }
+    .navbtn{
+        display: block;
+    }
+
+}
+@media(max-width:600px) {
+    #one::before {
+        top:15vh;
+        height: 80vh;
+    }
+}
+.mh{
+    font-size: 1.1em;
+}
 #one3
 {
     font-size: 60px;
@@ -42,6 +138,10 @@ a:hover, a:active
 .mid {
     text-align: center;
 }
+.mid img {
+    width: 60%;
+    height: auto;
+}
 
 #one31
 {