Html Options

[id=""] [name=""] [placeholder=""] [value=""] [title=""] [style=""] [class=""] [< div>< /div>] [< a href="">< /a>]
[< iframe src="" srcdoc="">< /iframe>] [innerHTML=""] [innerText=""] [document.getElementById(id)] [< script> function myFunction() {}< /script>]

Html ^txt enhancers

< b> - Bold text.
< strong> - Important text.
< i> - Italic text.
< em> - Emphasized text.
< mark> - Marked text.
< small> - Smaller text.
< del> - Deleted text.
< ins> - Inserted text.
< sub> - Subscript text.
< sup> - Superscript text.

Html _pg ^tags (byType)

< !DOCTYPE> Defines the document type.
< html> Defines an HTML document.
< head> Contains metadata/information for the document.
< title> Defines a title for the document.
< body> Defines the document's body.
< h1> HTML headings.
< h2> ..
< h3> ..
< h4> ..
< h5> ..
< h6> ..
< p> Defines a paragraph.
< br> Inserts a single line break.
< hr> Defines a thematic change in the content.
< !--...--> Defines a comment.
[Formatting]
< acronym> Not supported in HTML5. Use < abbr> instead. Defines an acronym.
< abbr> Defines an abbreviation or an acronym.
< address> Defines contact information for the author/owner of a document/article.
< b> Defines bold text.
< bdi> Isolates a part of text that might be formatted in a different direction from other text outside it.
< bdo> Overrides the current text direction.
< big> Not supported in HTML5. Use CSS instead. Defines big text.
< blockquote> Defines a section that is quoted from another source.
< center> Not supported in HTML5. Use CSS instead. Defines centered text.
< cite> Defines the title of a work.
< code> Defines a piece of computer code.
< del> Defines text that has been deleted from a document.
< dfn> Specifies a term that is going to be defined within the content.
< em> Defines emphasized text .
< font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text.
< i> Defines a part of text in an alternate voice or mood.
< ins> Defines a text that has been inserted into a document.
< kbd> Defines keyboard input.
< mark> Defines marked/highlighted text.
< meter> Defines a scalar measurement within a known range (a gauge).
< pre> Defines preformatted text.
< progress> Represents the progress of a task.
< q> Defines a short quotation.
< rp> Defines what to show in browsers that do not support ruby annotations.
< rt> Defines an explanation/pronunciation of characters (for East Asian typography).
< ruby> Defines a ruby annotation (for East Asian typography).
< s> Defines text that is no longer correct.
< samp> Defines sample output from a computer program.
< small> Defines smaller text.
< strike> Not supported in HTML5. Use < del> or < s> instead. Defines strikethrough text.
< strong> Defines important text.
< sub> Defines subscripted text.
< sup> Defines superscripted text.
< template> Defines a container for content that should be hidden when the page loads.
< time> Defines a specific time (or datetime).
< tt> Not supported in HTML5. Use CSS instead. Defines teletype text.
< u> Defines some text that is unarticulated and styled differently from normal text.
< var> Defines a variable.
< wbr> Defines a possible line-break.
[Forms and Input]
< form> Defines an HTML form for user input.
< input> Defines an input control.
< textarea> Defines a multiline input control (text area).
< button> Defines a clickable button.
< select> Defines a drop-down list.
< optgroup> Defines a group of related options in a drop-down list.
< option> Defines an option in a drop-down list.
< label> Defines a label for an < input> element.
< fieldset> Groups related elements in a form.
< legend> Defines a caption for a < fieldset> element.
< datalist> Specifies a list of pre-defined options for input controls.
< output> Defines the result of a calculation.
[Frames]
< frame> Not supported in HTML5. Defines a window (a frame) in a frameset.
< frameset> Not supported in HTML5. Defines a set of frames.
< noframes> Not supported in HTML5. Defines an alternate content for users that do not support frames.
< iframe> Defines an inline frame.
[Images]
< img> Defines an image.
< map> Defines a client-side image map.
< area> Defines an area inside an image map.
< canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript).
< figcaption> Defines a caption for a < figure> element.
< figure> Specifies self-contained content.
< picture> Defines a container for multiple image resources.
< svg> Defines a container for SVG graphics.
[Audio / Video]
< audio> Defines sound content.
< source> Defines multiple media resources for media elements (< video>, < audio> and < picture>).
< track> Defines text tracks for media elements (< video> and < audio>).
< video> Defines a video or movie.
[Links]
< a> Defines a hyperlink.
< link> Defines the relationship between a document and an external resource (most used to link to style sheets).
< nav> Defines navigation links.
[Lists]
< ul> Defines an unordered list.
< ol> Defines an ordered list.
< li> Defines a list item.
< dir> Not supported in HTML5. Use < ul> instead. Defines a directory list.
< dl> Defines a description list.
< dt> Defines a term/name in a description list.
< dd> Defines a description of a term/name in a description list.
[Tables]
< table> Defines a table.
< caption> Defines a table caption.
< th> Defines a header cell in a table.
< tr> Defines a row in a table.
< td> Defines a cell in a table.
< thead> Groups the header content in a table.
< tbody> Groups the body content in a table.
< tfoot> Groups the footer content in a table.
< col> Specifies column properties for each column within a < colgroup> element.
< colgroup> Specifies a group of one or more columns in a table for formatting.
[Styles and Semantics]
< style> Defines style information for a document.
< div> Defines a section in a document.
< span> Defines a section in a document.
< header> Defines a header for a document or section.
< footer> Defines a footer for a document or section.
< main> Specifies the main content of a document.
< section> Defines a section in a document.
< article> Defines an article.
< aside> Defines content aside from the page content.
< details> Defines additional details that the user can view or hide.
< dialog> Defines a dialog box or window.
< summary> Defines a visible heading for a < details> element.
< data> Adds a machine-readable translation of a given content.
[Meta Info]
< head> Defines information about the document.
< meta> Defines metadata about an HTML document.
< base> Specifies the base URL/target for all relative URLs in a document.
< basefont> Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document.
[Programming]
< script> Defines a client-side script.
< noscript> Defines an alternate content for users that do not support client-side scripts.
< applet> Not supported in HTML5. Use < embed> or < object> instead.. Defines an embedded applet.
< embed> Defines a container for an external (non-HTML) application.
< object> Defines an embedded object.
< param> Defines a parameter for an object.

