Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

John2141

Member
  • Content Count

    49
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Does anyone know how to do CSS3 animation? I want to animate rifle crosshairs in the header of my website. https://johnetterleebooks.com/
  2. What css code can I use to change page background color site-wide?
  3. Anyone know how to do an animation like the one in the website header here? https://timtigner.com/
  4. Anybody know how to enable social icons in the mobile navigation menu?
  5. One more question. What about social icons in the mobile menu?
  6. Is there a way to include the header image I have on desktop on mobile also? Here's the code I have: .Header--top { background-image: url(https://static1.squarespace.com/static/5d4c573da7991a00018356bc/t/5dd5ef4cd168ef7c6a901a6b/1574301516774/Untitled+design.jpg); background-size: cover; background-position: center center; }
  7. Ok, I got it. Thank you.
  8. Should I keep the default?
  9. Sure. https://johnetterleebooks.com/
  10. My site collapses to mobile view too early on desktop view. How can I fix that? What the mobile breakpoint code I can use?
  11. I am trying to figure out why one of my codes isn't working. It's the last few lines, which is supposed to make a gradient background in mobile nav menu. I know it's a lot of code. But, can someone look at it and tell me if anything is wrong? Thanks! .image-block { -webkit-filter: drop-shadow( 5px 5px 8px #000000 ); filter: drop-shadow( 20px 15px 10px #000000 ); } // Announcement Bar Hover Color // .sqs-announcement-bar { width: 100%; background-color: #ff0000 !important; /* main color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .sqs-announcement-bar:hover { border-color: white !important; background-color: #6bae23 !important; /* hover color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } // Bounce Social Icons // @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .sqs-block-socialaccountlinks-v2 a svg{ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sqs-block-socialaccountlinks-v2 a{ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .sqs-block-socialaccountlinks-v2 a:hover{ -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-style-regular .sqs-use--icon{ fill: #000000 !important; } .social-icons-style-regular .sqs-svg-icon--wrapper:hover .sqs-use--icon{ fill: #FECB2F !important; } // Newsletter Block // .newsletter-block { padding: 50px !important; border-radius: 25px; background-color: #272732; } // Gradient Newsletter Block // .newsletter-block { background: linear-gradient(to bottom, #c0c0c0, #000000); padding: 50px !important; border-radius: 20px; } // Animation Keyframes // @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } // Animated Gradient Audio Player // .sqs-widgets-audio-player { background-image: linear-gradient(-45deg, #ffffff, #ff0000, #000000, #F07C63) !important; background-size: 400% !important; -webkit-animation: Gradient 10s ease infinite !important; -moz-animation: Gradient 10s ease infinite !important; animation: Gradient 10s ease infinite !important; border-radius: 5px; } // Highlighted Field Form // .field-list .field-element:focus, .field-element:visited{ border-color: #FECB2F !important; } .field-list select:focus{ outline-color: #FECB2F !important; } .field-list .section{ border-color: #FECB2F !important; } .form-button-wrapper .button{ color: white !important; border-color: transparent; background-color: #fecb2f; } .form-button-wrapper .button:hover{ color: white !important; background-color: #000000 !important; } // Leaflet Contact Form Button // .form-wrapper input[type=submit] { border-radius: 50px 0px 50px 0px !important; padding: 30px; } .form-wrapper .field-list .field .field-element{ border:none; border-bottom: 3px solid; border-color: #ff0000; background: #ffffff } // Animation Keyframes // @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } // Footer Top Border // Footer { border-top: 5px solid #ff0000; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @media only screen and (max-width: 640px) { h1 { font-size: 20px !important; }} @media only screen and (max-width: 640px) { h2 { font-size: 20px !important; }} @media only screen and (max-width: 640px) { h3 { font-size: 20px !important; }} @media only screen and (max-width: 640px) { p { font-size: 11px !important; }} //remove hyphens// p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } .sqs-search-page { .sqs-post-type-image.ContentItem { display:none !important; } } .image-slide-title { white-space: normal !important; line-height: 1.5em; } @media screen and (max-width: 640px){ .sqs-gallery-design-grid-slide{ width: 100% !important; } } @media only screen and (max-width: 768px) { b { font-size: 20px; } } @media only screen and (max-width: 320px) { b { font-size: 10px; } } @media screen and (max-width: 960px) { h1 { font-size: 41px; } h2 { font-size: 33px; } h3 { font-size: 20px; } } /*Reducing font size for screens smaller than 960px*/ @media screen and (max-width: 960px) { h1 { font-size: 41px; } h2 { font-size: 33px; } h3 { font-size: 20px; } } /*Reducing font size for screens smaller than 640px*/ @media screen and (max-width: 640px) { h1 { font-size: 33px; } h2 { font-size: 20px; } h3 { font-size: 16px; } } // Bold Text Color // h1 strong { color: #32cd32; font-weight: bold; } // Custom Color Social Icons // .sqs-use--icon { fill: #E77D6A !important; } // Slightly Angled Text // h1 { transform: skewY(-5deg); } // Pill Audio Block // .sqs-widgets-audio-player { border: 1px solid transparent; padding: 5px; border-radius: 50px; } .Header--top { background-image: url(https://static1.squarespace.com/static/5d4c573da7991a00018356bc/t/5dd5ef4cd168ef7c6a901a6b/1574301516774/Untitled+design.jpg); background-size: cover; background-position: center center; } // Center Footer Text // @media only screen and (max-width: 640px) { footer { text-align: center;} } @media screen and (max-width: 800px) { .sqs-block-image .design-layout-card:not(.sqs-narrow-width) { display: block!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper { width: 100%; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child { width: 100%; } } @media only screen and (max-width: 640px) {h1 {font-size: 70px;}} @media screen and (max-width: 640px) {.Index-page-content h1 {font-size: 70px; }} @media screen and (max-width: 640px) {h1 { font-size: 70px; letter-spacing: 5px; line-height:60px; color:white;}} .site-title img { max-height: 100px; max-width: 400px; } // Slide In Bounce Button - Left To Right // .sqs-block-button-element--small:hover{ color: #000000; } .sqs-block-button-element--small:hover:before, .sqs-block-button-element--small:focus:before, .sqs-block-button-element--small:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .sqs-block-button-element--small:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #FECB2F; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .sqs-block-button-element--small { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .sqs-block-button-element--small { margin: .4em; padding: 1em; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Mobile Menu Background // .header-menu-bg { background-color: #ffffff; background: linear-gradient(to bottom, #6b8e23, #000000); } // Mobile Menu Text // .header-menu-nav-item a { color: #FFFFFF !important; } // Mobile Menu Background // .header-menu-bg { background-color: #000000; background: linear-gradient(to bottom, #F07C63, #E45372); } // Mobile Menu Text // .header-menu-nav-item a { color: #FFFFFF !important; }
  12. For some reason my announcement bar isn't showing on mobile. It's there in the editor, but it won't appear on my phone. Any ideas?
  13. I added a bit of matrix text to my homepage. But, I want to slow it down a little. Does anyone know how to do this?
  14. What's the code to add a gradient background in the mobile nav menu?
×
×
  • Create New...