| # | sample_id | image | html | css | js | viewport | source_name | source_url | description | framework | css_framework | component_type | element_count | has_animations | bboxes |
|---|
1
|
001eafcebcfc
|
|
<html>
<body>
<div class="cds--layout">
<div class="carbon-storybook-template--annotation carbon-storybook-template--annotation--background">
<div class="carbon-storybook-template--annotation__label">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M16,24a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,15.12,16,21.8643,28.5259,15.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,24Z">
</path>
<path d="M16,30a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,21.12,16,27.8643,28.5259,21.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,30Z">
</path>
<path d="M16,18a.9967.9967,0,0,1-.4741-.12l-13-7a1,1,0,0,1,0-1.7607l13-7a.9982.9982,0,0,1,.9482,0l13,7a1,1,0,0,1,0,1.7607l-13,7A.9967.9967,0,0,1,16,18ZM5.1094,10,16,15.8643,26.8906,10,16,4.1358Z">
</path>
</svg>
$background
</div>
<div class="carbon-storybook-template--annotation__content">
<div style="width: 300px;">
<div class="cds--list-box__wrapper">
<label class="cds--label" dir="ltr" for="carbon-combobox-0" id="downshift-_r_b_-label">
Label
</label>
<div class="cds--combo-box cds--list-box">
<div class="cds--list-box__field">
<input aria-activedescendant="" aria-autocomplete="list" aria-controls="downshift-_r_b_-menu" aria-describedby="combobox-helper-text-id-_r_a_" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="downshift-_r_b_-label" autocomplete="off" class="cds--text-input cds--text-input--empty" id="carbon-combobox-0" role="combobox" tabindex="0" type="text" value=""/>
<button aria-controls="downshift-_r_b_-menu" aria-expanded="false" aria-label="Open" class="cds--list-box__menu-icon" id="downshift-_r_b_-toggle-button" tabindex="-1" title="Open" type="button">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 11 3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z">
</path>
</svg>
</button>
</div>
<ul aria-labelledby="downshift-_r_b_-label" class="cds--list-box__menu" id="downshift-_r_b_-menu" role="listbox">
</ul>
</div>
<div class="cds--form__helper-text" dir="ltr" id="combobox-helper-text-id-_r_a_">
Helper text
</div>
</div>
</div>
<div class="cds--layer-two cds--layer__with-background">
<div class="carbon-storybook-template--annotation carbon-storybook-template--annotation--layer">
<div class="carbon-storybook-template--annotation__label">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M16,24a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,15.12,16,21.8643,28.5259,15.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,24Z">
</path>
<path d="M16,30a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,21.12,16,27.8643,28.5259,21.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,30Z">
</path>
<path d="M16,18a.9967.9967,0,0,1-.4741-.12l-13-7a1,1,0,0,1,0-1.7607l13-7a.9982.9982,0,0,1,.9482,0l13,7a1,1,0,0,1,0,1.7607l-13,7A.9967.9967,0,0,1,16,18ZM5.1094,10,16,15.8643,26.8906,10,16,4.1358Z">
</path>
</svg>
$layer-01
</div>
<div class="carbon-storybook-template--annotation__content">
<div style="width: 300px;">
<div class="cds--list-box__wrapper">
<label class="cds--label" dir="ltr" for="carbon-combobox-1" id="downshift-_r_e_-label">
Label
</label>
<div class="cds--combo-box cds--list-box">
<div class="cds--list-box__field">
<input aria-activedescendant="" aria-autocomplete="list" aria-controls="downshift-_r_e_-menu" a
|
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
display: none;
}
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
display: none;
}
:not(.sb-show-preparing-story) > .sb-preparing-story,
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
:not(.sb-show-nopreview) > .sb-nopreview,
:not(.sb-show-errordisplay) > .sb-errordisplay {
display: none;
}
.sb-show-main.sb-main-centered {
margin: 0;
display: flex;
align-items: center;
min-height: 100vh;
}
.sb-show-main.sb-main-centered #storybook-root {
box-sizing: border-box;
margin: auto;
padding: 1rem;
max-height: 100%;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.sb-show-main.sb-main-centered:after {
content: '';
min-height: inherit;
font-size: 0;
}
}
.sb-show-main.sb-main-fullscreen {
margin: 0;
padding: 0;
display: block;
}
.sb-show-main.sb-main-padded {
margin: 0;
padding: 1rem;
display: block;
box-sizing: border-box;
}
.sb-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
padding: 40px;
font-family:
'Nunito Sans',
-apple-system,
'.SFNSText-Regular',
'San Francisco',
BlinkMacSystemFont,
'Segoe UI',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;
-webkit-font-smoothing: antialiased;
overflow: auto;
}
@media (max-width: 700px) {
.sb-wrapper {
padding: 20px;
}
}
@media (max-width: 500px) {
.sb-wrapper {
padding: 10px;
}
}
.sb-heading {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
margin: 10px 0;
padding-right: 25px;
}
.sb-nopreview {
display: flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
}
.sb-nopreview_main {
margin: auto;
padding: 30px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.03);
}
.sb-nopreview_heading {
text-align: center;
}
.sb-errordisplay {
background: #f6f9fc;
color: black;
z-index: 999999;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
& ol {
padding-left: 18px;
margin: 0;
}
& h1 {
font-family: Nunito Sans;
font-size: 22px;
font-weight: 400;
line-height: 30px;
font-weight: normal;
margin: 0;
&::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: #ff4400;
border-radius: 50%;
margin-right: 8px;
}
}
& p,
& ol {
font-family: Nunito Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
margin: 0;
}
& li + li {
margin: 0;
padding: 0;
padding-top: 12px;
}
& a {
color: currentColor;
}
}
.sb-errordisplay_main {
margin: auto;
padding: 24px;
displ
|
|
desktop
|
carbon
|
https://react.carbondesignsystem.com
|
Desktop view: Form layout page featuring multiple dropdown input fields, each accompanied by a label and helper text. The design uses a clean, minimalistic color scheme with a white background, light gray section dividers, and subtle purple outlines to distinguish grouped sections labeled "Layer-01" and "Layer-02." Dropdown menus are styled with a simple arrow indicator, and spacing between elements is generous, enhancing readability. The top left corner includes a small pink "Stack-Background" label, indicating a possible design or development annotation.
|
vanilla
|
tailwind
|
button
|
59
|
True
|
{
"tag": [
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div",
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div",
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div"
],
"x": [
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8,
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8,
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8
],
"y": [
8,
8,
8,
8,
16,
19,
9,
28,
28,
28,
28,
46,
46,
50,
46,
49,
54,
87,
105,
105,
105,
105,
113,
116,
106,
125,
125,
125,
125,
143,
143,
147,
143,
146,
151,
184,
202,
202,
202,
202,
210,
213,
203,
222,
222,
222,
222,
240,
240,
244,
240,
243,
248,
281
],
"width": [
1264,
1264,
1264,
16,
13,
13,
14,
1264,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300,
1264,
1264,
1264,
16,
13,
13,
14,
1264,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300,
1264,
1264,
1264,
16,
13,
13,
14,
1264,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300
],
"height": [
291,
291,
20,
16,
4,
4,
8,
271,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18,
194,
194,
20,
16,
4,
4,
8,
174,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18,
97,
97,
20,
16,
4,
4,
8,
77,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18
],
"text": [
"$background\n \n \n \n \n \n Label\n \n \n ",
"$background\n \n \n \n \n \n Label\n \n \n ",
"$background",
"",
"",
"",
"",
"Label\n \n \n \n \n \n \n \n ",
"Label\n \n \n \n \n \n \n \n ",
"Label\n \n \n \n \n \n \n \n ",
"Label",
"",
"",
"",
"",
"",
"",
"Helper text",
"$layer-01\n \n \n \n \n \n Label\n ",
"$layer-01\n \n \n \n \n \n Label\n ",
"$layer-01",
"",
"",
"",
"",
"Label\n \n \n \n \n \n \n",
"Label\n \n \n \n \n \n \n",
"Label\n \n \n \n \n \n \n",
"Label",
"",
"",
"",
"",
"",
"",
"Helper text",
"$layer-02\n \n \n \n \n \n ",
"$layer-02\n \n \n \n \n \n ",
"$layer-02",
"",
"",
"",
"",
"Label\n \n \n \n
|
2
|
001eafcebcfc
|
|
<html>
<body>
<div class="cds--layout">
<div class="carbon-storybook-template--annotation carbon-storybook-template--annotation--background">
<div class="carbon-storybook-template--annotation__label">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M16,24a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,15.12,16,21.8643,28.5259,15.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,24Z">
</path>
<path d="M16,30a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,21.12,16,27.8643,28.5259,21.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,30Z">
</path>
<path d="M16,18a.9967.9967,0,0,1-.4741-.12l-13-7a1,1,0,0,1,0-1.7607l13-7a.9982.9982,0,0,1,.9482,0l13,7a1,1,0,0,1,0,1.7607l-13,7A.9967.9967,0,0,1,16,18ZM5.1094,10,16,15.8643,26.8906,10,16,4.1358Z">
</path>
</svg>
$background
</div>
<div class="carbon-storybook-template--annotation__content">
<div style="width: 300px;">
<div class="cds--list-box__wrapper">
<label class="cds--label" dir="ltr" for="carbon-combobox-0" id="downshift-_r_b_-label">
Label
</label>
<div class="cds--combo-box cds--list-box">
<div class="cds--list-box__field">
<input aria-activedescendant="" aria-autocomplete="list" aria-controls="downshift-_r_b_-menu" aria-describedby="combobox-helper-text-id-_r_a_" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="downshift-_r_b_-label" autocomplete="off" class="cds--text-input cds--text-input--empty" id="carbon-combobox-0" role="combobox" tabindex="0" type="text" value=""/>
<button aria-controls="downshift-_r_b_-menu" aria-expanded="false" aria-label="Open" class="cds--list-box__menu-icon" id="downshift-_r_b_-toggle-button" tabindex="-1" title="Open" type="button">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 11 3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z">
</path>
</svg>
</button>
</div>
<ul aria-labelledby="downshift-_r_b_-label" class="cds--list-box__menu" id="downshift-_r_b_-menu" role="listbox">
</ul>
</div>
<div class="cds--form__helper-text" dir="ltr" id="combobox-helper-text-id-_r_a_">
Helper text
</div>
</div>
</div>
<div class="cds--layer-two cds--layer__with-background">
<div class="carbon-storybook-template--annotation carbon-storybook-template--annotation--layer">
<div class="carbon-storybook-template--annotation__label">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M16,24a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,15.12,16,21.8643,28.5259,15.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,24Z">
</path>
<path d="M16,30a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,21.12,16,27.8643,28.5259,21.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,30Z">
</path>
<path d="M16,18a.9967.9967,0,0,1-.4741-.12l-13-7a1,1,0,0,1,0-1.7607l13-7a.9982.9982,0,0,1,.9482,0l13,7a1,1,0,0,1,0,1.7607l-13,7A.9967.9967,0,0,1,16,18ZM5.1094,10,16,15.8643,26.8906,10,16,4.1358Z">
</path>
</svg>
$layer-01
</div>
<div class="carbon-storybook-template--annotation__content">
<div style="width: 300px;">
<div class="cds--list-box__wrapper">
<label class="cds--label" dir="ltr" for="carbon-combobox-1" id="downshift-_r_e_-label">
Label
</label>
<div class="cds--combo-box cds--list-box">
<div class="cds--list-box__field">
<input aria-activedescendant="" aria-autocomplete="list" aria-controls="downshift-_r_e_-menu" a
|
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
display: none;
}
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
display: none;
}
:not(.sb-show-preparing-story) > .sb-preparing-story,
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
:not(.sb-show-nopreview) > .sb-nopreview,
:not(.sb-show-errordisplay) > .sb-errordisplay {
display: none;
}
.sb-show-main.sb-main-centered {
margin: 0;
display: flex;
align-items: center;
min-height: 100vh;
}
.sb-show-main.sb-main-centered #storybook-root {
box-sizing: border-box;
margin: auto;
padding: 1rem;
max-height: 100%;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.sb-show-main.sb-main-centered:after {
content: '';
min-height: inherit;
font-size: 0;
}
}
.sb-show-main.sb-main-fullscreen {
margin: 0;
padding: 0;
display: block;
}
.sb-show-main.sb-main-padded {
margin: 0;
padding: 1rem;
display: block;
box-sizing: border-box;
}
.sb-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
padding: 40px;
font-family:
'Nunito Sans',
-apple-system,
'.SFNSText-Regular',
'San Francisco',
BlinkMacSystemFont,
'Segoe UI',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;
-webkit-font-smoothing: antialiased;
overflow: auto;
}
@media (max-width: 700px) {
.sb-wrapper {
padding: 20px;
}
}
@media (max-width: 500px) {
.sb-wrapper {
padding: 10px;
}
}
.sb-heading {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
margin: 10px 0;
padding-right: 25px;
}
.sb-nopreview {
display: flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
}
.sb-nopreview_main {
margin: auto;
padding: 30px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.03);
}
.sb-nopreview_heading {
text-align: center;
}
.sb-errordisplay {
background: #f6f9fc;
color: black;
z-index: 999999;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
& ol {
padding-left: 18px;
margin: 0;
}
& h1 {
font-family: Nunito Sans;
font-size: 22px;
font-weight: 400;
line-height: 30px;
font-weight: normal;
margin: 0;
&::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: #ff4400;
border-radius: 50%;
margin-right: 8px;
}
}
& p,
& ol {
font-family: Nunito Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
margin: 0;
}
& li + li {
margin: 0;
padding: 0;
padding-top: 12px;
}
& a {
color: currentColor;
}
}
.sb-errordisplay_main {
margin: auto;
padding: 24px;
displ
|
|
mobile
|
carbon
|
https://react.carbondesignsystem.com
|
Mobile view: Form layout page featuring multiple dropdown input fields, each accompanied by a label and helper text. The design uses a clean, minimalistic color scheme with a white background, light gray section dividers, and subtle purple outlines to distinguish grouped sections labeled "Layer-01" and "Layer-02." Dropdown menus are styled with a simple arrow indicator, and spacing between elements is generous, enhancing readability. The top left corner includes a small pink "Stack-Background" label, indicating a possible design or development annotation.
|
vanilla
|
tailwind
|
button
|
59
|
True
|
{
"tag": [
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div",
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div",
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div"
],
"x": [
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8,
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8,
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8
],
"y": [
8,
8,
8,
8,
16,
19,
9,
28,
28,
28,
28,
46,
46,
50,
46,
49,
54,
87,
105,
105,
105,
105,
113,
116,
106,
125,
125,
125,
125,
143,
143,
147,
143,
146,
151,
184,
202,
202,
202,
202,
210,
213,
203,
222,
222,
222,
222,
240,
240,
244,
240,
243,
248,
281
],
"width": [
359,
359,
359,
16,
13,
13,
14,
359,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300,
359,
359,
359,
16,
13,
13,
14,
359,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300,
359,
359,
359,
16,
13,
13,
14,
359,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300
],
"height": [
291,
291,
20,
16,
4,
4,
8,
271,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18,
194,
194,
20,
16,
4,
4,
8,
174,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18,
97,
97,
20,
16,
4,
4,
8,
77,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18
],
"text": [
"$background\n \n \n \n \n \n Label\n \n \n ",
"$background\n \n \n \n \n \n Label\n \n \n ",
"$background",
"",
"",
"",
"",
"Label\n \n \n \n \n \n \n \n ",
"Label\n \n \n \n \n \n \n \n ",
"Label\n \n \n \n \n \n \n \n ",
"Label",
"",
"",
"",
"",
"",
"",
"Helper text",
"$layer-01\n \n \n \n \n \n Label\n ",
"$layer-01\n \n \n \n \n \n Label\n ",
"$layer-01",
"",
"",
"",
"",
"Label\n \n \n \n \n \n \n",
"Label\n \n \n \n \n \n \n",
"Label\n \n \n \n \n \n \n",
"Label",
"",
"",
"",
"",
"",
"",
"Helper text",
"$layer-02\n \n \n \n \n \n ",
"$layer-02\n \n \n \n \n \n ",
"$layer-02",
"",
"",
"",
"",
"Label\n \n \n \n \n
|
3
|
001eafcebcfc
|
|
<html>
<body>
<div class="cds--layout">
<div class="carbon-storybook-template--annotation carbon-storybook-template--annotation--background">
<div class="carbon-storybook-template--annotation__label">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M16,24a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,15.12,16,21.8643,28.5259,15.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,24Z">
</path>
<path d="M16,30a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,21.12,16,27.8643,28.5259,21.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,30Z">
</path>
<path d="M16,18a.9967.9967,0,0,1-.4741-.12l-13-7a1,1,0,0,1,0-1.7607l13-7a.9982.9982,0,0,1,.9482,0l13,7a1,1,0,0,1,0,1.7607l-13,7A.9967.9967,0,0,1,16,18ZM5.1094,10,16,15.8643,26.8906,10,16,4.1358Z">
</path>
</svg>
$background
</div>
<div class="carbon-storybook-template--annotation__content">
<div style="width: 300px;">
<div class="cds--list-box__wrapper">
<label class="cds--label" dir="ltr" for="carbon-combobox-0" id="downshift-_r_b_-label">
Label
</label>
<div class="cds--combo-box cds--list-box">
<div class="cds--list-box__field">
<input aria-activedescendant="" aria-autocomplete="list" aria-controls="downshift-_r_b_-menu" aria-describedby="combobox-helper-text-id-_r_a_" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="downshift-_r_b_-label" autocomplete="off" class="cds--text-input cds--text-input--empty" id="carbon-combobox-0" role="combobox" tabindex="0" type="text" value=""/>
<button aria-controls="downshift-_r_b_-menu" aria-expanded="false" aria-label="Open" class="cds--list-box__menu-icon" id="downshift-_r_b_-toggle-button" tabindex="-1" title="Open" type="button">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 11 3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z">
</path>
</svg>
</button>
</div>
<ul aria-labelledby="downshift-_r_b_-label" class="cds--list-box__menu" id="downshift-_r_b_-menu" role="listbox">
</ul>
</div>
<div class="cds--form__helper-text" dir="ltr" id="combobox-helper-text-id-_r_a_">
Helper text
</div>
</div>
</div>
<div class="cds--layer-two cds--layer__with-background">
<div class="carbon-storybook-template--annotation carbon-storybook-template--annotation--layer">
<div class="carbon-storybook-template--annotation__label">
<svg aria-hidden="true" fill="currentColor" focusable="false" height="16" preserveaspectratio="xMidYMid meet" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M16,24a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,15.12,16,21.8643,28.5259,15.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,24Z">
</path>
<path d="M16,30a.9967.9967,0,0,1-.4741-.12l-13-7L3.4741,21.12,16,27.8643,28.5259,21.12l.9482,1.7607-13,7A.9967.9967,0,0,1,16,30Z">
</path>
<path d="M16,18a.9967.9967,0,0,1-.4741-.12l-13-7a1,1,0,0,1,0-1.7607l13-7a.9982.9982,0,0,1,.9482,0l13,7a1,1,0,0,1,0,1.7607l-13,7A.9967.9967,0,0,1,16,18ZM5.1094,10,16,15.8643,26.8906,10,16,4.1358Z">
</path>
</svg>
$layer-01
</div>
<div class="carbon-storybook-template--annotation__content">
<div style="width: 300px;">
<div class="cds--list-box__wrapper">
<label class="cds--label" dir="ltr" for="carbon-combobox-1" id="downshift-_r_e_-label">
Label
</label>
<div class="cds--combo-box cds--list-box">
<div class="cds--list-box__field">
<input aria-activedescendant="" aria-autocomplete="list" aria-controls="downshift-_r_e_-menu" a
|
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
display: none;
}
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
display: none;
}
:not(.sb-show-preparing-story) > .sb-preparing-story,
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
:not(.sb-show-nopreview) > .sb-nopreview,
:not(.sb-show-errordisplay) > .sb-errordisplay {
display: none;
}
.sb-show-main.sb-main-centered {
margin: 0;
display: flex;
align-items: center;
min-height: 100vh;
}
.sb-show-main.sb-main-centered #storybook-root {
box-sizing: border-box;
margin: auto;
padding: 1rem;
max-height: 100%;
}
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.sb-show-main.sb-main-centered:after {
content: '';
min-height: inherit;
font-size: 0;
}
}
.sb-show-main.sb-main-fullscreen {
margin: 0;
padding: 0;
display: block;
}
.sb-show-main.sb-main-padded {
margin: 0;
padding: 1rem;
display: block;
box-sizing: border-box;
}
.sb-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
padding: 40px;
font-family:
'Nunito Sans',
-apple-system,
'.SFNSText-Regular',
'San Francisco',
BlinkMacSystemFont,
'Segoe UI',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;
-webkit-font-smoothing: antialiased;
overflow: auto;
}
@media (max-width: 700px) {
.sb-wrapper {
padding: 20px;
}
}
@media (max-width: 500px) {
.sb-wrapper {
padding: 10px;
}
}
.sb-heading {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
margin: 10px 0;
padding-right: 25px;
}
.sb-nopreview {
display: flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
}
.sb-nopreview_main {
margin: auto;
padding: 30px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.03);
}
.sb-nopreview_heading {
text-align: center;
}
.sb-errordisplay {
background: #f6f9fc;
color: black;
z-index: 999999;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
& ol {
padding-left: 18px;
margin: 0;
}
& h1 {
font-family: Nunito Sans;
font-size: 22px;
font-weight: 400;
line-height: 30px;
font-weight: normal;
margin: 0;
&::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: #ff4400;
border-radius: 50%;
margin-right: 8px;
}
}
& p,
& ol {
font-family: Nunito Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
margin: 0;
}
& li + li {
margin: 0;
padding: 0;
padding-top: 12px;
}
& a {
color: currentColor;
}
}
.sb-errordisplay_main {
margin: auto;
padding: 24px;
displ
|
|
tablet
|
carbon
|
https://react.carbondesignsystem.com
|
Tablet view: Form layout page featuring multiple dropdown input fields, each accompanied by a label and helper text. The design uses a clean, minimalistic color scheme with a white background, light gray section dividers, and subtle purple outlines to distinguish grouped sections labeled "Layer-01" and "Layer-02." Dropdown menus are styled with a simple arrow indicator, and spacing between elements is generous, enhancing readability. The top left corner includes a small pink "Stack-Background" label, indicating a possible design or development annotation.
|
vanilla
|
tailwind
|
button
|
59
|
True
|
{
"tag": [
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div",
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div",
"div",
"div",
"div",
"svg",
"path",
"path",
"path",
"div",
"div",
"div",
"label",
"div",
"div",
"input",
"button",
"svg",
"path",
"div"
],
"x": [
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8,
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8,
8,
8,
8,
8,
9,
9,
9,
8,
8,
8,
8,
8,
8,
8,
165,
173,
176,
8
],
"y": [
8,
8,
8,
8,
16,
19,
9,
28,
28,
28,
28,
46,
46,
50,
46,
49,
54,
87,
105,
105,
105,
105,
113,
116,
106,
125,
125,
125,
125,
143,
143,
147,
143,
146,
151,
184,
202,
202,
202,
202,
210,
213,
203,
222,
222,
222,
222,
240,
240,
244,
240,
243,
248,
281
],
"width": [
752,
752,
752,
16,
13,
13,
14,
752,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300,
752,
752,
752,
16,
13,
13,
14,
752,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300,
752,
752,
752,
16,
13,
13,
14,
752,
300,
300,
36,
300,
300,
153,
32,
16,
10,
300
],
"height": [
291,
291,
20,
16,
4,
4,
8,
271,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18,
194,
194,
20,
16,
4,
4,
8,
174,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18,
97,
97,
20,
16,
4,
4,
8,
77,
77,
77,
18,
25,
25,
21,
25,
16,
6,
18
],
"text": [
"$background\n \n \n \n \n \n Label\n \n \n ",
"$background\n \n \n \n \n \n Label\n \n \n ",
"$background",
"",
"",
"",
"",
"Label\n \n \n \n \n \n \n \n ",
"Label\n \n \n \n \n \n \n \n ",
"Label\n \n \n \n \n \n \n \n ",
"Label",
"",
"",
"",
"",
"",
"",
"Helper text",
"$layer-01\n \n \n \n \n \n Label\n ",
"$layer-01\n \n \n \n \n \n Label\n ",
"$layer-01",
"",
"",
"",
"",
"Label\n \n \n \n \n \n \n",
"Label\n \n \n \n \n \n \n",
"Label\n \n \n \n \n \n \n",
"Label",
"",
"",
"",
"",
"",
"",
"Helper text",
"$layer-02\n \n \n \n \n \n ",
"$layer-02\n \n \n \n \n \n ",
"$layer-02",
"",
"",
"",
"",
"Label\n \n \n \n \n
|
4
|
00ac5dc7796e
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" httpequiv="X-UA-Compatible"/>
<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover" name="viewport"/>
<title>
Markdown Editor
</title>
<link href="/manifest.json" rel="manifest"/>
<meta content="yes" name="mobile-web-app-capable"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="Markdown Editor" name="apple-mobile-web-app-title"/>
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
</head>
<body>
<div id="root">
</div>
</body>
</html>
|
#root,body,html{width:100%;-webkit-overflow-scrolling:touch;margin:0;padding:0;min-height:100%}#root{flex-shrink:0;flex-basis:auto;flex-grow:1;display:flex;flex:1}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;height:calc(100% + env(safe-area-inset-top))}body{display:flex;overflow-y:auto;overscroll-behavior-y:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-overflow-style:scrollbar}
|
|
desktop
|
frontend_mentor
|
https://markdown-editor-git-master-takumakira.vercel.app/
|
Desktop view: Markdown editor interface featuring a split-screen layout with the markdown code editor on the left and a live preview pane on the right. The left panel displays raw markdown syntax, while the right panel renders the formatted output, including headings, lists, and a blockquote with a link. The color scheme uses a clean white and light gray background with black text, accented by orange buttons and highlights. A prominent "Save Changes" button appears in the top right corner, and the design follows a modern, minimalistic aesthetic with clear section separation.
|
vanilla
|
vanilla
|
page
|
18
|
False
|
{
"tag": [
"div"
],
"x": [
0
],
"y": [
0
],
"width": [
1280
],
"height": [
720
],
"text": [
""
],
"id": [
"root"
],
"class": [
""
],
"parent_index": [
-1
]
}
|
5
|
00ac5dc7796e
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" httpequiv="X-UA-Compatible"/>
<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover" name="viewport"/>
<title>
Markdown Editor
</title>
<link href="/manifest.json" rel="manifest"/>
<meta content="yes" name="mobile-web-app-capable"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="Markdown Editor" name="apple-mobile-web-app-title"/>
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
</head>
<body>
<div id="root">
</div>
</body>
</html>
|
#root,body,html{width:100%;-webkit-overflow-scrolling:touch;margin:0;padding:0;min-height:100%}#root{flex-shrink:0;flex-basis:auto;flex-grow:1;display:flex;flex:1}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;height:calc(100% + env(safe-area-inset-top))}body{display:flex;overflow-y:auto;overscroll-behavior-y:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-overflow-style:scrollbar}
|
|
mobile
|
frontend_mentor
|
https://markdown-editor-git-master-takumakira.vercel.app/
|
Mobile view: Markdown editor interface featuring a split-screen layout with the markdown code editor on the left and a live preview pane on the right. The left panel displays raw markdown syntax, while the right panel renders the formatted output, including headings, lists, and a blockquote with a link. The color scheme uses a clean white and light gray background with black text, accented by orange buttons and highlights. A prominent "Save Changes" button appears in the top right corner, and the design follows a modern, minimalistic aesthetic with clear section separation.
|
vanilla
|
vanilla
|
page
|
18
|
False
|
{
"tag": [
"div"
],
"x": [
0
],
"y": [
0
],
"width": [
375
],
"height": [
812
],
"text": [
""
],
"id": [
"root"
],
"class": [
""
],
"parent_index": [
-1
]
}
|
6
|
00ac5dc7796e
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" httpequiv="X-UA-Compatible"/>
<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover" name="viewport"/>
<title>
Markdown Editor
</title>
<link href="/manifest.json" rel="manifest"/>
<meta content="yes" name="mobile-web-app-capable"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="Markdown Editor" name="apple-mobile-web-app-title"/>
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
</head>
<body>
<div id="root">
</div>
</body>
</html>
|
#root,body,html{width:100%;-webkit-overflow-scrolling:touch;margin:0;padding:0;min-height:100%}#root{flex-shrink:0;flex-basis:auto;flex-grow:1;display:flex;flex:1}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;height:calc(100% + env(safe-area-inset-top))}body{display:flex;overflow-y:auto;overscroll-behavior-y:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-overflow-style:scrollbar}
|
|
tablet
|
frontend_mentor
|
https://markdown-editor-git-master-takumakira.vercel.app/
|
Tablet view: Markdown editor interface featuring a split-screen layout with the markdown code editor on the left and a live preview pane on the right. The left panel displays raw markdown syntax, while the right panel renders the formatted output, including headings, lists, and a blockquote with a link. The color scheme uses a clean white and light gray background with black text, accented by orange buttons and highlights. A prominent "Save Changes" button appears in the top right corner, and the design follows a modern, minimalistic aesthetic with clear section separation.
|
vanilla
|
vanilla
|
page
|
18
|
False
|
{
"tag": [
"div"
],
"x": [
0
],
"y": [
0
],
"width": [
768
],
"height": [
1024
],
"text": [
""
],
"id": [
"root"
],
"class": [
""
],
"parent_index": [
-1
]
}
|
7
|
00b8ed62194e
|
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>
This repository contains some of the tasks I have completed on Frontendmentor.io platform | Frontendmentor-challenges
</title>
<meta content="Jekyll v3.10.0" name="generator"/>
<link href="https://jen67.github.io/Frontendmentor-challenges/" rel="canonical"/>
<meta content="summary" name="twitter:card"/>
</head>
<body>
<div class="container-lg px-3 my-5 markdown-body">
<h1>
<a href="https://jen67.github.io/Frontendmentor-challenges/">
Frontendmentor-challenges
</a>
</h1>
<h1 id="this-repository-contains-some-of-the-tasks-i-have-completed-on-frontendmentorio-platform">
This repository contains some of the tasks I have completed on Frontendmentor.io platform
</h1>
<h2 id="table-of-contents">
Table of Contents
</h2>
<ul>
<li>
<a href="#this-repository-contains-some-of-the-tasks-i-have-completed-on-frontendmentorio-platform">
This repository contains some of the tasks I have completed on Frontendmentor.io platform
</a>
<ul>
<li>
<a href="#table-of-contents">
Table of Contents
</a>
</li>
<li>
<a href="#interactive-rating-component">
Interactive-rating-component
</a>
</li>
<li>
<a href="#tip-calculator">
Tip-calculator
</a>
</li>
<li>
<a href="#fylo-landing-page">
fylo-landing-page
</a>
</li>
<li>
<a href="#drop-down-navigation">
Drop-down-navigation
</a>
</li>
<li>
<a href="#faq-accordion1">
Faq-accordion1
</a>
</li>
<li>
<a href="#faq-accordion2">
Faq-accordion2
</a>
</li>
<li>
<a href="#four-card-feature-section">
Four-card-feature-section
</a>
</li>
<li>
<a href="#base-apparel-card">
Base Apparel card
</a>
</li>
<li>
<a href="#ping-coming-soon-page">
Ping Coming soon page
</a>
</li>
<li>
<a href="#pricing-component-with-toggle">
Pricing component with toggle
</a>
</li>
<li>
<a href="#blog-card-preview">
Blog card preview
</a>
</li>
<li>
<a href="#random-advice-generator-app">
Random Advice generator app
</a>
</li>
<li>
<a href="#age-calculator-app">
Age calculator app
</a>
</li>
<li>
<a href="#social-media-link-app">
social media link app
</a>
</li>
<li>
<a href="#recipe-page-app">
recipe page app
</a>
</li>
<li>
<a href="#fylo-data-storage">
Fylo data storage
</a>
</li>
</ul>
</li>
</ul>
<h2 id="interactive-rating-component">
Interactive-rating-component
</h2>
<p>
<img alt="Tasks" src="./interactive-rating-component-main/design/desktop-design.jpg" width="500"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://jen67.github.io/Frontendmentor-challenges/interactive-rating-component-main/index.html">
live view
</a>
</li>
</ul>
<h2 id="tip-calculator">
Tip-calculator
</h2>
<p>
<img alt="Tasks" src="./tip-calculator-app-main/design/desktop-design-completed.jpg" width="300"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://tip-calculator-theta-drab.vercel.app/">
live view
</a>
</li>
</ul>
<h2 id="fylo-landing-page">
fylo-landing-page
</h2>
<p>
<img alt="Tasks" src="./fylo-landing-page/design/desktop-design.jpg" width="300"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://fylo-landing-page-lime-theta.vercel.app/">
live
|
|
{"@context":"https://schema.org","@type":"WebSite","description":"This repository contains some frontendmentor.io challenges that I have worked on","headline":"This repository contains some of the tasks I have completed on Frontendmentor.io platform","name":"Frontendmentor-challenges","url":"https://jen67.github.io/Frontendmentor-challenges/"}
anchors.add();
|
desktop
|
frontend_mentor
|
https://jen67.github.io/Frontendmentor-challenges/
|
Desktop view: GitHub repository README page featuring a list of completed Frontend Mentor challenges. The layout consists of a prominent title in blue, a bolded introductory sentence, and a structured Table of Contents with blue, underlined links to individual project folders. The design is minimalistic, using a white background, black text, and standard GitHub markdown styling for clarity and easy navigation.
|
angular
|
vanilla
|
card
|
153
|
False
|
{
"tag": [
"div",
"h1",
"a",
"h1",
"h2",
"a",
"ul",
"li",
"a",
"ul",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a"
],
"x": [
8,
8,
8,
8,
8,
194,
8,
48,
48,
48,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
8,
318,
8,
8,
8,
48,
151,
8,
160,
8,
8,
8,
48,
151,
8,
194,
8,
8,
8,
48,
151,
8,
247,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
278,
8,
8,
8,
48,
151,
8,
203,
8,
8,
8,
48,
151,
8,
255,
8,
8,
8,
48,
151,
8,
327,
8,
8,
8,
48,
151,
8,
200,
8,
8,
8,
48,
151,
8,
328,
8,
8,
8,
48,
151,
8,
207,
8,
8,
8,
48,
151,
8,
231,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
191,
8,
8,
8,
48,
151
],
"y": [
21,
21,
21,
80,
138,
137,
186,
186,
186,
204,
204,
204,
222,
222,
240,
240,
258,
258,
276,
276,
294,
294,
312,
312,
330,
330,
348,
348,
366,
366,
384,
384,
402,
402,
420,
420,
438,
438,
456,
456,
474,
474,
492,
492,
530,
529,
578,
578,
612,
612,
612,
650,
649,
698,
698,
732,
732,
732,
770,
769,
818,
818,
852,
852,
852,
890,
889,
937,
937,
971,
971,
971,
1009,
1008,
1057,
1057,
1091,
1091,
1091,
1129,
1128,
1177,
1177,
1211,
1211,
1211,
1249,
1248,
1297,
1297,
1331,
1331,
1331,
1369,
1368,
1417,
1417,
1451,
1451,
1451,
1489,
1488,
1537,
1537,
1571,
1571,
1571,
1608,
1607,
1656,
1656,
1690,
1690,
1690,
1728,
1727,
1776,
1776,
1810,
1810,
1810,
1848,
1847,
1896,
1896,
1930,
1930,
1930,
1968,
1967,
2016,
201
|
8
|
00b8ed62194e
|
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>
This repository contains some of the tasks I have completed on Frontendmentor.io platform | Frontendmentor-challenges
</title>
<meta content="Jekyll v3.10.0" name="generator"/>
<link href="https://jen67.github.io/Frontendmentor-challenges/" rel="canonical"/>
<meta content="summary" name="twitter:card"/>
</head>
<body>
<div class="container-lg px-3 my-5 markdown-body">
<h1>
<a href="https://jen67.github.io/Frontendmentor-challenges/">
Frontendmentor-challenges
</a>
</h1>
<h1 id="this-repository-contains-some-of-the-tasks-i-have-completed-on-frontendmentorio-platform">
This repository contains some of the tasks I have completed on Frontendmentor.io platform
</h1>
<h2 id="table-of-contents">
Table of Contents
</h2>
<ul>
<li>
<a href="#this-repository-contains-some-of-the-tasks-i-have-completed-on-frontendmentorio-platform">
This repository contains some of the tasks I have completed on Frontendmentor.io platform
</a>
<ul>
<li>
<a href="#table-of-contents">
Table of Contents
</a>
</li>
<li>
<a href="#interactive-rating-component">
Interactive-rating-component
</a>
</li>
<li>
<a href="#tip-calculator">
Tip-calculator
</a>
</li>
<li>
<a href="#fylo-landing-page">
fylo-landing-page
</a>
</li>
<li>
<a href="#drop-down-navigation">
Drop-down-navigation
</a>
</li>
<li>
<a href="#faq-accordion1">
Faq-accordion1
</a>
</li>
<li>
<a href="#faq-accordion2">
Faq-accordion2
</a>
</li>
<li>
<a href="#four-card-feature-section">
Four-card-feature-section
</a>
</li>
<li>
<a href="#base-apparel-card">
Base Apparel card
</a>
</li>
<li>
<a href="#ping-coming-soon-page">
Ping Coming soon page
</a>
</li>
<li>
<a href="#pricing-component-with-toggle">
Pricing component with toggle
</a>
</li>
<li>
<a href="#blog-card-preview">
Blog card preview
</a>
</li>
<li>
<a href="#random-advice-generator-app">
Random Advice generator app
</a>
</li>
<li>
<a href="#age-calculator-app">
Age calculator app
</a>
</li>
<li>
<a href="#social-media-link-app">
social media link app
</a>
</li>
<li>
<a href="#recipe-page-app">
recipe page app
</a>
</li>
<li>
<a href="#fylo-data-storage">
Fylo data storage
</a>
</li>
</ul>
</li>
</ul>
<h2 id="interactive-rating-component">
Interactive-rating-component
</h2>
<p>
<img alt="Tasks" src="./interactive-rating-component-main/design/desktop-design.jpg" width="500"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://jen67.github.io/Frontendmentor-challenges/interactive-rating-component-main/index.html">
live view
</a>
</li>
</ul>
<h2 id="tip-calculator">
Tip-calculator
</h2>
<p>
<img alt="Tasks" src="./tip-calculator-app-main/design/desktop-design-completed.jpg" width="300"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://tip-calculator-theta-drab.vercel.app/">
live view
</a>
</li>
</ul>
<h2 id="fylo-landing-page">
fylo-landing-page
</h2>
<p>
<img alt="Tasks" src="./fylo-landing-page/design/desktop-design.jpg" width="300"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://fylo-landing-page-lime-theta.vercel.app/">
live
|
|
{"@context":"https://schema.org","@type":"WebSite","description":"This repository contains some frontendmentor.io challenges that I have worked on","headline":"This repository contains some of the tasks I have completed on Frontendmentor.io platform","name":"Frontendmentor-challenges","url":"https://jen67.github.io/Frontendmentor-challenges/"}
anchors.add();
|
mobile
|
frontend_mentor
|
https://jen67.github.io/Frontendmentor-challenges/
|
Mobile view: GitHub repository README page featuring a list of completed Frontend Mentor challenges. The layout consists of a prominent title in blue, a bolded introductory sentence, and a structured Table of Contents with blue, underlined links to individual project folders. The design is minimalistic, using a white background, black text, and standard GitHub markdown styling for clarity and easy navigation.
|
angular
|
vanilla
|
card
|
153
|
False
|
{
"tag": [
"div",
"h1",
"a",
"h1",
"h2",
"a",
"ul",
"li",
"a",
"ul",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a"
],
"x": [
8,
8,
8,
8,
8,
194,
8,
48,
48,
48,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
8,
318,
8,
8,
8,
48,
151,
8,
160,
8,
8,
8,
48,
151,
8,
194,
8,
8,
8,
48,
151,
8,
247,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
278,
8,
8,
8,
48,
151,
8,
203,
8,
8,
8,
48,
151,
8,
255,
8,
8,
8,
48,
151,
8,
327,
8,
8,
8,
48,
151,
8,
200,
8,
8,
8,
48,
151,
8,
328,
8,
8,
8,
48,
151,
8,
207,
8,
8,
8,
48,
151,
8,
231,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
191,
8,
8,
8,
48,
151
],
"y": [
21,
21,
21,
117,
323,
322,
371,
371,
371,
407,
407,
407,
425,
425,
443,
443,
461,
461,
479,
479,
497,
497,
515,
515,
533,
533,
551,
551,
569,
569,
587,
587,
605,
605,
623,
623,
641,
641,
659,
659,
677,
677,
695,
695,
733,
732,
781,
781,
815,
815,
815,
853,
852,
901,
901,
935,
935,
935,
973,
972,
1021,
1021,
1055,
1055,
1055,
1093,
1092,
1140,
1140,
1174,
1174,
1174,
1212,
1211,
1260,
1260,
1294,
1294,
1294,
1332,
1331,
1380,
1380,
1414,
1414,
1414,
1452,
1451,
1500,
1500,
1534,
1534,
1534,
1572,
1571,
1620,
1620,
1654,
1654,
1654,
1692,
1691,
1740,
1740,
1774,
1774,
1774,
1811,
1810,
1859,
1859,
1893,
1893,
1893,
1931,
1930,
1979,
1979,
2013,
2013,
2013,
2051,
2050,
2099,
2099,
2133,
2133,
2133,
2171,
2170,
|
9
|
00b8ed62194e
|
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>
This repository contains some of the tasks I have completed on Frontendmentor.io platform | Frontendmentor-challenges
</title>
<meta content="Jekyll v3.10.0" name="generator"/>
<link href="https://jen67.github.io/Frontendmentor-challenges/" rel="canonical"/>
<meta content="summary" name="twitter:card"/>
</head>
<body>
<div class="container-lg px-3 my-5 markdown-body">
<h1>
<a href="https://jen67.github.io/Frontendmentor-challenges/">
Frontendmentor-challenges
</a>
</h1>
<h1 id="this-repository-contains-some-of-the-tasks-i-have-completed-on-frontendmentorio-platform">
This repository contains some of the tasks I have completed on Frontendmentor.io platform
</h1>
<h2 id="table-of-contents">
Table of Contents
</h2>
<ul>
<li>
<a href="#this-repository-contains-some-of-the-tasks-i-have-completed-on-frontendmentorio-platform">
This repository contains some of the tasks I have completed on Frontendmentor.io platform
</a>
<ul>
<li>
<a href="#table-of-contents">
Table of Contents
</a>
</li>
<li>
<a href="#interactive-rating-component">
Interactive-rating-component
</a>
</li>
<li>
<a href="#tip-calculator">
Tip-calculator
</a>
</li>
<li>
<a href="#fylo-landing-page">
fylo-landing-page
</a>
</li>
<li>
<a href="#drop-down-navigation">
Drop-down-navigation
</a>
</li>
<li>
<a href="#faq-accordion1">
Faq-accordion1
</a>
</li>
<li>
<a href="#faq-accordion2">
Faq-accordion2
</a>
</li>
<li>
<a href="#four-card-feature-section">
Four-card-feature-section
</a>
</li>
<li>
<a href="#base-apparel-card">
Base Apparel card
</a>
</li>
<li>
<a href="#ping-coming-soon-page">
Ping Coming soon page
</a>
</li>
<li>
<a href="#pricing-component-with-toggle">
Pricing component with toggle
</a>
</li>
<li>
<a href="#blog-card-preview">
Blog card preview
</a>
</li>
<li>
<a href="#random-advice-generator-app">
Random Advice generator app
</a>
</li>
<li>
<a href="#age-calculator-app">
Age calculator app
</a>
</li>
<li>
<a href="#social-media-link-app">
social media link app
</a>
</li>
<li>
<a href="#recipe-page-app">
recipe page app
</a>
</li>
<li>
<a href="#fylo-data-storage">
Fylo data storage
</a>
</li>
</ul>
</li>
</ul>
<h2 id="interactive-rating-component">
Interactive-rating-component
</h2>
<p>
<img alt="Tasks" src="./interactive-rating-component-main/design/desktop-design.jpg" width="500"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://jen67.github.io/Frontendmentor-challenges/interactive-rating-component-main/index.html">
live view
</a>
</li>
</ul>
<h2 id="tip-calculator">
Tip-calculator
</h2>
<p>
<img alt="Tasks" src="./tip-calculator-app-main/design/desktop-design-completed.jpg" width="300"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://tip-calculator-theta-drab.vercel.app/">
live view
</a>
</li>
</ul>
<h2 id="fylo-landing-page">
fylo-landing-page
</h2>
<p>
<img alt="Tasks" src="./fylo-landing-page/design/desktop-design.jpg" width="300"/>
</p>
<ul>
<li>
Live Site URL:
<a href="https://fylo-landing-page-lime-theta.vercel.app/">
live
|
|
{"@context":"https://schema.org","@type":"WebSite","description":"This repository contains some frontendmentor.io challenges that I have worked on","headline":"This repository contains some of the tasks I have completed on Frontendmentor.io platform","name":"Frontendmentor-challenges","url":"https://jen67.github.io/Frontendmentor-challenges/"}
anchors.add();
|
tablet
|
frontend_mentor
|
https://jen67.github.io/Frontendmentor-challenges/
|
Tablet view: GitHub repository README page featuring a list of completed Frontend Mentor challenges. The layout consists of a prominent title in blue, a bolded introductory sentence, and a structured Table of Contents with blue, underlined links to individual project folders. The design is minimalistic, using a white background, black text, and standard GitHub markdown styling for clarity and easy navigation.
|
angular
|
vanilla
|
card
|
153
|
False
|
{
"tag": [
"div",
"h1",
"a",
"h1",
"h2",
"a",
"ul",
"li",
"a",
"ul",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a",
"h2",
"a",
"p",
"img",
"ul",
"li",
"a"
],
"x": [
8,
8,
8,
8,
8,
194,
8,
48,
48,
48,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
88,
8,
318,
8,
8,
8,
48,
151,
8,
160,
8,
8,
8,
48,
151,
8,
194,
8,
8,
8,
48,
151,
8,
247,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
278,
8,
8,
8,
48,
151,
8,
203,
8,
8,
8,
48,
151,
8,
255,
8,
8,
8,
48,
151,
8,
327,
8,
8,
8,
48,
151,
8,
200,
8,
8,
8,
48,
151,
8,
328,
8,
8,
8,
48,
151,
8,
207,
8,
8,
8,
48,
151,
8,
231,
8,
8,
8,
48,
151,
8,
175,
8,
8,
8,
48,
151,
8,
191,
8,
8,
8,
48,
151
],
"y": [
21,
21,
21,
80,
175,
174,
223,
223,
223,
241,
241,
241,
259,
259,
277,
277,
295,
295,
313,
313,
331,
331,
349,
349,
367,
367,
385,
385,
403,
403,
421,
421,
439,
439,
457,
457,
475,
475,
493,
493,
511,
511,
529,
529,
567,
566,
615,
615,
649,
649,
649,
687,
686,
735,
735,
769,
769,
769,
807,
806,
855,
855,
889,
889,
889,
927,
926,
974,
974,
1008,
1008,
1008,
1046,
1045,
1094,
1094,
1128,
1128,
1128,
1166,
1165,
1214,
1214,
1248,
1248,
1248,
1286,
1285,
1334,
1334,
1368,
1368,
1368,
1406,
1405,
1454,
1454,
1488,
1488,
1488,
1526,
1525,
1574,
1574,
1608,
1608,
1608,
1645,
1644,
1693,
1693,
1727,
1727,
1727,
1765,
1764,
1813,
1813,
1847,
1847,
1847,
1885,
1884,
1933,
1933,
1967,
1967,
1967,
2005,
2004,
2053,
|
10
|
00f7053df214
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="./images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/>
<title>
Frontend Mentor | Calculator app
</title>
</head>
<body class="dark-theme" id="body">
<main>
<div class="calc__wrapper">
<div class="calc">
<div class="calc__header">
<h1 class="calc__heading">
calc
</h1>
<div>
<fieldset class="theme__switcher">
<legend aria-label="Choose color theme">
Theme
</legend>
<input aria-label="Dark color theme" id="dark" name="theme" type="radio" value="dark-theme"/>
<label for="dark">
1
</label>
<input aria-label="Light color theme" checked="" id="light" name="theme" type="radio" value="light-theme"/>
<label for="light">
2
</label>
<input aria-label="Neon color theme" id="neon" name="theme" type="radio" value="neon-theme"/>
<label for="neon">
3
</label>
</fieldset>
</div>
</div>
<div class="calc__display">
<p aria-live="polite" id="display">
0
</p>
</div>
<div class="calc__keypad-wrapper">
<div aria-label="Calculator Keypad" class="calc__keypad" id="keypad" role="grid">
</div>
<div aria-label="Calculator Keypad Instructions" class="grid__NUX hidden" id="grid-nux" role="region" tabindex="0">
<p>
Move keyboard focus inside the keypad with arrow keys. Press
<code>
Space
</code>
to activate key.
</p>
<p>
Press Home to jump to the top left key (7). Press End to jump to the last key (=).
</p>
<p>
You can also use number keys and numeric keyboard. Press Enter to calculate.
</p>
<button id="close-nux-btn">
Close Tutorial
</button>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
|
|
|
desktop
|
frontend_mentor
|
https://calculator-color-schemes.vercel.app/
|
Desktop view: Calculator app interface featuring a numeric keypad and basic operation buttons. The layout includes a large display area at the top for showing input and results, with a theme toggle switch above it. Buttons are arranged in a grid with neutral tones, while action buttons like "DEL," "RESET," and "=" are highlighted in teal and orange for emphasis. The overall design is minimalist, using a soft gray background and rounded buttons for a modern, user-friendly appearance.
|
vanilla
|
vanilla
|
button
|
33
|
False
|
{
"tag": [
"main",
"div",
"div",
"div",
"h1",
"div",
"fieldset",
"legend",
"input",
"label",
"input",
"label",
"input",
"label",
"div",
"p",
"div",
"div",
"p",
"code",
"p",
"p",
"button"
],
"x": [
8,
8,
8,
8,
8,
8,
10,
24,
29,
49,
66,
86,
103,
123,
8,
8,
8,
8,
8,
416,
8,
8,
8
],
"y": [
21,
21,
21,
21,
21,
80,
80,
80,
106,
105,
106,
105,
106,
105,
151,
151,
185,
185,
185,
187,
219,
253,
287
],
"width": [
1264,
1264,
1264,
1264,
1264,
1264,
1260,
48,
13,
12,
13,
12,
13,
8,
1264,
1264,
1264,
1264,
1264,
47,
1264,
1264,
98
],
"height": [
287,
287,
287,
114,
37,
56,
56,
18,
13,
18,
13,
18,
13,
18,
18,
18,
123,
123,
18,
15,
18,
18,
21
],
"text": [
"calc\n \n \n \n \n Theme\n \n \n \n ",
"calc\n \n \n \n \n Theme\n \n \n \n ",
"calc\n \n \n \n \n Theme\n \n \n \n ",
"calc\n \n \n \n \n Theme\n \n \n \n ",
"calc",
"Theme\n \n \n \n 1\n \n \n \n ",
"Theme\n \n \n \n 1\n \n \n \n ",
"Theme",
"",
"1",
"",
"2",
"",
"3",
"0",
"0",
"Move keyboard focus inside the keypad with arrow keys. Press\n \n S",
"Move keyboard focus inside the keypad with arrow keys. Press\n \n S",
"Move keyboard focus inside the keypad with arrow keys. Press\n \n S",
"Space",
"Press Home to jump to the top left key (7). Press End to jump to the last key (=",
"You can also use number keys and numeric keyboard. Press Enter to calculate.",
"Close Tutorial"
],
"id": [
"",
"",
"",
"",
"",
"",
"",
"",
"dark",
"",
"light",
"",
"neon",
"",
"",
"display",
"",
"grid-nux",
"",
"",
"",
"",
"close-nux-btn"
],
"class": [
"",
"calc__wrapper",
"calc",
"calc__header",
"calc__heading",
"",
"theme__switcher",
"",
"",
"",
"",
"",
"",
"",
"calc__display",
"",
"calc__keypad-wrapper",
"grid__NUX hidden",
"",
"",
"",
"",
""
],
"parent_index": [
-1,
0,
1,
2,
3,
3,
5,
6,
6,
6,
6,
6,
6,
6,
2,
14,
2,
16,
17,
18,
17,
17,
17
]
}
|