Skip to content

Expaandable cards nchhabra25 branch #804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 10, 2023
Merged

Expaandable cards nchhabra25 branch #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9ab4afa
Expandable Cards
Nchhabra25 Oct 9, 2023
a2883e6
Create Readme.md
Nchhabra25 Oct 9, 2023
5bda6dd
Create index.html
Nchhabra25 Oct 9, 2023
1f2418c
Rename ExpandableCards/script.js to ExpandableCards/Nchhabra25/script.js
Nchhabra25 Oct 9, 2023
a83c853
Rename ExpandableCards/style.css to ExpandableCards/Nchhabra25/style.css
Nchhabra25 Oct 9, 2023
82946e7
Rename ExpandableCards/Readme.md to ExpandableCards/Nchhabra25/Readme.md
Nchhabra25 Oct 9, 2023
15606c2
Delete ExpandableCards/index.html
Nchhabra25 Oct 9, 2023
36d7992
Merge branch 'thinkswell:master' into ExpaandableCards-Nchhabra25-branch
Nchhabra25 Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ExpandableCards/Nchhabra25/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Expandable Cards
![image](https://github.com/Nchhabra25/Gradient-Generator/assets/124149051/b55053a9-b686-43cc-8cae-19b3c43e0467)
Copy link
Collaborator

@NitkarshChourasia NitkarshChourasia Oct 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a good README.md, I think will go on a long way as a consistent practice

29 changes: 29 additions & 0 deletions ExpandableCards/Nchhabra25/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Welcome</h1>
<h3>Click on one of these cards</h3>
<section class="main">
<div class="cards active" id="pvt1">
<h3>stars</h3>
</div>
<div class="cards" id="pvt2">
<h3>beaches</h3>
</div>
<div class="cards" id="pvt3">
<h3>clouds</h3>
</div>
<div class="cards" id="pvt4">
<h3>scenery</h3>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
12 changes: 12 additions & 0 deletions ExpandableCards/Nchhabra25/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const cards=document.querySelectorAll(".cards");

cards.forEach(cards=>{
cards.addEventListener('click',()=>{
cards.classList.toggle('active');
})
})
function remove(){
cards.forEach(cards=>{
cards.classList.remove('active');
})
}
70 changes: 70 additions & 0 deletions ExpandableCards/Nchhabra25/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
body{
background: radial-gradient(at left, #81e8f2, #f8bbc5);
}
h1,h3{
text-align: center;
font-family: 'Times New Roman', Times, serif;
color: #202020;
font-size: 2.2rem;
}
.cards{
/*border:2px solid red;*/
margin: 1.5em;
height: 50vh;
width: 5vw;
border-radius: 38px;
display: flex;
align-items: flex-end;
transition: 0.5s ease-out;
}
.cards:hover{
cursor: pointer;
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.13);
}
.main{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.cards h3{
color:white;
font-weight: bold;
position:relative;
left: 10px;
opacity: 0;
transition: 0.5s ease-out;
}
.cards.active{
width:20vw;
transition: 0.5s ease-out;
}
.cards.active h3{
opacity: 1;
transition: 0.5s ease-out;
}
#pvt1{
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');
}
#pvt2{
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');
}
#pvt3{
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');
}
#pvt4{
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');
}
@media(max-width:680px){
.main{
flex-direction: column;
}
.cards{
width:80vw;
height: 10vh;
}
.cards.active{
width:80vw;
height:40vh;
}
}