ZNP
KPCKevin Powell - Community
•Created by ZNP on 8/19/2024 in #front-end
Flex or Grid for cards?
4 replies
KPCKevin Powell - Community
•Created by Neσ许 on 5/8/2024 in #ui-ux
Which layout looks better?
Yeah and if you took out the underlines of "we are here to support" could work well then spacing it out the left area
27 replies
KPCKevin Powell - Community
•Created by Lloyd Peterson on 5/7/2024 in #front-end
How to achieve this style
If you wanna see my version here it is:
https://codepen.io/Ziphour/pen/VwOZbJZ
9 replies
KPCKevin Powell - Community
•Created by Justin... on 5/7/2024 in #ui-ux
Feedback/advise for my stepped progress bar
A way to click it and for it to show the map would be good 👍
6 replies
KPCKevin Powell - Community
•Created by Justin... on 5/7/2024 in #ui-ux
Feedback/advise for my stepped progress bar
yeah that's pretty good, that would work really well with animations getting filled up.
6 replies
KPCKevin Powell - Community
•Created by Justin... on 5/7/2024 in #ui-ux
Feedback/advise for my stepped progress bar
You could just have a single dot with numbers increasing.
If you wanted to go a step further it could have an outline that works it's way round the more you do.
6 replies
KPCKevin Powell - Community
•Created by Satcha Takam on 5/4/2024 in #ui-ux
Hi everyone, please can help me by commenting my first web page design
If you also let us know about the company. The specific purpose, the artstyle they have, any details about what they do, why they do it, their audience all helps
9 replies
KPCKevin Powell - Community
•Created by Satcha Takam on 5/4/2024 in #ui-ux
Hi everyone, please can help me by commenting my first web page design
just some advice on the nav bar, there's a large amount of info there. With words repeated (contact) whereas you could have navbar items that when you hover over them have drop down menus. To encapsulate the category
9 replies
KPCKevin Powell - Community
•Created by maxtana on 5/6/2024 in #front-end
Trying to style SVG Sprite with CSS
can you show your code
11 replies
KPCKevin Powell - Community
•Created by ZNP on 5/5/2024 in #front-end
What's the right mindset when making CSS and BEM
Thank you this really helped me a lot. I think I'll stick with my way of using bem and combining it with code reusability and ability to add or change things in the future.
8 replies
KPCKevin Powell - Community
•Created by ZNP on 5/5/2024 in #front-end
What's the right mindset when making CSS and BEM
This below was Kevin's:
*, *::before, *::after {
box-sizing: border-box;
}
/*
font-family: 'Roboto', sans-serif;
font-family: 'Playfair Display', serif;
*/
body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
color: #222C2A;
}
img {
max-width: 100%;
}
h1, h2 {
font-family: 'Playfair Display', serif;
font-weight: 900;
margin-top: 0;
line-height: 1.1;
}
section {
padding: 4em 0;
}
.container {
width: 85%;
margin: 0 auto;
max-width: 1128px;
}
.section-title {
font-size: 2.25rem;
color: #F3EED9;
}
.section-title--dark {
color: #824936;
}
.intro {
background: #F3EED9;
text-align: center;
color: #824936;
min-height: 660px;
display: flex;
align-items: center;
}
.intro__text {
text-transform: uppercase;
letter-spacing: 10px;
font-size: 1.125rem;
color: #222C2A;
margin: 0 0 .25em;
}
.intro__title {
font-size: 3rem;
}
.section-three {
background-color: #222C2A;
color: #fff;
}
.section-four {
background-color: #824936;
color: #fff;
}
@media (min-width: 800px) {
.row {
display: flex;
}
.col {
width: 100%;
}
.col + .col {
margin-left: 5em;
}
.intro__title {
font-size: 3.75rem;
}
}8 replies
KPCKevin Powell - Community
•Created by ZNP on 5/5/2024 in #front-end
What's the right mindset when making CSS and BEM
I want to understand the mindset difference, and knowing where and how to reuse classes- do you look at the website template or page and:
Look at what could be reused,
What could be filled with inheritance and what only needs slight difference.
How do you know how to write css so it can be updated easily?
8 replies
KPCKevin Powell - Community
•Created by ZNP on 5/5/2024 in #front-end
What's the right mindset when making CSS and BEM
This was my code for the fourth challenge
8 replies
KPCKevin Powell - Community
•Created by ZNP on 5/5/2024 in #front-end
What's the right mindset when making CSS and BEM
8 replies
KPCKevin Powell - Community
•Created by Cly on 3/17/2024 in #front-end
how to code images that will pop up when i hover over the center image?
Experimented with it for quite a bit and I love it, learnt so much
11 replies
KPCKevin Powell - Community
•Created by Cly on 3/17/2024 in #front-end
how to code images that will pop up when i hover over the center image?
That's amazing
11 replies
KPCKevin Powell - Community
•Created by ZNP on 3/15/2024 in #front-end
Frontend dev project for a star rating system
oh shit is it because of () => callback(index) getting the index of the clicked star? and then the rest of the code says any index number less than or equal to is a gold star?!
24 replies
KPCKevin Powell - Community
•Created by ZNP on 3/15/2024 in #front-end
Frontend dev project for a star rating system
and how come you don't need to assign an argument for the clicked value, how does the code know which index within the star array it refers to in this:
const callBack = (index) => {
// when clicked we loop through all the stars img
stars.forEach((img, idx) => {
// using the index we are setting all the stars starting from the first upto the one that's clicked to orange star
if (idx <= index) {
img.src = "https://iili.io/JWLiEQI.png";
}
// rest are set to grey star
else {
img.src = "https://iili.io/JWLi1hN.png;"
}
})
// using the index to select the appropriate reply
reply.textContent = replies[index];
}24 replies
KPCKevin Powell - Community
•Created by ZNP on 3/15/2024 in #front-end
Frontend dev project for a star rating system
So can all array methods intake an element and index as their first and second argument?
24 replies