Material UI

Developer
Thomas Hare
Size
4,384 Kb
Views
14,168
  1. Material UI Previews
  2. Material UI HTML Codes
  3. Material UI CSS Codes

How do I make an material ui?

What is a material ui? How do you make a material ui? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.

Material UI Previews
IQ Test

Material UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material UI</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="material"> <a>Material UI</a> <a>Buttons</a> <a>Icons</a> <a>Navigation</a> <a>Cards</a>
</nav>
<a class="material icon">+</a>
<a class="material button">Material</a>
<div class="material menu"> <ul> <li><a>Bold<span class="right">&#8984;B</a></li> <li><a>Italic<span class="right">&#8984;I</a></li> <li><a>Underline<span class="right">&#8984;U</a></li> <li><a>Strikethrough<span class="right">Alt+Shift+5</a></li> <li><a>Superscript<span class="right">&#8984;.</a></li> <li><a>Subscript<span class="right">&#8984;,</a></li> </ul> <ul> <li><a>Superscript<span class="right">&#x3009;</a></li> <ul> <li>Test 1</li> <li>Test 2</li> <li>Dropdown<span class="right">&#x3009;</span></li> <ul> <li>Test 1</li> <li>Test 2</li> <li>Test 3</li> </ul> </ul> <li><a>Subscript<span class="right"></a></li> </ul>
</div>
<div class="material card"> <a href="https://codepen.io/tommyhare"><img alt="profile pic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242906/profile/profile-512_9.jpg"></a> <div class="right"> <h1>Thomas Hare</h1> <span>Phone: (123) 456-7890</span> <span>Email: [email protected]</span> <span>Address: 1234 W Fake St. Suite 105</span> </div>
</div>
<h2>Forms!</h2>
<form class="material"> <input placeholder="Name" type="text"> <input placeholder="Email" type="text"> <input class="material button secondary" type="submit" value="register">
</form>
</body>
</html>

Material UI - Script Codes CSS Codes

