Widgets

Developer
Tiffany Rayside
Size
13,771 Kb
Views
26,312
  1. Widgets Previews
  2. Widgets HTML Codes
  3. Widgets CSS Codes
  4. Widgets JS Codes

How do I make an widgets?

A widget / ui collection.... What is a widgets? How do you make a widgets? This script and codes were developed by Tiffany Rayside on 09 September 2022, Friday.

Widgets Previews
IQ Test

Widgets - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Widgets</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="grid" data-columns> <section class="block"> <div class="btns"> <input type="radio" name="toggle" id="nav-toggle" checked/> <input type="radio" name="toggle" id="fav-toggle" /> <input type="radio" name="toggle" id="set-toggle" /> <input type="radio" name="toggle" id="mail-toggle" /> <input type="radio" name="toggle" id="search-toggle" /> <div class="tabs"> <label for="nav-toggle" class='fontawesome-align-justify'></label> <label for="fav-toggle" class='fontawesome-star'></label> <label for="set-toggle" class='fontawesome-cog'></label> <label for="mail-toggle" class='fontawesome-envelope-alt'></label> <label for="search-toggle" class='fontawesome-zoom-out'></label> </div> <div class="content"> <div class="nav-content"> <ul> <li>Navigation 01</li> <li>Navigation 02</li> <li>Navigation 03</li> <li>Navigation 04</li> </ul> </div> <div class="fav-content"> <ul> <li><span class='fontawesome-star'></span>Item 01</li> <li><span class='fontawesome-star'></span>Item 02</li> <li><span class='fontawesome-star'></span>Item 03</li> <li><span class='fontawesome-star'></span>Item 04</li> </ul> </div> <div class="set-content"> <ul> <li>My Profile</li> <li>Account Settings</li> <li>Support</li> <li>Log Out</li> </ul> </div> <div class="mail-content"> <ul class='m-opts'> <li><span class='cnt'>5</span>Inbox</li> <li><span class='cnt'>0</span>Sent</li> <li><span class='cnt'>2</span>Deleted</li> <li><span class='cnt'>1</span>Drafts</li> </ul> </div> <div class="search-content"> <input type='search' placeholder="Search" /> <button>Go</button> </div> </div> </section> <section class="block"> <div class='clock'> <span> <span id = 'time'></span> <span id='ampm'></span> </span> </div> <div class='opts'> <button class='fontawesome-cog' id='setting'></button> <button class='fontawesome-time' id='alrm'</button> </div> </section> <section class='block'> <div class='weather'> <span id ='dn'></span> <span id='wea'></span> <span id='tem'></span> </div> </section> <section class="block"> <div class="calendar-wrapper"> <button id="btnPrev" type="button">Prev</button> <button id="btnNext" type="button">Next</button> <div id="calendar"></div> </div> </section> <section class="block"> <div class='calc-wrap'> <div id="calc"> <div class="top"> <span class="clear">c</span> <div class="result"></div> </div> <div class="keys"> <span>7</span> <span>8</span> <span>9</span> <span class="op">+</span> <span>4</span> <span>5</span> <span>6</span> <span class="op">-</span> <span>1</span> <span>2</span> <span>3</span> <span class="op">÷</span> <span>0</span> <span>.</span> <span class="eval">=</span> <span class="op mult">x</span> </div> </div> </div> </section> <section class="block"> <div class="sticky"> <div class="note"> <div class="head">My Notes</div> <div class="title"> <input type="text" name="title" class='snote' placeholder="Enter Title"> </div> <div class="content"> <textarea name="note" placeholder="Add Sticky Note..."></textarea> </div> </div> </section> <section class='block'> <div class="chat-container"> <div class="header"> <h2>Messages</h2> </div> <div class="chat-box"> <div class="message-box left"> <div class="picture"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/smileyfour.gif" title="user name" /> <span class="time">6 mins</span> </div> <div class="message"> <span>Joe Schmoe</span> <p>There's no easy way to explain this piece of code...</p> </div> </div> <div class="message-box right"> <div class="picture"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/smileycoffee.gif" title="user name" /> <span class="time">2 mins</span> </div> <div class="message"> <span>You</span> <p>Just call it an algorithm...</p> </div> </div> <div class="enter"> <input type="text" placeholder="Enter your message.." /> <a href="#" class="send">Send</a> </div> </div> </div> </section> <section class='block'> <div class="todo-container"> <h2>Task List</h2> <form action="#" id='todo'> <input type="text" name="item" id="item" placeholder="Add New" /> </form> <ul id="list"></ul> <button id='clear'>Clear Storage</button> </div> </section> <section class='block'> <div class='player'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/musicians_guild_logo.jpg'/> <div class="pbar"> <span class="progress-bar" style="width: 95%;"> <span class="shade warm"></span> </span> <p>3:36</p> </div> <div class='body'> <div class='left'> <h1>Various Artists</h1> <h2>The Mix Tape</h2> <h2><span class='act'>Now Playing:</span> Track 12</h2> </div> </div> <div class='cntrl'> <button id='play'><span class='fontawesome-fast-backward'></span></button> <button id='play'><span class='fontawesome-play'></span></button> <button id='pause'><span class='fontawesome-pause'></span></button> <button id='pause'><span class='fontawesome-fast-forward'></span></button> </div> </div> </section> <section class='block'> <div class="social"> <h2>Social Bar</h2> <span><i class="fontawesome-facebook"></i></span> <span><i class="fontawesome-twitter"></i></span> <span><i class="fontawesome-google-plus"></i></span> <span><i class="fontawesome-camera-retro"></i></span> <span><i class="fontawesome-github-alt"></i></span> <span><i class="fontawesome-linkedin"></i></span> <span><i class="fontawesome-globe"></i></span> </div> </section> <section class='block'> <div class="contacts"> <header> <h4> Contacts<br /> </h4> </header> <div class='icons'> <span class='fontawesome-cogs'></span> <span class='fontawesome-pencil'></span> <span class='fontawesome-plus-sign'><span> <span class='fontawesome-minus-sign'></span> <span class='fontawesome-info-sign'></span> </div> <ul class="contact-list"> <li> <div class="name">Adam</div> <div class="info">[email protected]</div> </li> <li> <div class="name">Ben</div> <div class="info">[email protected]</div> </li> <li> <div class="name">Chris</div> <div class="info">[email protected]</div> </li> <li> <div class="name">Danny</div> <div class="info">[email protected]</div> </li> <li> <div class="name">Ed</div> <div class="info">[email protected]</div> </li> <li> <div class="name">Edgar</div> <div class="info">[email protected]</div> </li> <li> <div class="name">Fred</div> <div class="info">[email protected]</div> </li> <li> <div class="name">Harry</div> <div class="info">[email protected]</div> </li> </ul> </div> </section>
<section class='block'> <form class='file'> <input type="file"> </form>
</section>
</div> <script src="js/index.js"></script>
</body>
</html>

