#CSS3Animation

[innovatecodeinstitute]

Create a Stunning CSS Spinner with Just CSS!

Are you looking to add a touch of flair to your website's loading animations? Look no further! In this tutorial, we'll show you how to create a beautiful CSS spinner using just CSS, no JavaScript required.

[cssmonster]

Colorful Canvas: Background Animation with CSS

Introduction

Welcome to a vibrant world of web design! In this blog post, we'll delve into the art of creating Colorful Canvas Background Animations using the power of CSS. As websites strive to capture users' attention and provide a memorable experience, background animations have become a popular choice. Join us on this journey as we explore the techniques, tips, and creative possibilities to bring your web pages to life. JavaScript const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); // Drawing a rectangle context.fillStyle = 'blue'; context.fillRect(50, 50, 100, 80);

Choosing Colors for Canvas

Color plays a pivotal role in evoking emotions and capturing attention, making it a crucial consideration when creating colorful canvas background animations with CSS. The right color palette can transform a webpage, adding vibrancy and visual appeal. Let's delve into the key aspects of choosing colors for your canvas animations. 1. Purpose and Theme: Start by identifying the purpose and theme of your website or application. Different colors convey distinct emotions and moods. For instance, warm colors like red and orange can evoke energy and passion, while cool colors like blue and green may create a calming effect. 2. Complementary Colors: Consider using complementary colors to create dynamic and visually striking animations. Complementary colors are opposite each other on the color wheel, creating a high-contrast look. This can be particularly effective for highlighting key elements in your canvas animation. 3. Consistency Across Branding: If your canvas animation is part of a larger website or brand, maintain consistency with the overall color scheme. This fosters brand recognition and a cohesive user experience. Use colors that align with your brand identity to reinforce a sense of familiarity. 4. Accessibility: Ensure that the chosen color palette considers accessibility standards. High contrast between text and background colors is essential for readability. Consider users with visual impairments and aim for a color combination that provides clear visibility and legibility. 5. Testing and Iteration: Experiment with different color combinations and test how they appear in the context of your canvas animation. Colors may appear differently on various devices and screens, so testing is crucial. Iterate and refine your color choices based on feedback and visual impact. Here's a simple table summarizing the psychology of some common colors: ColorEmotion/MoodRedPassion, EnergyBlueCalm, TrustGreenFreshness, GrowthYellowOptimism, Warmth By thoughtfully selecting colors for your canvas background animations, you can create a visually compelling and emotionally resonant user experience. The next step is to implement these color choices as we bring our canvas to life with CSS animations.

Implementing CSS Animation

Now that we've laid the groundwork with canvas understanding and color selection, it's time to breathe life into our canvas through CSS animation. CSS offers a powerful and straightforward way to create captivating animations that enhance the visual appeal of our colorful canvas backgrounds. Let's explore the steps to implement CSS animation on the canvas. 1. Targeting the Canvas: Begin by targeting the canvas element in your CSS stylesheet. Use the appropriate selector, such as the element's ID or class, to ensure that your styles apply specifically to the canvas. 2. Defining Keyframes: CSS animations operate based on keyframes, which specify the styles at various points during the animation's duration. Define keyframes using the @keyframes rule, specifying the animation's starting and ending states, as well as any intermediate steps. 3. Animation Properties: Utilize CSS animation properties such as animation-name, animation-duration, and animation-timing-function to control the animation's behavior. These properties determine what gets animated, how long the animation lasts, and the timing function that dictates the acceleration curve. 4. Applying Easing Functions: Experiment with different easing functions to add smoothness and character to your animations. Common easing functions include ease-in, ease-out, and ease-in-out, each influencing the acceleration of the animation differently. 5. Multiple Animations: Combine multiple animations to create complex and dynamic effects. You can apply animations to different elements within the canvas or stagger the timing of animations to achieve a layered and visually appealing result. Here's a quick example illustrating a simple CSS animation for a canvas element: CSS#myCanvas { animation-name: colorChange; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes colorChange { 0% { background-color: #ff6347; /* Start with coral color */ } 50% { background-color: #87ceeb; /* Transition to sky blue */ } 100% { background-color: #ff6347; /* Return to coral color */ } }

Customizing Animation Properties

