Bio
B'log
Research
Teaching

Difference between revisions of "Web Elements"
(→‎Typography)
(→‎Elements)
 
(39 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
−
==Typography==
+
===Test Objects===
 +
* [[Testing]]
 +
* [[Mainpage-Sandbox]]
  
−
{| width="100%" |
+
<hr class="stylish2">
−
| width="50%" |
 
−
'''CURRENT'''<br>
 
−
<abbr>I18N</abbr> abbr<br>
 
−
<strong>Bold</strong> bold<br>
 
−
<cite>Citation</cite> cite<br>
 
−
<code>Hello World!</code> code<br>
 
−
<del>Deleted</del> del<br>
 
−
<em>Emphasis</em> em<br>
 
−
<i>Italic</i> i<br>
 
−
<ins>Inserted</ins> ins<br>
 
−
<kbd>Ctrl + S</kbd> kbd<br>
 
−
<mark>Highlighted</mark> mark<br>
 
−
<s>Strikethrough</s> s<br>
 
−
<samp>Sample</samp> samp<br>
 
−
Text <sub>Subscripted</sub> sub<br>
 
−
Text <sup>Superscripted</sup> sup<br>
 
−
<time>20:00</time> time<br>
 
−
<u>Underline</u> u<br>
 
−
<var>x = y + 2</var> var
 
−
|
 
  
−
|}
+
===Elements===
 +
* [[Dashboard]]
 +
* [[Web Element: Article]]
 +
* [[Web Element: Blog Post List Item]]
 +
* [[Web Element: Dashboard Box]]
 +
* [[Web Element: Data]]
 +
* [[Web Element: Download Box]]
 +
* [[Web Element: Google Chart]]
 +
* [[Web Element: Image]]
 +
* [[Web Element: Margin Note]]
 +
* [[Web Element: Math]]
 +
* [[Web Element: People Info]]
 +
* [[Web Element: Research Box]]
 +
* [[Web Element: Section]]
 +
* [[Web Element: Syntax Highlight]]
 +
* [[Web element: Table]]
 +
* [[Web Element: Timeline]]
 +
* [[Web Element: Typography]]
 +
* [[Web Element: Map]]
 +
* [[Web Element: Vega Lite]]
 +
* [[Web Element: D3.js]]
  
−
===Syntax Highlight===
+
<hr class="stylish2">
  
−
<syntaxhighlight lang="Python" line='line'>
+
===The Color===
−
def quickSort(arr):
 
−
less = []
 
−
pivotList = []
 
−
more = []
 
−
if len(arr) <= 1:
 
−
return arr
 
−
else:
 
−
pass
 
−
</syntaxhighlight>
 
  
−
===Download Box===
+
* .is-my-red {color: #bf360c;} <span class="is-my-red">SAMPLE</span>
−
 
+
* .is-your-red {color: #870000;} <span class="is-your-red">SAMPLE</span>
−
<html>
+
* For more: [https://material.io/tools/color/#!/?view.left=1&view.right=0&primary.color=BF360C Google Colors]
−
<div class="" style="background:#f9f9f9;padding:10px;border-left:2px #999 solid; margin-bottom:20px;">
 
−
<a href="#"><div class="" style="float:right;"><i class="fa fa-download" aria-hidden="true" style="margin-top: 10px;margin-left: 0px;font-size: 150%;"></i></div></a>
 
−
<div class="" style="float:left;"><i class="fa fa-file-pdf-o" aria-hidden="true" style="margin-top: 10px;margin-left: 0px;font-size: 150%;"></i></div>
 
−
<div class="" style="margin-left: 30px;"><span class="tk-futura-pt">spectre-docs.pdf</span></div>
 
−
<div class="" style="margin-left: 30px;color:#999;font-size:80%;margin-top:-7px;"><span class="is-small tk-futura-pt">14MB&#8226;Public&#8226;1 Jan, 2017</span></div>
 
−
</div>
 
−
 
 
−
<div class="" style="background:#f9f9f9;padding:10px;border-left:2px #999 solid; margin-bottom:20px;">
 
−
<a href="#"><div class="" style="float:right;"><i class="fa fa-download" aria-hidden="true" style="margin-top: 10px;margin-left: 0px;font-size: 150%;"></i></div></a>
 
−
<div class="" style="float:left;"><i class="fa fa-file-excel-o" aria-hidden="true" style="margin-top: 10px;margin-left: 0px;font-size: 150%;"></i></div>
 
−
<div class="" style="margin-left: 30px;"><span class="tk-futura-pt">another-doc.xls</span></div>
 
−
<div class="" style="margin-left: 30px;color:#999;font-size:80%;margin-top:-7px;"><span class="is-small tk-futura-pt">11MB&#8226;Private&#8226;1 Jan, 2019</span></div>
 
−
</div>
 
−
</html>
 
−
 
 
−
===People Info===
 
−
 
 
−
<html>
 
−
<div class="" style="width:100%;background:#f9f9f9;padding:10px;border-left:2px #999 solid;">
 
−
<a href="https://en.wikipedia.org/wiki/Charles_Darwin" target="_blank"><div class="" style="float:right;"><i class="fa fa-external-link" aria-hidden="true" style="margin-top: 10px;margin-left: 0px;font-size: 150%;"></i></div></a>
 
−
<div class="" style="float:left;"><i class="fa fa-male" aria-hidden="true" style="margin-top: 10px;margin-left: 0px;font-size: 150%;"></i></div>
 
−
<div class="" style="margin-left: 30px;"><span class="tk-futura-pt">Charles Darwin</span></div>
 
−
<div class="" style="margin-left: 30px;color:#999;font-size:80%;margin-top:-7px;"><span class="is-small tk-futura-pt">Naturalist, Geologist, Biologist&#8226;1809-1882</span></div>
 
−
</div>
 
−
<br>
 
−
<div class="" style="width:100%;background:#f9f9f9;padding:10px;border-left:2px #999 solid;">
 
−
<a href="#"><div class="" style="float:right;"><i class="fa fa-external-link" aria-hidden="true" style="margin-top: 10px;margin-left: 0px;font-size: 150%;"></i></div></a>
 
−
<div class="" style="float:left;"><i class="fa fa-female" aria-hidden="true" style="margin-top: 10px;margin-left: 0px;font-size: 150%;"></i></div>
 
−
<div class="" style="margin-left: 30px;"><span class="tk-futura-pt">Jane Doe</span></div>
 
−
<div class="" style="margin-left: 30px;color:#999;font-size:80%;margin-top:-7px;"><span class="is-small tk-futura-pt">Opportunist&#8226;1981-</span></div>
 
−
</div>
 
−
 
 
−
</html>
 
−
 
 
−
===Box===
 
−
 
 
−
{{Template:Box|1512|ESOLANG|Weird Computer Programming Language Codex|box}}
 
−
 
 
−
{{Template:Box|1705|GRV|Gravity Model}}
 
−
 
 
−
===Blog Post List===
 
−
<html>
 
−
<div class="columns" style="max-height:151px;">
 
−
<div class="column is-one-fifth"><span class="is-small tk-futura-pt" style="color:#999;font-size:80%;">August 18, 2019</span></div>
 
−
<div class="column">
 
−
<div class="category"><span class="tk-futura-pt" style="font-size:80%;">LOGBOOK</span></div>
 
−
<h5 style="margin-top: 0px; font-weight: bold;">The Met Reviews Items It Received From a Dealer, Now a Looting Suspect</h5>
 
−
<p style="margin-top: -10px;line-height:1.2;">The Metropolitan Museum of Art is studying the Indian artifacts it holds that track back to a man accused of running a major antiquities smuggling ring.</p></div>
 
−
<div class="column is-one-quarter"><img src="https://static01.nyt.com/images/2019/08/19/arts/18metindia1/18metindia1-mediumThreeByTwo210.jpg?quality=100&auto=webp"/></div>
 
−
</div>
 
−
<hr>
 
−
<div class="columns" style="max-height:151px;">
 
−
<div class="column is-one-fifth"><span class="is-small tk-futura-pt" style="color:#999;font-size:80%;">August 18, 2019</span></div>
 
−
<div class="column">
 
−
<div class="category"><span class="tk-futura-pt" style="font-size:80%;">RESEARCH</span></div>
 
−
<h5 style="margin-top: 0px; font-weight: bold;">The Met Reviews Items It Received From a Dealer, Now a Looting Suspect</h5>
 
−
<p style="margin-top: -10px;line-height:1.2;">The Metropolitan Museum of Art is studying the Indian artifacts it holds that track back to a man accused of running a major antiquities smuggling ring.</p></div>
 
−
<div class="column is-one-quarter"><img src="https://static01.nyt.com/images/2019/08/19/arts/18metindia1/18metindia1-mediumThreeByTwo210.jpg?quality=100&auto=webp"/></div>
 
−
</div>
 
−
<hr>
 
−
</html>
 

Latest revision as of 06:38, 12 November 2020

Test Objects

Elements

The Color

  • .is-my-red {color: #bf360c;} SAMPLE
  • .is-your-red {color: #870000;} SAMPLE
  • For more: Google Colors
Retrieved from "https://hkilter.com/index.php?title=Web_Elements&oldid=2188"

hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

© 2020 H. K. Ilter