(7 intermediate revisions by the same user not shown) | |||
Line 92: | Line 92: | ||
<!-- Page section (copy & paste for a new section) --> | <!-- Page section (copy & paste for a new section) --> | ||
+ | <div> | ||
<div class="row"> | <div class="row"> | ||
<div class="col-lg-12"> | <div class="col-lg-12"> | ||
Line 166: | Line 167: | ||
<!-- Text for the page section goes below --> | <!-- Text for the page section goes below --> | ||
− | |||
− | <!-- Always put text in a 'p' tag --> | + | |
+ | <!-- use h1, h2, h3, h4, h5, or h6 tags for headings. h1 is the biggest and should be used for titles, h6 is the smallest --> | ||
+ | <h3> Heading Three </h3> | ||
+ | |||
+ | <!-- Always put normal text in a 'p' tag --> | ||
<p> | <p> | ||
Line 174: | Line 178: | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </b> | Lorem ipsum dolor sit amet, consectetur adipisicing elit. <b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </b> | ||
− | <!-- < | + | <!-- <br /> makes a line break (i.e. starts a new line) --> |
− | < | + | <br /> |
<!-- The word 'amet' is in italics and the word 'elit' is underlined --> | <!-- The word 'amet' is in italics and the word 'elit' is underlined --> | ||
Line 181: | Line 185: | ||
</p> | </p> | ||
+ | |||
+ | <!-- The heading below is centred in the middle of the page - note the the word centre MUST be spelt using the American spelling (i.e. center) --> | ||
+ | <h4 style="text-align:center;"> Heading Four </h4> | ||
<!-- The next paragraph of text is all blue --> | <!-- The next paragraph of text is all blue --> | ||
<p style="color: blue"> | <p style="color: blue"> | ||
+ | |||
The brown fox jumped over the lazy dog. | The brown fox jumped over the lazy dog. | ||
</p> | </p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <!-- Page section (copy & paste for a new section) --> | ||
+ | <div style="background-color:gray"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | |||
+ | <!-- Page section title --> | ||
+ | <h3>Latest Features</h3> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Row of images --> | ||
+ | <div class="row text-center"> | ||
+ | |||
+ | <!-- Image box 1 --> | ||
+ | <div class="col-md-3 col-sm-6 hero-feature"> | ||
+ | <div class="thumbnail"> | ||
+ | <!-- The URL of the uploaded image goes in the src field --> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/c/c4/T--Newcastle--wikisplashpage.png" alt=""> | ||
+ | |||
+ | <!-- Image caption goes here --> | ||
+ | <div class="caption"> | ||
+ | <h3>Feature Label</h3> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | ||
+ | <p> | ||
+ | |||
+ | <!-- Buttons which do stuff go here - note that the buttons currently do nothing --> | ||
+ | <a href="#" class="btn btn-primary">Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Image boxes 2-4 are below --> | ||
+ | |||
+ | <div class="col-md-3 col-sm-6 hero-feature"> | ||
+ | <div class="thumbnail"> | ||
+ | <img src="http://placehold.it/800x500" alt=""> | ||
+ | <div class="caption"> | ||
+ | <h3>Feature Label</h3> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | ||
+ | <p> | ||
+ | <a href="#" class="btn btn-primary">Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="col-md-3 col-sm-6 hero-feature"> | ||
+ | <div class="thumbnail"> | ||
+ | <img src="http://placehold.it/800x500" alt=""> | ||
+ | <div class="caption"> | ||
+ | <h3>Feature Label</h3> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | ||
+ | <p> | ||
+ | <a href="#" class="btn btn-primary">Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="col-md-3 col-sm-6 hero-feature"> | ||
+ | <div class="thumbnail"> | ||
+ | <img src="http://placehold.it/800x500" alt=""> | ||
+ | <div class="caption"> | ||
+ | <h3>Feature Label</h3> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | ||
+ | <p> | ||
+ | <a href="#" class="btn btn-primary">Buy Now!</a> <a href="#" class="btn btn-default">More Info</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <!-- Text for the page section goes below --> | ||
+ | |||
+ | |||
+ | <!-- use h1, h2, h3, h4, h5, or h6 tags for headings. h1 is the biggest and should be used for titles, h6 is the smallest --> | ||
+ | <h3> Heading Three </h3> | ||
+ | |||
+ | <!-- Always put normal text in a 'p' tag --> | ||
+ | <p> | ||
+ | |||
+ | <!-- The second sentence is in bold --> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit. <b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </b> | ||
+ | |||
+ | <!-- <br /> makes a line break (i.e. starts a new line) --> | ||
+ | <br /> | ||
+ | |||
+ | <!-- The word 'amet' is in italics and the word 'elit' is underlined --> | ||
+ | Lorem ipsum dolor sit <i>amet</i>, consectetur adipisicing <u> elit. </u> | ||
+ | |||
+ | </p> | ||
+ | |||
+ | <!-- The heading below is centred in the middle of the page - note the the word centre MUST be spelt using the American spelling (i.e. center) --> | ||
+ | <h4 style="text-align:center;"> Heading Four </h4> | ||
+ | |||
+ | <!-- The next paragraph of text is all blue --> | ||
+ | <p style="color: blue"> | ||
+ | |||
+ | The brown fox jumped over the lazy dog. | ||
+ | </p> | ||
+ | |||
+ | </div> | ||
<hr> | <hr> |
Latest revision as of 16:24, 3 May 2017
Our wiki is currently under construction, please bear with us while we make it functional
A Warm Welcome!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.
Latest Features
Heading Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Heading Four
The brown fox jumped over the lazy dog.
Latest Features
Heading Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Heading Four
The brown fox jumped over the lazy dog.