As we embark on the journey of creating vibrant canvas animations, the ability to customize animation properties becomes a valuable skill. CSS provides a plethora of properties that allow developers to fine-tune the appearance, timing, and behavior of animations on the canvas. Let's delve into the key animation properties and explore how they can be customized to achieve stunning visual effects. 1. Animation Duration: Use the animation-duration property to specify how long the animation should take to complete a cycle. Adjust the duration to control the speed of your canvas animation. Shorter durations result in quicker animations, while longer durations create a slower, more deliberate effect. 2. Delay: Introduce a delay using the animation-delay property to control when the animation starts. This can be useful for orchestrating multiple animations or creating a staggered effect. Specify the delay in seconds or milliseconds to fine-tune the timing of your canvas animation. 3. Iteration Count: Determine how many times the animation should repeat using the animation-iteration-count property. A value of infinite ensures continuous repetition, while specific numeric values dictate a finite number of cycles. 4. Timing Function: Experiment with timing functions using the animation-timing-function property to control the acceleration curve of the animation. Common timing functions include ease, linear, ease-in, ease-out, and ease-in-out. 5. Direction and Fill Mode: Adjust the animation-direction property to control whether the animation plays forwards, backward, or alternates between the two. Additionally, use animation-fill-mode to specify whether the styles applied during the animation should persist before or after the animation plays. Here's a table summarizing some common animation properties: PropertyDescriptionanimation-durationSpecifies the duration of the animationanimation-delayIntroduces a delay before the animation startsanimation-iteration-countDetermines how many times the animation should repeatanimation-timing-functionDefines the acceleration curve of the animationanimation-directionControls the direction of the animationanimation-fill-modeSpecifies whether styles should persist before or after the animation By mastering these animation properties, you can add finesse and personality to your canvas animations. As we continue our exploration, we'll delve into best practices for optimizing performance and ensuring a seamless user experience.

Best Practices for Performance

While creating visually stunning canvas animations is exciting, it's equally important to prioritize performance to ensure a seamless user experience. Implementing best practices for performance not only enhances the responsiveness of your web pages but also contributes to a positive overall impression. Let's explore key strategies for optimizing the performance of your colorful canvas background animations. 1. Limit the Number of Animations: Avoid overloading your canvas with an excessive number of animations. Each animation consumes resources, and an abundance can lead to sluggish performance. Focus on impactful animations that enhance the user experience without unnecessary visual clutter. 2. Optimize Image and Asset Sizes: If your canvas animations involve images or other assets, optimize their sizes to minimize loading times. Compress images without compromising quality, and consider using image sprites to reduce the number of server requests, thereby improving loading speed. 3. Hardware Acceleration: Leverage hardware acceleration by using CSS properties like transform and opacity for animations. Hardware acceleration offloads animation rendering to the device's GPU, resulting in smoother performance, especially for complex canvas animations. 4. Use CSS3 Transitions Wisely: While transitions can add elegance to animations, be judicious in their use. Excessive or unnecessary transitions can impact performance. Evaluate whether a transition is essential for achieving your desired visual effect and consider alternative approaches if needed. 5. Minimize DOM Manipulation: Canvas animations primarily rely on drawing operations, but if DOM manipulation is necessary, aim to minimize it. Frequent DOM updates can lead to reflows and repaints, affecting performance. Opt for efficient algorithms and data structures to streamline your canvas animations. 6. Test Across Devices and Browsers: Performance can vary across different devices and browsers. Conduct thorough testing to ensure your canvas animations deliver a consistent and optimized experience. Identify and address any specific performance challenges on popular browsers and devices. Here's a checklist summarizing the best practices for optimizing canvas animation performance: Best PracticeDescriptionLimit AnimationsAvoid excessive animations to prevent performance degradation.Optimize AssetsReduce image and asset sizes for faster loading times.Hardware AccelerationUtilize hardware acceleration for smoother rendering.Use Transitions WiselyBe mindful of the impact of CSS3 transitions on performance.Minimize DOM ManipulationReduce DOM updates to enhance canvas animation efficiency.Test Across DevicesEnsure consistent performance across various devices and browsers. By incorporating these best practices into your canvas animation workflow, you can strike a balance between visual appeal and optimal performance. As we conclude our exploration, let's recap the key insights and encourage readers to embark on their own creative journey with colorful canvas background animations. All in One CSS code 👇 pic.twitter.com/muAZmgnHlC — • nanou • (@NanouuSymeon) November 30, 2023

FAQ

