Skip to content

Commit

Permalink
Merge pull request #408 from ratishjain12/footer-section
Browse files Browse the repository at this point in the history 
fixed footer section
  • Loading branch information
@swapnilsparsh
swapnilsparsh authored Aug 3, 2023
2 parents 00b710f + 0d8c8fb commit 1d076f4
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 34 deletions.
4 changes: 2 additions & 2 deletions components/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Footer = () => {

return (
<>
<div className="footer" role="footer">
<div className="footer" role="footer" >
<footer className="copyright">
<div className="footer-question">
<h2>
Expand Down Expand Up @@ -81,7 +81,7 @@ const Footer = () => {
</div>
<div className="column2">
<Column2>
<Heading2>Explore</Heading2>
<Heading2 className="explore">Explore</Heading2>
<Link href="/ambassador">
<FooterLink aria-label="Ambassador Page"><FontAwesomeIcon icon={faMedal} />
<span>Ambassador</span></FooterLink>
Expand Down
135 changes: 103 additions & 32 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ nav .links-container {
padding-top: 5px;
}

.logo-containter>p {
.logo-containter > p {
color: var(--native1);
font-size: 1.5em;
font-weight: 700;
Expand All @@ -159,7 +159,7 @@ nav .links-container a {
color: var(--native1);
}

nav .links-container a>i {
nav .links-container a > i {
color: var(--native1);
}

Expand Down Expand Up @@ -467,7 +467,10 @@ replaced by just the links.*/
color: var(--native1);
}

.landing-page-header .header-details .search-container:hover .search::-webkit-input-placeholder {
.landing-page-header
.header-details
.search-container:hover
.search::-webkit-input-placeholder {
color: var(--native1);
}

Expand Down Expand Up @@ -521,7 +524,11 @@ replaced by just the links.*/
justify-content: flex-start;
}

.landing-page-header .header-details .landing-page-btn-container .discord-button .discord:hover {
.landing-page-header
.header-details
.landing-page-btn-container
.discord-button
.discord:hover {
background: none;
line-height: 0;
border: 0.5px solid #7289da;
Expand All @@ -532,7 +539,11 @@ replaced by just the links.*/
transform: scale(1.2);
}

.landing-page-header .header-details .landing-page-btn-container .discord-button .discord {
.landing-page-header
.header-details
.landing-page-btn-container
.discord-button
.discord {
background: none;
line-height: 0;
border: 0.5px solid #7289da;
Expand All @@ -543,12 +554,20 @@ replaced by just the links.*/
transition: all 0.3s ease-in-out;
}

.landing-page-header .header-details .landing-page-btn-container .discord-button img {
.landing-page-header
.header-details
.landing-page-btn-container
.discord-button
img {
width: 140px;
height: 36px;
}

.landing-page-header .header-details .landing-page-btn-container .explore-all-btn .call-to-action-btn {
.landing-page-header
.header-details
.landing-page-btn-container
.explore-all-btn
.call-to-action-btn {
background: none;
line-height: 0;
border: 0.5px solid rgba(0, 147, 237, 0.3);
Expand All @@ -574,7 +593,11 @@ replaced by just the links.*/
margin: 0rem 1.5rem;
}

.landing-page-header .header-details .landing-page-btn-container .explore-all-btn .call-to-action-btn:hover {
.landing-page-header
.header-details
.landing-page-btn-container
.explore-all-btn
.call-to-action-btn:hover {
color: var(--native1);
background: var(--primary);
}
Expand Down Expand Up @@ -889,7 +912,7 @@ replaced by just the links.*/
font-size: 16px;
font-weight: 500;
border-radius: 11px;
border: #0093ED 1.5px solid;
border: #0093ed 1.5px solid;
position: relative;
line-height: 24px;
cursor: pointer;
Expand Down Expand Up @@ -918,12 +941,12 @@ replaced by just the links.*/
}

.container .card-js .content .glow-button .glowing-button::before {
content: '';
content: "";
position: absolute;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(to right, #7DD8FF, var(--accent-10));
background: linear-gradient(to right, #7dd8ff, var(--accent-10));
opacity: 0;
filter: blur(20px);
transition: opacity 0.5s;
Expand Down Expand Up @@ -953,7 +976,6 @@ replaced by just the links.*/
transform: scale(0.7);
}


@keyframes glowAnimation {
0% {
opacity: 0;
Expand Down Expand Up @@ -1118,7 +1140,7 @@ replaced by just the links.*/
border-bottom: 1px dotted var(--accent-30);
}

.footer-question a:hover{
.footer-question a:hover {
border-bottom: 1px dotted var(--native2);
}

Expand Down Expand Up @@ -1151,7 +1173,7 @@ replaced by just the links.*/
width: 50%;
}

@media (min-width:320px) and (max-width:480px) {
@media (min-width: 320px) and (max-width: 480px) {
.footer {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -1187,7 +1209,7 @@ replaced by just the links.*/
}
}

@media screen and (min-width:481px) and (max-width:768px) {
@media screen and (min-width: 481px) and (max-width: 768px) {
.footer {
display: grid;
grid-template-columns: 1fr 1fr;
Expand Down Expand Up @@ -1221,17 +1243,21 @@ replaced by just the links.*/
width: 100%;
margin-top: -40px;
}
.explore {
margin-top: 21px;
}
}

@media (max-width:320px) {
@media (max-width: 320px) {
.footer {
width: fit-content;
width: 100%;
display: flex;
}

.footer-details {
display: flex;
align-items: center;
justify-content: space-around !important;
justify-content: start !important;
flex-wrap: wrap;
font-size: 8px;
margin-right: 0;
Expand All @@ -1240,18 +1266,29 @@ replaced by just the links.*/

.footer-question {
font-size: 15px;
margin-left: 10px;
/* margin-left: 10px; */
width: 100%;
margin-top: -40px;
}

.column1 {
margin-top: 14px;
}
.column2 {
margin-left: 0px;
}
.footer-copyright {
margin-left: 10px;
width: 100%;
}
}

@media (min-width:769px) and (max-width:1300px) {
@media (min-width: 769px) {
.footer-details {
align-items: center;
}
.explore {
margin-top: 20px;
}
.footer-copyright {
margin-left: 90px;
}
Expand Down Expand Up @@ -1374,6 +1411,46 @@ replaced by just the links.*/
font-size: 14px;
}
}
@media screen and (min-width: 426px) and (max-width: 767px) {
.footer {
width: 100%;
display: flex;
flex-direction: column;
padding-left: 10%;
}
.footer-question {
width: 300px;
padding-left: 3px;
}

.footer-details {
width: 55%;
display: flex;
justify-content: space-evenly;
font-size: 8px;
padding-left: 22px;
margin-bottom: -10px;
}

.footer-question {
font-size: 15px;
/* margin-left: 10px; */
width: 300px;
margin-top: -40px;
}
.column1 {
margin-left: 0px;
margin-top: 14px;
}
.column2 {
margin-left: 0px;
margin-top: 21px;
}
.footer-copyright {
margin-left: 10px;
width: 100%;
}
}

@media screen and (max-width: 768px) {
.container-landing .landing-page-details {
Expand Down Expand Up @@ -1443,7 +1520,6 @@ replaced by just the links.*/
text-align: left;
}


h2 span {
font-size: 1em !important;
}
Expand Down Expand Up @@ -1823,7 +1899,6 @@ replaced by just the links.*/
/* */
/* Global Search Ends*/


/* Pagination layout starts */
.paginationBttns {
margin-top: 50px;
Expand All @@ -1838,9 +1913,6 @@ replaced by just the links.*/
.paginationBttns {
flex-wrap: wrap;
align-content: flex-start;



}
}

Expand Down Expand Up @@ -1896,13 +1968,12 @@ replaced by just the links.*/
justify-content: center;
align-items: center;
height: 20px;
background-color: #00253A ;
margin:0px;
background-color: #00253a;
margin: 0px;
width: 100%;
height: 10vh;

}
.label:hover{
background-color:#0093ed ;
color: white;
.label:hover {
background-color: #0093ed;
color: white;
}

0 comments on commit 1d076f4

Please sign in to comment.