Skip to content

Commit 0098ec3

Browse files
PBJIPBJI
authored
Merge pull request #804 from Nchhabra25/ExpaandableCards-Nchhabra25-branch
Expaandable cards nchhabra25 branch
2 parents c43ac74 + 36d7992 commit 0098ec3

File tree

4 files changed

+113
-0
lines changed

4 files changed

+113
-0
lines changed

‎ExpandableCards/Nchhabra25/Readme.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Expandable Cards
2+
![image](https://github.com/Nchhabra25/Gradient-Generator/assets/124149051/b55053a9-b686-43cc-8cae-19b3c43e0467)

‎ExpandableCards/Nchhabra25/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<h1>Welcome</h1>
12+
<h3>Click on one of these cards</h3>
13+
<section class="main">
14+
<div class="cards active" id="pvt1">
15+
<h3>stars</h3>
16+
</div>
17+
<div class="cards" id="pvt2">
18+
<h3>beaches</h3>
19+
</div>
20+
<div class="cards" id="pvt3">
21+
<h3>clouds</h3>
22+
</div>
23+
<div class="cards" id="pvt4">
24+
<h3>scenery</h3>
25+
</div>
26+
</section>
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎ExpandableCards/Nchhabra25/script.js‎

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

‎ExpandableCards/Nchhabra25/style.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
body{
2+
background: radial-gradient(at left, #81e8f2, #f8bbc5);
3+
}
4+
h1,h3{
5+
text-align: center;
6+
font-family: 'Times New Roman', Times, serif;
7+
color: #202020;
8+
font-size: 2.2rem;
9+
}
10+
.cards{
11+
/*border:2px solid red;*/
12+
margin: 1.5em;
13+
height: 50vh;
14+
width: 5vw;
15+
border-radius: 38px;
16+
display: flex;
17+
align-items: flex-end;
18+
transition: 0.5s ease-out;
19+
}
20+
.cards:hover{
21+
cursor: pointer;
22+
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.13);
23+
}
24+
.main{
25+
display: flex;
26+
flex-direction: row;
27+
align-items: center;
28+
justify-content: center;
29+
}
30+
.cards h3{
31+
color:white;
32+
font-weight: bold;
33+
position:relative;
34+
left: 10px;
35+
opacity: 0;
36+
transition: 0.5s ease-out;
37+
}
38+
.cards.active{
39+
width:20vw;
40+
transition: 0.5s ease-out;
41+
}
42+
.cards.active h3{
43+
opacity: 1;
44+
transition: 0.5s ease-out;
45+
}
46+
#pvt1{
47+
background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
48+
}
49+
#pvt2{
50+
background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
51+
}
52+
#pvt3{
53+
background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80');
54+
}
55+
#pvt4{
56+
background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
57+
}
58+
@media(max-width:680px){
59+
.main{
60+
flex-direction: column;
61+
}
62+
.cards{
63+
width:80vw;
64+
height: 10vh;
65+
}
66+
.cards.active{
67+
width:80vw;
68+
height:40vh;
69+
}
70+
}

0 commit comments

Comments
 (0)