Skip to content

Commit 2fbb643

Browse files
geetika005geetika005
authored
Merge branch 'Dezenix:main' into main
2 parents 9790130 + 9528c3b commit 2fbb643

File tree

12 files changed

+443
-0
lines changed

12 files changed

+443
-0
lines changed

‎Accordion/Accordion_Menu_02/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Awesome Accordion Menu
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
![](./assets/Accordion_menu_preview.jpg)

‎Accordion/Accordion_Menu_02/assets/Accordion_menu_preview.jpg

39.5 KB
Loading

‎Accordion/Accordion_Menu_02/code/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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+
<title>Awesome accordion menu</title>
8+
<link rel="stylesheet" href="style.css">
9+
10+
</head>
11+
<body class="body">
12+
<div class="container">
13+
<div class="main">
14+
<div class="item" id="account">
15+
<a href="#account" class="btn">My Account</a>
16+
<div class="subitem">
17+
<a href="">item-1</a>
18+
<a href="">item-2</a>
19+
<a href="">item-3</a>
20+
</div>
21+
</div>
22+
<div class="item" id="about">
23+
<a href="#about" class="btn">About</a>
24+
<div class="subitem">
25+
<a href="">item-1</a>
26+
<a href="">item-2</a>
27+
</div>
28+
</div>
29+
<div class="item" id="support">
30+
<a href="#support" class="btn">Support</a>
31+
<div class="subitem">
32+
<a href="">item-1</a>
33+
</div>
34+
</div>
35+
<div class="item">
36+
<a href="#" class="btn">Log Out</a>
37+
</div>
38+
</div>
39+
</div>
40+
41+
</body>
42+
</html>

‎Accordion/Accordion_Menu_02/code/style.css

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
.body{
7+
background-color: #fcdc29;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
margin-top: 200px;
12+
font-family: 'lato';
13+
}
14+
.main{
15+
width: 250px;
16+
display: block;
17+
border-radius: 10px;
18+
overflow: hidden;
19+
}
20+
.item{
21+
border-top: 1px solid #ef584a;
22+
overflow: hidden;
23+
}
24+
.btn{
25+
display: block;
26+
position: relative;
27+
padding: 15px 20px;
28+
background-color: #ff6f61;
29+
color: #fff;
30+
text-decoration: none;
31+
}
32+
.subitem{
33+
background: #273057;
34+
transition: max-height 0.7s;
35+
max-height: 0;
36+
}
37+
.subitem a{
38+
display: block;
39+
padding: 15px 20px;
40+
color: #fff;
41+
font-size: 14px;
42+
border-bottom: 1px solid #394c7f;
43+
position: relative;
44+
text-decoration: none;
45+
}
46+
47+
.subitem a:hover:before{
48+
content: '';
49+
opacity: 1;
50+
transition: opacity 0.3s;
51+
border-top: 24px solid transparent;
52+
border-left: 11px solid #fcdc29;
53+
border-bottom: 24px solid transparent;
54+
position: absolute;
55+
width: 6px;
56+
height: 0;
57+
left: 0;
58+
top:0;
59+
}
60+
61+
.subitem a:hover:after{
62+
content: '';
63+
opacity: 1;
64+
transition: opacity 0.3s;
65+
border-top: 24px solid transparent;
66+
border-right: 11px solid #fcdc29;
67+
border-bottom: 24px solid transparent;
68+
position: absolute;
69+
width: 6px;
70+
height: 0;
71+
right: 0;
72+
top:0;
73+
}
74+
.subitem a:hover{
75+
background: linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
76+
transition: all 0.3s ease-in-out;
77+
border-bottom: 0px solid #394c7f;
78+
}
79+
.item:target .subitem{
80+
max-height: 150px;
81+
}

