zinc oar
hello, here is my project: https://github.com/shrayamutsuddi/LandingPage-Catalog.git
I need help in achieving an overlay effect (in the footer section) that looks like this.
someone kindly help this sis out. i've been trying since the last 15 days now.
glass vale
hello, here is my project: https://github.com/shrayamutsuddi/LandingPage-Catalog...
Hello, I just submitted a pull request to your GitHub repository to style the footer of your landing page. You've done excellent work on this project, but there is room for improvement in terms of site responsiveness. Good luck, and keep up the good work!
/********************/
/* Footer */
/********************/
footer {
background-image: url('img/footer.jpg');
background-repeat: no-repeat;
/* background-size: cover; */
/* object-fit: cover; */
position: relative;
height: 480px;
/* padding-top: 10%;
z-index: 0; */
/* adjusting the background */
background-size: cover;
background-position: center;
/*center the content inside the footer*/
display: grid;
place-content: center;
/* add some padding */
padding: 1rem;
}
footer:before {
background: linear-gradient(135deg, #1e568a 0%, #093157 100%);
/* background-repeat: no-repeat;
background-size: cover; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* opacity: 0.5; */
opacity: 0.8;
/* content: 'TEST'; */
content: '';
/* height: 480px; */
}
/* footer .container{
position: absolute;
top: 25%;
left: 25%;
} */
.container-wrapper {
/* display: flex;
justify-content: space-between;
border: 2px solid red;
opacity: 0.5; */
color: white;
position: relative;
z-index: 2;
/* Styling the footer content */
display: grid;
grid-template-columns: 2fr 1.2fr;
}
.social-media-icons {
display: flex;
flex-direction: row;
gap: 16px;
}
.col h3 {
font-size: 16px;
font-weight: 600;
}
.col ul {
padding-left: 0px;
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-container-right {
display: flex;
gap: 80px;
}
.col a {
color: #fff;
font-family: 'DM Sans';
font-size: 14px;
font-weight: 400;
}
unique jay
Hello, I just submitted a pull request to your GitHub repository to style the fo...
Curious why you have a pseudo element on the footer that has the same properties as the footer background? Although there’s some commented out lines so I’m trueing to make sense of what and why. For example on the footer, background-size: cover is commented out then declared again?
glass vale
Curious why you have a pseudo element on the footer that has the same properties...
It's from the original code; I didn't change it. I just tried to fix the styling problem. Truly, the code can be cleaned, and unused code can be deleted.