|
@@ -308,9 +308,15 @@ p {
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
margin-right: 10px;
|
|
|
- background-color: #f9f9f9;
|
|
|
+ background-color: #ffffff;
|
|
|
border-radius: 5px;
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.card0 img {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.swiper {
|
|
@@ -456,4 +462,96 @@ ion-card img {
|
|
|
text-align: center;
|
|
|
font-size: 1.5rem;
|
|
|
width: 75%;
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ position: relative;
|
|
|
+ margin-top: -100px;
|
|
|
+ width: 360px;
|
|
|
+}
|
|
|
+
|
|
|
+.container > * {
|
|
|
+ width: 340px;
|
|
|
+ height: 120px;
|
|
|
+ border: solid 1px #bebebe;
|
|
|
+ background-color: #1f1f1f;
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0px 8px 20px -10px #bbbbbb;
|
|
|
+ text-shadow: 0px 0px 5px #fff;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ background-image: radial-gradient(circle 160px at 50% 120%, #353535, #1f1f1f);
|
|
|
+}
|
|
|
+
|
|
|
+.card5 {
|
|
|
+ width: 300px;
|
|
|
+ margin: -20px 0px 0px 20px;
|
|
|
+}
|
|
|
+.card6 {
|
|
|
+ width: 320px;
|
|
|
+ margin: -10px 0px 0px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.card9 {
|
|
|
+ position: relative;
|
|
|
+ width: 300px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ perspective: 1000px;
|
|
|
+ box-shadow: 0 0 0 5px #ffffff80;
|
|
|
+ transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+}
|
|
|
+
|
|
|
+.card9 svg {
|
|
|
+ width: 48px;
|
|
|
+ fill: #333;
|
|
|
+ transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+}
|
|
|
+
|
|
|
+.card9:hover {
|
|
|
+ transform: scale(1.05);
|
|
|
+ box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.card9__content {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ transform: rotateX(-90deg);
|
|
|
+ transform-origin: bottom;
|
|
|
+ transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+}
|
|
|
+
|
|
|
+.card9:hover .card9__content {
|
|
|
+ transform: rotateX(0deg);
|
|
|
+}
|
|
|
+
|
|
|
+.card9__title {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.card9:hover svg {
|
|
|
+ scale: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.card9__description {
|
|
|
+ margin: 10px 0 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #777;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|