Skip to content
Snippets Groups Projects
Commit 3618d57a authored by Maxwell Nyimbili's avatar Maxwell Nyimbili
Browse files

Update footer.css

parent 272a723e
No related branches found
No related tags found
No related merge requests found
Pipeline #195017 passed
@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: blue;
}
@media screen and (max-width: 1280px){
.row_1{
display: grid;
grid-template-columns: 19.5% 20% 25% 20% 30%;
}
.footer_col_2{
display: grid;
grid-template-columns: 60% 70% 70% 70% 80% 70% 70% 60%;
}
.footer_col_2 img{
width: 75px;
}
.footer_col_2 .fusion{
width: 30px;
}
}
/* End of Tablet landscape */
@media screen and (max-width: 970px){
.row_1{
display: grid;
grid-template-columns: 30% 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:auto;
justify-content: space-evenly;
padding-top: 130px;
}
.footer_col_2 img{
width: 75px;
}
.footer_col_2 .fusion{
width: 30px;
}
}
/* Phone view */
@media screen and (max-width: 700px){
.row_1{
font-size: 15px;
display: grid;
grid-template-columns: auto;
padding-left: 0px;
}
.footer_logo{
padding-bottom: 30px;
}
.footer_col_2{
padding: 0px;
left: 0;
display: grid;
grid-template-columns: auto;
/* 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;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment