UI

Developer
Graham
Size
6,062 Kb
Views
18,216
  1. UI Previews
  2. UI HTML Codes
  3. UI CSS Codes

How do I make an ui?

What is a ui? How do you make a ui? This script and codes were developed by Graham on 12 October 2022, Wednesday.

UI Previews
IQ Test

UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>UI</title> <link rel='stylesheet prefetch' href='http://uqgarrow.uqcloud.net/__/themes/fuq/css/uq.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,300italic,400italic,500italic,700italic'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <dl> <dt>.button [a, div, button]</dt> <dd> <a href="#" class="button">a Button</a> <div class="button">div Button</div> <button class="button">button Button</button> </dd> <dt>.button-group > .button</dt> <dd> <div class="button-group"> <a href="#" class="button">a Button</a> <div class="button">div Button</div> <button class="button">button Button</button> </div> </dd> <dt>.plain</dt> <dd> <a href="#" class="button plain">Button</a> </dd> <dt>.disabled</dt> <dd> <a href="#" class="button disabled">Button</a> </dd> <dt>.active</dt> <dd> <a href="#" class="button active">Button</a> </dd> <dt>.full-width</dt> <dd> <button class="full-width button">Button</button> </dd> <dt>.pill</dt> <dd> <button class="button pill">Button</button> </dd> <dt>.square</dt> <dd> <a href="#" class="button square">Button</a> </dd> <dt>.positive, .negative</dt> <dd> <a href="#" class="button positive">Accept</a> <a href="#" class="button negative">Decline</a> <a href="#" class="button">Cancel</a> </dd> <dt>thing</dt> <dd>stuff</dd> </dl>
<hr />
<div class="research banner"> <div class="content"> <div class="caption"> <h2>Research banner title here</h2> <h3>Banner subheading here</h3> <div class="banner-buttons"> <div class="button">Marketing</div> <div class="button">Click me urgently</div> </div> </div>
</div>
<div class="corporate banner"> <div class="content"> <div class="caption"> <h2>Research banner title here</h2> <h3>Banner subheading here</h3> <div class="banner-buttons"> <div class="button">Marketing</div> <div class="button">Click me urgently</div> </div> </div>
</div>
<div class="classic banner"> <div class="content"> <div class="caption"> <h2>Research banner title here</h2> <h3>Banner subheading here</h3> <div class="banner-buttons"> <div class="button">Marketing</div> <div class="button">Click me urgently</div> </div> </div> </div>
</div>
<div class="study banner"> <div class="content"> <div class="caption"> <h2>Research banner title here</h2> <h3>Banner subheading here</h3> <div class="banner-buttons"> <div class="button">Marketing</div> <div class="button">Click me urgently</div> </div> </div> </div>
</div>
<div class="photo banner"> <div class="content"> <div class="media"></div> <div class="caption"> <h2>Research banner title here</h2> <h3>Banner subheading here</h3> <div class="banner-buttons"> <div class="button">Marketing</div> <div class="button">Click me urgently</div> </div> </div> </div>
</div>
<div class="plain banner"> <div class="content"> <div class="caption"> <h2>Research banner title here</h2> <h3>Banner subheading here</h3> <div class="banner-buttons"> <div class="button">Marketing</div> <div class="button">Click me urgently</div> </div> </div> </div>
</div>
<div class="tags">	<h4>Tags</h4>	<ul itemprop="keywords">	<li>	<a href="https://www.kotaku.com.au/tags/dark-souls/" class="button" data-tracking-name="dark souls">dark souls</a>	</li>	<li>	<a href="https://www.kotaku.com.au/tags/dark-souls/" class="button" data-tracking-name="dark souls">dark souls</a>	</li>	<li>	<a href="https://www.kotaku.com.au/tags/dark-souls/" class="button" data-tracking-name="dark souls">dark souls</a>	</li> </ul>
</div>
<div style="overflow:hidden; width:800px; height:400px;"> <img src="http://uqgarrow.uqcloud.net/filething/get/33/5397_87768_2012_St_Lucia_Open_Day_Single_use_request_permission.jpg" alt="lecture" class="blur" width="880" height="440" />
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

UI - Script Codes CSS Codes

