Jonah
KPCKevin Powell - Community
•Created by Jonah on 4/19/2024 in #front-end
Grid Issues
Thank you
3 replies
KPCKevin Powell - Community
•Created by Jonah on 4/1/2024 in #front-end
Hovering issues
Thank you
4 replies
KPCKevin Powell - Community
•Created by Jonah on 3/25/2024 in #front-end
Issue with image span
Thank you, I was stressing out 😭
4 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
Okay, thanks
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
I'm going to try to use the mobile image
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
Yeah, I already have it in column. I use column-reverse to place the image at the top. But the issue is, The height of the image is too big, and I need to increase the width of it so, It can cover the spaces.
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
Give me a second, I'm going to review my code.
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
I had use flex-direction on my container.
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
It still remains the same.
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
I use it on my container and the image, it didn't work.
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/22/2024 in #front-end
I need help with responsive
18 replies
KPCKevin Powell - Community
•Created by Jonah on 3/4/2024 in #front-end
How to create a pointy triangle border?
5 replies
KPCKevin Powell - Community
•Created by Jonah on 3/1/2024 in #front-end
How to expand the white background, When I click on the plus image?
Thanks, it works!
6 replies
KPCKevin Powell - Community
•Created by Jonah on 3/1/2024 in #front-end
How to expand the white background, When I click on the plus image?
Also, sorry for the long code. I try to use codepen, but it doesn't show the image.
6 replies
KPCKevin Powell - Community
•Created by Jonah on 3/1/2024 in #front-end
How to expand the white background, When I click on the plus image?
CSS: @import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
height:100vh;
justify-content: center;
align-items: center;
display: flex;
font-family: 'Work Sans', sans-serif;
background-image: url(background-pattern-desktop.svg);
background-repeat: no-repeat;
background-size: contain;
background-color: hsl(275, 100%, 97%);
}
.container{
justify-content: center;
align-items: center;
box-sizing: border-box;
width:650px;
height:300px;
background-color: white;
padding:30px;
border-radius: 10px;
box-shadow: 0px 0px 10px -5px;
transition: height 0.3s ease-in-out;
}
.faq{
transform: translateY(30px);
}
.plus-img{
margin-left:auto;
}
.minus-img{
margin-left:auto;
}
.flex{
display:flex;
gap:1rem;
}
.flex img{
width:30px;
height:30px;
transform: translateY(10px);
}
.flex h1{
font-size: 2.5rem;
font-weight:900;
display:flex;
}
.question1, .question2, .question3, .question4{
font-weight: 700;
font-size: .9rem;
display:flex;
}
.questions p{
font-size:0.8rem;
width:100%;
margin-bottom:1rem;
color:hsl(292, 16%, 49%);
}
.questions .question1,
.questions .question2,
.questions .question3,
.questions .question4 {
margin-bottom: 1rem;
}
.questions img{
cursor: pointer;
}
.questions span:hover{
color:hsl(292, 86%, 48%);
cursor: pointer;
}
.hidden{
display:none;
}
6 replies
KPCKevin Powell - Community
•Created by Jonah on 3/1/2024 in #front-end
How to expand the white background, When I click on the plus image?
<div class="questions">
<div class="question3">
<span>Can I use Frontend Mentor projects in my portfolio?</span>
<img class="plus-img" src="icon-plus.svg" alt="Expand">
<img class="minus-img hidden" src="icon-minus.svg">
</div>
<div class="answer hidden"> <p>Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers!</p> </div> </div> <div class="questions"> <div class="question4"> <span>How can I get help if I'm stuck on a Frontend Mentor challenge?</span> <img class="plus-img" src="icon-plus.svg" alt="Expand"> <img class="minus-img hidden" src="icon-minus.svg"> </div>
<div class="answer hidden"> <p>The best place to get help is inside Frontend Mentor's Discord community. There's a help channel where you can ask questions and seek support from other community members.</p> </div> </div> </div> </div>
<div class="answer hidden"> <p>Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers!</p> </div> </div> <div class="questions"> <div class="question4"> <span>How can I get help if I'm stuck on a Frontend Mentor challenge?</span> <img class="plus-img" src="icon-plus.svg" alt="Expand"> <img class="minus-img hidden" src="icon-minus.svg"> </div>
<div class="answer hidden"> <p>The best place to get help is inside Frontend Mentor's Discord community. There's a help channel where you can ask questions and seek support from other community members.</p> </div> </div> </div> </div>
6 replies
KPCKevin Powell - Community
•Created by Jonah on 1/29/2024 in #front-end
How to make the image clickable?
I'm going to make sure to learn from it.
18 replies
KPCKevin Powell - Community
•Created by Jonah on 1/29/2024 in #front-end
How to make the image clickable?
ah, okay. Thanks
18 replies
KPCKevin Powell - Community
•Created by Jonah on 1/29/2024 in #front-end
How to make the image clickable?
I was about to go bald of doing JS.
18 replies