This is an example of a bootstrap delete confirmation web form, designed using HTML, and CSS. Bootstrap style sheets including the fonts, are imported to the form with their URLs. The body is given a font-family of 'Varela Round', sans-serif. The background color of the form is set to #636363 whereas the content section of the model has the styles of padding as 20px, border-radius as 5px, text-align as center, and font-size as 14px. The styles of the title are set to text-align as center, font-size as 26px, and margin as 30px 0 -10px. The buttons are given a styles set of color as #fff, border-radius as 4px, background as #60c7c1, transition as all 0.4s, line-height as normal, min-width as 120px, min-height as 40px, and border-radius as 3px. The cancel button is given a background color of #c1c1c1 and the confirm button is given a background color of #f15e5e. Both buttons change colors in a focus event, into #a8a8a8 and #ee3535 respectively.
This is another example of a web form with buttons with a border effect on hover, designed using HTML, CSS, and JavaScript. The fonts are imported to the form with its URL and JavaScript functions have been used to implement the mouse hover effects. The button is given the styles of background-color as #ffffff, border-bottom as 6px solid #029ebe, border-top as 6px solid #029ebe, color as #555, cursor as pointer to make the cursor a hand pointer, display as inline-block, font-family as 'Raleway', Arial, sans-serif, font-size as 14px, font-weight as 500, height as 46px, letter-spacing as 3px,line-height as 34px, margin as 15px 45px, padding as 0 10px, position as relative, and text-transform as uppercase to automatically transform the text to uppercase. The background color of the form is set to #212121. The color of the remaining space of the border is set as 6px solid #ddd which changes the color to #029ebe in a hover event to complete the border, with a transformation style of rotate(225deg).
This is another example of a card layout with images that have buttons appearing on them as a hover effect, designed using CSS, HTML, and JavaScript. The fonts and images are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The image card is given the styles of background-color as #000, display as inline-block, font-family as 'Open Sans', sans-serif, font-size as 16px, margin as 10px, max-width as 315px, min-width as 230px, position as relative, text-align as center, and width as 100%. The image has the styles of vertical-align as top, max-width as 100%, and backface-visibility as hidden. The button inside is given the styles background-color as #000000, border as 2px solid #fff, color as #fff, font-size as 1em, font-weight as 600, letter-spacing as 1px, padding as 5px 10px, and text-transform as uppercase. In a hover event, the opacity of the image becomes 0.5 and takes a transform style of skew(45deg) translateX(55%).
This is a template of a web form with bordered line buttons with a corner tab, designed using CSS, HTML, and JavaScript. There are four buttons in the form; submit, read more, add to cart and subscribe. The fonts are imported to the form with their URLs whereas JavaScript functions have been used to implement the mouse hover effects. The form is given a background color of #212121. The tabs are given the styles of font-family: 'Roboto', Arial, sans-serif, color: #ffffff, cursor: pointer to get the hand cursor, padding: 0px 40px, display: inline-block, margin: 15px 30px, text-transform: uppercase to automatically transform the text to uppercase, line-height: 2.7em, letter-spacing: 1.5px, font-size: 1em, font-size: 16px, border: 3px solid #fff, background-color: transparent, border-radius: 15px 0 15px 15px, and transition: all 0.3s. In a hover event, the border of the tabs take the color of #c87f0a.
This is an example of a bootstrap profile feed designed using HTML and CSS. The images and style sheet had been imported to the code with the URL. 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 unordered list. The form consists of buttons, labels, and links to social media accounts. Clock, reply, comment icons have been created as material design icons. The form body is set with styles margin-top as 20px and color as #6c7293. The navigational items are given color #464dee and a font size of 1.25rem. The styles for the profile feed items are set as padding as 1.5rem 0 and border-bottom as 1px solid #e9e9e9 whereas the smaller circular image icons are given the styles of width as 43px and height as 43px.