[Fix]:complete responsive in mobile and tablet view

GeekHaven · Jun 19, 2020 · ad0ef5a · ad0ef5a
1 parent 70abecb
commit ad0ef5a
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 62 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.css b/index.css
@@ -34,8 +34,20 @@ body{
 
 .wrapper {
     width: 100%;
-    max-width: 90rem;
+    max-width: 100rem;
     margin: 0 auto;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 25px;
+    line-height: 30px;
+
+}
+
+
+.navbar img{
+    position: absolute;
+
+    width:80px;
+    height: 70px;
 }
 
 nav{
@@ -45,21 +57,28 @@ nav{
     margin-top: 66px;
 }
 
-.nav-logo{
-    float: left;
-    position: absolute;
-    top: 50px;
-    left:76px;
+.navbar-right{
+    position: relative;
 }
 
-.logo{
-    width: 112px;
-    height: 100px;
+.navbar-nav li a{
+    color: #13F7D2;
+    padding-left: 50px !important;
+    font-weight: bolder;
+
 }
 
-.svg-white
+.navbar-nav li a:hover{
+    color: #000000;
+}
+
+@media screen and (max-width:1400px)
 {
-    filter: invert(82%) sepia(100%) saturate(15%) hue-rotate(120deg) brightness(106%) contrast(105%);
+    .navbar{
+        margin-left: -20px;
+        width: 100%;
+        padding-bottom: 90px ;
+    }
 }
 
 .nav-right{
@@ -83,6 +102,10 @@ nav{
     background-color:#181a19;
 }
 
+.navbar-default .navbar-toggle .icon-bar {
+    background-color:white;
+}
+
 .toggle-button i{
     color:#FFFFFF;
     font-size: 35px;
@@ -95,7 +118,7 @@ nav{
 .intro-header .sub-heading{
     text-align: left;
     left: 110px;
-    margin-left: 6%;
+    margin-left: 1%;
     color: var(--text_color);
     font-weight: lighter;
     font-size: 36px;
@@ -105,7 +128,8 @@ nav{
 .intro-header .main-heading{
     color: #FFFFFF;
     font-size: 150px;
-    margin-left: 6%;
+    margin-left: 1%;
+    font-weight: bold;
     text-align: left;
     left: 94px;
     margin-top: 0px;
@@ -118,17 +142,13 @@ nav{
     position: relative;
     max-width:85ch;
     margin:10px 80px;
+    margin-left: 1%;
     margin-bottom: 50px;
     line-height: 1.53;
     font-size: 18px;
 }
 
-.dots-1 img{
-    width: 200px;
-    height: 95px;
-    position: relative;
-    left: 84%;
-}
+
 .view-all{
     font-family: 'Montserrat', sans-serif;
     font-style: normal;
@@ -250,39 +270,33 @@ nav{
 }
 @media only screen and (max-width: 800px) {
 
-    .logo{
-        transform: scale(0.7);
-    }
-
-    .nav-logo{
-        top:20px;
-        left:50px;
+    .navbar img{
+        width: 60px;
+        height: 50px;
+        left:70px;
     }
 
-    .nav-a{
-        font-size: 18px;
-        padding: 10px 16px;
-    }
-
-    .nav-right{
-        position: relative;
-        top:-8px;
+    .navbar{
+        margin-left: -10px;
+        width: 100%;
+        padding-bottom: 30px ;
     }
 
     .intro-header .main-heading{
         font-size: 67px;
         position: relative;
-        left:4%;
+        left:65px;
     }
 
     .intro-header .sub-heading{
         font-size: 25px;
         position: relative;
-        left:4.5%;
+        left:65px;
     }
 
     .intro-header p{
         font-size: 17px;
+        padding-left: 70px;
     }
 
     .dots-1 img{
@@ -359,16 +373,33 @@ nav{
         display: none;
     }
 
+}
+
+@media screen and (max-width:400px)
+{
+
+    .navbar img{
+        top:7px;
+        left:50px;
+    }
+
     .intro-header .sub-heading{
-        margin-left: 11%;
+        font-size: 25px;
+        left:9%;
+        padding-bottom: 15px;
     }
 
     .intro-header .main-heading{
-        margin-left: 11%;
+        font-size: 55px;
+        left:9%;
     }
 
     .intro-header p{
         font-size: 15px;
+        margin:0 auto;
+        max-width: 100ch;
+        left:-8%;
+        padding-bottom: 20px;
     }
 
 }
diff --git a/index.html b/index.html
@@ -3,37 +3,42 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GeekHaven</title>
-    <link rel="shortcut icon" href="images/gh.png" type="image/png" />
+    <link rel="shortcut icon" href="images/gh.svg" type="image/png" />
     <script src="/index.js" type="text/javascript"></script>
     <script src="/resp_nav.js" defer></script>
     <link rel="stylesheet" href="index.css" type="text/css">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@300&display=swap" rel="stylesheet">
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+
     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 </head>
 <body>
     <div class="wrapper">
-        <nav>
-            <div class="nav-logo">
-                <img src="./images/gh.svg" class="svg-white logo">
-            </div>
-            <div class="nav-right">
-                <a class="nav-a" href="#">Blogs</a>
-                <a class="nav-a" href="#">Wings</a>
-                <a class="nav-a" href="#">Coordinators</a>
-                <a class="nav-a" href="#">Contacts</a>
-            </div>
-            <a href="#" class="toggle-button">
-                <i class="fa fa-bars"></i>
-            </a>
-
-        </nav>
+            <nav class="navbar">
+                <div class="container-fullwidth">
+                  <img src="./images/gh.png" >
+                  <!-- Brand and toggle get grouped for better mobile display -->
+                  <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" style="color: aliceblue !important;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                      <span class="sr-only">Toggle navigation</span>
+                      <i class="fa fa-bars" aria-hidden="true"></i>
+                    </button>
+                  </div>
+
+                  <!-- Collect the nav links, forms, and other content for toggling -->
+                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                    <ul class="nav navbar-nav navbar-right">
+                      <li><a href="#">Blogs</a></li>
+                      <li><a href="#">Wings</a></li>
+                      <li><a href="#">Coordinators</a></li>
+                      <li><a href="#">Contacts</a></li>
+
+                    </ul>
+                  </div><!-- /.navbar-collapse -->
+                </div><!-- /.container-fluid -->
+              </nav>
 
-        <div class="dots-1">
-            <img src="./images/dots.png">
-        </div>
-
         <div class="intro-header">
             <h1 class="sub-heading">IIIT ALLAHABAD</h1>
             <h1 class="main-heading">GeekHaven</h1>
@@ -191,11 +196,10 @@ <h1 class="main-heading">GeekHaven</h1>
                 </div>        
             </div>
 
-            <img src="images/dots.png" class="overall-section-dots">
-
     </section>
 
-
+<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
 </body>
 </html>