https://github.com/ann-dev/fem-faq-accordion

Accordion interactive component built with PugJs and Stylus
https://github.com/ann-dev/fem-faq-accordion

challenge frontend-mentor practice pugjs responsive stylus

Last synced: 2 months ago
JSON representation

Accordion interactive component built with PugJs and Stylus

• Host: GitHub
• URL: https://github.com/ann-dev/fem-faq-accordion
• Owner: ann-dev
• Created: 2021-02-06T21:29:33.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-09T10:25:19.000Z (about 4 years ago)
• Last Synced: 2024-12-26T01:25:21.784Z (4 months ago)
• Topics: challenge, frontend-mentor, practice, pugjs, responsive, stylus
• Language: HTML
• Homepage: https://fem-faq-accordion-card.netlify.app/
• Size: 207 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - FAQ Accordion Card

![Design preview for the FAQ Accordion Card coding challenge](./preview.jpg)

✨ Live Demo




  

  




## Description

Responsive page design challenge: single accordion interactive component. My solution for one of challenges for

  frontendmentor.io



Main features:



    
Interactive (static) solution without using any scripts, only native HTML elements

    
Based on PugJs and Stylus




    
Animated SVG: animation was made using SVGator





## Usage

### Installation

Beside the packages in the package.json, pug-cli must be installed in order to watch and compile Pug to HTML.

### Development

Watching and compiling Pug to HTML:

```sh

npm run develop

```

Watching and compiling Stylus to CSS (CSS will be compiled in the styles/css folder):

```sh

npm run watch:css

```

## Credits

-   Designed by [Frontend Mentor Team](https://www.frontendmentor.io/).

-   Code written by [ann-dev](https://github.com/ann-dev).