/* CSS Reset by Eric Meyer */
/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {	display: block;
}
body {	line-height: 1;
}
ol, ul {	list-style: none;
}
blockquote, q {	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {	content: '';	content: none;
}
table {	border-collapse: collapse;	border-spacing: 0;
}
/*###############################*/
/* Import Google's Roboto font */
@import url(https://fonts.googleapis.com/css?family=Roboto);
/* Import Bootstrap's font icon pack */
@import url("//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
/* Background for testing */
body { background: url('http://www.cssdesk.com/images/bg-desk.png');
}
/* Fix Header display */
h1, h2, h3, h4, h5, h6 { clear: both; font-family: 'Roboto', sans-serif; padding: 1%;
}
h1 { font-size: 2.5rem;
}
h2 { font-size: 2rem;
}
h3 { font-size: 1.75rem;
}
h4 { font-size: 1.5rem;
}
h5 { font-size: 1.25rem;
}
h6 { font-size: 1rem;
}
/* Material element cursor pointer on hover */
.material { cursor: pointer; float: left; font-family: 'Roboto', sans-serif; letter-spacing: 0.05rem; text-decoration: none !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.material+.material { margin: 1rem 0 0 1rem;
}
.material a { text-decoration: none;
}
/* Remove selection background from Material elements */
.material::selection { background: none;
}
/* Material Button and Icon default background */
nav.material, input[type="button"].material,input[type="submit"].material, .material.button,.material.icon { background-color: #4D93F0;
}
/* remove outline on Material Button click event */
.material:focus { border: none !important; outline: none !important;
}
/* Material Button / Icon basic design queues */
input[type="button"].material, input[type="submit"].material,.material.button,.material.icon { border-width: 0px; color: #FFF; display: inline-block; font-size: 0.8rem; -webkit-transition: ease box-shadow 0.2s linear; -moz-transition: ease box-shadow 0.2s linear; -ms-transition: ease box-shadow 0.2s linear; -o-transition: ease box-shadow 0.2s linear; transition: ease box-shadow 0.2s linear;
}
/* Material Button structure */
input[type="button"].material, input[type="submit"].material,.material.button { -webkit-border-radius: 8% !important; -moz-border-radius: 8% !important; border-radius: 8% !important; box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); padding: 10px 20px; transition: box-shadow ease 0.3s;
}
/* Material Button click effect(s) */
.material.button:active { box-shadow: 0 8px 11px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: box-shadow ease 0.3s;
}
/* Material Icon structure */
.material.icon { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); font-size: 1.5rem !important; line-height: 50% !important; padding: 1rem 1rem 1.2rem 1.1rem; transition: box-shadow ease 0.3s;
}
/* Material Icon click effect(s) */
.material.icon:active { box-shadow: 0 9px 5px 1px rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: box-shadow ease 0.3s;
}
/*Material button color variations */
.material.success { background-color: #42D631 !important;
}
.material.secondary { background-color: slategray !important;
}
.material.alert { background-color: #E02424 !important;
}
/* Material Nav */
nav.material { color: #FFF; float: left; width: 100%;
}
nav.material a { color: inherit; float: left; line-height: 4rem; padding: 0 12px; text-decoration: none;
}
nav.material a:hover { background-color: #3D73F0; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -ms-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: all 0.5s linear;
}
nav.material .brand-logo { background: none !important; float: left; font-size: 2rem; padding: 0 0.5rem 0 0.5rem;
}
nav.material .brand-logo { max-height: 3.5rem;
}
/* Align a Nav brand logo to the right with: class="brand-logo right" */
nav.material .brand-logo.right { float: right; padding: 0 0.5rem 0 0;
}
/* Fix the display of Nav glyphicons */
nav.material .glyphicon { background: none !important;
}
/* Material Menu design */
.material.menu,.material.menu ul:hover ul,.material.menu ul:hover ul:hover ul { background-color: #FFF; box-shadow: 0 8px 10px 2px rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); display: block; font-size: 0.85rem; line-height: 2rem;
}
.material.menu a,.material.menu li { color: #555 !important;
}
.material.menu ul,.material.menu ol { padding-top: 1rem;
}
/* Material Menu 2nd+ list structure */
.material.menu ul+ul,.material.menu ol+ol { border-top: solid #DFDFDF 1px; padding: 0rem 0 1rem 0;
}
/* Material Menu list structure */
.material.menu li { background-color: #FFF; padding: 0 1.5rem; position: relative;
}
/* Material Menul list hover effect(s) */
.material.menu li:hover { background-color: #EEE;
}
/* Material Menu list item right text / icon(s) */
.material.menu .right { float: right; text-align: right;
}
/* Material Menu 2nd menu popup hide on default */
.material.menu ul ul { display: none; visibility: hidden;
}
/* Material Card 2nd menu popup hide if not hovering trigger list item */
.material.menu ul li:not(:hover)+ul:not(:hover) { visibility: hidden;
}
/* Material Menu 2nd menu popup show on trigger list item hover */
.material.menu ul:hover ul { box-shadow: -5px 5px 20px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); margin-left: 16.5rem; padding-top: 1rem; position: absolute; z-index: 1000; visibility: visible;
}
/* Material Menu 2nd menu popup list items align to right of trigger list item */
.material.menu ul:hover ul li:first-child { margin-top: -3rem;
}
/* Material Menu 3rd menu popup hide on default */
.material.menu ul ul li:not(:hover)+ul:not(:hover) { visibility: hidden;
}
/* Material Menu 3rd menu popup show on trigger list item hover */
.material.menu ul ul { padding-top: 1rem; position: absolute; z-index: 2000; visibility: visible; width: 17.5rem;
}
/* Material Card 3rd menu popup list items align to left of trigger list item */
.material.menu ul ul:hover ul { margin-left: -17rem;
}
/* Fix menu to align to the top of trigger list item */
.material.menu ul ul:hover ul li:first-child { margin-top: -3rem;
}
.material.menu { width: 17rem;
}
/* Material Card design */
.material.card { background-color: #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0 8px 10px 2px rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.material.card img { background-color: slategray; border-radius: 50%; float: left; height: 7rem; margin: 1rem 0rem 1rem 0.5rem; width: 7rem;
}
.material.card h1,.material.menu h2,.material.menu h3,.material.menu h4,.material.menu h5,.material.menu h6 { font-size: 1.5rem; padding: 0 1rem;
}
.material.card span { display: block; margin: 0.5rem 1rem;
}
.material.card .right { float: right; margin: 1rem 1rem 1rem 0; text-align: left;
}
/* Forms */
form.material { margin: 1%;
}
form.material input { background: none; border-color: #000; border-width: 0 0 1px 0; float: left; outline: none; padding: 3% 0;
}
/* Placeholder (in progress) */
form.material input::-webkit-input-placeholder { color: #888;
}
form.material input:-moz-placeholder { /* Firefox 18- */ color: #888;
}
form.material input::-moz-placeholder { /* Firefox 19+ */ color: #888;
}
form.material input:-ms-input-placeholder { color: #888;
}
/* Placeholder on input focus */
form.material input:focus::-webkit-input-placeholder { color: #000 !important; display: block !important; position: relative; top: -1.5rem;
}
form.material input:focus:-moz-placeholder { /* Firefox 18- */ color: #000 !important; display: block !important; position: relative; top: -1.5rem;
}
form.material input:focus::-moz-placeholder { /* Firefox 19+ */ color: #000 !important; display: block !important; position: relative; top: -1.5rem;
}
form.material input:focus:-ms-input-placeholder { color: #000 !important; display: block !important; position: relative; top: -1.5rem;
}
Material UI - Script Codes
Material UI - Script Codes
Home Page Home
Developer Thomas Hare
Username tommyhare
Uploaded November 17, 2022
Rating 3.5
Size 4,384 Kb
Views 14,168
Do you need developer help for Material UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thomas Hare (tommyhare) Script Codes
Name
Bootstrap Form Fun
Space Ashley
The Initiator
Swipe View
12 Column Grid Framework In 12 Lines of Code
Simple Login
Stock Card
Slate v2
Table Classes
Bootstrap V4 tabs
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!