revise the image size dont change the image size just change the cards size of missions and others they are big
Browse files- index.html +13 -16
index.html
CHANGED
|
@@ -107,20 +107,20 @@
|
|
| 107 |
#consulta-hospitality .cards-container {
|
| 108 |
display: flex;
|
| 109 |
flex-wrap: wrap;
|
| 110 |
-
gap:
|
| 111 |
-
max-width:
|
| 112 |
margin: 0 auto;
|
| 113 |
justify-content: center;
|
| 114 |
position: relative;
|
| 115 |
padding: 0 20px;
|
| 116 |
-
transform: translate(
|
| 117 |
}
|
| 118 |
/* Base card styles */
|
| 119 |
#consulta-hospitality .box {
|
| 120 |
background: rgba(255, 255, 255, 0.1);
|
| 121 |
backdrop-filter: blur(8px);
|
| 122 |
border-radius: 12px;
|
| 123 |
-
padding:
|
| 124 |
color: #fff;
|
| 125 |
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
| 126 |
display: flex;
|
|
@@ -128,14 +128,13 @@
|
|
| 128 |
justify-content: space-between;
|
| 129 |
transition: transform .25s ease, box-shadow .25s ease, background .3s ease, opacity .6s ease, filter .6s ease;
|
| 130 |
cursor: pointer;
|
| 131 |
-
flex: 1 1
|
| 132 |
-
max-width:
|
| 133 |
opacity: 0; /* for reveal */
|
| 134 |
transform: translateY(22px);/* for reveal */
|
| 135 |
filter: blur(4px); /* for reveal softness */
|
| 136 |
}
|
| 137 |
-
|
| 138 |
-
#consulta-hospitality .box.revealed {
|
| 139 |
opacity: 1;
|
| 140 |
transform: translateY(0px);
|
| 141 |
filter: blur(0px);
|
|
@@ -146,19 +145,17 @@
|
|
| 146 |
transform: translateY(-4px);
|
| 147 |
box-shadow: 0 8px 26px rgba(0,0,0,0.35);
|
| 148 |
}
|
| 149 |
-
|
| 150 |
#consulta-hospitality .icon {
|
| 151 |
-
width:
|
| 152 |
stroke: #fff; stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round;
|
| 153 |
}
|
| 154 |
-
#consulta-hospitality .box h3 { font-weight: 700; font-size:
|
| 155 |
-
#consulta-hospitality .box p { font-weight: 400; font-size:
|
| 156 |
-
|
| 157 |
#consulta-hospitality .arrow {
|
| 158 |
-
align-self: flex-start; margin-top:
|
| 159 |
-
width:
|
| 160 |
}
|
| 161 |
-
|
| 162 |
|
| 163 |
/* NAV BUTTONS (visible on mobile/tablet) */
|
| 164 |
#consulta-hospitality .nav-arrows {
|
|
|
|
| 107 |
#consulta-hospitality .cards-container {
|
| 108 |
display: flex;
|
| 109 |
flex-wrap: wrap;
|
| 110 |
+
gap: 18px;
|
| 111 |
+
max-width: 1100px;
|
| 112 |
margin: 0 auto;
|
| 113 |
justify-content: center;
|
| 114 |
position: relative;
|
| 115 |
padding: 0 20px;
|
| 116 |
+
transform: translate(60px, -180px); /* adjusted positioning for smaller cards */
|
| 117 |
}
|
| 118 |
/* Base card styles */
|
| 119 |
#consulta-hospitality .box {
|
| 120 |
background: rgba(255, 255, 255, 0.1);
|
| 121 |
backdrop-filter: blur(8px);
|
| 122 |
border-radius: 12px;
|
| 123 |
+
padding: 25px 20px 30px 20px;
|
| 124 |
color: #fff;
|
| 125 |
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
| 126 |
display: flex;
|
|
|
|
| 128 |
justify-content: space-between;
|
| 129 |
transition: transform .25s ease, box-shadow .25s ease, background .3s ease, opacity .6s ease, filter .6s ease;
|
| 130 |
cursor: pointer;
|
| 131 |
+
flex: 1 1 280px;
|
| 132 |
+
max-width: 320px;
|
| 133 |
opacity: 0; /* for reveal */
|
| 134 |
transform: translateY(22px);/* for reveal */
|
| 135 |
filter: blur(4px); /* for reveal softness */
|
| 136 |
}
|
| 137 |
+
#consulta-hospitality .box.revealed {
|
|
|
|
| 138 |
opacity: 1;
|
| 139 |
transform: translateY(0px);
|
| 140 |
filter: blur(0px);
|
|
|
|
| 145 |
transform: translateY(-4px);
|
| 146 |
box-shadow: 0 8px 26px rgba(0,0,0,0.35);
|
| 147 |
}
|
|
|
|
| 148 |
#consulta-hospitality .icon {
|
| 149 |
+
width: 36px; height: 36px; margin-bottom: 16px;
|
| 150 |
stroke: #fff; stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round;
|
| 151 |
}
|
| 152 |
+
#consulta-hospitality .box h3 { font-weight: 700; font-size: 20px; margin-bottom: 10px; line-height: 1.2; }
|
| 153 |
+
#consulta-hospitality .box p { font-weight: 400; font-size: 14px; line-height: 1.4; color: #ddd; flex-grow: 1; }
|
|
|
|
| 154 |
#consulta-hospitality .arrow {
|
| 155 |
+
align-self: flex-start; margin-top: 20px; stroke: #fff; stroke-width: 2;
|
| 156 |
+
width: 22px; height: 22px; fill: none; stroke-linejoin: round; stroke-linecap: round; transition: transform 0.3s ease;
|
| 157 |
}
|
| 158 |
+
#consulta-hospitality .box:hover .arrow { transform: translateX(6px); }
|
| 159 |
|
| 160 |
/* NAV BUTTONS (visible on mobile/tablet) */
|
| 161 |
#consulta-hospitality .nav-arrows {
|