/* !!! */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,300italic,400italic,500italic,700italic);
* { font-family: 'Roboto', sans-serif;
}
/* .block { margin-bottom:0 !important; } .container { padding-bottom:0; }
*/
/* !!! */
.button-group { display: inline-block;
}
.button-group .button + .button, .button-group .button-group .button + .button-group,
.button-group .button-group .button-group + .button,
.button-group .button-group .button-group + .button-group { margin-left: -1px;
}
.button-group .button + .button:hover, .button-group .button-group .button + .button-group:hover,
.button-group .button-group .button-group + .button:hover,
.button-group .button-group .button-group + .button-group:hover { z-index: 2;
}
.button-group > .button { position: relative; float: left;
}
.button-group > .button:first-child:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0;
}
.button-group > .button:not(:first-child):not(:last-child) { border-radius: 0;
}
.button-group > .button:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0;
}
.button-group > .button:hover { z-index: 2;
}
.button { font-size: 1em; cursor: pointer; display: inline-block; vertical-align: middle; min-height: 1em; outline: 0; border: none; background-color: #FAFAFA; color: #444; margin: 0; padding: .8em 1.5em; line-height: 1; font-weight: normal; font-style: normal; text-align: center; text-decoration: none; background-color: transparent; background-image: none; webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; border-radius: .25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.button:hover { background-color: #EEE;
}
.button { /* state */
}
.button.large { font-size: 1.4em;
}
.button.basic, .button.plain { background-color: transparent !important; background-image: none; color: #444; font-weight: 300; text-transform: none; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
}
.button.pill, .button.rounded { border-radius: 10em;
}
.button.positive, .button.accept, .button.success, .button.negative, .button.cancel, .button.fail { -webkit-box-shadow: none; border: none; font-weight: 700;
}
.button.positive, .button.accept, .button.success { color: #000; background-color: #8CB800;
}
.button.negative, .button.cancel, .button.fail { color: #fff; background-color: #AA0041;
}
.button.full-width { display: block; width: 100%;
}
.button.square { border-radius: 0px;
}
.button.active, .button:active { background-color: #EAEAEA; background-image: none; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset !important; color: black;
}
.button:hover { background-image: none; color: #000 !important; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}
.button.disabled, .button.disabled.active, .button.disabled:hover { background-color: #DDD !important; cursor: default; color: rgba(0, 0, 0, 0.5) !important; opacity: 0.3 !important; background-image: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;
}
.banner { padding: 0;
}
.banner .content { position: relative; top: 0; left: 0;
}
.banner .caption { position: relative; padding: 2em 2em 3em 2em; bottom: 15%; z-index: 3;
}
.banner .banner-buttons { padding: 1em 0 0 0;
}
.banner h1, .banner h2, .banner h3, .banner h4, .banner h5, .banner h6 { color: #fff; font-family: 'Roboto', sans-serif; font-weight: 200; margin-top: 0; margin-bottom: 0.25em;
}
.banner.research .button:hover, .banner.study .button:hover, .banner.corporate .button:hover { color: #fff !important;
}
.banner.basic { background-color: #E7E7E7;
}
.banner.basic .button, .banner.basic h1, .banner.basic h2, .banner.basic h3, .banner.basic h4, .banner.basic h5, .banner.basic h6 { color: #333333;
}
.banner.basic .button { color: #333; border: 2px solid #555;
}
.banner.corporate { background-color: #49075e;
}
.banner.corporate a { color: #fff;
}
.banner.research { background-color: #0091B5;
}
.banner.research a { color: #fff;
}
.banner.study { color: #000; background-color: #8CB800;
}
.banner.study h1, .banner.study h2, .banner.study h3, .banner.study h4, .banner.study h5, .banner.study h6 { color: #000;
}
.banner.classic { background-color: #202020;
}
.banner.classic .button { color: #BDA14E; border-color: #BDA14E;
}
.banner.photo { background-color: #000;
}
.banner.photo .media { position: relative; top: 0; left: 0; z-index: 1; overflow: hidden; background: url(http://uqgarrow.uqcloud.net/filething/get-styled/large_banner/33/5397_87768_2012_St_Lucia_Open_Day_Single_use_request_permission.jpg); background-size: cover; background-position: center center; opacity: 1;
}
.blur { -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); filter: url(#blur); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
}
/* banner buttons */
.banner-buttons .button { background: transparent; border-radius: 0; border: 2px solid #FFFFFF; color: #FFFFFF; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-weight: 700; padding: 15px 65px 15px 25px; margin-right: 20px; text-align: left; position: relative; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; transition: background .3s;
}
.banner-buttons .button:hover { background-color: rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 768px) { .banner-buttons .button { max-width: 100%; margin-bottom: 0.4em; display: block; }
}
/* !! responsive stacking of button groups */
.tags ul, .tags li { list-style: none; margin: 0; padding: 0;
}
.tags .button { font-size: 0.6em; float: left; margin: 0 0 6px 0;
}
dl { margin: 0; padding: 0; max-width: 100%;
}
dl dt, dl dd { border-top: 1px solid #EBEBEB; padding: 1em;
}
dl dt { float: left; width: 14em; color: black; font-weight: bold;
}
dl dd { clear: right;
}
.fixed { position: fixed; top: 0; z-index: 10; overflow-y: auto;
}
UI - Script Codes
UI - Script Codes
Home Page Home
Developer Graham
Username uqgarrowsmith
Uploaded October 12, 2022
Rating 3
Size 6,062 Kb
Views 18,216
Do you need developer help for 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!

Graham (uqgarrowsmith) Script Codes
Name
Drupal View Table Style Markup
Example Tables using UQ Theme
CSS Hanging indent
Interactive Branded Tables
Foundation 5 grids.scss
Code style sample
Typography
JavaScript Closure
UQ Colour Swatch 0.1b
A Pen by Graham
Create amazing web content 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!