Explore common questions and answers related to creating Colorful Canvas Background Animations with CSS: - Q: Can canvas animations be used for mobile responsiveness? A: Absolutely! Canvas animations can enhance the mobile user experience when implemented with responsiveness in mind. Ensure that your animations adapt seamlessly to various screen sizes and orientations. - Q: Are there performance considerations for canvas animations on older browsers? A: Yes, older browsers may have limitations in handling complex canvas animations. It's advisable to test and implement fallbacks for browsers that may not fully support the latest CSS features or hardware acceleration. - Q: Can I combine canvas animations with other web technologies like WebGL? A: Certainly! Integrating canvas animations with WebGL can unlock advanced graphics capabilities. Experiment with combining technologies to create immersive and visually stunning effects. - Q: How can I troubleshoot performance issues in canvas animations? A: Start by profiling your animations using browser developer tools to identify performance bottlenecks. Consider simplifying complex animations, optimizing assets, and employing techniques like lazy loading to enhance performance. - Q: Are there tools or libraries that can simplify the creation of canvas animations? A: Yes, there are several libraries and frameworks, such as PixiJS and Three.js, that provide abstractions and utilities for canvas animations. These tools can streamline development and offer additional features for creating interactive experiences. Embarking on your canvas animation journey may raise unique questions, and this FAQ section aims to provide guidance on common queries. Feel free to experiment, ask more questions, and let your creativity shine!

Conclusion

Congratulations on completing the exploration of Colorful Canvas Background Animations with CSS! We've embarked on a journey from understanding the basics of the canvas element to customizing animations and optimizing performance. As you conclude this blog post, let's recap the key takeaways and encourage you to apply your newfound knowledge. Canvas Magic: The canvas element in CSS serves as a dynamic canvas for creating captivating visual content. Whether you're drawing shapes, images, or animations, the canvas opens a world of creative possibilities. Colorful Palette: Choosing the right colors is crucial for evoking emotions and enhancing the impact of your canvas animations. Consider the purpose, theme, and accessibility of your chosen color palette. CSS Animation Mastery: Implementing CSS animation breathes life into your canvas. From defining keyframes to adjusting animation properties, you now have the tools to create visually stunning and dynamic backgrounds. Fine-Tuning: Customizing animation properties allows you to fine-tune the duration, timing, and behavior of your canvas animations. Experiment with different settings to achieve the desired visual effects. Performance Prowess: Prioritize performance by following best practices. Limit the number of animations, optimize assets, leverage hardware acceleration, and conduct thorough testing across devices and browsers. Remember, the canvas is your artistic playground. Whether you're building a portfolio, a blog, or an interactive web application, let your creativity flourish. As technology evolves, stay curious, explore emerging trends, and continue pushing the boundaries of web design. Thank you for joining us on this colorful journey. May your canvas animations captivate and inspire users, making your web creations truly memorable. Happy coding! Read the full article

[frontendforever]

3D Animation With HTML & CSS only Tutorial Link at bio👆 Follow : @frontendforever for further updates #html #css #htmlcssproject #htmlcss #htmlcssjs #htmlcssjavascript #htmlcsslove #htmlcssdesign #cssanimation #html5 #html5css3 #css3 #css3code #css3animation #tamilwebdesign #ui #frontend #frontendwebdeveloper #frontenddesign #frontenddev #frontendfriday #webdesigning #webdesign #webdev #webdesigntrends #2danimation #3d #3danimation #3danimations https://www.instagram.com/p/CTtgN0LDjc-/?utm_medium=tumblr

[yildizscript]

Midix - CSS3 Animation Effects Without Jquery - CSS3 Animasyon Efektleri

Midix, saf css3 animasyonu ve ayarlanabilir hızı ve başlangıç ​​animasyon gecikmesi ile sonsuz font müthiş simge içeren bir pakettir. Kullanıcıları belirli bir alana çekmek için çok iyi bir yoldur. CS3 herhangi bir java betiği ve jQuery olmadan çok hafif ve düzgün bir animasyon efekti sağlar. �� 2 Adım Hızlı Kurulum. • 16 Animasyon efektleri dahil. • Simgeler için 25 Renk seçeneği. • Ayarlanabilir animasyon hızı (.15, .25, .50, .75, 1, 2, 3 saniye). • Ayarlanabilir animasyon gecikmesi (1 - 3 saniye). • Yazı harika simgeleri ile kullanılır. • Vurgulu seçeneğinde animasyonu tetikleyin. • Kesintisiz animasyon “kesintisiz”. • Üzerine gelindiğinde animasyonu duraklatın. • Java komut dosyası gerekmez. • Retina dostu. • Eklemek / yüklemek ve düzenlemek / güncellemek kolay. • İyi belgelenmiş. Midix - CSS3 Animation Effects Without Jquery - CSS3 Animasyon Efektleri Önizleme https://codecanyon.net/item/midix-css3-animation-effects-without-jquery/16363876 Midix - CSS3 Animation Effects Without Jquery - CSS3 Animasyon Efektleri İndir https://yadi.sk/d/f4gHQWJSS9UFdg   Read the full article

[glivera-team]

Colorful website with interesting animation - Frontend project LAVA

Breathtaking and colorful website ✅ with interesting animation for the Lava company. Lava is a digital-first branding, web design, and animation agency.

