xxx
Signed-off-by: Jeff <jeff@gotenzing.com>
Showing
11 changed files
with
148 additions
and
9 deletions
| ... | @@ -50,7 +50,10 @@ | ... | @@ -50,7 +50,10 @@ |
| 50 | <h3><?php the_sub_field('content_title'); ?> </h3> | 50 | <h3><?php the_sub_field('content_title'); ?> </h3> |
| 51 | <?php the_sub_field('content'); ?> | 51 | <?php the_sub_field('content'); ?> |
| 52 | </div> | 52 | </div> |
| 53 | <a class="whole-story" href="#">Get the whole story… </a> | 53 | <a class="whole-story" href="javascript:void(0);">Get the whole story… </a> |
| 54 | </div> | ||
| 55 | <div class="tile-form mobile"> | ||
| 56 | <?php echo do_shortcode('[contact-form-7 id="154"]'); ?> | ||
| 54 | </div> | 57 | </div> |
| 55 | </div> | 58 | </div> |
| 56 | </div> | 59 | </div> | ... | ... |
| ... | @@ -16070,7 +16070,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { | ... | @@ -16070,7 +16070,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { |
| 16070 | } | 16070 | } |
| 16071 | @media (max-width: 800px) { | 16071 | @media (max-width: 800px) { |
| 16072 | .tile .tile_content p { | 16072 | .tile .tile_content p { |
| 16073 | text-align: center; | 16073 | text-align: left; |
| 16074 | font-size: 16px; | 16074 | font-size: 16px; |
| 16075 | line-height: 19px; | 16075 | line-height: 19px; |
| 16076 | } | 16076 | } |
| ... | @@ -16088,10 +16088,17 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { | ... | @@ -16088,10 +16088,17 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { |
| 16088 | margin: auto; | 16088 | margin: auto; |
| 16089 | } | 16089 | } |
| 16090 | } | 16090 | } |
| 16091 | .tile .tile_content .tile-form.mobile, | 16091 | .tile .tile_content .tile-form.mobile { |
| 16092 | display: none; | ||
| 16093 | } | ||
| 16092 | .tile .tile_content .tile_content.mobile { | 16094 | .tile .tile_content .tile_content.mobile { |
| 16093 | display: none; | 16095 | display: none; |
| 16094 | } | 16096 | } |
| 16097 | @media (max-width: 800px) { | ||
| 16098 | .tile .tile_content .tile_content.mobile { | ||
| 16099 | display: block; | ||
| 16100 | } | ||
| 16101 | } | ||
| 16095 | .tile .tile_content .title-mobile { | 16102 | .tile .tile_content .title-mobile { |
| 16096 | display: none; | 16103 | display: none; |
| 16097 | } | 16104 | } |
| ... | @@ -16132,7 +16139,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { | ... | @@ -16132,7 +16139,6 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { |
| 16132 | color: #fff; | 16139 | color: #fff; |
| 16133 | text-decoration: none; | 16140 | text-decoration: none; |
| 16134 | font-weight: 400; | 16141 | font-weight: 400; |
| 16135 | width: 100%; | ||
| 16136 | } | 16142 | } |
| 16137 | @media (max-width: 800px) { | 16143 | @media (max-width: 800px) { |
| 16138 | .tile .tile_content .text .whole-story { | 16144 | .tile .tile_content .text .whole-story { |
| ... | @@ -16155,6 +16161,11 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { | ... | @@ -16155,6 +16161,11 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { |
| 16155 | flex-wrap: wrap; | 16161 | flex-wrap: wrap; |
| 16156 | height: 90%; | 16162 | height: 90%; |
| 16157 | } | 16163 | } |
| 16164 | @media (max-width: 800px) { | ||
| 16165 | .tile-form { | ||
| 16166 | width: 100%; | ||
| 16167 | } | ||
| 16168 | } | ||
| 16158 | .tile-form .wpcf7 { | 16169 | .tile-form .wpcf7 { |
| 16159 | margin-left: 0px !important; | 16170 | margin-left: 0px !important; |
| 16160 | } | 16171 | } |
| ... | @@ -16174,26 +16185,69 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { | ... | @@ -16174,26 +16185,69 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { |
| 16174 | display: flex; | 16185 | display: flex; |
| 16175 | margin-top: -50%; | 16186 | margin-top: -50%; |
| 16176 | } | 16187 | } |
| 16188 | @media (max-width: 800px) { | ||
| 16189 | .flip .tile-form { | ||
| 16190 | margin-top: 40px; | ||
| 16191 | } | ||
| 16192 | } | ||
| 16177 | .flip .text { | 16193 | .flip .text { |
| 16178 | margin-top: -47%; | 16194 | margin-top: -47%; |
| 16179 | } | 16195 | } |
| 16196 | @media (max-width: 800px) { | ||
| 16197 | .flip .text { | ||
| 16198 | margin-top: 0%; | ||
| 16199 | } | ||
| 16200 | } | ||
| 16201 | @media (max-width: 800px) { | ||
| 16202 | .flip .text div { | ||
| 16203 | display: none; | ||
| 16204 | } | ||
| 16205 | } | ||
| 16206 | .flip .got-it { | ||
| 16207 | width: 740px; | ||
| 16208 | } | ||
| 16209 | @media (max-width: 800px) { | ||
| 16210 | .flip .got-it { | ||
| 16211 | width: unset; | ||
| 16212 | margin-top: -100px; | ||
| 16213 | } | ||
| 16214 | } | ||
| 16180 | .flip .whole-story:hover { | 16215 | .flip .whole-story:hover { |
| 16181 | text-decoration: none !important; | 16216 | text-decoration: none !important; |
| 16182 | } | 16217 | } |
| 16218 | @media (max-width: 800px) { | ||
| 16219 | .flip .whole-story { | ||
| 16220 | margin-top: 0px !important; | ||
| 16221 | } | ||
| 16222 | } | ||
| 16183 | .flip .whole-story:after { | 16223 | .flip .whole-story:after { |
| 16184 | content: "x"; | 16224 | content: "x"; |
| 16185 | line-height: 14px; | 16225 | line-height: 14px; |
| 16186 | margin-left: 40%; | ||
| 16187 | color: #333; | 16226 | color: #333; |
| 16188 | height: 20px; | 16227 | height: 20px; |
| 16189 | width: 20px; | 16228 | width: 20px; |
| 16190 | background-color: #FFB547; | 16229 | background-color: #FFB547; |
| 16191 | text-decoration: none !important; | 16230 | text-decoration: none !important; |
| 16231 | margin-left: 40%; | ||
| 16232 | } | ||
| 16233 | @media (max-width: 800px) { | ||
| 16234 | .flip .whole-story:after { | ||
| 16235 | margin-left: 0px !important; | ||
| 16236 | float: right; | ||
| 16237 | } | ||
| 16192 | } | 16238 | } |
| 16193 | .flip .whole-story:hover:after { | 16239 | .flip .whole-story:hover:after { |
| 16194 | background-color: #666666; | 16240 | background-color: #666666; |
| 16195 | text-decoration: none !important; | 16241 | text-decoration: none !important; |
| 16196 | } | 16242 | } |
| 16243 | .flip .tile-form.mobile { | ||
| 16244 | display: none; | ||
| 16245 | } | ||
| 16246 | @media (max-width: 800px) { | ||
| 16247 | .flip .tile-form.mobile { | ||
| 16248 | display: block !important; | ||
| 16249 | } | ||
| 16250 | } | ||
| 16197 | 16251 | ||
| 16198 | .tile:hover .hover_content { | 16252 | .tile:hover .hover_content { |
| 16199 | opacity: 1; | 16253 | opacity: 1; |
| ... | @@ -16267,4 +16321,14 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { | ... | @@ -16267,4 +16321,14 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { |
| 16267 | color: #333 !important; | 16321 | color: #333 !important; |
| 16268 | } | 16322 | } |
| 16269 | 16323 | ||
| 16324 | .wpcf7 form.sent .wpcf7-response-output { | ||
| 16325 | border-width: 0; | ||
| 16326 | color: #fff; | ||
| 16327 | font-size: 20px; | ||
| 16328 | line-height: 24px; | ||
| 16329 | text-align: left; | ||
| 16330 | margin: 0px; | ||
| 16331 | padding: 0px; | ||
| 16332 | } | ||
| 16333 | |||
| 16270 | /*# sourceMappingURL=child-theme.css.map */ | 16334 | /*# sourceMappingURL=child-theme.css.map */ |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
| ... | @@ -17006,7 +17006,16 @@ | ... | @@ -17006,7 +17006,16 @@ |
| 17006 | }); | 17006 | }); |
| 17007 | $('.whole-story').click(function () { | 17007 | $('.whole-story').click(function () { |
| 17008 | $(this).parents('.tile_content').toggleClass('flip'); | 17008 | $(this).parents('.tile_content').toggleClass('flip'); |
| 17009 | if ($(this).hasClass('got-it')) { | ||
| 17010 | $('.whole-story').html('Get the whole story…').removeClass('got-it'); | ||
| 17011 | } | ||
| 17009 | }); | 17012 | }); |
| 17013 | document.addEventListener('wpcf7mailsent', function (event) { | ||
| 17014 | if ('154' == event.detail.contactFormId) { | ||
| 17015 | $(".wpcf7-form.sent").find('p').hide(); | ||
| 17016 | $('.whole-story').html('GOT IT!').addClass('got-it'); | ||
| 17017 | } | ||
| 17018 | }, true); | ||
| 17010 | gsapWithCSS.registerPlugin(ScrollTrigger); | 17019 | gsapWithCSS.registerPlugin(ScrollTrigger); |
| 17011 | var tl = gsapWithCSS.timeline(); | 17020 | var tl = gsapWithCSS.timeline(); |
| 17012 | tl.from("h1 span", { | 17021 | tl.from("h1 span", { | ... | ... |
This diff could not be displayed because it is too large.
This diff is collapsed.
Click to expand it.
This diff could not be displayed because it is too large.
| ... | @@ -64,8 +64,19 @@ jQuery(document).ready(function($) { | ... | @@ -64,8 +64,19 @@ jQuery(document).ready(function($) { |
| 64 | 64 | ||
| 65 | $('.whole-story').click(function(){ | 65 | $('.whole-story').click(function(){ |
| 66 | $(this).parents('.tile_content').toggleClass('flip'); | 66 | $(this).parents('.tile_content').toggleClass('flip'); |
| 67 | if( $(this).hasClass('got-it')){ | ||
| 68 | $('.whole-story').html('Get the whole story…').removeClass('got-it'); | ||
| 69 | } | ||
| 67 | }); | 70 | }); |
| 68 | 71 | ||
| 72 | |||
| 73 | document.addEventListener( 'wpcf7mailsent', function( event ) { | ||
| 74 | if ( '154' == event.detail.contactFormId ) { | ||
| 75 | $(".wpcf7-form.sent").find('p').hide(); | ||
| 76 | $('.whole-story').html('GOT IT!').addClass('got-it'); | ||
| 77 | } | ||
| 78 | }, true ); | ||
| 79 | |||
| 69 | gsap.registerPlugin(ScrollTrigger); | 80 | gsap.registerPlugin(ScrollTrigger); |
| 70 | 81 | ||
| 71 | var tl = gsap.timeline(); | 82 | var tl = gsap.timeline(); | ... | ... |
| ... | @@ -107,7 +107,7 @@ | ... | @@ -107,7 +107,7 @@ |
| 107 | font-family: 'TradeGothic'; | 107 | font-family: 'TradeGothic'; |
| 108 | text-align: left; | 108 | text-align: left; |
| 109 | @media (max-width: 800px) { | 109 | @media (max-width: 800px) { |
| 110 | text-align: center; | 110 | text-align: left; |
| 111 | font-size: 16px; | 111 | font-size: 16px; |
| 112 | line-height: 19px; | 112 | line-height: 19px; |
| 113 | } | 113 | } |
| ... | @@ -123,9 +123,15 @@ | ... | @@ -123,9 +123,15 @@ |
| 123 | margin: auto; | 123 | margin: auto; |
| 124 | } | 124 | } |
| 125 | } | 125 | } |
| 126 | .tile-form.mobile, | 126 | .tile-form.mobile{ |
| 127 | display: none; | ||
| 128 | } | ||
| 129 | |||
| 127 | .tile_content.mobile{ | 130 | .tile_content.mobile{ |
| 128 | display: none; | 131 | display: none; |
| 132 | @media (max-width: 800px) { | ||
| 133 | display: block; | ||
| 134 | } | ||
| 129 | } | 135 | } |
| 130 | .title-mobile{ | 136 | .title-mobile{ |
| 131 | display: none; | 137 | display: none; |
| ... | @@ -162,7 +168,7 @@ | ... | @@ -162,7 +168,7 @@ |
| 162 | color: #fff; | 168 | color: #fff; |
| 163 | text-decoration: none; | 169 | text-decoration: none; |
| 164 | font-weight: 400; | 170 | font-weight: 400; |
| 165 | width: 100%; | 171 | |
| 166 | @media (max-width: 800px) { | 172 | @media (max-width: 800px) { |
| 167 | display: block; | 173 | display: block; |
| 168 | text-align: center; | 174 | text-align: center; |
| ... | @@ -185,6 +191,9 @@ | ... | @@ -185,6 +191,9 @@ |
| 185 | display: flex; | 191 | display: flex; |
| 186 | flex-direction: column; | 192 | flex-direction: column; |
| 187 | width: 55%; | 193 | width: 55%; |
| 194 | @media (max-width: 800px) { | ||
| 195 | width: 100%; | ||
| 196 | } | ||
| 188 | justify-content: space-between; | 197 | justify-content: space-between; |
| 189 | flex-wrap: wrap; | 198 | flex-wrap: wrap; |
| 190 | height: 90%; | 199 | height: 90%; |
| ... | @@ -209,27 +218,61 @@ | ... | @@ -209,27 +218,61 @@ |
| 209 | .tile-form{ | 218 | .tile-form{ |
| 210 | display: flex; | 219 | display: flex; |
| 211 | margin-top: -50%; | 220 | margin-top: -50%; |
| 221 | @media (max-width: 800px) { | ||
| 222 | margin-top: 40px; | ||
| 223 | } | ||
| 212 | } | 224 | } |
| 213 | .text{ | 225 | .text{ |
| 214 | margin-top: -47%; | 226 | margin-top: -47%; |
| 227 | @media (max-width: 800px) { | ||
| 228 | margin-top: 0%; | ||
| 229 | } | ||
| 230 | } | ||
| 231 | .text div{ | ||
| 232 | @media (max-width: 800px) { | ||
| 233 | display: none; | ||
| 234 | } | ||
| 235 | } | ||
| 236 | .got-it{ | ||
| 237 | width: 740px; | ||
| 238 | @media (max-width: 800px) { | ||
| 239 | width: unset; | ||
| 240 | margin-top: -100px; | ||
| 241 | } | ||
| 215 | } | 242 | } |
| 216 | .whole-story:hover{ | 243 | .whole-story:hover{ |
| 217 | text-decoration: none !important; | 244 | text-decoration: none !important; |
| 218 | } | 245 | } |
| 246 | .whole-story{ | ||
| 247 | @media (max-width: 800px) { | ||
| 248 | margin-top: 0px !important; | ||
| 249 | } | ||
| 250 | } | ||
| 219 | .whole-story:after{ | 251 | .whole-story:after{ |
| 220 | content: "x"; | 252 | content: "x"; |
| 221 | line-height: 14px; | 253 | line-height: 14px; |
| 222 | margin-left: 40%; | 254 | |
| 223 | color: #333; | 255 | color: #333; |
| 224 | height: 20px; | 256 | height: 20px; |
| 225 | width: 20px; | 257 | width: 20px; |
| 226 | background-color:#FFB547; | 258 | background-color:#FFB547; |
| 227 | text-decoration: none !important; | 259 | text-decoration: none !important; |
| 260 | margin-left: 40%; | ||
| 261 | @media (max-width: 800px) { | ||
| 262 | margin-left: 0px !important; | ||
| 263 | float: right; | ||
| 264 | } | ||
| 228 | } | 265 | } |
| 229 | .whole-story:hover:after{ | 266 | .whole-story:hover:after{ |
| 230 | background-color:#666666; | 267 | background-color:#666666; |
| 231 | text-decoration: none !important; | 268 | text-decoration: none !important; |
| 232 | } | 269 | } |
| 270 | .tile-form.mobile{ | ||
| 271 | display: none; | ||
| 272 | @media (max-width: 800px) { | ||
| 273 | display: block !important; | ||
| 274 | } | ||
| 275 | } | ||
| 233 | } | 276 | } |
| 234 | 277 | ||
| 235 | 278 | ||
| ... | @@ -314,4 +357,13 @@ | ... | @@ -314,4 +357,13 @@ |
| 314 | .wpcf7-submit:hover{ | 357 | .wpcf7-submit:hover{ |
| 315 | background-color: #FFD9A2 !important; | 358 | background-color: #FFD9A2 !important; |
| 316 | color: #333 !important; | 359 | color: #333 !important; |
| 360 | } | ||
| 361 | .wpcf7 form.sent .wpcf7-response-output{ | ||
| 362 | border-width: 0; | ||
| 363 | color: #fff; | ||
| 364 | font-size: 20px; | ||
| 365 | line-height: 24px; | ||
| 366 | text-align: left; | ||
| 367 | margin: 0px; | ||
| 368 | padding: 0px; | ||
| 317 | } | 369 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment