Difference between revisions of "Team:Toronto/Testing"

Line 1: Line 1:
−
{{Toronto}}
 
−
 
 
<html>
 
<html>
  
  
−
This page is used to test code. If you are not a part of iGEM Toronto's web development team, please ignore.
+
.contenedor
−
 
+
form
−
 
+
- var pageTitle=['Home', 'Features', 'Adding pages', '+More', 'About', 'Dummy page', 'Dummy page'] //Add pages by adding title here
−
<img src="http://i.imgur.com/RDrhpJB.jpg">
+
- var content = [
−
 
+
- 'Pure CSS One page Vertical navigation',
−
<img id="nugget" src="http://i.imgur.com/vIXgCDc.png">
+
- 'two',
−
 
+
- 'three',
−
<div id="menutest">
+
- 'four',
−
<a href="https://2016.igem.org/Team:Toronto/Description">
+
- 'five'
−
<div class="testtext">
+
- ]
−
<p> Project </p>
+
- for( var n = 0; n < pageTitle.length; n++)
−
</div>
+
if n==0
−
</a>
+
input(type="radio" id="Slide1" name="slider" titulo=""+pageTitle[0] autofocus checked)
−
 
+
else
−
<a href="https://2016.igem.org/Team:Toronto/Team">
+
input(type="radio" id="Slide"+[n+1] name="slider" titulo=""+pageTitle[n])
−
<div class="testtext">
+
−
<p> Team </p>
+
.labels
−
</div>
+
- for( var n = 0; n < pageTitle.length; n++ )
−
</a>
+
if n==0
−
 
+
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
−
<a href="https://2016.igem.org/Team:Toronto/Notebook">
+
.content: h1 <strong>Pure CSS</strong> one page vertical navigation
−
<div class="testtext">
+
.icon
−
<p> Notebook </p>
+
span: img(src="http://codecase.work/codepen/keyboard-icon.png")
−
</div>
+
span Use keyboard
−
</a>
+
else if n==1
−
 
+
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
−
<a href="https://2016.igem.org/Team:Toronto/Results">
+
.content
−
<div class="testtext">
+
h1 #{pageTitle[n]}
−
<p> Results </p>
+
.block
−
</div>
+
span
−
</a>
+
i.fa.fa-hashtag
−
 
+
br
−
<a href="https://2016.igem.org/Team:Toronto/Human_Practices">
+
| <strong>No JS</strong>
−
<div class="testtext">
+
br
−
<p> Human Practices </p>
+
| CSS Rules!
−
</div>
+
span
−
</a>
+
i.fa.fa-keyboard-o
−
 
+
br
−
</div>
+
| <strong>Keyboard navigation</strong>
 +
br
 +
| Yep, no kidding
 +
span
 +
i.fa.fa-bars
 +
br
 +
| <strong>Lateral menu</strong>
 +
span
 +
i.fa.fa-codepen
 +
br
 +
| <strong>Autogenerate pages</strong>
 +
br
 +
| Using Jade & SASS
 +
 +
else if n==2
 +
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
 +
.content
 +
h1 #{pageTitle[n]}
 +
.block: ol
 +
li Add the pages title in the pageTitle array in the HTML editor to generate pages
 +
li Add the number of pages in the $npages variable in the CSS editor
 +
else if n==3
 +
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
 +
.content
 +
h1 #{pageTitle[n]}
 +
.block
 +
span: a(href="http://codepen.io/hrtzt/pen/NPZKRN" target="_blank") One Page Navigation CSS Menu
 +
span: a(href="http://codepen.io/hrtzt/pen/YPoeWd" target="_blank") The simplest CSS switch
 +
span: a(href="http://codepen.io/hrtzt/pen/JdYaEZ" target="_blank") Animated cube slider CSS only
 +
span: a(href="http://codepen.io/hrtzt/pen/vGqEJO" target="_blank") Google photos album view with only CSS
 +
 +
else if n==4
 +
label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
 +
.content
 +
h1 #{pageTitle[n]}
 +
.block
 +
span
 +
a(href="https://dribbble.com/albertohartzet" target="_blank")
 +
i.fa.fa-dribbble 
 +
| Dribbble me
 +
span
 +
a(href="https://twitter.com/hrtzt" target="_blank")
 +
i.fa.fa-twitter
 +
| Tweet me
 +
 +
else
 +
label(for="Slide"+[n+1] id="Slide"+[n+1])
 +
.content
 +
h1 #{pageTitle[n]}
 +
.block Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis
 +
 +
  
 
</html>
 
</html>
  
−
{{Toronto/Javascript}}
+
{{Toronto/Testing}}

Revision as of 16:40, 22 August 2016

.contenedor form - var pageTitle=['Home', 'Features', 'Adding pages', '+More', 'About', 'Dummy page', 'Dummy page'] //Add pages by adding title here - var content = [ - 'Pure CSS One page Vertical navigation', - 'two', - 'three', - 'four', - 'five' - ] - for( var n = 0; n < pageTitle.length; n++) if n==0 input(type="radio" id="Slide1" name="slider" titulo=""+pageTitle[0] autofocus checked) else input(type="radio" id="Slide"+[n+1] name="slider" titulo=""+pageTitle[n]) .labels - for( var n = 0; n < pageTitle.length; n++ ) if n==0 label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide") .content: h1 Pure CSS one page vertical navigation .icon span: img(src="http://codecase.work/codepen/keyboard-icon.png") span Use keyboard else if n==1 label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide") .content h1 #{pageTitle[n]} .block span i.fa.fa-hashtag br | No JS br | CSS Rules! span i.fa.fa-keyboard-o br | Keyboard navigation br | Yep, no kidding span i.fa.fa-bars br | Lateral menu span i.fa.fa-codepen br | Autogenerate pages br | Using Jade & SASS else if n==2 label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide") .content h1 #{pageTitle[n]} .block: ol li Add the pages title in the pageTitle array in the HTML editor to generate pages li Add the number of pages in the $npages variable in the CSS editor else if n==3 label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide") .content h1 #{pageTitle[n]} .block span: a(href="http://codepen.io/hrtzt/pen/NPZKRN" target="_blank") One Page Navigation CSS Menu span: a(href="http://codepen.io/hrtzt/pen/YPoeWd" target="_blank") The simplest CSS switch span: a(href="http://codepen.io/hrtzt/pen/JdYaEZ" target="_blank") Animated cube slider CSS only span: a(href="http://codepen.io/hrtzt/pen/vGqEJO" target="_blank") Google photos album view with only CSS else if n==4 label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide") .content h1 #{pageTitle[n]} .block span a(href="https://dribbble.com/albertohartzet" target="_blank") i.fa.fa-dribbble | Dribbble me span a(href="https://twitter.com/hrtzt" target="_blank") i.fa.fa-twitter | Tweet me else label(for="Slide"+[n+1] id="Slide"+[n+1]) .content h1 #{pageTitle[n]} .block Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis