Skip to content

Commit fd85ab3

Browse files
DGreat49251DGreat49251
committed
Code added for Issue Dezenix#32 10DoC by Dipak Ghosh
1 parent 7d9f611 commit fd85ab3

File tree

2 files changed

+186
-0
lines changed

2 files changed

+186
-0
lines changed

‎Pop Up Modals/Movie Ticket Grid/index.css

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
.ticket-grid-pop-up-modal {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
background: #457fb4;
6+
display: flex;
7+
height: 100vh;
8+
font-family: 'Roboto', sans-serif;
9+
}
10+
11+
.container {
12+
display: flex;
13+
margin: auto;
14+
}
15+
16+
.main {
17+
width: 270px;
18+
height: 540px;
19+
position: relative;
20+
margin: 0 20px;
21+
}
22+
23+
.poster-container {
24+
width: 230px;
25+
position: absolute;
26+
top: 0;
27+
left: 20px;
28+
z-index: 9999;
29+
}
30+
31+
.poster {
32+
width: 100%;
33+
box-shadow: 0 5px 20px 3px rgba(0, 0, 0, 0.6);
34+
}
35+
36+
.ticket-container {
37+
background-color: #fff;
38+
width: 270px;
39+
height: 520px;
40+
display: flex;
41+
flex-direction: column;
42+
align-items: center;
43+
border-radius: 5px;
44+
position: absolute;
45+
top: 40px;
46+
box-shadow: 0 5px 20px 3px rgba(0, 0, 0, 0.6);
47+
opacity: 0;
48+
}
49+
50+
.main:hover .ticket-container {
51+
opacity: 1;
52+
animation: bounceAppear 1s linear;
53+
}
54+
55+
@keyframes bounceAppear {
56+
0%,20%,40%,60%,80%,100% to {
57+
/*-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);*/
58+
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
59+
}
60+
61+
0% {
62+
opacity: 0;
63+
/*-webkit-transform: scale3d(.3, .3, .3);*/
64+
transform: scale3d(.3, .3, .3);
65+
}
66+
67+
20% {
68+
/*-webkit-transform: scale3d(1.1, 1.1, 1.1);*/
69+
transform: scale3d(1.1, 1.1, 1.1);
70+
}
71+
72+
40% {
73+
/*-webkit-transform: scale3d(.9, .9, .9);*/
74+
transform: scale3d(.9, .9, .9);
75+
}
76+
77+
60% {
78+
opacity: 1;
79+
/*-webkit-transform: scale3d(1.03, 1.03, 1.03);*/
80+
transform: scale3d(1.03, 1.03, 1.03);
81+
}
82+
83+
80% {
84+
/*-webkit-transform: scale3d(.97, .97, .97);*/
85+
transform: scale3d(.97, .97, .97);
86+
}
87+
to {
88+
opacity: 1;
89+
/*-webkit-transform: scale3d(1, 1, 1);*/
90+
transform: scale3d(1, 1, 1);
91+
}
92+
}
93+
94+
.ticket-content {
95+
width: 100%;
96+
position: absolute;
97+
bottom: 0;
98+
text-align: center;
99+
}
100+
101+
.ticket-title {
102+
text-transform: uppercase;
103+
margin-bottom: 5px;
104+
}
105+
106+
.ticket-about {
107+
color: #999;
108+
font-size: 0.9rem;
109+
margin-bottom: 20px;
110+
}
111+
112+
.ticket-current-price {
113+
font-size: 1.5rem;
114+
font-weight: bold;
115+
color: #69c982;
116+
}
117+
118+
.ticket-old-price {
119+
font-size: 0.8rem;
120+
text-decoration: line-through;
121+
color: #999;
122+
margin-bottom: 10px;
123+
}
124+
125+
.ticket-buy-btn {
126+
cursor: pointer;
127+
width: 100%;
128+
background: #2f2f2f;
129+
color: #fff;
130+
font-size: 1rem;
131+
font-weight: bold;
132+
border: 0;
133+
border-bottom-left-radius: 5px;
134+
border-bottom-right-radius: 5px;
135+
padding: 15px 0;
136+
text-transform: uppercase;
137+
}

‎Pop Up Modals/Movie Ticket Grid/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="index.css">
10+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap">
11+
</head>
12+
13+
<body class="ticket-grid-pop-up-modal">
14+
<div class="container">
15+
<div class="main">
16+
<div class="poster-container">
17+
<a href="#"><img src="https://i.ibb.co/ThPNnzM/blade-runner.jpg" class="poster" /></a>
18+
</div>
19+
<div class="ticket-container">
20+
<div class="ticket-content">
21+
<h4 class="ticket-title">Blade Runner 2049</h4>
22+
<p class="ticket-about">
23+
More human than human is our motto.
24+
</p>
25+
<p class="ticket-current-price">$28.00</p>
26+
<p class="ticket-old-price">$44.99</p>
27+
<button class="ticket-buy-btn">Buy now</button>
28+
</div>
29+
</div>
30+
</div>
31+
32+
<div class="main">
33+
<div class="poster-container">
34+
<a href="#"><img src="https://i.ibb.co/Zd51z5c/justice-league.jpg" class="poster" /></a>
35+
</div>
36+
<div class="ticket-container">
37+
<div class="ticket-content">
38+
<h4 class="ticket-title">Justice League</h4>
39+
<p class="ticket-about">You can't save the world alone.</p>
40+
<p class="ticket-current-price">$20.75</p>
41+
<p class="ticket-old-price">$40.99</p>
42+
<button class="ticket-buy-btn">Buy now</button>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</body>
48+
49+
</html>

0 commit comments

Comments
 (0)