Html _pg ^tags (alphabetical)

< !--...--> Defines a comment
< !DOCTYPE> Defines the document type
< a> Defines a hyperlink
< abbr> Defines an abbreviation or an acronym
< acronym> Not supported in HTML5. Use < abbr> instead. Defines an acronym
< address> Defines contact information for the author/owner of a document
< applet> Not supported in HTML5. Use < embed> or < object> instead. Defines an embedded applet
< area> Defines an area inside an image map
< article> Defines an article
< aside> Defines content aside from the page content
< audio> Defines embedded sound content
< b> Defines bold text
< base> Specifies the base URL/target for all relative URLs in a document
< basefont> Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document
< bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
< bdo> Overrides the current text direction
< big> Not supported in HTML5. Use CSS instead. Defines big text
< blockquote> Defines a section that is quoted from another source
< body> Defines the document's body
< br> Defines a single line break
< button> Defines a clickable button
< canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
< caption> Defines a table caption
< center> Not supported in HTML5. Use CSS instead. Defines centered text
< cite> Defines the title of a work
< code> Defines a piece of computer code
< col> Specifies column properties for each column within a < colgroup> element
< colgroup> Specifies a group of one or more columns in a table for formatting
< data> Adds a machine-readable translation of a given content
< datalist> Specifies a list of pre-defined options for input controls
< dd> Defines a description/value of a term in a description list
< del> Defines text that has been deleted from a document
< details> Defines additional details that the user can view or hide
< dfn> Specifies a term that is going to be defined within the content
< dialog> Defines a dialog box or window
< dir> Not supported in HTML5. Use < ul> instead. Defines a directory list
< div> Defines a section in a document
< dl> Defines a description list
< dt> Defines a term/name in a description list
< em> Defines emphasized text
< embed> Defines a container for an external application
< fieldset> Groups related elements in a form
< figcaption> Defines a caption for a < figure> element
< figure> Specifies self-contained content
< font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text
< footer> Defines a footer for a document or section
< form> Defines an HTML form for user input
< frame> Not supported in HTML5. Defines a window (a frame) in a frameset
< frameset> Not supported in HTML5. Defines a set of frames
< h1> Defines HTML headings
< h2>
< h3>
< h4>
< h5>
< h6>
< head> Contains metadata/information for the document
< header> Defines a header for a document or section
< hr> Defines a thematic change in the content
< html> Defines the root of an HTML document
< i> Defines a part of text in an alternate voice or mood
< iframe> Defines an inline frame
< img> Defines an image
< input> Defines an input control
< ins> Defines a text that has been inserted into a document
< kbd> Defines keyboard input
< label> Defines a label for an < input> element
< legend> Defines a caption for a < fieldset> element
< li> Defines a list item
< link> Defines the relationship between a document and an external resource (most used to link to style sheets)
< main> Specifies the main content of a document
< map> Defines an image map
< mark> Defines marked/highlighted text
< meta> Defines metadata about an HTML document
< meter> Defines a scalar measurement within a known range (a gauge)
< nav> Defines navigation links
< noframes> Not supported in HTML5. Defines an alternate content for users that do not support frames
< noscript> Defines an alternate content for users that do not support client-side scripts
< object> Defines a container for an external application
< ol> Defines an ordered list
< optgroup> Defines a group of related options in a drop-down list
< option> Defines an option in a drop-down list
< output> Defines the result of a calculation
< p> Defines a paragraph
< param> Defines a parameter for an object
< picture> Defines a container for multiple image resources
< pre> Defines preformatted text
< progress> Represents the progress of a task
< q> Defines a short quotation
< rp> Defines what to show in browsers that do not support ruby annotations
< rt> Defines an explanation/pronunciation of characters (for East Asian typography)
< ruby> Defines a ruby annotation (for East Asian typography)
< s> Defines text that is no longer correct
< samp> Defines sample output from a computer program
< script> Defines a client-side script
< section> Defines a section in a document
< select> Defines a drop-down list
< small> Defines smaller text
< source> Defines multiple media resources for media elements (< video> and < audio>)
< span> Defines a section in a document
< strike> Not supported in HTML5. Use < del> or < s> instead. Defines strikethrough text
< strong> Defines important text
< style> Defines style information for a document
< sub> Defines subscripted text
< summary> Defines a visible heading for a < details> element
< sup> Defines superscripted text
< svg> Defines a container for SVG graphics
< table> Defines a table
< tbody> Groups the body content in a table
< td> Defines a cell in a table
< template> Defines a container for content that should be hidden when the page loads
< textarea> Defines a multiline input control (text area)
< tfoot> Groups the footer content in a table
< th> Defines a header cell in a table
< thead> Groups the header content in a table
< time> Defines a specific time (or datetime)
< title> Defines a title for the document
< tr> Defines a row in a table
< track> Defines text tracks for media elements (< video> and < audio>)
< tt> Not supported in HTML5. Use CSS instead. Defines teletype text
< u> Defines some text that is unarticulated and styled differently from normal text
< ul> Defines an unordered list
< var> Defines a variable
< video> Defines embedded video content
< wbr> Defines a possible line-break

