Skip to content

Commit d698582

Browse files
tajulafreentajulafreen
authored
Merge pull request #1 from tajulafreen/expandingcards
50-Projects : Expandingcards
2 parents 86f971b + 297d0b1 commit d698582

File tree

10 files changed

+11288
-0
lines changed

10 files changed

+11288
-0
lines changed

‎.eslintrc.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"jest": true
6+
},
7+
"parser": "babel-eslint",
8+
"parserOptions": {
9+
"ecmaVersion": 2018,
10+
"sourceType": "module"
11+
},
12+
"extends": ["airbnb-base"],
13+
"rules": {
14+
"no-shadow": "off",
15+
"no-param-reassign": "off",
16+
"eol-last": "off",
17+
"import/extensions": [ 1, {
18+
"js": "always", "json": "always"
19+
}]
20+
},
21+
"ignorePatterns": [
22+
"dist/",
23+
"build/"
24+
]
25+
}

‎.github/workflows/linters.yml‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
name: Linters
2+
3+
on: pull_request
4+
5+
env:
6+
FORCE_COLOR: 1
7+
8+
jobs:
9+
lighthouse:
10+
name: Lighthouse
11+
runs-on: ubuntu-22.04
12+
steps:
13+
- uses: actions/checkout@v3
14+
- uses: actions/setup-node@v3
15+
with:
16+
node-version: "18.x"
17+
- name: Setup Lighthouse
18+
run: npm install -g @lhci/cli@0.11.x
19+
- name: Lighthouse Report
20+
run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
21+
webhint:
22+
name: Webhint
23+
runs-on: ubuntu-22.04
24+
steps:
25+
- uses: actions/checkout@v3
26+
- uses: actions/setup-node@v3
27+
with:
28+
node-version: "18.x"
29+
- name: Setup Webhint
30+
run: |
31+
npm install --save-dev hint@7.x
32+
[ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
33+
- name: Webhint Report
34+
run: npx hint .
35+
stylelint:
36+
name: Stylelint
37+
runs-on: ubuntu-22.04
38+
steps:
39+
- uses: actions/checkout@v3
40+
- uses: actions/setup-node@v3
41+
with:
42+
node-version: "18.x"
43+
- name: Setup Stylelint
44+
run: |
45+
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
46+
[ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
47+
- name: Stylelint Report
48+
run: npx stylelint "**/*.{css,scss}"
49+
eslint:
50+
name: ESLint
51+
runs-on: ubuntu-22.04
52+
steps:
53+
- uses: actions/checkout@v3
54+
- uses: actions/setup-node@v3
55+
with:
56+
node-version: "18.x"
57+
- name: Setup ESLint
58+
run: |
59+
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
60+
[ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
61+
- name: ESLint Report
62+
run: npx eslint .
63+
nodechecker:
64+
name: node_modules checker
65+
runs-on: ubuntu-22.04
66+
steps:
67+
- uses: actions/checkout@v3
68+
- name: Check node_modules existence
69+
run: |
70+
if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎.hintrc‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"connector": {
3+
"name": "local",
4+
"options": {
5+
"pattern": ["**", "!.git/**", "!node_modules/**"]
6+
}
7+
},
8+
"extends": ["development"],
9+
"formatters": ["stylish"],
10+
"hints": [
11+
"button-type",
12+
"disown-opener",
13+
"html-checker",
14+
"meta-charset-utf-8",
15+
"meta-viewport"
16+
]
17+
}

‎.stylelintrc.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"extends": ["stylelint-config-standard"],
3+
"plugins": ["stylelint-scss", "stylelint-csstree-validator"],
4+
"rules": {
5+
"at-rule-no-unknown": [
6+
true,
7+
{
8+
"ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
9+
}
10+
],
11+
"scss/at-rule-no-unknown": [
12+
true,
13+
{
14+
"ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
15+
}
16+
],
17+
"csstree/validator": true
18+
},
19+
"ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
20+
}

‎ExpandsCards/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Expanding Cards</title>
7+
<link rel="stylesheet" href="style.css">
8+
<header>
9+
<h1>Famous Food in India</h1>
10+
</header>
11+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<div class="panel active" style="background-image: url('https://www.indianhealthyrecipes.com/wp-content/uploads/2022/02/gobi-manchurian.jpg.webp');">
16+
<h3>gobi manchurian</h3></div>
17+
<div class="panel" style="background-image: url('https://www.indianhealthyrecipes.com/wp-content/uploads/2021/12/tandoori-chicken-1024x1536.jpg.webp');">
18+
<h3>tandoori chicken</h3>
19+
</div>
20+
<div class="panel" style="background-image: url('https://www.indianhealthyrecipes.com/wp-content/uploads/2021/12/chicken-biryani.jpg.webp');">
21+
<h3>chicken biryani</h3>
22+
</div>
23+
<div class="panel" style="background-image: url('https://www.indianhealthyrecipes.com/wp-content/uploads/2023/05/chicken-shawarma.jpg.webp');">
24+
<h3>shawarma</h3>
25+
</div>
26+
<div class="panel" style="background-image: url('https://1.bp.blogspot.com/-pEUFitqs6Rk/YMikRdhUagI/AAAAAAABk3Y/iwZmg_bJcTkHESDGo9vw_-xrsDgS7i5WgCLcBGAsYHQ/s1244/Polish_20210614_102108696.jpg');">
27+
<h3>Papdi Chaat</h3>
28+
</div>
29+
</div>
30+
31+
32+
33+
34+
<script src="script.js"></script>
35+
</body>
36+
</html>

‎ExpandsCards/script.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const panels = document.querySelectorAll('.panel');
2+
3+
const removeActiveClasses = () => {
4+
panels.forEach((panel) => {
5+
panel.classList.remove('active');
6+
});
7+
};
8+
panels.forEach((panel) => {
9+
panel.addEventListener('click', () => {
10+
removeActiveClasses();
11+
panel.classList.add('active');
12+
});
13+
});

‎ExpandsCards/style.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: sans-serif;
7+
margin: 0;
8+
overflow: hidden;
9+
height: 100vh;
10+
}
11+
12+
h1,
13+
.container {
14+
display: flex;
15+
justify-content: center;
16+
}
17+
18+
.container {
19+
align-items: center;
20+
width: 90vw;
21+
margin: auto;
22+
}
23+
24+
.panel {
25+
background-size: auto 100%;
26+
background-repeat: no-repeat;
27+
background-position: center;
28+
height: 80vh;
29+
border-radius: 50px;
30+
color: #494747;
31+
cursor: pointer;
32+
flex: 0.5;
33+
margin: 10px;
34+
position: relative;
35+
transition: flex 0.7s ease-in;
36+
}
37+
38+
.panel h3 {
39+
font-size: 24px;
40+
position: absolute;
41+
bottom: 25px;
42+
left: 10vh;
43+
margin: 0;
44+
opacity: 0;
45+
}
46+
47+
.panel.active {
48+
flex: 5;
49+
}
50+
51+
.panel.active h3 {
52+
opacity: 1;
53+
transition: opacity 0.3s ease-in 0.4s;
54+
}
55+
56+
@media (max-width: 480px) {
57+
.container {
58+
width: 100vw;
59+
}
60+
61+
.panel:nth-of-type(4),
62+
.panel:nth-of-type(5) {
63+
display: none;
64+
}
65+
}

0 commit comments

Comments
 (0)