This is a sample newsletter form with slide animations designed using HTML, CSS, and JavaScript. CSS style background image has been used to add the background image by providing the URL of the image. JavaScript is used to implement the click event for the given elements. Initially, the Subscribe button is hidden by adding the CSS style “display” with its value set to none. The fade-in and fadeout functions in JavaScript have been used to trigger the click event “Skip NewsLetter sub” and the slide-up and slide-down functions to display the slide animations in this example. Source: https://codepen.io/perikan/pen/pXNdxX
This is a template for a classic bootstrap newsletter signup web form, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given the styles of font-family as 'Open Sans', sans-serif, color as #9f9f9f, and a font-size of 15px. The header title is given he styles of color as #000, text-align as center, font-family as 'Raleway', sans-serif, font-weight as 800, font-size as 30px, and text-transform as uppercase to convert the text to uppercase automatically. The close button on top is given a font-size of 26px, the color of #c0c3c8, opacity of 0.5, which changes to 0.8 in a hover event. The subscribe button has the styles of color as #fff, background as #353535, transition as all 0.4s, and text-transform as uppercase, which changes its color to #171717 in a hover event. The "No thanks" button also changes its border from 2px solid to none, in a hover event.
This is another template for a bootstrap subscribe newsletter web form inside modal, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given a font-family of 'Varela Round', sans-serif whereas the form is given the styles color as #999, width as 625px, and font-size as 15px. The header title is given the styles of color as #000, font-size as 30px, and font-weight as bold. The close button on top is given a font-size of 24px, and opacity of 0.5, which changes to 0.8 in a hover event. The subscribe button is given the styles of color as #fff, background as #f95858; transition as all 0.4s, line-height as normal, padding as 6px 20px, and min-width as 150px. In a hover event, the color of the button changes to #f72222.
This is a template for a bootstrap subscribe newsletter web form inside modal, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given a font-family of 'Varela Round', sans-serif whereas the form is given the styles color as #999, and font-size as 15px. The header title is given a style set of color as #000, text-align as center, font-size as 30px, margin as 0 0 25px, font-weight as bold, and text-transform as capitalize to make the first letter of each word capital. The close button on top is given a color of #c0c3c8, and an opacity of 0.5, which changes to 0.8 in a hover event. The color of the icon is set as #7265ea whereas the subscribe button has the styles of color as #fff, border-radius as 4px, background as #7265ea, and transition as all 0.4s. The background color of the icon changes to #4e3de4 in a hover event.
This is an example for a newsletter subscription designed using HTML and CSS. The background colors have been set by the use of CSS style background with the URL of the image added. Google font has been imported by adding its URL and the @import class in CSS to display text. The media queries have been used in the CSS to implement the responsive styles to the HTML based on the screen of the user. The button hover effects are added to the HTML by the use of the hover class in CSS styles and adding the background color on the mouse hover. The background element in CSS has been used to set up the image and it will be on the top at all times regardless of the screen height as it is set as top and fixed. To convert the text to uppercase automatically, CSS style text-transform has been used with the value set to uppercase. Source: https://codepen.io/shamim539/pen/grqREx