Live version 👉 https://wearelavastudios.com/ Other our front-end works 👉 https://glivera-team.com/works/

HTML #CSS #sass #pug #svg #css3animation #GSAP #gliverateam #webdev

[yogeswaran79-blog]

Here are some basics for beginners in Web Development. HTML5 (Structure) stands for Hypertext Markup Language. HTML5 uses tags to identify contents. CSS3 (Style) stands for Cascading Style Sheets. CSS3 control the look and feel of web documents. HTML and CSS work hand to hand. HTML sorts out the page structure and CSS defines how HTML elements are displayed. Javascript is a popular and dynamic programming language and used to add interactivity to web pages, process data, as well as creating various applications like mobile app, desktop apps, games, etc. Happy New Year 2019! 😊 #backend #frontend #webdesigner #developer #reactnative #hp #angular #html5css3 #webdevelopment #reactjs #html5code #css3code #webdesign #theprogrammerclub #vuejs #website #css3animation #react #deepweb #jquery #javascript #html5 #laptop #nodejs #angularjs #css3 #buildtheweb #fullstack #web #webdeveloper https://www.instagram.com/p/BsC6Sm_Bj7S/?utm_source=ig_tumblr_share&igshid=1ig4omxso8x4n

[nathangarnettseo]

Social Media Discovery Page

As a business owner you have enough worry about running your business. It's an all day task that requires your full focus.

That's why it's unrealistic to expect you to run your business and become a master of social media.

But having a social media presence is important. Did you know that Facebook influences 52 per cent of consumers' online and offline purchases?

We can help.

Our social media services allow you engage with customers where they spend most their time. Our services focus on driving new customers and delivering R.O.I. for your business.

We have plans to fit almost any budget. Let us help you make sure your business stays relevant in todays digital age.

Tell us about your business by filling out the form below and we'll develop a plan to fit your goals and needs.

