updated responsiveness

GeekHaven · Jun 18, 2020 · cb70ca6 · cb70ca6
1 parent c5b0803
commit cb70ca6
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 59 deletions.
diff --git a/index.css b/index.css
@@ -2,7 +2,9 @@
     --text_color:#13F7D2;
     --background_color:#252628;
 }
-
+body{
+    background-color:#252628 !important;
+}
 body::-webkit-scrollbar-track
 {
 	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
@@ -142,17 +144,7 @@ nav{
     font-size: 24px;
     font-weight:800px ;
 }
-.wing-section{
-    display:inline-block;
-}
-.wing-box{
-    width: 25%;
-    padding: 20px;
-    margin-left: 4%;
-    margin-top: 5%;
-    display: inline;
-    float: left;
-}
+
 .wing-title{
     font-family: 'Poppins', sans-serif;
     font-style: normal;
@@ -201,69 +193,64 @@ nav{
     font-size: 65px;
     line-height: 79px;
     color: #13F7D2;
-    display: inline;
-    float: left;
-    padding: 20px;
-    margin-left: 3%;
+    padding: 35px;
 }
 .overall-box-cover{
-    margin-left: 10%;
-    display: inline-block;
-    width:55%;
-    margin-top: 150px;
+    margin-right: 0px;
+    margin-left: 0px;
+    margin-top: 50px;
 }
 .overall-box{
-    display: inline;
-    float: left;
-    margin-left: 4%;
-    width: 40%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 50px;
 }
 .overall-title{
     font-family: 'Montserrat', sans-serif;
     font-style: normal;
     font-weight: 600;
+    padding: 10px;
     font-size: 24px;
     line-height: 29px;
     color: #FFFFFF;
-    text-align: center;
 }
 .overall-post{
     font-family: Montserrat;
     font-style: normal;
     font-weight: 600;
     font-size: 18px;
+    padding: 10px;
     line-height: 22px;
     color: #13F7D2;
-    text-align: center;
 }
 .overall-image{
     width: 200px;
     height: 200px;
     background-color: #C4C4C4;
-    margin-left: 17%;
 }
 .overall-icon-div{
-    width: 90%;
-    margin-left: 10%;
-    display: inline-block;
+
 }
 .overall-icon{
     border-radius: 100%;
     border: 3px solid #9AA6A5;
     font-size: 25px;
     color: #9AA6A5;
     padding: 10px;
-    margin-left:10%;
     display: inline;
+    margin-left: 1em;
     float: left;
 }
 
 .overall-section-dots{
-    margin-left: 3%;
     padding: 20px;
-    margin-top: 100px;
+    margin-top: 50px;
+    margin-left: 3%;
+}
+.margin-div-bottom{
+    margin-bottom: 50px;
 }
-
 @media only screen and (max-width: 800px) {
 
     .logo{
@@ -304,15 +291,6 @@ nav{
     .dots-1 img{
         left:70%;
     }
-
-    .wing-box{
-        width: 37%;
-        padding: 20px;
-        margin-left: 3%;
-        margin-top: 5%;
-        display: inline;
-        float: left;
-    }
     .wing-title {
         font-size: 18px;
     }
@@ -340,7 +318,7 @@ nav{
         font-size: 40px;
     }
     .overall-icon-div{
-        margin-left: 0px;
+
     }
     .overall-icon{
         padding: 5px;

diff --git a/index.html b/index.html
@@ -8,6 +8,8 @@
     <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>
@@ -40,16 +42,16 @@ <h1 class="main-heading">GeekHaven</h1>
 
     </div>
 
-    <div> 
+    <div style="margin-bottom: 50px;"> 
         <p class="view-all">
             VIEW ALL WINGS
         </p>
         <div class="arrow-down">
             <i class="fa fa-angle-down" aria-hidden="true"></i>
         </div>
     </div>
-    <section class="wing-section">
-        <div class="wing-box">
+    <section class="container-fluid">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img src="images/webd.png" class="wing-image">
             <p class="wing-title">
                 Web Development
@@ -59,7 +61,7 @@ <h1 class="main-heading">GeekHaven</h1>
             </p>
             <a href="#" class="more">More</a>
         </div>
-        <div class="wing-box">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img src="images/appd.png" class="wing-image">
             <p class="wing-title">
                 App Development
@@ -69,7 +71,7 @@ <h1 class="main-heading">GeekHaven</h1>
             </p>
             <a href="#" class="more">More</a>
         </div>
-        <div class="wing-box">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img src="images/foss.png" class="wing-image">
             <p class="wing-title">
                 FOSS
@@ -79,7 +81,7 @@ <h1 class="main-heading">GeekHaven</h1>
             </p>
             <a href="#" class="more">More</a>
         </div>
-        <div class="wing-box">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img src="images/ai.png" class="wing-image">
             <p class="wing-title">
                 Artificial Intelligence
@@ -89,7 +91,7 @@ <h1 class="main-heading">GeekHaven</h1>
             </p>
             <a href="#" class="more">More</a>
         </div>
-        <div class="wing-box">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img src="images/cyb.png" class="wing-image">
             <p class="wing-title">
                 Cyber Security
@@ -99,7 +101,7 @@ <h1 class="main-heading">GeekHaven</h1>
             </p>
             <a href="#" class="more">More</a>
         </div>
-        <div class="wing-box">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img src="images/design.png" class="wing-image">
             <p class="wing-title">
                 Design
@@ -109,7 +111,7 @@ <h1 class="main-heading">GeekHaven</h1>
             </p>
             <a href="#" class="more">More</a>
         </div>
-        <div class="wing-box">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img src="images/cc.png" class="wing-image">
             <p class="wing-title">
                 Competitive Programming
@@ -120,20 +122,20 @@ <h1 class="main-heading">GeekHaven</h1>
             <a href="#" class="more">More</a>
         </div>
 
-        <div class="wing-box">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img class="dot-image" src="images/arrow.png">
         </div>
-        <div class="wing-box">
+        <div class="col-12 col-sm-6 col-md-4 margin-div-bottom">
             <img class="dot-image" src="images/dots.png">
         </div>
     </section>
 
     <section class="overall-section">
-            <p class="overall-heading">
+            <p class="overall-heading row">
                 Overall <br>Coordinator    
             </p>
-            <div class="overall-box-cover">
-                <div class="overall-box">
+            <div class="overall-box-cover row">
+                <div class="col-12 col-sm-6 overall-box">
                     <div class="overall-image"></div>
                     <p class="overall-title">
                         Prateek Mishra
@@ -160,7 +162,7 @@ <h1 class="main-heading">GeekHaven</h1>
 
                     </div>
                 </div>
-                <div class="overall-box">
+                <div class="col-12 col-sm-6 overall-box">
                     <div class="overall-image"></div>
                     <p class="overall-title">
                         Manthan Raju Surkar