├── .gitattributes ├── README.md ├── design ├── active-states.jpg ├── desktop-design.jpg ├── desktop-preview.jpg └── mobile-design.jpg ├── images ├── bg-pattern-desktop.svg ├── bg-pattern-mobile.svg ├── favicon-32x32.png ├── icon-arrow-down.svg ├── illustration-box-desktop.svg ├── illustration-woman-online-desktop.svg └── illustration-woman-online-mobile.svg ├── index.html ├── script.js ├── style-guide.md └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fem-faq-accordion 2 | 3 | -------------------------------------------------------------------------------- /design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-faq-accordion/ba124c00b95f2246303eff33b821af90d8a78f4e/design/active-states.jpg -------------------------------------------------------------------------------- /design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-faq-accordion/ba124c00b95f2246303eff33b821af90d8a78f4e/design/desktop-design.jpg -------------------------------------------------------------------------------- /design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-faq-accordion/ba124c00b95f2246303eff33b821af90d8a78f4e/design/desktop-preview.jpg -------------------------------------------------------------------------------- /design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-faq-accordion/ba124c00b95f2246303eff33b821af90d8a78f4e/design/mobile-design.jpg -------------------------------------------------------------------------------- /images/bg-pattern-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-pattern-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-faq-accordion/ba124c00b95f2246303eff33b821af90d8a78f4e/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/icon-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-box-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-woman-online-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-woman-online-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | Frontend Mentor | FAQ Accordion Card 16 | 17 | 18 | 22 | 23 | 24 | 25 | 26 | 35 | 36 | 37 |
38 | card box 43 |
44 | woman online desktop 48 |
49 |
50 |

FAQ