‎Buttons/Button with Progress Bar/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Music Player
2+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
3+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://img.icons8.com/color/48/000000/html-5--v1.png"/> <a href="https://www.w3schools.com/css/" target="_blank"><img src="https://img.icons8.com/color/48/000000/css3.png"/></a>
4+
<img src="https://img.icons8.com/color/48/000000/javascript--v1.png"/></p>
5+
<hr>
6+
7+
### Preview
8+
![Button with Progressbar - Google Chrome 2022-01-18 22-23-31](https://user-images.githubusercontent.com/82764912/150049700-3749624c-f4c8-4c0b-96db-f9c21f24c757.gif)

‎Buttons/Button with Progress Bar/code/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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>Button with Progressbar</title>
9+
</head>
10+
<body>
11+
<section class="body">
12+
<button class="btn" data-btn>Submit</button>
13+
<div class="checkmark-container">
14+
<svg x="0px" y="0px" fill="none" class="checkmark-svg" viewBox="0 0 25 30">
15+
<path d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
16+
</svg>
17+
</section>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎Buttons/Button with Progress Bar/code/script.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const btn = document.querySelector("[data-btn]");
2+
btn.addEventListener("click", () => {
3+
btn.classList.add("animating");
4+
});

‎Buttons/Button with Progress Bar/code/style.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
.body {
6+
background-color: black;
7+
min-height: 100vh;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
margin: 0;
12+
}
13+
14+
:root {
15+
--squish-animation-time: 500ms;
16+
--progress-animation-time: 1000ms;
17+
--circle-animation-time: 300ms;
18+
--checkmark-animation-time: 300ms;
19+
--btn-width: 125px;
20+
--btn-height: 40px;
21+
}
22+
23+
.btn {
24+
position: relative;
25+
background-color: #2b2d2f;
26+
color: #71dfbe;
27+
border: none;
28+
border-radius: 0.125em;
29+
width: var(--btn-width);
30+
height: var(--btn-height);
31+
font-weight: bold;
32+
cursor: pointer;
33+
padding: 0;
34+
}
35+
36+
.btn.animating {
37+
background-color: transparent;
38+
color: transparent;
39+
user-select: none;
40+
cursor: default;
41+
animation: hide 0ms
42+
calc(var(--squish-animation-time) + var(--progress-animation-time)) forwards;
43+
}
44+
45+
.btn::before {
46+
content: "";
47+
display: none;
48+
position: absolute;
49+
background-color: #2b2d2f;
50+
inset: 0;
51+
border-radius: 0.125em;
52+
animation: squish var(--squish-animation-time)
53+
cubic-bezier(0.26, 0.6, 0.46, 1.7);
54+
animation-fill-mode: forwards;
55+
}
56+
57+
.btn::after {
58+
content: "";
59+
display: none;
60+
position: absolute;
61+
background-color: #aaa;
62+
left: 51%;
63+
right: 51%;
64+
top: 45%;
65+
bottom: 45%;
66+
border-radius: 0.25em;
67+
animation: progress var(--progress-animation-time)
68+
var(--squish-animation-time);
69+
animation-fill-mode: forwards;
70+
}
71+
72+
.btn.animating::before,
73+
.btn.animating::after {
74+
display: block;
75+
}
76+
77+
.btn.animating + .checkmark-container {
78+
background-color: #2b2d2f;
79+
border-radius: 0.25em;
80+
width: 0;
81+
height: 0;
82+
animation: circle var(--circle-animation-time)
83+
calc(var(--squish-animation-time) + var(--progress-animation-time)) forwards
84+
cubic-bezier(0.26, 0.6, 0.46, 1.7);
85+
display: flex;
86+
justify-content: center;
87+
align-items: center;
88+
}
89+
90+
.btn.animating + .checkmark-container .checkmark-svg {
91+
stroke: white;
92+
width: 25px;
93+
stroke-dashoffset: 40.84104919433594;
94+
stroke-dasharray: 40.84104919433594;
95+
stroke-linecap: round;
96+
stroke-linejoin: round;
97+
stroke-width: 3px;
98+
animation: checkmark var(--circle-animation-time)
99+
calc(
100+
var(--squish-animation-time) + var(--progress-animation-time) +
101+
var(--circle-animation-time)
102+
)
103+
forwards;
104+
}
105+
106+
@keyframes squish {
107+
100% {
108+
left: -25%;
109+
right: -25%;
110+
top: 45%;
111+
bottom: 45%;
112+
border-radius: 0.25em;
113+
}
114+
}
115+
116+
@keyframes progress {
117+
100% {
118+
left: -25%;
119+
right: -25%;
120+
}
121+
}
122+
123+
@keyframes hide {
124+
100% {
125+
width: 0;
126+
height: 0;
127+
}
128+
}
129+
130+
@keyframes circle {
131+
0% {
132+
width: calc(var(--btn-width) * 1.5);
133+
height: calc(var(--btn-height) * 0.1);
134+
}
135+
100% {
136+
background-color: #71dfbe;
137+
width: 50px;
138+
height: 50px;
139+
border-radius: 100%;
140+
}
141+
}
142+
143+
@keyframes checkmark {
144+
100% {
145+
stroke-dashoffset: 0;
146+
}
147+
}

‎Calendar/Calendar_01/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Calendar Design
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align ="left">
5+
<a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a>
6+
<a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a>
7+
</p>
8+
9+
### Preview
10+
![image](https://user-images.githubusercontent.com/77065920/149709600-9009dd75-617d-4074-b7a8-ec155b491567.png)

‎Calendar/Calendar_01/assets/pic1.jpg

4.53 MB
Loading

0 commit comments

Comments
 (0)