Szabi
KPCKevin Powell - Community
•Created by Szabi on 12/29/2022 in #front-end
I want to darken my banner background images
28 replies
KPCKevin Powell - Community
•Created by Szabi on 12/23/2022 in #front-end
How can I align some paragraphs to start at the centered title's starting point
32 replies
KPCKevin Powell - Community
•Created by Szabi on 12/20/2022 in #front-end
Hamburger ICON issue
I have a hamburger icon svg, it should toggle the navigation on/off, and my problem is when anyone loads the page they have to click on it 2 times to see the navigation items. The first click on it doesn't toggle the navigation.
6 replies
KPCKevin Powell - Community
•Created by Szabi on 12/8/2022 in #ui-ux
Background image + linear gradient combined not working on phone (safari)
I have a banner on my site which has a linear gradient background on it, it works well on desktop, but if I open it on my phone I can't see the background image, only the linear gradient background shows up.
There is the code
#banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 11rem;
width: 100%;
height: 400px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: animate 30s step-end infinite;
}
@keyframes animate {
0% {
background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)),
url('../img/banner_1.JPG');
}
20% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_2.JPG'); } 40% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_3.JPG'); } 60% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_4.JPG'); } 80% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_5.JPG'); } 100% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_6.JPG'); } }
20% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_2.JPG'); } 40% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_3.JPG'); } 60% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_4.JPG'); } 80% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_5.JPG'); } 100% { background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)), url('../img/banner_6.JPG'); } }
1 replies
KPCKevin Powell - Community
•Created by Szabi on 11/27/2022 in #ui-ux
Check my site I created for my project in school (you probably won't understand the text)
https://lovely-swan-09f5fa.netlify.app/
I wanna know what you guys think about the design!
10 replies