This is a solution to the FAQ accordion card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See hover states for all interactive elements on the page
- Hide/Show the answer to a question when the question is clicked
- Solution URL: [https://github.com/Madeliyen/faq-accordion-card]
- Live Site URL: [https://madeliyen.github.io/faq-accordion-card/]
- Semantic HTML5 markup
- CSS custom properties
- Bootstrap
- JavaScript
- CSS Media queries to change display based on screen size
@media screen and (min-width: 1200px) {
.bg-pattern-img {
content: url(images/bg-pattern-desktop.svg);
position: absolute;
top: -50%;
right: 28%;
}
.woman-desktop-img {
content: url(images/illustration-woman-online-desktop.svg);
position: absolute;
top: 20%;
left: -11%;
}
.alias-box-img {
content: url(images/illustration-box-desktop.svg);
position: absolute;
left: -93px;
top: 230px;
z-index: 1;
}
}
- Set webpage height to be same as the screen height.
body {
background-image: linear-gradient(hsl(273, 75%, 66%), hsl(240, 73%, 65%));
color: hsl(237, 12%, 33%);
font-family: 'Kumbh Sans', sans-serif;
font-size: 12px;
font-weight: 400;
height: 100vh;
}
Areas and techniques to focus on and refine in future projects.
- Responsive web design
- CSS grid layout planning and execution
- Example resource 1 - There were several suggestions on how to change image URL using CSS. This method worked for my purpose to change image URL based on screen size.
- Example resource 2 - Read through this to understand how to implement CSS media queries in this project.
- Example resource 3 - Reference for understanding usage of Bootstrap Grid.
- Frontend Mentor - @Madeliyen