finished FAQ challenge
This commit is contained in:
parent
5639e33439
commit
48254efc6c
|
|
@ -0,0 +1,80 @@
|
||||||
|
# Frontend Mentor - FAQ Accordion Card
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Welcome! 👋
|
||||||
|
|
||||||
|
Thanks for checking out this front-end coding challenge.
|
||||||
|
|
||||||
|
[Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
|
||||||
|
|
||||||
|
**To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.**
|
||||||
|
|
||||||
|
## The challenge
|
||||||
|
|
||||||
|
Your challenge is to build out this FAQ accordion card and get it looking as close to the design as possible.
|
||||||
|
|
||||||
|
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
|
||||||
|
|
||||||
|
Your 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
|
||||||
|
|
||||||
|
Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
|
||||||
|
|
||||||
|
## Where to find everything
|
||||||
|
|
||||||
|
Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to.
|
||||||
|
|
||||||
|
The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
|
||||||
|
|
||||||
|
If you would like the Sketch file in order to inspect the design in more detail you can [subscribe as a PRO member](https://www.frontendmentor.io/pro).
|
||||||
|
|
||||||
|
You will find all the required assets in the `/images` folder. The assets are already optimized.
|
||||||
|
|
||||||
|
There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
|
||||||
|
|
||||||
|
## Building your project
|
||||||
|
|
||||||
|
Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
|
||||||
|
|
||||||
|
1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
|
||||||
|
2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
|
||||||
|
3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
|
||||||
|
4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
|
||||||
|
5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
|
||||||
|
6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
|
||||||
|
|
||||||
|
## Deploying your project
|
||||||
|
|
||||||
|
As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
|
||||||
|
|
||||||
|
1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
|
||||||
|
2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
|
||||||
|
3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
|
||||||
|
|
||||||
|
## Sharing your solution
|
||||||
|
|
||||||
|
There are multiple places you can share your solution:
|
||||||
|
|
||||||
|
1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
|
||||||
|
2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
|
||||||
|
3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
|
||||||
|
|
||||||
|
## Giving feedback
|
||||||
|
|
||||||
|
Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
|
||||||
|
|
||||||
|
This challenge is completely free. Please share it with anyone who will find it useful for practice.
|
||||||
|
|
||||||
|
**Have fun building!** 🚀
|
||||||
|
|
||||||
|
## Community Sponsors
|
||||||
|
|
||||||
|
A massive thank you to our community sponsors!
|
||||||
|
|
||||||
|
- [Hack for NF](https://bit.ly/fem-bemyapp) is a perfect opportunity to write code, contribute to an amazing cause, meet others, and have fun all at the same time! The hackathon starts October 2nd and runs through to November 13th. Datasets, mentor support, and input from patients are all provided. There's also \$40K USD in prizes and grants up for grabs!
|
||||||
|
- [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into!
|
||||||
|
- [Zero to Mastery](https://bit.ly/fem-ztm) is an incredible learning resource for all things web development. Led by Andrei Neagoie, the courses are really high-quality content and cover a wide range of in-demand skills.
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
# DUMP of notes
|
|
||||||
|
|
||||||
Was looking at using details/summary for a no javascript option but there is no support for animating the answer revail and there is not changing the position of where the disclosure triangle is https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Frontend Mentor - Sunnyside agency landing page solution
|
|
||||||
|
|
||||||
This is a solution to the [FAQ Accordion Card](https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
|
|
||||||
|
|
||||||
## Table of contents
|
|
||||||
|
|
||||||
- [DUMP of notes](#dump-of-notes)
|
|
||||||
- [Frontend Mentor - Sunnyside agency landing page solution](#frontend-mentor---sunnyside-agency-landing-page-solution)
|
|
||||||
- [Table of contents](#table-of-contents)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [The challenge](#the-challenge)
|
|
||||||
- [Screenshot](#screenshot)
|
|
||||||
- [Links](#links)
|
|
||||||
- [My process](#my-process)
|
|
||||||
- [Built with](#built-with)
|
|
||||||
- [What I learned](#what-i-learned)
|
|
||||||
- [Continued development](#continued-development)
|
|
||||||
- [Useful resources](#useful-resources)
|
|
||||||
- [Author](#author)
|
|
||||||
- [Acknowledgments](#acknowledgments)
|
|
||||||
|
|
||||||
**Note: Delete this note and update the table of contents based on what sections you keep.**
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
### The challenge
|
|
||||||
|
|
||||||
Users should be able to:
|
|
||||||
|
|
||||||
- View the optimal layout for the site depending on their device's screen size
|
|
||||||
- See hover states for all interactive elements on the page
|
|
||||||
|
|
||||||
### Screenshot
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
|
|
||||||
|
|
||||||
Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it.
|
|
||||||
|
|
||||||
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
|
|
||||||
|
|
||||||
**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.**
|
|
||||||
|
|
||||||
### Links
|
|
||||||
|
|
||||||
- Solution URL: [Add solution URL here](https://your-solution-url.com)
|
|
||||||
- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
|
|
||||||
|
|
||||||
## My process
|
|
||||||
|
|
||||||
### Built with
|
|
||||||
|
|
||||||
- Semantic HTML5 markup
|
|
||||||
- CSS custom properties
|
|
||||||
- Flexbox
|
|
||||||
- CSS Grid
|
|
||||||
- Mobile-first workflow
|
|
||||||
- [React](https://reactjs.org/) - JS library
|
|
||||||
- [Next.js](https://nextjs.org/) - React framework
|
|
||||||
- [Styled Components](https://styled-components.com/) - For styles
|
|
||||||
|
|
||||||
**Note: These are just examples. Delete this note and replace the list above with your own choices**
|
|
||||||
|
|
||||||
### What I learned
|
|
||||||
|
|
||||||
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
|
|
||||||
|
|
||||||
To see how you can add code snippets, see below:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<h1>Some HTML code I'm proud of</h1>
|
|
||||||
```
|
|
||||||
|
|
||||||
```css
|
|
||||||
.proud-of-this-css {
|
|
||||||
color: papayawhip;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
const proudOfThisFunc = () => {
|
|
||||||
console.log("🎉");
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more.
|
|
||||||
|
|
||||||
**Note: Delete this note and the content within this section and replace with your own learnings.**
|
|
||||||
|
|
||||||
### Continued development
|
|
||||||
|
|
||||||
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
|
|
||||||
|
|
||||||
**Note: Delete this note and the content within this section and replace with your own plans for continued development.**
|
|
||||||
|
|
||||||
### Useful resources
|
|
||||||
|
|
||||||
- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
|
|
||||||
- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
|
|
||||||
|
|
||||||
**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.**
|
|
||||||
|
|
||||||
## Author
|
|
||||||
|
|
||||||
- Website - [Add your name here](https://www.your-site.com)
|
|
||||||
- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername)
|
|
||||||
- Twitter - [@yourusername](https://www.twitter.com/yourusername)
|
|
||||||
|
|
||||||
**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
|
|
||||||
|
|
||||||
## Acknowledgments
|
|
||||||
|
|
||||||
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
|
|
||||||
|
|
||||||
**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**
|
|
||||||
|
|
@ -1,80 +1,85 @@
|
||||||
# Frontend Mentor - FAQ Accordion Card
|
# Frontend Mentor - FAQ Accordion Card
|
||||||
|
|
||||||
|
This is a solution to the [FAQ Accordion Card](https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
|
||||||
|
|
||||||
## Welcome! 👋
|
## Table of contents
|
||||||
|
|
||||||
Thanks for checking out this front-end coding challenge.
|
- [Frontend Mentor - FAQ Accordion Card](#frontend-mentor---faq-accordion-card)
|
||||||
|
- [Table of contents](#table-of-contents)
|
||||||
|
- [Overview](#overview)
|
||||||
|
- [The challenge](#the-challenge)
|
||||||
|
- [Screenshot](#screenshot)
|
||||||
|
- [Links](#links)
|
||||||
|
- [My process](#my-process)
|
||||||
|
- [Built with](#built-with)
|
||||||
|
- [What I learned](#what-i-learned)
|
||||||
|
- [Continued development](#continued-development)
|
||||||
|
- [Useful resources](#useful-resources)
|
||||||
|
- [Author](#author)
|
||||||
|
- [Acknowledgments](#acknowledgments)
|
||||||
|
|
||||||
[Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
|
## Overview
|
||||||
|
|
||||||
**To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.**
|
### The challenge
|
||||||
|
|
||||||
## The challenge
|
Users should be able to:
|
||||||
|
|
||||||
Your challenge is to build out this FAQ accordion card and get it looking as close to the design as possible.
|
- View the optimal layout for the site depending on their device's screen size
|
||||||
|
|
||||||
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
|
|
||||||
|
|
||||||
Your 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
|
- See hover states for all interactive elements on the page
|
||||||
- Hide/Show the answer to a question when the question is clicked
|
|
||||||
|
|
||||||
Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
|
These are the design references
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Where to find everything
|
### Screenshot
|
||||||
|
|
||||||
Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to.
|
Screen shots of the finished Mobile & Desktop versions with and without the active state
|
||||||
|
|
||||||
The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
|
|
||||||
|
|
||||||
|
|
||||||
If you would like the Sketch file in order to inspect the design in more detail you can [subscribe as a PRO member](https://www.frontendmentor.io/pro).
|
|
||||||
|
|
||||||
|
|
||||||
You will find all the required assets in the `/images` folder. The assets are already optimized.
|
### Links
|
||||||
|
|
||||||
There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
|
- Solution URL: [Github](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/faq-accordion-card)
|
||||||
|
- Live Site URL: [tarasis.github.io](https://tarasis.github.io/FrontendMentor/newbie/faq-accordion-card/)
|
||||||
|
|
||||||
## Building your project
|
## My process
|
||||||
|
|
||||||
Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
|
I built out the mobile version first, with the full intention of making it a responsive design that would scale the mobile version till it got to the desktop size and then flip to the desktop version. Unfortunately I couldn't get the placement and scaling to work as I wanted; particularly with regards to the desktop version.
|
||||||
|
|
||||||
1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
|
In the end I sought out a someone else's solution to get an idea of how to do the desktop images. This was the first time I had worked with using 3 images layered on top of each other, and I found it difficult.
|
||||||
2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
|
|
||||||
3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
|
|
||||||
4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
|
|
||||||
5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
|
|
||||||
6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
|
|
||||||
|
|
||||||
## Deploying your project
|
As I used a disclosure animation I made sure to use `@media (prefers-reduced-motion) {}` to disable the animation for those that need it.
|
||||||
|
|
||||||
As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
|
### Built with
|
||||||
|
|
||||||
1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
|
- Semantic HTML5 markup
|
||||||
2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
|
- CSS custom properties
|
||||||
3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
|
- Flexbox
|
||||||
|
- CSS Grid
|
||||||
|
- Mobile-first workflow
|
||||||
|
|
||||||
## Sharing your solution
|
### What I learned
|
||||||
|
|
||||||
There are multiple places you can share your solution:
|
That I could use Detail / Summary to handle the questions in HTML & CSS rather than use JavaScript.
|
||||||
|
|
||||||
1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
|
### Continued development
|
||||||
2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
|
|
||||||
3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
|
|
||||||
|
|
||||||
## Giving feedback
|
Need to spend some more time practicing placement of images when there are multiple images that are supposed to be layer.
|
||||||
|
|
||||||
Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
|
### Useful resources
|
||||||
|
|
||||||
This challenge is completely free. Please share it with anyone who will find it useful for practice.
|
- [MDN Detail](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) - Provided how to do the summary and detail without having to use JavaScript.
|
||||||
|
|
||||||
**Have fun building!** 🚀
|
## Author
|
||||||
|
|
||||||
## Community Sponsors
|
- Website - [Blog](https://tarasis.net)
|
||||||
|
- Website - [Portfolio](https://rmcg.dev)
|
||||||
|
- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
|
||||||
|
- Twitter - [@tarasis](https://www.twitter.com/tarasis)
|
||||||
|
## Acknowledgments
|
||||||
|
|
||||||
A massive thank you to our community sponsors!
|
I want to thank Bob Matyas for his [codepen](https://codepen.io/bobmatyas/pen/NWRWVeK?editors=1100), which gave the tip that I needed for handling the placement of the desktop images.
|
||||||
|
|
||||||
- [Hack for NF](https://bit.ly/fem-bemyapp) is a perfect opportunity to write code, contribute to an amazing cause, meet others, and have fun all at the same time! The hackathon starts October 2nd and runs through to November 13th. Datasets, mentor support, and input from patients are all provided. There's also \$40K USD in prizes and grants up for grabs!
|
|
||||||
- [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into!
|
|
||||||
- [Zero to Mastery](https://bit.ly/fem-ztm) is an incredible learning resource for all things web development. Led by Andrei Neagoie, the courses are really high-quality content and cover a wide range of in-demand skills.
|
|
||||||
|
|
@ -45,7 +45,6 @@ Info:
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
/* min-width: 320px; */
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -77,10 +76,10 @@ body {
|
||||||
border-radius: 23px;
|
border-radius: 23px;
|
||||||
background-image: var(--card-image);
|
background-image: var(--card-image);
|
||||||
|
|
||||||
max-width: 920px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header {
|
.card__title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: var(--fw-700);
|
font-weight: var(--fw-700);
|
||||||
font-size: var(--fs-header);
|
font-size: var(--fs-header);
|
||||||
|
|
@ -89,75 +88,36 @@ body {
|
||||||
margin-bottom: 2.375rem;
|
margin-bottom: 2.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header_thing {
|
.card__header {
|
||||||
/* position: relative; */
|
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header_image {
|
.card__header_image {
|
||||||
position: relative;
|
background: url(../images/bg-pattern-mobile.svg) center bottom no-repeat;
|
||||||
background-size: contain;
|
background-position-x: 0px;
|
||||||
/* background-image: url(../images/illustration-woman-online-mobile.svg),
|
background-position-y: 125px;
|
||||||
url(../images/bg-pattern-mobile.svg);
|
background-size: 95%;
|
||||||
background-position: center, bottom center;
|
margin: 0 auto;
|
||||||
background-repeat: no-repeat; */
|
max-width: 245px;
|
||||||
/* margin: 0 auto; */
|
margin-top: -130px;
|
||||||
/* width: 237px; */
|
|
||||||
width: 80%;
|
|
||||||
height: 180px;
|
|
||||||
/* left: calc(50% - calc(237px / 2) - 10px); */
|
|
||||||
/* left: calc(50% - calc(80% / 2) - 10px); */
|
|
||||||
|
|
||||||
/* top: calc(50% - calc(80% / 2) - 10px); */
|
|
||||||
/* : calc(100% - 237px/2); */
|
|
||||||
/* left: 40px; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header_image.desktop {
|
.desktop {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header_image.mobile {
|
.mobile {
|
||||||
display: contents;
|
display: block;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card__header_image.mobile > img {
|
|
||||||
/* width: 72.5%; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.woman,
|
|
||||||
.box,
|
|
||||||
.background {
|
|
||||||
position: absolute;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.woman {
|
.woman {
|
||||||
top: -95px;
|
margin-left: -16px;
|
||||||
left: calc((50% - 118.5px) - 10px);
|
padding: 30px 0px;
|
||||||
width: 73%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background {
|
|
||||||
left: calc(50% - 118.5px + 15px);
|
|
||||||
width: 66%;
|
|
||||||
top: -170px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card__header_image_shadow {
|
|
||||||
background-image: url(../images/bg-pattern-mobile.svg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: top center;
|
|
||||||
border: 1px solid red;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq {
|
.faq {
|
||||||
/* border: 1px red solid; */
|
|
||||||
color: var(--col-red-soft);
|
color: var(--col-red-soft);
|
||||||
/* margin: 6.125rem 1.5rem 3rem; */
|
|
||||||
margin: 0 1.5rem 3rem;
|
margin: 0 1.5rem 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -183,10 +143,7 @@ summary {
|
||||||
line-height: var(--lh-question);
|
line-height: var(--lh-question);
|
||||||
|
|
||||||
color: var(--col-blue-very-dark-grayish);
|
color: var(--col-blue-very-dark-grayish);
|
||||||
/* padding: 1rem 1.5rem; */
|
|
||||||
/* margin-bottom: 1rem; */
|
|
||||||
outline: none;
|
outline: none;
|
||||||
/* border-radius: 0.25rem; */
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -214,10 +171,17 @@ details > summary::-webkit-details-marker {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ! add check for prefers motion */
|
|
||||||
details[open] summary ~ * {
|
details[open] summary ~ * {
|
||||||
animation: sweep 0.5s ease-in-out;
|
animation: sweep 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ! In polypane, this only works in desktop, not mobile */
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
details[open] summary ~ * {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes sweep {
|
@keyframes sweep {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -234,7 +198,7 @@ details[open] summary ~ * {
|
||||||
margin-top: 0.6875rem;
|
margin-top: 0.6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (min-width: 900px) {
|
||||||
:root {
|
:root {
|
||||||
--fs-question: 0.875rem;
|
--fs-question: 0.875rem;
|
||||||
--lh-question: 1.0625rem;
|
--lh-question: 1.0625rem;
|
||||||
|
|
@ -242,37 +206,43 @@ details[open] summary ~ * {
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
max-width: 920px;
|
||||||
|
height: 509px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header_thing {
|
.card__header {
|
||||||
display: grid;
|
display: flex;
|
||||||
align-content: center;
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header_image {
|
.card__header_image {
|
||||||
/* content: url(../images/illustration-woman-online-desktop.svg); */
|
display: flex;
|
||||||
top: unset;
|
align-items: center;
|
||||||
position: unset;
|
background-image: url(../images/illustration-woman-online-desktop.svg),
|
||||||
width: 100%;
|
url(../images/bg-pattern-desktop.svg);
|
||||||
height: unset;
|
background-position: -65px center, -571px -270px;
|
||||||
|
background-size: 100%, 200%;
|
||||||
|
height: 100%;
|
||||||
|
min-width: 300px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 472px;
|
||||||
|
max-width: 500px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin-bottom: unset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.woman,
|
.mobile {
|
||||||
.box,
|
|
||||||
.background {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card__header_image.mobile {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header_image.desktop {
|
.desktop {
|
||||||
display: contents;
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 100px;
|
||||||
|
left: -90px;
|
||||||
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
|
|
@ -280,10 +250,18 @@ details[open] summary ~ * {
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq {
|
.faq {
|
||||||
margin-left: 5.4375rem;
|
margin-top: 65px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq__content {
|
.faq__content {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card__title {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .box {
|
||||||
|
width: 90px;
|
||||||
|
} */
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,26 +25,17 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- <main> -->
|
<!-- main was originally a div -->
|
||||||
<div class="card">
|
<main class="card">
|
||||||
<!-- <header class="card__header"> -->
|
<header class="card__header">
|
||||||
<div class="card__header_thing">
|
<div class="card__header_image">
|
||||||
<div class="card__header_image desktop">
|
<img class="box desktop" src="./images/illustration-box-desktop.svg" alt="">
|
||||||
<img class="woman" src="./images/illustration-woman-online-desktop.svg" alt="">
|
<img class="woman mobile" src="./images/illustration-woman-online-mobile.svg" alt="">
|
||||||
<img class="box" src="./images/bg-pattern-desktop.svg" alt="">
|
|
||||||
<img class="background" src="./images/illustration-box-desktop.svg" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card__header_image mobile">
|
</header>
|
||||||
<img class="woman" src="./images/illustration-woman-online-mobile.svg" alt="">
|
|
||||||
<img class="background" src="./images/bg-pattern-mobile.svg" alt="">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="card__header_image_shadow"></div> -->
|
|
||||||
</div>
|
|
||||||
<!-- </header> -->
|
|
||||||
<article>
|
<article>
|
||||||
<div class="faq">
|
<div class="faq">
|
||||||
<h1 class="card__header">FAQ</h1>
|
<h1 class="card__title">FAQ</h1>
|
||||||
<details>
|
<details>
|
||||||
<summary>How many team members can I invite?</summary>
|
<summary>How many team members can I invite?</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
|
|
@ -78,8 +69,7 @@
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</main>
|
||||||
<!-- </main> -->
|
|
||||||
|
|
||||||
<!-- <div class="attribution">
|
<!-- <div class="attribution">
|
||||||
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
|
|
@ -11,6 +11,17 @@
|
||||||
"title": "Newbie",
|
"title": "Newbie",
|
||||||
"cssClass": "frontEndMentorChallenges",
|
"cssClass": "frontEndMentorChallenges",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
|
{
|
||||||
|
"title": "FAQ Accordion Card",
|
||||||
|
"url": "/FrontendMentor/newbie/faq-accordion-card/",
|
||||||
|
"description": "",
|
||||||
|
"techUsed": [
|
||||||
|
"html5",
|
||||||
|
"css3"
|
||||||
|
],
|
||||||
|
"screenshotURL": "/FrontendMentor/newbie/faq-accordion-card/screenshots/mobile-inactive.png",
|
||||||
|
"screenshotAltText": "FAQ Accordion Card Challenge from FrontendMentor"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"title": "Pod Request Access Landing Page",
|
"title": "Pod Request Access Landing Page",
|
||||||
"url": "/FrontendMentor/newbie/pod-request-access-landing-page/",
|
"url": "/FrontendMentor/newbie/pod-request-access-landing-page/",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue