-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
97 lines (94 loc) · 2.47 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
body
{
background-image: linear-gradient(to right top, #1f0537, #380c60, #55108c, #7413bb, #9612eb);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
.card {
position: relative;
width: 300px;
height: 425px;
border: 10px solid #9612eb;
margin: 60px auto 0 auto;
box-shadow: inset 10px 0px 15px 0px rgba(0, 0, 0, 0.1);
background-image: linear-gradient(to bottom, rgba(255, 255, 255), rgba(255, 255, 255, 0.5)), url("https://images.unsplash.com/photo-1527481138388-31827a7c94d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
background-color: #e6f0e6;
}
.card .text-container {
width: 80%;
height: 80%;
margin: auto;
}
.strikethrough {
text-decoration: line-through;
}
.card .text-container #head {
font-family: 'Nobile', sans-serif;
font-size: 1.5em;
margin: 60px auto 60px auto;
}
.card p {
font-size: 1.1em;
line-height: 1.4;
font-family: 'Nobile';
color: #331717;
font-style: italic;
text-align: center;
margin: 30px auto 0px auto;
}
.card .front {
position: absolute;
width: 100%;
height: 100%;
margin: -10px 0px 0px -10px;
border: 10px solid #9612eb;
backface-visibility: hidden;
background-color: #9612eb;
/* background-image: url($cover-image);
*/
background-size: contain;
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: perspective(800px) rotateY(0deg);
transition: all 0.8s ease-in-out;
}
.card:hover .front {
transform: perspective(800px) rotateY(-170deg);
background-color: #41718d;
}
.card:hover .back {
transform: perspective(800px) rotateY(-170deg);
box-shadow: 7px 0px 5px 0px rgba(0, 0, 0, 0.3), inset 2px 0px 15px 0px rgba(0, 0, 0, 0.1);
background-color: #d2dcd2;
}
.card .back {
position: absolute;
width: 100%;
height: 100%;
border: 10px solid #9612eb;
margin: -10px 0px 0px -10px;
backface-visibility: visible;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .5));
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: perspective(800px) rotateY(0deg);
transition: all 0.8s ease-in-out;
background-color: #e6f0e6;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.imgset
{
position: relative;
z-index: 1;
margin-bottom: -215px;
}
.imgset img
{
box-shadow: 0px 6px 11px 7px rgba(0, 0, 0, 0.22);
border-radius: 5px;
}