Form input

< button type="button" onclick="alert('Hello World!')">Click Me!< /button>
< label for="name">< /label>
< input type="button" id=""/>
< input type="submit" id=""/>
< input type="reset" id=""/>
< input type="search" id=""/>
< input type="hidden" id=""/>
< input type="checkbox" id=""/>
< input type="radio" id=""/>
< input type="image" id=""/>
< input type="text" id=""/>
< input type="number" id=""/>
< input type="file" id=""/>
< input type="email" id=""/>
< input type="password" id=""/>
< input type="url" id=""/>
< input type="tel" id=""/>
< input type="color" id=""/>
< input type="range" id=""/>
< input type="time" id=""/>
< input type="date" id=""/>
< input type="datetime-local" id=""/>
< input type="month" id=""/>
< input type="week" id=""/>
< textarea>< /textarea>

Form ^input options

id="" Specifies the id value for an element.
name="" Specifies the name value for an element.
placeholder="" Specifies the Placeholder text for an input field.
title="" Specifies the (pop-up on hover) title value for an element.
value="" Specifies the default value for an input field.
required Specifies that an input field is required (must be filled out).
checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio").
readonly Specifies that an input field is read only (cannot be changed).
disabled Specifies that an input field should be disabled.
max Specifies the maximum value for an input field.
maxlength Specifies the maximum number of character for an input field.
min Specifies the minimum value for an input field.
pattern Specifies a regular expression to check the input value against.
size Specifies the width (in characters) of an input field.
step Specifies the legal number intervals for an input field.

textarea ^size can be set with
rows="10" cols="30" or style="width:200px; height:400px;"

< textarea id="message" name="message" rows="10" cols="30">< /textarea> ...
< textarea id="message" name="message" style="width:200px; height:400px;">< /textarea> ...

^{The < select> element defines a drop-down list:}

< label for="colors">Choose a color:< /label>
< select id="colors" name="colors" size="4" multiple>
 < option value="red" selected>red< /option>
 < option value="green">green< /option>
 < option value="blue">blue< /option>
 < option value="black">black< /option>
 < option value="grey">grey< /option>
< /select>
------------------------------------------------

^{The < legend> element defines a caption for the < fieldset> element}

< fieldset>
 < legend>Mood:< /legend>
 < label for="rocky">Rocky< /label>< br>
 < input type="text" id="rocky" name="rocky" value="rocky">< br>
 < label for="softy">Softy< /label>< br>
 < input type="text" id="softy" name="softy" value="softy">< br>< br>
 < input type="submit" value="Submit">
< /fieldset>
------------------------------------------------

The ^{< optgroup>} provides headers for options.

< label for="cars">Choose a car:< /label>
< select name="cars" id="cars">
 < optgroup label="Swedish Cars">
  < option value="volvo">Volvo< /option>
  < option value="saab">Saab< /option>
 < /optgroup>
 < optgroup label="German Cars">
  < option value="mercedes">Mercedes< /option>
  < option value="audi">Audi< /option>
 < /optgroup>
< /select>
------------------------------------------------

The ^{< datalist>} provides options to choose for text input.

< label for="category">Category:< /label>
< input list="categories" name="category" id="category">
< datalist id="categories">
 < option value="Products (New)">
 < option value="Products (Used)">
 < option value="Media">
 < option value="Software">
 < option value="Services">
 < option value="Deals">
< /datalist>
------------------------------------------------

^{Get user response < script>confirm("Press OK or CANCEL")< /script>}

< button onclick='get_user_response("Press OK or Cancel.")'>Try it< /button>
< p id="demo">< /p>
< script>
function get_user_response(text) {
 if (confirm(text) == true) {
  text = "You pressed OK!";
 } else {
  text = "You canceled!";
 }
 document.getElementById("demo").innerHTML = text;
}
< /script>
------------------------------------------------

^{Alert User < script>alert("Hello.")< /script>}

< button onclick='alert_user("Hello.")'>alert user< /button>
< script>
function alert_user(text) {
 alert(text)
}
< /script>
------------------------------------------------

^{Make an element Dragable}

< style>
 #mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
 }
 #mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
 }
< /style>
< h1>Draggable Element< /h1>
< p>Click and hold the mouse button down while moving< /p>
< div id="mydiv" >
< div id="mydivheader">Click here to move Me< /div>
< p>Dragable content< /p>
< /div>
< script>
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
 var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 if (document.getElementById(elmnt.id + "header")) {
  document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
 } else {
  elmnt.onmousedown = dragMouseDown;
 }
 function dragMouseDown(e) {
  e = e || window.event;
  e.preventDefault();
  pos3 = e.clientX;
  pos4 = e.clientY;
  document.onmouseup = closeDragElement;
  document.onmousemove = elementDrag;
 }
 function elementDrag(e) {
  e = e || window.event;
  e.preventDefault();
  pos1 = pos3 - e.clientX;
  pos2 = pos4 - e.clientY;
  pos3 = e.clientX;
  pos4 = e.clientY;
  elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
 }
 function closeDragElement() {
  document.onmouseup = null;
  document.onmousemove = null;
 }
}
< /script>
------------------------------------------------