Widgets - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Ruluko);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-size: 1.4rem; cursor: pointer;
}
* { font-size: 100%; box-sizing: border-box;
}
html, body { width: 100%; min-height: 100%; margin: 0; background-image: -webkit-radial-gradient(ellipse farthest-side at 10% 10%, #cbd5eb 0%, #94b3be 90%, #6689bb 135%); background-image: radial-gradient(ellipse farthest-side at 10% 10%, #cbd5eb 0%, #94b3be 90%, #6689bb 135%); font-family: Ruluko; line-height: 1.4em; color: #607779;
}
h3 { font-size: 1.2em; text-align: center; line-height: 1.5em;
}
.grid[data-columns] { min-width: 100%; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: .5em; -moz-column-gap: .5em; column-gap: .5em;
}
.grid[data-columns] > section.block { display: inline-block; width: 100%;
}
.grid[data-columns] > section.block:nth-child(even) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;
}
section.block { margin: 0; padding: 1em; font-size: 1.1em; color: #607779; letter-spacing: 1px; height: auto;
}
@media all and (max-width: 1230px) { .grid[data-columns] { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}
@media (max-width: 780px) { .grid[data-columns] { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; width: 100%; }
}
@media (max-width: 450px) { .grid[data-columns] section.block { padding: 0; }
}
/**tabs**/
.btns { margin: 2em auto 0; width: 22em; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2);
}
[for] { border-width: 0.0625em; padding: 0.3125em; float: left; width: calc(100% / 5); height: 4rem; color: #FEFEFE; line-height: 3.5rem; text-align: center; background: #607779; border-radius: 2px 2px 0 0/2px 2px 0 0; -webkit-transition: all .2s ease-in; transition: all .2s ease-in;
}
[for] ~ [for] { border-left: 0;
}
.content { overflow: hidden; *zoom: 1; clear: both; border-top: 0; height: 20rem; max-height: 20rem;
}
.content input { float: left; width: 14rem; height: 4rem; margin: 5rem 3rem; border-radius: 4px; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3); border: 1px solid #fff; border-right: 0; -webkit-transition: border .2s ease-out; transition: border .2s ease-out;
}
.content input:focus { border-color: #fff; outline: 0; -webkit-transition: border .3s ease-in; transition: border .3s ease-in;
}
.content button { float: left; border: 0; width: 4rem; margin: 5.022rem -3.2rem; font-size: 1.25rem; border-left: 0; height: 4.115rem; font-weight: bold; cursor: pointer; color: #FFFEE4; border: none; -webkit-transition: background .2s ease-out; transition: background .2s ease-out; background: #F25036; border-radius: 0 4px 4px 0; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}
.content ul { list-style: none; text-indent: .2em;
}
.content ul li { height: 4.5rem; line-height: 4.5rem; -webkit-transition: all .3s ease; transition: all .3s ease;
}
.content ul li:hover { color: #FFFEE4; background: #91B7BA; box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.2); margin-left: -2.5rem; text-indent: 2.8em;
}
.content ul li span { color: #F25036; padding-right: 2rem;
}
.content ul li span.cnt { text-align: center; margin-right: 2rem; padding: 0 1rem 0; font-weight: bold; background: #F25036; color: #FFFEE4; border-radius: 10px;
}
.btns [id*="nav"],
.btns [id*="fav"],
.btns [id*="set"],
.btns [id*="mail"],
.btns [id*="search"] { position: absolute; top: -9999px; left: -9999px;
}
.btns [class*="nav"],
.btns [class*="fav"],
.btns [class*="set"],
.btns [class*="mail"],
.btns [class*="search"] { -webkit-transition: opacity 300ms; transition: opacity 300ms; opacity: 0; float: left; width: 100%; margin-right: -100%; border-radius: 0 0 2px 2px/0 0 2px 2px; -webkit-transition: all .2s ease-in; transition: all .2s ease-in;
}
.btns [id*="nav"]:checked ~ .content [class*="nav"],
.btns [id*="fav"]:checked ~ .content [class*="fav"],
.btns [id*="set"]:checked ~ .content [class*="set"],
.btns [id*="mail"]:checked ~ .content [class*="mail"],
.btns [id*="search"]:checked ~ .content [class*="search"] { opacity: 1; position: relative; z-index: 10; background: #FFFEE4; height: 20rem; min-height: 20rem;
}
.btns [id*="nav"]:checked ~ .tabs [for*="nav"],
.btns [id*="fav"]:checked ~ .tabs [for*="fav"],
.btns [id*="set"]:checked ~ .tabs [for*="set"],
.btns [id*="mail"]:checked ~ .tabs [for*="mail"],
.btns [id*="search"]:checked ~ .tabs [for*="search"] { background: none; background: #FFFEE4; color: #607779; font-weight: bold;
}
:not(.snote)::-webkit-input-placeholder { padding-left: 1rem; color: #607779; font-weight: bold;
}
:not(.snote):-moz-placeholder { /* Firefox 18- */ padding-left: 1rem; color: #607779;
}
:not(.snote)::-moz-placeholder { /* Firefox 19+ */ padding-left: 1rem; color: #607779;
}
:not(.snote):-ms-input-placeholder { padding-left: 1rem; color: #607779;
}
/**calendar**/
.calendar-wrapper { width: 22em; margin: 2em auto 0; padding: 2em; border: 1px solid #dcdcff; border-radius: 5px; background: #FFFEE4; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2);
}
table { clear: both; width: 100%; border: none; border-radius: 3px; border-collapse: collapse; color: #444;
}
table td { height: 48px; text-align: center; vertical-align: middle; border: none; width: calc(100%/7);
}
table td.not-today { color: #c0c0c0;
}
table td.today { font-weight: 700; color: #FEFEFE; font-size: 1.5em; background: #F25036; border-radius: 3px;
}
thead td { border: none; color: #FFFEE4; text-transform: uppercase; font-size: 1.5em; background: #607779;
}
#btnPrev { float: left; margin-bottom: 20px;
}
#btnPrev:before { content: '\f104'; font-family: FontAwesome; padding-right: 4px;
}
#btnNext { float: right; margin-bottom: 20px;
}
#btnNext:after { content: '\f105'; font-family: FontAwesome; padding-left: 4px;
}
#btnPrev,
#btnNext { background: transparent; border: none; outline: none; font-size: 1em; color: #c0c0c0; cursor: pointer; text-transform: uppercase; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
#btnPrev:hover,
#btnNext:hover { color: #28283b; font-weight: bold;
}
/**calculator**/
.calc-wrap #calc { margin: 2em auto 0; width: 22em; height: auto; padding: 20px 20px 9px; background: #FFFEE4; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2); border-radius: 3px;
}
.calc-wrap #calc .top span.clear { float: left;
}
.calc-wrap #calc .top .result { height: 40px; width: 212px; float: right; padding: 0 10px; background: #607779; border-radius: 3px; box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2); font-size: 17px; line-height: 40px; color: #FFFEE4; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); text-align: right; letter-spacing: 1px;
}
.calc-wrap #calc .keys, .calc-wrap #calc .top { overflow: hidden;
}
.keys span, .top span.clear { float: left; top: 0; cursor: pointer; width: 5rem; height: 3rem; font-size: 1.2em; font-weight: bold; background: #FFF; border-radius: 3px; margin: 0 9px 11px 0; color: #607779; line-height: 3rem; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.keys span:hover, .top span.clear:hover { background: #91B7BA; color: #FFFEE4;
}
.keys span.op { background: #607779; margin-right: 0; font-size: 2em; color: #FFFEE4;
}
.keys span.op.mult { font-size: 1.3em;
}
.keys span.eval { font-size: 2em; background: #FEFBAF;
}
.keys span.eval:hover { background: #91B7BA; color: #FFFEE4;
}
.top span.clear { background: #F25036; color: #FFFEE4;
}
/**sticky**/
.sticky { width: 22em; display: block; margin: 2em auto 0;
}
.sticky .note { background: #FFFEE4; width: 100%; margin: 0; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2); border-bottom: 2rem solid #607779;
}
.sticky .note .head { background: #607779; height: 4rem; color: #FFFEE4; text-align: center; line-height: 4rem; font-size: 1.2rem; font-weight: bold;
}
.sticky .note .content { margin-top: 0;
}
.sticky .note .content textarea[name="note"] { width: 100%; padding: 1em; min-height: 100%; background: #FFFEE4; color: #607779; border: none;
}
.sticky .note .title { width: 100%;
}
.sticky .note .title input[name="title"] { height: 2.5em; width: 100%; border: none; border-bottom: .8rem solid #F25036; text-align: center; outline: none; font-weight: bold; font-size: 1.2em; color: #607779;
}
/**clock**/
.clock { width: 22em; height: 10rem; text-align: center; margin: 2rem auto 0; background: #FFFEE4; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2);
}
.clock span { font-size: 2rem; font-weight: bold; line-height: 10rem;
}
.clock span#time { background: #607779; color: #FFFEE4; padding: 2rem 4rem;
}
.clock span#ampm { background: #F25036; padding: 2rem; margin-left: -1.1rem; color: #FFFEE4; border-left: 1px solid #91B7BA;
}
.opts { width: 22em; height: 5rem; text-align: center; margin: -1.9rem auto 0; background: #FFFEE4; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2);
}
.opts button { font-size: 3rem; font-weight: bold; line-height: 1em; border: none;
}
.opts button#setting { width: 14.5rem; color: #FFFEE4; background: #F25036; border-top: 1px solid #91B7BA;
}
.opts button#alrm { margin-left: -.56rem; width: 6.75rem; background: #607779; color: #FFFEE4; border-top: 1px solid #91B7BA; border-left: 1px solid #91B7BA;
}
/**chat**/
.chat-container { width: 22em; margin: 2rem auto 0; border-bottom: 2rem solid #607779; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2);
}
.chat-container .header { width: 100%; padding: 2rem auto; background: #607779; color: #FFFEE4; text-align: center;
}
.chat-container .header h2 { font-size: 1.2rem; line-height: 2rem; display: inline-block;
}
.chat-box, .enter { width: 100%; background: #FFFEE4; padding: 0 20px; color: #607779;
}
.chat-box .message-box { padding: 18px 0 10px; clear: both;
}
.message-box .picture { float: left; width: 50px; display: block; padding-right: 10px;
}
.picture img { width: 43px; height: 48px; border-radius: 5px;
}
.picture span { font-weight: bold; font-size: 12px; clear: both; display: block; text-align: center; margin-top: 3px;
}
.message { margin-top: 1rem; background: #91B7BA; display: inline-block; padding: 13px; width: 274px; border-radius: 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); position: relative; color: #FFFEE4;
}
.message:before { content: ""; position: absolute; display: block; left: 0; border-right: 8px solid #91B7BA; border-top: 6px solid transparent; border-bottom: 6px solid transparent; top: 10px; margin-left: -6px;
}
.message span { color: #607779; font-weight: bold;
}
.message-box.right .picture { float: right; padding: 0; padding-left: 10px;
}
.message-box.right .picture img { float: right;
}
.message-box.right .message:before { left: 100%; margin-right: 6px; margin-left: 0; border-right: 6px solid transparent; border-left: 6px solid #91B7BA; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.enter { padding: 13px 0px;
}
.enter input { border: none; padding: 10px 12px; background: #D3D3D3; width: 260px; border-radius: 2px; box-shadow: inset 0px 4px rgba(0, 0, 0, 0.1); margin-bottom: 1rem;
}
.enter a.send { padding: 10px 15px; background: #F25036; border-radius: 3px; float: right; text-decoration: none; color: #FFFEE4; font-weight: bold;
}
/**todo**/
.todo-container { background: #607779; max-width: 22em; width: 100%; display: table; margin: 2rem auto 0; margin-top: 40px; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2); border-top: 1rem solid #607779; color: #607779;
}
.todo-container input { border: none; display: block; width: 22em; line-height: 1.5; padding: 8px 0 8px 10px; border-bottom: 1px solid #91B7BA; outline: 0;
}
.todo-container h1, .todo-container h2 { text-align: center; margin-bottom: 0px;
}
.todo-container h2 { color: #FFFEE4; background: #607779; height: 2rem; margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.5rem;
}
.todo-container ul { list-style: none; margin: 0; padding: 0; background: #FFFEE4;
}
.todo-container ul li { color: #607779; font-weight: 400; border-bottom: 1px solid #607779; line-height: 1.5; padding: 8px 0;
}
.todo-container ul li:before { content: "\25A1"; padding: 10px 10px; font-size: 20px;
}
.todo-container ul li:hover { text-decoration: line-through; color: #F25036; cursor: pointer;
}
.todo-container ul li:last-child { border-bottom: none;
}
.todo-container .checked { color: #F25036;
}
.todo-container .checked:before { content: "\2713"; padding: 10px 10px; font-size: 20px;
}
.todo-container .checked:hover { text-decoration: none;
}
.todo-container .checked:hover:after { float: right; margin-right: 1rem; content: "(delete task)"; color: #F25036; text-align: right;
}
.todo-container #clear { margin: .4rem .5rem .2rem 0; border: none; padding: .7rem 1.2rem; background: #91B7BA; border-radius: 3px; float: right; color: #FFFEE4; font-weight: bold;
}
/**player**/
.player { max-width: 22em; margin: 2rem auto 0; background: #FFFEE4; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2);
}
.player img { display: block; max-width: 22em; border-bottom: 2rem solid #607779;
}
.player .body { width: 22em; background: #FFFEE4; overflow: hidden;
}
.player .body .left { padding: 10px 30px; float: left;
}
.player .body .left h1 { font-size: 1.5em; color: #607779;
}
.player .body .left h2 { margin: 5px 0 10px; color: #607779;
}
.player .body .left h2 .act { color: #F25036;
}
.player .cntrl { width: 100%; text-align: center; border-bottom: 1rem solid;
}
.player .cntrl button { border: none; background: transparent; color: #F25036; padding: 1rem; font-size: 4rem; border: 0;
}
.pbar, .progress { height: 8px; width: 100%; margin-bottom: 1rem; padding-top: 1px; background-color: #26262d; border-bottom: 1px solid #1f1f21; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1); position: relative;
}
.pbar p, .progress p { float: right; font-weight: bold; margin-right: 1rem; font-size: .8rem;
}
.progress .progress-bar { display: block; overflow: hidden; position: relative; height: 100%; margin-left: 1px; border-radius: 7px; min-width: 13px;
}
.progress .progress-bar :after { content: ""; display: block; position: absolute; background-color: rgba(0, 0, 0, 0.2); width: 6px; height: 6px; top: 4px; right: 4px; border-radius: 3px; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.5);
}
.shade { position: absolute; top: 0; left: 0; width: 70%; height: 100%; display: block;
}
.warm { background: #F25036; background: -webkit-linear-gradient(left, #F25036 30%, #FF9900 100%); background: linear-gradient(to right, #F25036 30%, #FF9900 100%);
}
/**weather**/
.weather { width: 22em; margin: 2rem auto 0; background: #FFFEE4; box-shadow: 2px 5px 6px 0 rgba(0, 0, 0, 0.2); padding: .3rem 1rem 0;
}
.weather span { font-size: 2rem; font-weight: bold; line-height: 10rem;
}
.weather span#tem { background: #607779; color: #FFFEE4; padding: 2rem 1.5rem; margin-left: -1rem;
}
.weather span#wea { background: #F25036; padding: 2rem 3rem; margin-left: -1rem; color: #FFFEE4;
}
.weather span#dn { background: #91B7BA; padding: 2rem 2.9rem; color: #FFFEE4; margin-left: .25rem;
}
.social { width: 22em; height: 11rem; margin: 2rem auto 0; background: #FFFEE4; border-bottom: 1rem solid #607779; box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.2);
}
.social h2 { background: #607779; border-bottom: 1rem solid #F25036; height: 5rem; text-align: center; color: #FFFEE4; line-height: 4rem; font-size: 1.2rem;
}
.social span { background: #FFFEE4; display: block; float: left; width: calc(100% / 7); height: 4rem; padding: 0 2px 1rem 0; text-align: center; cursor: pointer; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding-bottom: 3rem;
}
.social span i { display: inline-block; font: 4rem serif; line-height: 1.5rem; color: #91B7BA; -webkit-transition: all .2s ease; transition: all .2s ease;
}
.social span i:hover { color: #607779;
}
/**contacts**/
.contacts { background: #607779; width: 22em; height: 20em; max-height: 40em; overflow-y: scroll; overflow-x: hidden; margin: 2rem auto 0; border-bottom: 1rem solid #607779; box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.2); cursor: move;
}
.contacts::-webkit-scrollbar-track { background-color: #E9E9E9;
}
.contacts::-webkit-scrollbar { width: 10px; background-color: #E9E9E9; border-radius: 5px;
}
.contacts::-webkit-scrollbar-thumb { border-radius: 10px; background-image: #E9E9E9; border-radius: 5px;
}
.contacts header { background: #607779; color: #FFFEE4; height: 3rem; font-size: 1.2rem; width: 100%; text-align: center;
}
.contacts .icons { width: 100%; height: 3rem; color: #FFFEE4; background: #F25036; line-height: 3rem;
}
.contacts .icons span { text-align: right; width: calc(100% / 5); width: 100%; padding: 1rem 1.5rem; font-size: 1.3rem;
}
.contacts .contact-list { color: #FFFEE4; list-style: none; padding: 0; margin: 0; font-size: 1rem;
}
.contacts .contact-list li { border-top: 1px solid #607779; padding: 0px; color: #607779; background: #FFFEE4; font-weight: bold;
}
.contacts .contact-list li:last-child { border-bottom: 1px solid #607779;
}
.contacts .contact-list li:nth-child(even) { background: #91B7BA;
}
.contacts .contact-list .name { margin-left: 14px; border-right: 1px solid #607779; width: 8em; line-height: 2rem; display: inline-block; padding: 1em .5em;
}
.contacts .contact-list .info { color: #607779; display: inline-block; margin-left: 12px;
}
/**file upload**/
.file { background: #FFFEE4; width: 22em; height: 7rem; margin: 2rem auto 0; border-bottom: 1rem solid #607779; box-shadow: 2px 8px 8px -5px rgba(0, 0, 0, 0.2); text-align: center;
}
.file input { margin: 2rem 0 auto; padding: 0; font-size: 0.85em; outline: none; height: 40px; width: 12rem; background: #607779; border-radius: 3px; box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2); font-size: 1.2rem; line-height: 1.5rem; color: #FFFEE4;
}
.file input[type="file"] { margin-left: -7.5rem; -moz-appearance: none; appearance: none; -webkit-appearance: none; padding: 0;
}
.file input[type="file"]:after { content: 'Upload File'; margin: 0 0 0 0.5em; display: inline-block; left: 100%; position: relative; padding: 0.43em .7em; background: #F25036; border-radius: 3px; cursor: pointer;
}
.file input[type="file"]::-webkit-file-upload-button, .file input[type="file"] file-upload-button { width: 0; padding: 0; margin: 0; appearance: none; -webkit-appearance: none; border: none;
}

