• Latest
  • Featured
This is a template of a web form with an animated bootstrap product banner, designed using HTML, CSS, and bootstrap 4 framework. The images and fonts are imported to the form with their URLs. The form is given a style set of font-family as "Montserrat", sans-serif, color as #8d97ad, font-weight as 300, padding-top as 80px, and opacity as 0.8. The header text is given the styles line-height as 40px, and font-size as 36px, whereas the image is given a margin-top and bottom values of 80px and -100px respectively. The background of the form is set to a linear gradient color of #2cdd9b. The "Take a tour" button has the background color as same as the color of the form, which takes the color #ffffff in a hover effect while the "Request a demo" button is given a background and a border color of #263238, which takes the background color #ffffff in a hover effect.
This is an example of a classic breadcrumb navigation line with wrapping arrows, designed using HTML, and CSS. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the breadcrumbs in an ordered list. The body of the form is given a style set of background as #9ad4e2, font-family as sans-serif, padding as 10px, and margin as 0 whereas header one is given the styles font-weight as lighter, and color as #c8f1fe. li:last-child > *:before {background: #9ad4e2;} has been used to cover the arrow tails with the background color and li:last-child > * {background: #76cae6;color: #fff} is used to highlight the last child of the list. The button faces are given a background color of #c8f1fe, display as inline-block, and a font-size of 16px. The font color for the breadcrumbs is set as #253e6a except for the last child, which has the font color #fff. https://codepen.io/fgnass/pen/ehAlq
This is an example of a web form with a map of Texas region, designed using CSS, and HTML. The map has been created in XML and imported to the form with its URL. The map container is assigned the styles of max-width as 800px, max-height as 800px, and margin as 0 auto. The color set for the map is predefined as variables to avoid defining them over and over again. The color set is given as $charcoal: #656d78, $darkcharcoal: darken($charcoal, 30%), $purple: #987197, $darkpurple: darken($purple, 30%), $orange: #e9573f, $darkorange: darken($orange, 30%), $green: #37bc9b, $darkgreen: darken($green, 30%), $blue: #1a2240, $darkblue: darken($blue, 30%),$red:#7d0506,$darkred:darken($red,30%), $yellow:#f6bb42;$darkyellow: darken($yellow, 30%), and $white: #f2f2f2. In a hover event, the path takes a transition effect of fill .2s ease-in-out and fills the region with the color $blue.
This is an example of a web form with a map with curved lines, designed using CSS, HTML, and JavaScript. The map is imported to the form with its URL whereas the JavaScript functions have been used to implement the mapping functions. The toolset has been implemented with a range slider, labels, and radio buttons. The toolset is given the styles of font-family as Arial, position as fixed, bottom as 5px, padding as 10px 0 15px 0, background as rgba(255, 255, 255, .8), and text-align as center. JavaScript AmCharts.makeChart method has been used to create the map with the type given as 'map' with the zoom-level set as 3.5 zoomLongitude as -20.1341, and zoomLatitude as 49.1712. The images are given IDs by their town names and assigned longitudes, latitudes and a scale of 0.5 except for London, which is given a scale of 1 as it is the main city. The color of the lines is set as #CC0000.
This is a template of a sign-in web form designed using HTML, and CSS. The bootstrap styles, icons, fonts, and images are imported to the form with their URLs. The form is given a font-family of 'Numans', sans-serif whereas the card has the styles of height as 370px, margin-top as auto, margin-bottom as auto; width as 400px, and background-color as rgba(0,0,0,0.5) !important. The social media icons are given the styles of font-size as 60px, margin-left as 10px, and color as #FFC312. In a hover event, the color of social media icons becomes white and the cursor becomes pointer to get the hand cursor effect. The login button has an initial style set of color as black, background-color as #FFC312, and width as 100px which also turns into the background color white, in a hover event. The links are given a margin-left style of 4px and the color white.
This is an example of a web form with a responsive image slider with a search bar with three input search, designed using HTML, and CSS. The bootstrap styles and images are imported to the form with their URLs. A carousel class has been used to implement the image slider and a button class has been used to implement the buttons. The search placeholders are given the styles of display as block, width as 100%, font-size as 0.875rem, line-height as 1.5, color as #55595c, background-color as #fff, border as 1px solid #ccc, height as calc(3rem + 2px) !important, and border-radius as 0. The search button has the styles of width as 100%, font-size as 16px, font-weight as 400, text-transform as capitalize to make the first letter of the text uppercase, height as calc(3rem + 2px) !important, and border-radius as 0 whereas the background color for the search section is set as #1A4668.
This is a template of a web form with a shopping card with an Add to Card button and a rating with hover effects, designed using HTML and CSS. The icons, images, and fonts are imported to the form with their URLs. The image card is given the styles of font-family as 'Raleway', Arial, sans-serif, position as relative, overflow as hidden, margin as 10px, min-width as 400px, max-width as 480px, width as 100%, background as #1a1a1a, color as #ffffff, text-align as center, border-radius as 8px, and box-shadow as 0 0 5px rgba(0, 0, 0, 0.15). The image has the styles of background-color as #000000, width as 50%, overflow as hidden, and vertical-align as top. The name title is given a text-transform style of uppercase to convert the text to uppercase, font-weight of 400, of #ffffff, and letter-spacing as 1px. The price is displayed in two colors, #f39c12 and #ffffff. The opacity of the image becomes 0.6 and takes a transform of scale(1.1) in a hover effect.
This is a template of a web form with a shopping card with an Add to Card button on hover, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement hover effects. The icons, images, and fonts are imported to the form with their URLs. The image card is given the styles of font-family as 'Raleway', Arial, sans-serif, position as relative, overflow as hidden, margin as 10px, min-width as 220px, max-width as 310px, width as 100%, color as #333333, text-align as center, background-color as #ffffff, and line-height as 1.6em. The image has the styles of vertical-align as top, max-width as 100%, and opacity as 0.35s. The background color of icons is set to #000000 and the color is set as #ffffff. The text-transform style of icons is set as uppercase to automatically convert the text to uppercase. In a hover event, the button and icons take a transform style of translateY(100%) where the opacity of the image becomes 0.8.