Card 1

└── widget-1 ├── img ├── 001-boy.svg ├── 014-girl-7.svg ├── 018-girl-9.svg ├── 043-boy-18.svg ├── 047-girl-25.svg ├── facebook.svg ├── star-0.svg ├── star-1.svg └── twitter.svg ├── index.html ├── main.js └── styles.css /widget-1/img/001-boy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 95 | -------------------------------------------------------------------------------- /widget-1/img/014-girl-7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 90 | -------------------------------------------------------------------------------- /widget-1/img/018-girl-9.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 93 | -------------------------------------------------------------------------------- /widget-1/img/043-boy-18.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 148 | -------------------------------------------------------------------------------- /widget-1/img/047-girl-25.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 95 | -------------------------------------------------------------------------------- /widget-1/img/facebook.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /widget-1/img/star-0.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /widget-1/img/star-1.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /widget-1/img/twitter.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /widget-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card 1 8 | 9 | 10 | 11 |

12 |

13 |

14 |

New Members

15 |

More than 400 new members

16 |

17 |

18 | 19 | 20 | 21 |

22 |

23 |

24 | 25 | 26 | 27 | 30 | 34 | 44 | 48 | 49 | 50 | 53 | 57 | 67 | 71 | 72 | 73 | 76 | 80 | 90 | 94 | 95 | 96 |

28 |

29 |

31 |

Jeff Davies

32 |

Art Director

33 |

35 |

Rating

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

45 | 46 | 47 |

51 |

52 |

54 |

Melinda Trump

55 |

Creative Director

56 |

58 |

Rating

59 |

60 |

61 |

62 |

63 |

64 |

65 |

66 |

68 | 69 | 70 |

74 |

75 |

77 |

Bo Larsson

78 |

Chief Designer

79 |

81 |

Rating

82 |

83 |

84 |

85 |

86 |

87 |

88 |

89 |

91 | 92 | 93 |

97 | 98 | 99 | 100 | 103 | 107 | 117 | 121 | 122 | 123 | 126 | 130 | 140 | 144 | 145 | 146 | 149 | 153 | 163 | 167 | 168 | 169 |

101 |

102 |

104 |

Shannon Drake

105 |

Copywriter

106 |

108 |

Rating

109 |

110 |

111 |

112 |

113 |

114 |

115 |

116 |

118 | 119 | 120 |

124 |

125 |

127 |

Taylor Drift

128 |

Art Director

129 |

131 |

Rating

132 |

133 |

134 |

135 |

136 |

137 |

138 |

139 |

141 | 142 | 143 |

147 |

148 |

150 |

Peter Rose

151 |

Photographer

152 |

154 |

Rating

155 |

156 |

157 |

158 |

159 |

160 |

161 |

162 |

164 | 165 | 166 |

170 | 171 | 172 | 173 | 176 | 180 | 190 | 194 | 195 | 196 | 199 | 203 | 213 | 217 | 218 | 219 | 222 | 226 | 236 | 240 | 241 | 242 |

174 |

175 |

177 |

Kate Best

178 |

Developer

179 |

181 |

Rating

182 |

183 |

184 |

185 |

186 |

187 |

188 |

189 |

191 | 192 | 193 |

197 |

198 |

200 |

Ben North

201 |

UX Designer

202 |

204 |

Rating

205 |

206 |

207 |

208 |

209 |

210 |

211 |

212 |

214 | 215 | 216 |

220 |

221 |

223 |

Claire Tait

224 |

UI Engineer

225 |

227 |

Rating

228 |

229 |

230 |

231 |

232 |

233 |

234 |

235 |

237 | 238 | 239 |

243 |

244 |

245 | 246 | 247 | 248 | -------------------------------------------------------------------------------- /widget-1/main.js: -------------------------------------------------------------------------------- 1 | const buttons = document.querySelectorAll(".buttons button"); 2 | 3 | const tables = document.querySelectorAll(".tables table"); 4 | 5 | const selectList = (element, index = 0) => { 6 | tables.forEach((table) => table.classList.remove("active")); 7 | tables[index].classList.add("active"); 8 | 9 | if (element) { 10 | buttons.forEach((button) => button.classList.remove("active")); 11 | element.classList.add("active"); 12 | } 13 | }; 14 | 15 | selectList(); 16 | -------------------------------------------------------------------------------- /widget-1/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | margin: 0; 4 | display: grid; 5 | place-items: center; 6 | background: #f5f8fa; 7 | color: #181c32; 8 | font-family: "Euclid Circular A", "Poppins"; 9 | } 10 | 11 | h2, 12 | h3, 13 | h4 { 14 | margin: 0; 15 | font-weight: 500; 16 | } 17 | 18 | h2 { 19 | font-size: 18px; 20 | } 21 | 22 | h3 { 23 | font-size: 14px; 24 | } 25 | 26 | h4 { 27 | color: #a1a5b7; 28 | font-size: 12px; 29 | } 30 | 31 | table { 32 | width: 100%; 33 | } 34 | 35 | table tr td { 36 | padding: 10px 0; 37 | } 38 | 39 | .card { 40 | padding: 20px; 41 | border-radius: 10px; 42 | background: #ffffff; 43 | width: 400px; 44 | } 45 | 46 | .card header { 47 | display: flex; 48 | align-items: center; 49 | justify-content: space-between; 50 | margin-bottom: 20px; 51 | } 52 | 53 | .card header button { 54 | background: transparent; 55 | border: 0; 56 | font-family: inherit; 57 | cursor: pointer; 58 | } 59 | 60 | .avatar { 61 | width: 36px; 62 | height: 36px; 63 | } 64 | 65 | .stars { 66 | display: flex; 67 | gap: 3px; 68 | } 69 | 70 | .stars img { 71 | width: 16px; 72 | height: 16px; 73 | } 74 | 75 | .social { 76 | width: 32px; 77 | height: 32px; 78 | vertical-align: middle; 79 | } 80 | 81 | .buttons { 82 | display: flex; 83 | } 84 | 85 | .buttons button { 86 | display: grid; 87 | place-items: center; 88 | padding: 14px; 89 | border-radius: 6px; 90 | color: #a1a5b7; 91 | } 92 | 93 | .buttons button.active { 94 | background: #ecf5fd; 95 | color: #009ef7; 96 | } 97 | 98 | .tables { 99 | position: relative; 100 | height: 196px; 101 | } 102 | 103 | table { 104 | position: absolute; 105 | top: 0; 106 | left: 0; 107 | right: auto; 108 | bottom: auto; 109 | animation: table-out 0.2s both; 110 | } 111 | 112 | table tr td:nth-child(2) { 113 | width: 140px; 114 | } 115 | 116 | table tr td:last-child { 117 | text-align: right; 118 | } 119 | 120 | @keyframes table-in { 121 | 0% { 122 | opacity: 0; 123 | visibility: hidden; 124 | } 125 | 100% { 126 | opacity: 1; 127 | visibility: visible; 128 | } 129 | } 130 | 131 | @keyframes table-out { 132 | 100% { 133 | opacity: 0; 134 | visibility: hidden; 135 | } 136 | } 137 | 138 | table.active { 139 | animation: table-in 0.2s 0.2s both; 140 | } 141 | --------------------------------------------------------------------------------