Widgets - Script Codes JS Codes

var $ = function(id) { return document.getElementById(id);
};
/****clock*****/
function numPad0(str) { var cStr = str.toString(); if (cStr.length < 2) str = 0 + cStr; return str;
}
var t = setInterval('time()', 50);
function time() { var currDate = new Date(); var currSec = currDate.getSeconds(); var currMin = currDate.getMinutes(); var curr24Hr = currDate.getHours(); var ampm = curr24Hr >= 12 ? 'pm' : 'am'; currHr = curr24Hr % 12; currHr = currHr ? currHr : 12; var sttime = currHr + ':' + numPad0(currMin) + ':' + numPad0(currSec); if(curr24Hr>=5 && curr24Hr<=17)$('dn').innerHTML = "
Widgets - Script Codes
Widgets - Script Codes
Home Page Home
Developer Tiffany Rayside
Username tmrDevelops
Uploaded September 09, 2022
Rating 4.5
Size 13,771 Kb
Views 26,312
Do you need developer help for Widgets?

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!

Tiffany Rayside (tmrDevelops) Script Codes
Name
Responsive Image Blog
Jiggle
Old School Script Relay
Organizer
Liquid Lights
InterCosmic
Moirai
Fractal Cell
Transference
BloodClot Red
Create amazing sales emails 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!