^{Photo Grid}

< !DOCTYPE html> < html> < style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial; } .header { text-align: center; padding: 32px; } .row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* Create four equal columns that sits next to each other */ .column { flex: 25%; max-width: 25%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 800px) { .column { flex: 50%; max-width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { flex: 100%; max-width: 100%; } } < /style> < body> < !-- Header --> < div class="header"> < h1>Responsive Image Grid< /h1> < p>Resize the browser window to see the responsive effect.< /p> < /div> < !-- Photo Grid --> < div class="row"> < div class="column"> < img src="/w3images/wedding.jpg" style="width:100%"> < img src="/w3images/rocks.jpg" style="width:100%"> < img src="/w3images/falls2.jpg" style="width:100%"> < img src="/w3images/paris.jpg" style="width:100%"> < img src="/w3images/nature.jpg" style="width:100%"> < img src="/w3images/mist.jpg" style="width:100%"> < img src="/w3images/paris.jpg" style="width:100%"> < /div> < div class="column"> < img src="/w3images/underwater.jpg" style="width:100%"> < img src="/w3images/ocean.jpg" style="width:100%"> < img src="/w3images/wedding.jpg" style="width:100%"> < img src="/w3images/mountainskies.jpg" style="width:100%"> < img src="/w3images/rocks.jpg" style="width:100%"> < img src="/w3images/underwater.jpg" style="width:100%"> < /div> < div class="column"> < img src="/w3images/wedding.jpg" style="width:100%"> < img src="/w3images/rocks.jpg" style="width:100%"> < img src="/w3images/falls2.jpg" style="width:100%"> < img src="/w3images/paris.jpg" style="width:100%"> < img src="/w3images/nature.jpg" style="width:100%"> < img src="/w3images/mist.jpg" style="width:100%"> < img src="/w3images/paris.jpg" style="width:100%"> < /div> < div class="column"> < img src="/w3images/underwater.jpg" style="width:100%"> < img src="/w3images/ocean.jpg" style="width:100%"> < img src="/w3images/wedding.jpg" style="width:100%"> < img src="/w3images/mountainskies.jpg" style="width:100%"> < img src="/w3images/rocks.jpg" style="width:100%"> < img src="/w3images/underwater.jpg" style="width:100%"> < /div> < /div> < /body> < /html>
------------------------------------------------

^{Flex Cards}

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < style> .container { border: 2px solid #ccc; background-color: #eee; border-radius: 5px; padding: 16px; margin: 16px 0; max-width: 350px; } .container::after { content: ""; clear: both; display: table; } .container img { float: left; margin-right: 20px; border-radius: 50%; } .container span { font-size: 20px; margin-right: 15px; } @media (max-width: 600px) { .container { text-align: center; max-width: 300px; } .container img { margin: auto; float: none; display: block; } } < /style> < /head> < body> < h2>Responsive Testimonials< /h2> < p>Resize the browser window to see the effect.< /p> < div class="container"> < img src="https://toremetal.com/favicon.png" alt="Avatar" style="width:90px"> < p>< span>™T©ReMeTaL< /span>< /p> < p>Easy to Use, Designed for Everyone!< /p> < /div> < div class="container"> < img src="avatar_m1.png" alt="Avatar" style="width:90px"> < p>< span>John Doe.< /span> rating: ★ ★ ★ ★ ★< /p> < p>™T©ReMeTaL made my solution fast and, it was so easy to use.< /p> < /div> < /body> < /html>
------------------------------------------------

^{Create and Download a File}

< div align="center"> < style> .creater { display:flex-block; border:1px solid black; padding:4px 2px 10px; width:fit-content; margin:4px 0; border-radius:5px; background-color:lightgrey; } .creater * { text-shadow: 0.5px 0.5px 0.5px whitesmoke; border-radius: 4px; box-sizing: border-box; box-shadow: 1px 2px 5px rgba(0,0,0,0.41); border: 1px solid rgb(177, 176, 176); } .creater .textarea-container { border:1px solid black;padding:4px 0 0; width:fit-content;margin:4px 0; } .creater textarea { color:darkgreen; } .creater label { color:blue; } .creater input[type=button] { cursor:pointer; } .creater input[type=button]:hover { opacity: 0.85;cursor:pointer; box-shadow: 0.5px 1px 2px rgba(0,0,0,0.21); } < /style> < div class="creater" align="center"> < label for="filename">Download File-Name< /label>< br /> < input type="text" title="Download File-Name" id="filename" value="New Text Document.txt" placeholder="Download File-Name"/>< br/> < div class="textarea-container"> < label for="text-val">Download File-Content< /label>< br /> < textarea id="text-val" rows="4">File Content< /textarea> < /div> < input type="button" title="Download file" id="download-btn" value="Download file"/> < /div> < script> /** function download(String filename, String text). * @param filename (String) The name of the file to be created. * @param text (String) The content to be added to the file. */ function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } /* Initiates the file download. */ document.getElementById("download-btn").addEventListener("click", function(){ /* Assign "filename" with "text-val" content.*/ var filename = document.getElementById("filename").value; var text = document.getElementById("text-val").value; /* Initiate download function.*/ download(filename, text); }, false); < /script> < /div>
------------------------------------------------

^{Flex Box Page}

< !DOCTYPE html> < html lang="en"> < head> < title>CSS Template< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ .header { background-color: #f1f1f1; padding: 30px; text-align: center; font-size: 35px; } /* Container for flexboxes */ .row { display: -webkit-flex; display: flex; } /* Create three unequal columns that sits next to each other */ .column { padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ } /* Left and right column */ .column.side { -webkit-flex: 1; -ms-flex: 1; flex: 1; } /* Middle column */ .column.middle { -webkit-flex: 2; -ms-flex: 2; flex: 2; } /* Style the footer */ .footer { background-color: #f1f1f1; padding: 10px; text-align: center; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .row { -webkit-flex-direction: column; flex-direction: column; } } < /style> < /head> < body> < div class="header"> < h2>Header< /h2> < /div> < div class="row"> < div class="column side" style="background-color:#aaa;">Column< /div> < div class="column middle" style="background-color:#bbb;">Column< /div> < div class="column side" style="background-color:#ccc;">Column< /div> < /div> < div class="footer"> < p>Footer< /p> < /div> < /body> < /html>
------------------------------------------------

^{Using float Page}

< !DOCTYPE html> < html lang="en"> < head> < title>CSS Template< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ .header { background-color: #f1f1f1; padding: 30px; text-align: center; font-size: 35px; } /* Create three unequal columns that floats next to each other */ .column { float: left; padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ } /* Left and right column */ .column.side { width: 25%; } /* Middle column */ .column.middle { width: 50%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Style the footer */ .footer { background-color: #f1f1f1; padding: 10px; text-align: center; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .column.side, .column.middle { width: 100%; } } < /style> < /head> < body> < div class="header"> < h2>Header< /h2> < /div> < div class="row"> < div class="column side" style="background-color:#aaa;">Column< /div> < div class="column middle" style="background-color:#bbb;">Column< /div> < div class="column side" style="background-color:#ccc;">Column< /div> < /div> < div class="footer"> < p>Footer< /p> < /div> < /body> < /html>
------------------------------------------------

^{Grid Page}

< !DOCTYPE html> < html> < head> < style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ .header { grid-area: header; background-color: #f1f1f1; padding: 30px; text-align: center; font-size: 35px; } /* The grid container */ .grid-container { display: grid; grid-template-areas: 'header header header header header header' 'left middle middle middle middle right' 'footer footer footer footer footer footer'; /* grid-column-gap: 10px; - if you want gap between the columns */ } .left, .middle, .right { padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ } /* Style the left column */ .left { grid-area: left; } /* Style the middle column */ .middle { grid-area: middle; } /* Style the right column */ .right { grid-area: right; } /* Style the footer */ .footer { grid-area: footer; background-color: #f1f1f1; padding: 10px; text-align: center; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .grid-container { grid-template-areas: 'header header header header header header' 'left left left left left left' 'middle middle middle middle middle middle' 'right right right right right right' 'footer footer footer footer footer footer'; } } < /style> < /head> < body> < div class="grid-container"> < div class="header"> < h2>Header< /h2> < /div> < div class="left" style="background-color:#aaa;">Column< /div> < div class="middle" style="background-color:#bbb;">Column< /div> < div class="right" style="background-color:#ccc;">Column< /div> < div class="footer"> < p>Footer< /p> < /div> < /div> < /body> < /html>
------------------------------------------------

^{Page with Equal Columns}

< !DOCTYPE html> < html lang="en"> < head> < title>CSS Template< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ .header { background-color: #f1f1f1; padding: 30px; text-align: center; font-size: 35px; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Style the footer */ .footer { background-color: #f1f1f1; padding: 10px; text-align: center; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .column { width: 100%; } } < /style> < /head> < body> < div class="header"> < h2>Header< /h2> < /div> < div class="row"> < div class="column" style="background-color:#aaa;">Column< /div> < div class="column" style="background-color:#bbb;">Column< /div> < div class="column" style="background-color:#ccc;">Column< /div> < /div> < div class="footer"> < p>Footer< /p> < /div> < /body> < /html>
------------------------------------------------

^{BootStrap Nav}

< !DOCTYPE html> < html lang="en"> < head>   < title>Bootstrap Example< /title>   < meta charset="utf-8">   < meta name="viewport" content="width=device-width, initial-scale=1">   < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">   < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">< /script>   < script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">< /script> < /head> < body> < nav class="navbar navbar-inverse">   < div class="container-fluid">     < div class="navbar-header">       < a class="navbar-brand" href="#">WebSiteName< /a>     < /div>     < ul class="nav navbar-nav">       < li class="active">< a href="#">Home< /a>< /li>       < li>< a href="#">Page 1< /a>< /li>       < li>< a href="#">Page 2< /a>< /li>       < li>< a href="#">Page 3< /a>< /li>     < /ul>   < /div> < /nav> < div class="container">   < h3>Inverted Navbar< /h3>   < p>An inverted navbar is black instead of gray.< /p> < /div> < /body> < /html>
------------------------------------------------

^{Pill Nav}

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < style> body { font-family: Arial, Helvetica, sans-serif; } .pill-nav a { display: inline-block; color: black; text-align: center; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; } .pill-nav a:hover { background-color: #ddd; color: black; } .pill-nav a.active { background-color: dodgerblue; color: white; } < /style> < /head> < body> < h2>How To Create a Pill Navigation Menu< /h2> < div class="pill-nav"> < a class="active" href="#home">Home< /a> < a href="#news">News< /a> < a href="#contact">Contact< /a> < a href="#about">About< /a> < /div> < /body> < /html>
------------------------------------------------

^{Sub Nav dropdown}

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> < style> body { font-family: Arial, Helvetica, sans-serif; margin: 0; } .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .subnav { float: left; overflow: hidden; } .subnav .subnavbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .subnav:hover .subnavbtn { background-color: red; } .subnav-content { display: none; position: absolute; left: 0; background-color: red; width: 100%; z-index: 1; } .subnav-content a { float: left; color: white; text-decoration: none; } .subnav-content a:hover { background-color: #eee; color: black; } .subnav:hover .subnav-content { display: block; } < /style> < /head> < body> < div class="navbar"> < a href="#home">Home< /a> < div class="subnav"> < button class="subnavbtn">About < i class="fa fa-caret-down">< /i>< /button> < div class="subnav-content"> < a href="#company">Company< /a> < a href="#team">Team< /a> < a href="#careers">Careers< /a> < /div> < /div> < div class="subnav"> < button class="subnavbtn">Services < i class="fa fa-caret-down">< /i>< /button> < div class="subnav-content"> < a href="#bring">Bring< /a> < a href="#deliver">Deliver< /a> < a href="#package">Package< /a> < a href="#express">Express< /a> < /div> < /div> < div class="subnav"> < button class="subnavbtn">Partners < i class="fa fa-caret-down">< /i>< /button> < div class="subnav-content"> < a href="#link1">Link 1< /a> < a href="#link2">Link 2< /a> < a href="#link3">Link 3< /a> < a href="#link4">Link 4< /a> < /div> < /div> < a href="#contact">Contact< /a> < /div> < div style="padding:0 16px"> < h3>Subnav/dropdown menu inside a Navigation Bar< /h3> < p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.< /p> < /div> < /body> < /html>
------------------------------------------------

^{Top Nav Flex}

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> < style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #04AA6D; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } < /style> < /head> < body> < div class="topnav" id="myTopnav"> < a href="#home" class="active">Home< /a> < a href="#news">News< /a> < a href="#contact">Contact< /a> < a href="#about">About< /a> < a href="javascript:void(0);" class="icon" onclick="myFunction()"> < i class="fa fa-bars">< /i> < /a> < /div> < div style="padding-left:16px"> < h2>Responsive Topnav Example< /h2> < p>Resize the browser window to see how it works.< /p> < /div> < script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } < /script> < /body> < /html>
------------------------------------------------

^{Split Nav}

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } /* Create a right-aligned (split) link inside the navigation bar */ .topnav a.split { float: right; background-color: #04AA6D; color: white; } < /style> < /head> < body> < div class="topnav"> < a class="active" href="#home">Home< /a> < a href="#news">News< /a> < a href="#contact">Contact< /a> < a href="#about" class="split">Help< /a> < /div> < div style="padding-left:16px"> < h2>Split Navigation Example< /h2> < p>The "Help" link in the navigation bar is separated from the rest of the navigation links, resulting in a "split navigation" layout.< /p> < /div> < /body> < /html>
------------------------------------------------

^{Icon Nav}

< !DOCTYPE html> < html> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> < style> body {font-family: Arial, Helvetica, sans-serif;} .navbar { width: 100%; background-color: #555; overflow: auto; } .navbar a { float: left; padding: 12px; color: white; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #000; } .active { background-color: #04AA6D; } @media screen and (max-width: 500px) { .navbar a { float: none; display: block; } } < /style> < body> < h2>Responsive Navigation Bar with Icons< /h2> < p>Try to resize the browser window to see the responsive effect.< /p> < div class="navbar"> < a class="active" href="#">< i class="fa fa-fw fa-home">< /i> Home< /a> < a href="#">< i class="fa fa-fw fa-search">< /i> Search< /a> < a href="#">< i class="fa fa-fw fa-envelope">< /i> Contact< /a> < a href="#">< i class="fa fa-fw fa-user">< /i> Login< /a> < /div> < /body> < /html>
------------------------------------------------

^{Mobile Nav}

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> < style> body { font-family: Arial, Helvetica, sans-serif; } .mobile-container { max-width: 480px; margin: auto; background-color: #555; height: 500px; color: white; border-radius: 10px; } .topnav { overflow: hidden; background-color: transparent; position: relative; } .topnav #myLinks { display: none; width:fit-content; border:1px dotted red; text-align:right; background-color: #333; position:fixed; } .topnav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; } .topnav a.icon { background: black; display: block; position: absolute; right: 0; top: 0; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #04AA6D; color: white; } < /style> < /head> < body> < !-- Simulate a smartphone / tablet --> < div class="mobile-container"> < !-- Top Navigation Menu --> < div class="topnav"> < a href="#home" class="active">Logo< /a> < div id="myLinks"> < a href="#news">News< /a> < a href="#contact">Contact< /a> < a href="#about">About< /a> < /div> < a href="javascript:void(0);" class="icon" onclick="myFunction()"> < i class="fa fa-bars">< /i> < /a> < /div> < div style="padding-left:16px;"> < h3>Vertical Mobile Navbar< /h3> < p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.< /p> < p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.< /p> < /div> < !-- End smartphone / tablet look --> < /div> < script> function myFunction() { var x = document.getElementById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } < /script> < /body> < /html>
------------------------------------------------

^{Desktop to Mobile Nav}

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> < style> body { font-family: Arial, Helvetica, sans-serif; } .mobile-container { max-width: 480px; margin: auto; background-color: #555; height: 500px; color: white; border-radius: 10px; } .topnav { width: 100%; overflow: hidden; background-color: transparent; position: relative; display:inline-block; } .topnav #myLinks { display: none; width:fit-content; border:1px dotted red; text-align:right; background-color: #333; position:fixed; } .topnav a { color: white; padding: 14px 12px; text-decoration: none; font-size: 17px; display: block; } .topnav a.icon { width:fit-content; background: black; display: none; position: absolute; right: 0; top: 0; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #04AA6D; color: white; } .navbar { background-color: #555; display:inline-block; overflow: hidden; } .navbar a { display:inline-block; } .navitem { display: none; } @media screen and (max-width: 380px) { .navbaritem1 { display: none; } .navitem1 { display: block; } .topnav a.icon { display: block; } } @media screen and (max-width: 300px) { .navbaritem2 { display: none; } .navitem2 { display: block; } } @media screen and (max-width: 220px) { .navbaritem3 { display: none; } .navitem3 { display: block; } } @media screen and (max-width: 450px) { .navbaritemsicon { display: none; } } < /style> < /head> < body> < !-- Simulate a smartphone / tablet --> < div class="mobile-container"> < !-- Top Navigation Menu --> < div class="topnav"> < div class="navbar"> < a class="active" href="#home">< i class="fa fa-fw fa-home">< /i> Home< /a> < sub class="navbaritem1"> < a href="#contact">< i class="fa fa-fw fa-envelope navbaritemsicon">< /i> Contact< /a> < /sub> < sub class="navbaritem2"> < a href="#login">< i class="fa fa-fw fa-user navbaritemsicon">< /i> Login< /a> < /sub> < sub class="navbaritem3">< a href="#">Search < i class="fa fa-fw fa-search navbaritemsicon">< /i>< /a>< /sub> < /div> < div id="myLinks"> < sub class="navitem1 navitem">< a href="#contact">< i class="fa fa-fw fa-envelope">< /i> Contact< /a>< /sub> < sub class="navitem2 navitem">< a href="#login">< i class="fa fa-fw fa-user">< /i> Login< /a>< /sub> < sub class="navitem3 navitem">< a href="#search">Search < i class="fa fa-fw fa-search">< /i>< /a>< /sub> < /div> < a href="javascript:void(0);" class="icon" onclick="myFunction()"> < i class="fa fa-bars mob_nav">< /i> < /a> < /div> < div style="padding-left:16px;"> < h3>Desktop/Mobile Navbar< /h3> < p>Dynamically switch between< br />desktop and mobile navigation menus.< /p> < p>Resize window to see nav items alternate between menus. When the window is small enough click on the [three bars], in the top right corner, to toggle the mobile menu.< /p> < /div> < !-- End smartphone / tablet look --> < /div> < script> function myFunction() { var x = document.getElementById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } < /script> < /body> < /html>
------------------------------------------------

^{Side Nav}

< !DOCTYPE html> < html lang="en"> < head> < title>CSS Template< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < style> * { border-radius:5px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; position:absolute; top:0; left:0; right:0; bottom:0; border:solid 1px silver; } /* Style the top navigation bar */ .topnav { overflow: hidden; background-color: #333; position:fixed; top:1px; left:1px; right:1px; z-index: 2; } /* Style the topnav links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Style the side navigation */ .sidenav { margin:46px 0 0; padding:0 0 10%; width: 100px; position: fixed; z-index: 1; top: 1px; left: 1px; bottom: 1px; background-color: #111; overflow-x: hidden; } /* Side navigation links */ .sidenav a { color: white; padding: 16px; text-decoration: none; display: block; } /* Change color on hover */ .sidenav a:hover { background-color: #ddd; color: black; } /* Style the content */ .content { margin-top:6%; margin-left: 100px; padding: 10px 10px 10px 20px; } /* Style the content */ .content2 { min-height:369px; margin-left:100px; background-color: #ddd; padding: 10px 10px 10px 20px; /* Should be removed. Only for demonstration */ } /* Style the footer */ .footer { background-color: #f1f1f1; padding: 10px; position:relative; left:0.4px; margin-right:0.4px; bottom:1px; z-index: 2; border:none; border-radius:0; } < /style> < /head> < body> < div class="topnav"> < a href="#">Link< /a> < a href="#">Link< /a> < a href="#">Link< /a> < /div> < div class="sidenav"> < a href="#">Link< /a> < a href="#">Link< /a> < a href="#">Link< /a> < a href="#">Link< /a> < a href="#">Link< /a> < a href="#">Link< /a> < a href="#">Link< /a> < a href="#">Link< /a> < a href="#">Link< /a> < /div> < div class="content"> < h2>Page Template< /h2> < p>fixed sidenav and content.< /p> < /div> < div class="content2"> Some Stuff, bla, bla, bla. < /div> < div class="footer"> < p>Footer< /p> < /div> < /body> < /html>
------------------------------------------------

D^{rop Letter}

< span style="float: left; width: 0.7em; font-size: 400%; font-family: algerian, courier; line-height: 80%;">H< /span>ere, the first letter of this text is embedded in a span element.
------------------------------------------------

^{Animated Loader}

< style> .loader { border: 4px solid transparent; border-radius: 50%; border-top: 4px solid #3498db; border-left: 4px solid #3498db; width: 12px; height: 12px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; float:left; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } < /style> < div class="loader">< /div>

^{Large Animated Loader}

< style> .large_loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 60px; height: 60px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } < /style> < div class="large_loader">< /div>
------------------------------------------------

CSS tags

/* Font & Text */
font-family: "IM Fell English SC", monospace;
font-family: "IM Fell English SC", serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 400;
letter-spacing: normal;
line-height: 21.7028px;
text-decoration: none solid rgb(102, 102, 102);
text-align: left;
text-indent: 0px;
text-transform: none;
vertical-align: baseline;
white-space: normal;
word-spacing: 0px;
/* Color & Background */
background: #ffffff url("img_tree.png") no-repeat right top;
background-attachment: scroll;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
color: rgb(102, 102, 102);
color: #333;
/* Box */
height: 7283.84px;
width: 1505px;
width: 100%;
height: 100%;
border: 1px solid #ebebeb;
border: 3px solid #73AD21;
border: 0px none rgba(0, 0, 0, 0);
border-top: 0px none rgba(0, 0, 0, 0);
border-right: 0px none rgba(0, 0, 0, 0);
border-bottom: 0px none rgba(0, 0, 0, 0);
border-left: 0px none rgba(0, 0, 0, 0);
margin: 5px;
margin: 10px 10px 10px 10px;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding: 5px;
padding: 10px 10px 10px 10px;
padding-right: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
max-height: none;
min-height: 0px;
max-width: none;
min-width: 0px;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
float: left;
float: right;
display: block;
clear: none;
clear: left;
clear: right;
clear: both;
z-index: auto;
/* List */
list-style-image: none;
list-style-type: disc;
list-style-position: outside;
/* Table */
border-collapse: separate;
border-spacing: 0px 0px;
caption-side: top;
empty-cells: show;
table-layout: auto;
/* Miscellaneous */
overflow: visible;
cursor: auto;
cursor:pointer;
cursor: no-drop;
visibility: visible;
/* Effects */
text-shadow: 1px 1px rgba(0, 123, 255, 0.04);
box-shadow: 1px 1px rgba(0, 123, 255, 0.04);
box-sizing: border-box !important;
transform: none;
transition: all 0.3s ease-in;
transition: all 0s ease 0s;
outline: rgb(255, 0, 0) dashed 1px;
outline-offset: 0px;
box-sizing: border-box;
resize: none;
text-shadow: none;
text-overflow: clip;
word-wrap: normal;
box-shadow: none;
box-shadow: 1px 2px 5px rgba(0,0,0,.31);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0.3;
------------------------------------------------

Input sample

.myform input[type=email], input[type=text], input[type=url] { width: calc(100% - 158px); margin: 5px 5px 5px 10px; padding: 3px 10px 3px 10px; border-radius: 5px; border: solid 1px #cbc9c9; box-shadow: 1px 2px 5px rgba(0,0,0,.09); background: #fff; }
------------------------------------------------

Input Submit sample

.myform input[type=submit] { margin: 2px 10px 2px 5px; padding: 1px 4px 1px 4px; cursor: pointer; background-color: darkred; color:orange; font-weight: 600; opacity: 0.9; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; box-shadow: 1px 2px 5px rgba(0,0,0,.31); }
------------------------------------------------

Circle button sample

.circle-button { margin:2px 4px 2px 4px; padding:1px; font-size:12px; background:#446b54A0; width:44px; height:44px; border-radius: 26px; box-sizing: border-box; box-shadow: 1px 2px 5px rgba(0,0,0,.31); border: 1px solid #ccc; color:white; } .circle-button:hover { margin:2px 4px 2px 4px; padding:1px; font-size:12px; background:#000000A0; width:44px; height:44px; border-radius: 26px; box-sizing: border-box; box-shadow: 1px 2px 5px rgba(0,0,0,.31); border: 1px solid #ccc; transform: rotate(180deg); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
------------------------------------------------

Body Global sample

body * { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(26, 234, 221, 0.82); } body *, *::after, *::before { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } body *, ::after, ::before { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
------------------------------------------------

img zoom sample

img .zoom { width: 100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
------------------------------------------------

a zoom sample

a .zoom { width: 100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
------------------------------------------------

transition sample

.transition { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
------------------------------------------------

button effects sample

.hover-btn { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); -moz-transform: perspective(1px) translateZ(0); -ms-transform: perspective(1px) translateZ(0); -o-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #111111; -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .hover-btn::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #38c8a8; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -ms-transform-origin: 50%; -o-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; -moz-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; display: block !important; } .hover-btn:hover::before, .hover-btn:focus::before, .hover-btn:active::before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .hover-btn:hover, .hover-btn:focus, .hover-btn:active { color: white; box-shadow: none; }
------------------------------------------------

img effects sample

.topnav img { background-color: transparent; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; border-radius:5px; } .topnav img:hover { background-color: transparent; height:calc(var(--height) + 6px); width:calc(var(--width) + 6px); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; max-height:48px; }
------------------------------------------------

div container sample

.my-container { min-width: 128px; margin: auto; background-color: #222; height: 50%; color: white; border-radius: 10px; box-sizing: border-box; box-shadow: 1px 2px 5px rgba(0,0,0,.31); border: 1px solid rgb(177, 176, 176); }
------------------------------------------------

Rotation sample

.rotate:hover { transform: rotate(180deg); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all 0.5s ease-in-out; outline: rgb(92, 0, 0) none 0px; outline-offset: 0px; box-sizing: border-box; resize: none; overflow: hidden; text-shadow: 1px 1px #0000ff; box-shadow: rgba(0, 123, 255, 0.04) 0px 0px 0px 0.524867px; }
------------------------------------------------

Reverse rotation sample

.rotateBackwards:hover { transform: rotate(-90deg); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all 0.5s ease-in-out; outline: rgb(92, 0, 0) none 0px; outline-offset: 0px; box-sizing: border-box; resize: none; overflow: hidden; text-shadow: 1px 1px #0000ff; box-shadow: rgba(0, 123, 255, 0.04) 0px 0px 0px 0.524867px; }