51 | 52 |
53 |
54 | 57 |
58 |
59 | You can invite up to 2 additional users on the Free plan. There 60 | is no limit on team members for the Premium plan. 61 |
62 |
63 |
64 |
65 | 68 |
69 |
70 | No more than 2GB. All files in your account must fit your 71 | allotted storage space. 72 |
73 |
74 |
75 |
76 | 79 |
80 |
81 | Click “Forgot password” from the login page or “Change password” 82 | from your profile page. A reset link will be emailed to you. 83 |
84 |
85 |
86 |
87 | 90 |
91 |
92 | Yes! Send us a message and we’ll process your request no 93 | questions asked. 94 |
95 |
96 |
97 |
98 | 101 |
102 |
103 | Chat and email support is available 24/7. Phone lines are open 104 | during normal business hours. 105 |
106 |
107 |
108 |
109 |
110 |
111 | 112 |
113 | Challenge by 114 | Frontend Mentor. Coded by Your Name Here. 117 |
118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.querySelectorAll('.accordion__question').forEach((item) => { 2 | item.addEventListener('click', (event) => { 3 | console.log('click!'); 4 | let accCollapse = item.nextElementSibling; 5 | 6 | if (!item.classList.contains('collapsing')) { 7 | // Open accordion item 8 | if (!item.classList.contains('open')) { 9 | console.log('toggle accordion button'); 10 | 11 | accCollapse.style.display = 'block'; 12 | let accHeight = accCollapse.clientHeight; 13 | console.log(accHeight); 14 | 15 | setTimeout(() => { 16 | accCollapse.style.height = accHeight + 'px'; 17 | accCollapse.style.display = ''; 18 | }, 1); 19 | 20 | accCollapse.classList = 'accordion__collapse collapsing'; 21 | 22 | setTimeout(() => { 23 | console.log('open accordion content'); 24 | accCollapse.classList = 'accordion__collapse collapse open'; 25 | }, 300); 26 | } 27 | // Close accordion item 28 | else { 29 | // Remove "collapse open" from .accordion__collapse, add "collapsing" 30 | accCollapse.classList = 'accordion__collapse collapsing'; 31 | 32 | setTimeout(() => { 33 | accCollapse.style.height = '0px'; 34 | }, 1); 35 | 36 | // After X amount of time, remove "collapsing" class and add "collapse" class 37 | setTimeout(() => { 38 | console.log('close accordion content'); 39 | accCollapse.classList = 'accordion__collapse collapse'; 40 | accCollapse.style.height = ''; 41 | }, 300); 42 | } 43 | 44 | item.classList.toggle('open'); 45 | } 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | #### Text 15 | 16 | - Very dark desaturated blue: hsl(238, 29%, 16%) 17 | - Soft red: hsl(14, 88%, 65%) 18 | 19 | #### Gradient 20 | 21 | Background gradient: 22 | 23 | - Soft violet: hsl(273, 75%, 66%) 24 | - Soft blue: hsl(240, 73%, 65%) 25 | 26 | ### Neutral 27 | 28 | #### Text 29 | 30 | - Very dark grayish blue: hsl(237, 12%, 33%) 31 | - Dark grayish blue: hsl(240, 6%, 50%) 32 | 33 | #### Dividers 34 | 35 | - Light grayish blue: hsl(240, 5%, 91%) 36 | 37 | ## Typography 38 | 39 | ### Body Copy 40 | 41 | - Font size: 12px 42 | 43 | ### Font 44 | 45 | - Family: [Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans) 46 | - Weights: 400, 700 47 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --text-blue: hsl(238, 29%, 16%); 3 | --text-dkblue: hsl(240, 6%, 50%); 4 | --text-xdkblue: hsl(237, 12%, 33%); 5 | --text-red: hsl(14, 88%, 65%); 6 | --gradient-violet: hsl(273, 75%, 66%); 7 | --gradient-blue: hsl(240, 73%, 65%); 8 | --divider-blue: hsl(240, 5%, 91%); 9 | } 10 | 11 | html { 12 | box-sizing: initial; 13 | font-size: 100%; 14 | } 15 | 16 | *, 17 | *::before, 18 | *::after { 19 | box-sizing: inherit; 20 | } 21 | 22 | body { 23 | min-height: 100vh; 24 | margin: 0; 25 | padding: 10rem 1rem; 26 | font-family: 'Kumbh Sans', sans-serif; 27 | background-image: linear-gradient( 28 | var(--gradient-violet), 29 | var(--gradient-blue) 30 | ); 31 | color: var(--text-blue); 32 | } 33 | 34 | h1, 35 | h2, 36 | h3 { 37 | margin-top: 0; 38 | } 39 | 40 | .card { 41 | background: #ffffff; 42 | border-radius: 2rem; 43 | max-width: 56rem; 44 | padding: 2.875rem 1.5rem; 45 | background-image: url('images/bg-pattern-mobile.svg'); 46 | background-repeat: no-repeat; 47 | background-position: center 0%; 48 | background-size: 15rem; 49 | } 50 | 51 | .card__box { 52 | display: none; 53 | } 54 | 55 | .card__image { 56 | position: relative; 57 | } 58 | 59 | .card__image img { 60 | position: absolute; 61 | top: -6.8rem; 62 | left: 50%; 63 | transform: translateX(-50%); 64 | display: block; 65 | width: 100%; 66 | max-width: 15rem; 67 | height: auto; 68 | } 69 | 70 | .card__text { 71 | padding-top: 7rem; 72 | } 73 | 74 | .accordion__item { 75 | padding-top: 1rem; 76 | border-bottom: 1px solid var(--divider-blue); 77 | } 78 | 79 | .accordion__item h2 { 80 | margin-bottom: 0; 81 | } 82 | 83 | .accordion__question { 84 | display: flex; 85 | justify-content: space-between; 86 | align-items: center; 87 | width: 100%; 88 | border: none; 89 | background: transparent; 90 | margin-bottom: 1rem; 91 | padding: 0.2rem; 92 | font-size: 0.875rem; 93 | font-family: 'Kumbh Sans', sans-serif; 94 | text-align: left; 95 | } 96 | 97 | .accordion__question.open { 98 | font-weight: 700; 99 | } 100 | 101 | .accordion__question::after { 102 | content: ''; 103 | display: block; 104 | width: 0.625rem; 105 | height: 1rem; 106 | border: none; 107 | background-image: url('/images/icon-arrow-down.svg'); 108 | background-repeat: no-repeat; 109 | background-size: contain; 110 | background-position: center center; 111 | transition: transform 300ms ease-in-out; 112 | } 113 | 114 | .accordion__question:focus, 115 | .accordion__question:focus-visible { 116 | border: none; 117 | outline: dashed 1px rgba(0, 0, 0, 0.25); 118 | } 119 | 120 | .accordion__question.open { 121 | font-weight: 700; 122 | } 123 | 124 | .accordion__question.open::after { 125 | transform: rotate(180deg); 126 | } 127 | 128 | .accordion__content { 129 | font-size: 0.75rem; 130 | line-height: 1.4; 131 | padding-bottom: 1rem; 132 | } 133 | 134 | .accordion__collapse { 135 | transition: height 300ms ease; 136 | } 137 | 138 | .accordion__collapse.collapse { 139 | display: none; 140 | } 141 | 142 | .accordion__collapse.collapsing { 143 | height: 0; 144 | overflow: hidden; 145 | } 146 | 147 | .accordion__collapse.open { 148 | display: block; 149 | } 150 | 151 | /* DESKTOP STYLES */ 152 | 153 | @media (min-width: 56em) { 154 | body { 155 | padding: 5rem; 156 | } 157 | 158 | .card { 159 | position: relative; 160 | display: flex; 161 | margin: 0 auto; 162 | padding: 4.375rem 6.25rem 4.375rem 0; 163 | background-image: url('images/bg-pattern-desktop.svg'); 164 | background-size: 45%; 165 | background-position: -13% center; 166 | } 167 | 168 | .card__box { 169 | display: block; 170 | position: absolute; 171 | z-index: 1; 172 | top: 57%; 173 | left: 0; 174 | transform: translateX(-50%) translateY(-50%); 175 | } 176 | 177 | .card__image, 178 | .card__text { 179 | flex: 1; 180 | } 181 | 182 | .card__image { 183 | display: flex; 184 | align-items: center; 185 | overflow: hidden; 186 | } 187 | 188 | .card__image img { 189 | position: relative; 190 | top: auto; 191 | left: auto; 192 | max-width: 25rem; 193 | transform: translateX(-4rem); 194 | } 195 | 196 | .card__text { 197 | padding-top: 0; 198 | } 199 | } 200 | --------------------------------------------------------------------------------