.lff_progressbar { /* padding: 10px; */ height: 44px; position: relative; background-color: rgba(0,0,0,.1); background-color: #333; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); -moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); width: 100%; /* width: calc(100% - 16px); */ position: relative; } .lff_progressbar > div { height: 24px; text-align: right; font-family: helvetica,arial,sans-serif; font-size: .813em!important; text-shadow: 0 1px 1px rgba(0,0,0,.5); z-index: 999; vertical-align: middle; background: repeating-linear-gradient(-45deg,rgba(0,0,0,0),rgba(0,0,0,0) 10px,rgba(0,0,0,.1) 10px,rgba(0,0,0,.1) 20px),linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.3)); color:#fff; background-color:#879FA6; position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); border-radius: 20px 0 0 20px; } .lff_progressbar > div span { min-width: 20px; display: block; text-align: center; } .lff_progressbar > div.bg { width: 100% !important; background-color: #5a5a5a; border-radius: 20px; } .lff_progressbar > div.blank { background: transparent !important; width: 100% !important; border-radius: 20px; } .lff_form .l50 { width: 48%; float: left; position: relative; } .lff_form .r50 { width: 48%; float: right; position: relative; } .lff_form .l50 input[type=text], .lff_form .r50 input[type=text] { width: 100%; } .lff_form .multi input { margin-right: 5px; } .lff_form .bel { display: block; font-size: 12px; font-size: 65%; } .lff_form .mand { color: #790000; margin-left: 5px; } .lff_form .ff { margin-bottom: 20px; } .lff_form .ff .err { font-size: 0; color: #790000; height: 0; } .lff_form textarea { width: 100%; resize: none; height: 100px; } .clear { clear: both; height: 0px; width: 100%; float: none; } .lff_form .ff.notValid { background-color: rgba(255,223,224,.25); margin-bottom: 6px!important; border-top: 1px solid #C89797; border-bottom: 1px solid #C89797; padding-bottom: 15px; padding-top: 8px; } .lff_form .ff.notValid label { color: #790000; } .lff_form .ff.notValid .err { font-size: 100%; color: #790000; height: 100%; } .lff_form .lff_btn, .lff_form .lff_form_step { display: none; } .lff_form .ff label { display: block !important; } .lff_progressbar > div, .lff_form .ff .err, .lff_form .ff, .css3Anim { transition: all .3s ease !important; -webkit-transition: all .3s ease !important; -moz-transition: all .3s ease !important; } .lff_alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display: none; } .lff_alert.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .lff_alert.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .cantSeeMe { display: none !important; } .lff_loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #3498db; /* Blue */ border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

0%

Your Name*

First

Last

This field is required.

Company Name*

This field is required.

Phone*

This field is required. Make sure phone field is valid.

Your email*

This field is required. Make sure email field is valid.

Brand Information

Your business story is:

This field is required.

Your elevator pitch is:

This field is required.

Who is your typical customer?

This field is required.

Why do they love you?

This field is required.

What product or service would you like to sell more of?*

This field is required.

Project Details

What are you currently doing for marketing / advertising?

This field is required.

What results have you seen?

This field is required.

What are your goals with Social Media?

This field is required.

What would you say has been your least effective advertising method?*

This field is required.

What is your budget for this social campaign?*

$300-$500 $500-$1000 $1000-$2000 $2000+

This field is required.

Competitive Analysis

Could You Give Us The Websites Of Your Top 3 Competitors?*

This field is required.

What are your competitors social media accounts (if known)?

This field is required.

Do you require previewing the posts before they are posted?

Yes No

This field is required.

Social Accounts

What are your Social Media URL's?

This field is required.

Thank you for reaching out to us! Our team will review your project and contact you with options within 24 hours.

Warning! Error occurred while submitting the form, please try again in a minute.

from nathangarnett http://nathangarnett.com/social-media-discovery-page/ via http://nathangarnett.com

[1stinseo]

Experimentos con #css3animation + #html5 para una web que verá la luz muy pronto

[innovatecodeinstitute]

Hamburger Menu Animation with CSS!

Are you ready to transform your website's navigation with a captivating hamburger menu animation? Look no further! In this tutorial, we'll show you how to create a stunning hamburger menu using only CSS, no JavaScript required.

[tindaleaks]

Experimentos con #css3animation + #html5 para una web que verá la luz muy pronto

[yildizscript]

Midix - CSS3 Animation Effects Without Jquery - CSS3 Animasyon Efektleri

Midix, saf css3 animasyonu ve ayarlanabilir hızı ve başlangıç ​​animasyon gecikmesi ile sonsuz font müthiş simge içeren bir pakettir. Kullanıcıları belirli bir alana çekmek için çok iyi bir yoldur. CS3 herhangi bir java betiği ve jQuery olmadan çok hafif ve düzgün bir animasyon efekti sağlar. • 2 Adım Hızlı Kurulum. • 16 Animasyon efektleri dahil. • Simgeler için 25 Renk seçeneği. • Ayarlanabilir animasyon hızı (.15, .25, .50, .75, 1, 2, 3 saniye). • Ayarlanabilir animasyon gecikmesi (1 - 3 saniye). • Yazı harika simgeleri ile kullanılır. • Vurgulu seçeneğinde animasyonu tetikleyin. • Kesintisiz animasyon “kesintisiz”. • Üzerine gelindiğinde animasyonu duraklatın. • Java komut dosyası gerekmez. • Retina dostu. • Eklemek / yüklemek ve düzenlemek / güncellemek kolay. • İyi belgelenmiş. Midix - CSS3 Animation Effects Without Jquery - CSS3 Animasyon Efektleri Önizleme https://codecanyon.net/item/midix-css3-animation-effects-without-jquery/16363876 Midix - CSS3 Animation Effects Without Jquery - CSS3 Animasyon Efektleri İndir https://yadi.sk/d/f4gHQWJSS9UFdg   Read the full article

[nathangarnettseo]

Direct Mail Page

Direct mail is one of the most effective ways to reach your potential customers. We offer a full range of done-for-you mailing services.

Please tell us about your project by filling out the short form below. This allows us to recommend the best course of action for the results you'd like to achieve.

This form is quick and painless, so fill it out it now.

.lff_progressbar { /* padding: 10px; */ height: 44px; position: relative; background-color: rgba(0,0,0,.1); background-color: #333; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); -moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); width: 100%; /* width: calc(100% - 16px); */ position: relative; } .lff_progressbar > div { height: 24px; text-align: right; font-family: helvetica,arial,sans-serif; font-size: .813em!important; text-shadow: 0 1px 1px rgba(0,0,0,.5); z-index: 999; vertical-align: middle; background: repeating-linear-gradient(-45deg,rgba(0,0,0,0),rgba(0,0,0,0) 10px,rgba(0,0,0,.1) 10px,rgba(0,0,0,.1) 20px),linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.3)); color:#fff; background-color:#879FA6; position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); border-radius: 20px 0 0 20px; } .lff_progressbar > div span { min-width: 20px; display: block; text-align: center; } .lff_progressbar > div.bg { width: 100% !important; background-color: #5a5a5a; border-radius: 20px; } .lff_progressbar > div.blank { background: transparent !important; width: 100% !important; border-radius: 20px; } .lff_form .l50 { width: 48%; float: left; position: relative; } .lff_form .r50 { width: 48%; float: right; position: relative; } .lff_form .l50 input[type=text], .lff_form .r50 input[type=text] { width: 100%; } .lff_form .multi input { margin-right: 5px; } .lff_form .bel { display: block; font-size: 12px; font-size: 65%; } .lff_form .mand { color: #790000; margin-left: 5px; } .lff_form .ff { margin-bottom: 20px; } .lff_form .ff .err { font-size: 0; color: #790000; height: 0; } .lff_form textarea { width: 100%; resize: none; height: 100px; } .clear { clear: both; height: 0px; width: 100%; float: none; } .lff_form .ff.notValid { background-color: rgba(255,223,224,.25); margin-bottom: 6px!important; border-top: 1px solid #C89797; border-bottom: 1px solid #C89797; padding-bottom: 15px; padding-top: 8px; } .lff_form .ff.notValid label { color: #790000; } .lff_form .ff.notValid .err { font-size: 100%; color: #790000; height: 100%; } .lff_form .lff_btn, .lff_form .lff_form_step { display: none; } .lff_form .ff label { display: block !important; } .lff_progressbar > div, .lff_form .ff .err, .lff_form .ff, .css3Anim { transition: all .3s ease !important; -webkit-transition: all .3s ease !important; -moz-transition: all .3s ease !important; } .lff_alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display: none; } .lff_alert.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .lff_alert.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .cantSeeMe { display: none !important; } .lff_loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #3498db; /* Blue */ border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

0%

Your Name*

First

Last

This field is required.

Your email*

This field is required. Make sure email field is valid.

Phone*

This field is required. Make sure phone field is valid.

Company Name*

This field is required.

What Does Your Company Do?

This field is required.

Website

This field is required. Make sure website field is valid.

What is the goal of your mailing?

Attracting new customers Previous customer reactivation Other

This field is required.

Will you be providing the mail piece or would you like us to create it?

This field is required.

Do you already have a mailing list of addresses?*

This field is required.

Do you have a printer that you'd like to use?*

This field is required.

What is the budget range for this project?*

This field is required.

What's the best day and time to contact you to discuss this form?*

This field is required.

Thank you for reaching out to us! Our team will review your project and contact you with options within 24 hours.

Warning! Error occurred while submitting the form, please try again in a minute.

from nathangarnett http://nathangarnett.com/direct-mail-page/ via http://nathangarnett.com

[nathangarnettseo]

Website Discovery Page

Did You Know 97% of Local Buyers Start by Searching Online?

This means your website is often the first contact your potential customer will have with your company.

It's important that your website establishes trust, showcases your services or products effectively, and moves visitors to take action by contacting your business.

If you feel your website is not performing as it should, we can help.

Our website design services will help you create an asset for your business. To see how we can help you, please fill out the brief form below.

The more thorough you are in your answers, the better we can make solid recommendations to help.

We only have space to work with a limited number of clients, so fill out the form below now.

.lff_progressbar { /* padding: 10px; */ height: 44px; position: relative; background-color: rgba(0,0,0,.1); background-color: #333; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); -moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); width: 100%; /* width: calc(100% - 16px); */ position: relative; } .lff_progressbar > div { height: 24px; text-align: right; font-family: helvetica,arial,sans-serif; font-size: .813em!important; text-shadow: 0 1px 1px rgba(0,0,0,.5); z-index: 999; vertical-align: middle; background: repeating-linear-gradient(-45deg,rgba(0,0,0,0),rgba(0,0,0,0) 10px,rgba(0,0,0,.1) 10px,rgba(0,0,0,.1) 20px),linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.3)); color:#fff; background-color:#879FA6; position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); border-radius: 20px 0 0 20px; } .lff_progressbar > div span { min-width: 20px; display: block; text-align: center; } .lff_progressbar > div.bg { width: 100% !important; background-color: #5a5a5a; border-radius: 20px; } .lff_progressbar > div.blank { background: transparent !important; width: 100% !important; border-radius: 20px; } .lff_form .l50 { width: 48%; float: left; position: relative; } .lff_form .r50 { width: 48%; float: right; position: relative; } .lff_form .l50 input[type=text], .lff_form .r50 input[type=text] { width: 100%; } .lff_form .multi input { margin-right: 5px; } .lff_form .bel { display: block; font-size: 12px; font-size: 65%; } .lff_form .mand { color: #790000; margin-left: 5px; } .lff_form .ff { margin-bottom: 20px; } .lff_form .ff .err { font-size: 0; color: #790000; height: 0; } .lff_form textarea { width: 100%; resize: none; height: 100px; } .clear { clear: both; height: 0px; width: 100%; float: none; } .lff_form .ff.notValid { background-color: rgba(255,223,224,.25); margin-bottom: 6px!important; border-top: 1px solid #C89797; border-bottom: 1px solid #C89797; padding-bottom: 15px; padding-top: 8px; } .lff_form .ff.notValid label { color: #790000; } .lff_form .ff.notValid .err { font-size: 100%; color: #790000; height: 100%; } .lff_form .lff_btn, .lff_form .lff_form_step { display: none; } .lff_form .ff label { display: block !important; } .lff_progressbar > div, .lff_form .ff .err, .lff_form .ff, .css3Anim { transition: all .3s ease !important; -webkit-transition: all .3s ease !important; -moz-transition: all .3s ease !important; } .lff_alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display: none; } .lff_alert.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .lff_alert.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .cantSeeMe { display: none !important; } .lff_loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #3498db; /* Blue */ border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

0%

Company Name*

This field is required.

Address

This field is required.

Postal Code

This field is required.

Phone*

This field is required. Make sure phone field is valid.

Your email*

This field is required. Make sure email field is valid.

What Does Your Company Do?

This field is required.

Do You Have An Existing Website?*

This field is required.

If No, Do You Already Have Domain?*

This field is required.

More Info

I Want This Site Because:*

I need to build awareness for my brand I need to offer a contact point to my clients I need my company to have a better image online I need to sell my product/service through my site I need to use it to build customer loyalty I need to reach people in many languages I need somewhere to promote my latest product/service

This field is required.

My Site Will Be Built To Target:*

Business customers Customers

This field is required.

I'd Like To Target Clients Who Are:*

Kids & teens In their 20's In their 30's In their 40's In their 50's Senior citizens

This field is required.

My Clients Come To Me Because:*

I offer excellent service I have the best products on the market I have the best prices on the market

This field is required.

Info About Your Company

Someone's Searching The Web For Your Business. What Words Or Phrases Will They Search For In Google?

This field is required.

What Is It That Makes Your Products Or Services Unique On The Market

This field is required.

Do You Have Any Proof That Your Solutions Are Better Than Your Competitors?

This field is required.

Collection of Assets

Stock Photography*

This field is required.

Company Photography*

This field is required.

Other Artwork/Illustrations*

This field is required.

Translation Costs*

This field is required.

Copywriting Text*

This field is required.

Professional Logo*

This field is required.

Graphic Design*

This field is required.

Other Print Collateral*

This field is required.

Font Licenses*

This field is required.

Design Information

Does Your Company Have a Logo / Established Image & Branding Guidelines (E.G. Fonts, Colour Schemes Etc)?*

Yes No

This field is required.

Do You Have Print Materials (Such As Business Cards Or Brochures) That We Need To Match?*

Yes No

This field is required.

Could You Give Us The Websites Of Your Top 3 Competitors?*

This field is required.

If You Had To Pick 3 Websites You Would Love To Have, Which Would They Be?*

This field is required.

Site Delivery

Would You Like Us To Update Your Site Or Would You Like To Be Responsible For Updates?*

Yes No

This field is required.

What is your budget for this project?*

$3000-$5000 $5000-$10,000 $10,000+

This field is required.

How Often Do You Require Updates?*

Daily Weekly Monthly Quarterly

This field is required.

Is There Anything Else You'd Like To Tell Us?

This field is required.

What's the best day and time to contact you to discuss this form?*

This field is required.

Thank you for reaching out to us! Our team will review your project and contact you with options within 24 hours.

Warning! Error occurred while submitting the form, please try again in a minute.

from nathangarnett http://nathangarnett.com/website-discovery-page/ via http://nathangarnett.com

[nathangarnettseo]

SEO Discovery Page

Businesses listed on the first page of Google receive almost 95% of web traffic.

67% of that traffic goes to the top 5 listings

This means if your business isn't listed in those results, you're practically invisible to online customers looking to purchase your services or products.

We can help.

Optimizing your business for better online presence is what SEO (search engine optimization) is all about.

It's important to realize SEO is a LONG-TERM strategy. Results can take 6 months or more depending on competiveness of your business type and market.

Our services deliver the best results for businesses that already

1. Have active and healthy interaction in their area.

2. Have a consistent flow of leads and customers.

3. Have a good reputation and solid service or product.

If your business meets the above items, please fill out the short form below. The answers you provide give us what we need to design a plan that will deliver maximum results for your business.

IMPORTANT: We only work with a small number of SEO clients to ensure our complete focus to detail and achieving results for our clients. So, fill out the short form below now

.lff_progressbar { /* padding: 10px; */ height: 44px; position: relative; background-color: rgba(0,0,0,.1); background-color: #333; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); -moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 0 1px 1px rgba(0,0,0,.05); width: 100%; /* width: calc(100% - 16px); */ position: relative; } .lff_progressbar > div { height: 24px; text-align: right; font-family: helvetica,arial,sans-serif; font-size: .813em!important; text-shadow: 0 1px 1px rgba(0,0,0,.5); z-index: 999; vertical-align: middle; background: repeating-linear-gradient(-45deg,rgba(0,0,0,0),rgba(0,0,0,0) 10px,rgba(0,0,0,.1) 10px,rgba(0,0,0,.1) 20px),linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.3)); color:#fff; background-color:#879FA6; position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); border-radius: 20px 0 0 20px; } .lff_progressbar > div span { min-width: 20px; display: block; text-align: center; } .lff_progressbar > div.bg { width: 100% !important; background-color: #5a5a5a; border-radius: 20px; } .lff_progressbar > div.blank { background: transparent !important; width: 100% !important; border-radius: 20px; } .lff_form .l50 { width: 48%; float: left; position: relative; } .lff_form .r50 { width: 48%; float: right; position: relative; } .lff_form .l50 input[type=text], .lff_form .r50 input[type=text] { width: 100%; } .lff_form .multi input { margin-right: 5px; } .lff_form .bel { display: block; font-size: 12px; font-size: 65%; } .lff_form .mand { color: #790000; margin-left: 5px; } .lff_form .ff { margin-bottom: 20px; } .lff_form .ff .err { font-size: 0; color: #790000; height: 0; } .lff_form textarea { width: 100%; resize: none; height: 100px; } .clear { clear: both; height: 0px; width: 100%; float: none; } .lff_form .ff.notValid { background-color: rgba(255,223,224,.25); margin-bottom: 6px!important; border-top: 1px solid #C89797; border-bottom: 1px solid #C89797; padding-bottom: 15px; padding-top: 8px; } .lff_form .ff.notValid label { color: #790000; } .lff_form .ff.notValid .err { font-size: 100%; color: #790000; height: 100%; } .lff_form .lff_btn, .lff_form .lff_form_step { display: none; } .lff_form .ff label { display: block !important; } .lff_progressbar > div, .lff_form .ff .err, .lff_form .ff, .css3Anim { transition: all .3s ease !important; -webkit-transition: all .3s ease !important; -moz-transition: all .3s ease !important; } .lff_alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; display: none; } .lff_alert.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .lff_alert.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .cantSeeMe { display: none !important; } .lff_loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #3498db; /* Blue */ border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

0%

Your Name*

First

Last

This field is required.

Your email*

This field is required. Make sure email field is valid.

Phone*

This field is required. Make sure phone field is valid.

Website

This field is required. Make sure website field is valid.

Tell Us About Your Business*

This field is required.

Why should your customers buy from you rather than a competitor? (be specific of your Value proposition)*

This field is required.

What is the typical sales process/cycle? EX: customer calls, then fills form, then sets appointment etc.*

This field is required.

What are the short and long term goals of the company?*

This field is required.

What product or service would you like to sell more of?*

This field is required.

What is the average Lifetime value of your average customer? This is your profit over the life of that customer*

This field is required.

Who is your ideal client?*

This field is required.

What is your budget for this project?*

$3000-$5000 $5000-$10,000 $10,000+

This field is required.

What knowledge of SEO exists within the company?*

None A little A lot

This field is required.

Have you had previous SEO on your site? If so, please check the investment level.*

Never done SEO $1 ~ $500 per month $501 ~ $1000 per month $1001 ~ $2500 per month $2501 ~ $5000 per month $5001 ~ $8000 per month $8001 or above

This field is required.

Please write as many keywords as you can think of that you would like to target online. (Keywords are words typed into google that your website will be visible for, example ���Honolulu Chiropractor”, "Mililani Orthodontist"*

This field is required.

Please list radius and specific cities you would like to target. If your targeting national, just type in the United States.*

This field is required.

How many additional customers would you like to acquire a month? Please set a number.*

This field is required.

What would you say has been your most effective advertising method?*

This field is required.

What would you say has been your least effective advertising method?*

This field is required.

Who is your competition?*

This field is required.

What is your budget range for getting new customers (per customer)?*

This field is required.

What is your biggest concern working with a company for online marketing?*

This field is required.

What's the best day and time to contact you to discuss this form?*

This field is required.

Thank you for reaching out to us! Our team will review your project and contact you with options within 24 hours.

Warning! Error occurred while submitting the form, please try again in a minute.

from nathangarnett http://nathangarnett.com/seo-discovery-page/ via http://nathangarnett.com