Upload New File

static/footer.css

+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  body{
+    background-color: whitesmoke;
+
+  }
+
+  .container{
+    margin: auto;
+    padding-top: 50px;
+    padding-left: 60px;
+    padding-right: 60px;
+  }
+  /* row 1 styels */
+  .row_1{
+    display: grid;
+    grid-template-columns: 15% 20% 25% 20% 30%;
+  }
+ 
+  .footer_col_1 ul{
+    list-style: none;
+  }
+ 
+  footer{
+    max-width:100%;
+    overflow-x: hidden;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 600;
+    background-color: #b3d6ec;
+    padding:65px 0;
+  }
+ 
+ .footer_col_1{
+    width: 500px;
+    padding: 0 15px;
+    padding-bottom: 20px;
+ }
+ 
+ h4{
+    font-size: 16px;
+    color: rgb(31, 29, 29);
+    margin-bottom: 15px;
+    text-transform: uppercase;
+    font-weight: bold;
+    position: relative;
+ }
+ .footer_col_1 ul li a{
+    font-size: 15px;
+    text-decoration: none;
+    text-transform: capitalize;
+    color: rgb(31, 29, 29);
+    font-weight: 600;
+    display: block;
+    transition: all 0.3s;
+ }
+ 
+ .footer_col_1 ul li a:hover{
+    color: rgb(31, 29, 29);
+    padding-left: 8px;
+ }
+ /* End of row 1 styles */
+ 
+ 
+ /* row 2 styels */
+ .footer_col_2{
+    display: grid;
+    grid-template-columns: 85% 85% 85% 85% 85% 85% 85% 85%;
+    
+  }
+ 
+  .benchling{
+    padding-top: 14px;
+  }
+  .snapgene{
+    padding-top: 14px;
+  }
+  .clickup{
+    padding-top: 13px;
+  }
+  .labster{
+    padding-top: 10px;
+  }
+  .matlab{
+    padding-top: 7px;
+  }
+  .unsplashed{
+    padding-top: 17px;
+  }
+ 
+  .fusion{
+    padding-top: 8px;
+  }
+  /* End of row 2 styles */
+ 
+ 
+  .footer_col_3{
+    display: grid;
+    grid-template-columns: 320% 80px; 
+    padding-top: 100px;
+    padding-bottom: 10px;
+  }
+ 
+  .footer_col_3 {
+    font-size:14px;
+  }
+  .footer_col_3 p{
+    color: rgb(94, 93, 93);
+  }
+  .footer_col_3 span a{
+    text-decoration: none;
+    color: rgb(109, 109, 230);
+  }
+ 
+  .footer_col_3 a{
+    text-decoration: none;
+    color: rgb(109, 109, 230);
+  }
+ 
+  .row_3 {
+    font-size: 19px;
+    margin-left: 0;
+  }
+
+  .section{
+    background: #122331;
+    position: relative;
+    max-width: 100vw;
+    display: flex;
+    font-family: 'Nunito', sans-serif;
+    padding: 1rem 2rem 1rem 4rem;
+    
+  }
+
+  .section .section-links{
+    padding-top: 9px;
+    display: flex;
+  }
+  
+  .section-links .section-link{
+    color: white;
+    text-decoration: none;
+    padding-right: 20px;
+    transition: all 0.3s;
+  }
+
+  .section-links .section-link:hover{
+    color: #f87a53;
+  }
+
+  @media screen and (max-width: 970px){
+    .row_1{
+      padding-left: 30px;
+      display: grid;
+      grid-template-columns: 15% 20% 30% 20%;
+     
+    }
+
+    .footer_col_2{
+      display: grid;
+      grid-template-columns: 200% 200% 200% 200% ;
+      padding-left: 100px;
+    }
+    .footer_col_3{
+      display: grid;
+      grid-template-columns: 80% 80% 80%; 
+      justify-content: space-evenly;
+      padding-top: 130px;
+    }
+  }
+
+ 
+
+/* Phone view */
+  @media screen and (max-width: 700px){
+    .row_1{
+      font-size: 15px;
+      padding-left: 30px;
+      display: grid;
+      grid-template-columns: auto;
+    }
+    .footer_logo{
+      padding-bottom: 10px;
+    }
+  
+
+    .footer_col_2{
+      padding-left: 0px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(4, 1fr);
+    }
+    .footer_col_3{
+      padding-top: 20px;
+    }
+
+    .footer_col_3, a{
+      font-size: 10px;
+      display: grid;
+      grid-template-columns: 30% 30%;
+      justify-content: left;
+    }
+    .footer_col_3 .text{
+      font-size: 10px;
+    }
+
+    .section .section-links{
+      justify-content: center;
+      font-size: x-small;
+    }
+    .section img{
+      width: 90px;
+    }
+
+  }
\ No newline at end of file