Difference between revisions of "Team:Santa Clara/The Problem"

(Created page with "{{Santa_Clara/CSS}} <html> <h1> The Problem </h1> <p> This is where I will talk about the problem that we are trying to address </ul> </p> </div></div> </html>")
 
Line 1: Line 1:
−
{{Santa_Clara/CSS}}
+
{{Santa_Clara/Head}}
  
−
<html>
+
<html>
  
−
<h1> The Problem </h1>
+
<div class="container-fluid">
−
<p> This is where I will talk about the problem that we are trying to address
+
    <p>
−
</ul>
+
    This is an example of a two-column using the convenient Bootstrap grid system (you can read about it on w3schools).<br/>
 +
        You can add multiple rows for displaying diffent content (or we can use an accordion system that you see on the Notebook page).<br/>
 +
Note that the columns can be of equal width (as seen in the first row) or of different widths (as seen in the second row).<br/>
 +
        Also, no styling has been applied yet (text/image centering, background colors, etc). This will be added soon.
 +
</p>
 +
    <div class="row">
 +
<div class="col-md-6">
 +
        <img alt="Sample Image 1" src="http://i.imgur.com/I86rTVl.jpg"/>
 +
            <p>Some text can go below the image (like a caption).</p>
 +
        </div>
 +
        <div class="col-md-6">
 +
        <h1>Header for second column</h1>
 +
        <p>The second column is a great place for more text!</p>
 +
        </div>
 +
</div>
 +
    <hr/>
 +
    <div class="row">
 +
<div class="col-md-4">
 +
        <h1>Header for first column</h1>
 +
        <p>
 +
            You can also alternate the images and text between the columns to create a pleasant visual effect.<br/>
 +
                Here, the text is in the first column and the image is in the second column.
 +
            </p>
 +
        </div>
 +
        <div class="col-md-8">
 +
        <img alt="Sample Image 2" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg"/>
 +
            <p>Text below second image.</p>
 +
        </div>
 +
</div>
 +
    <hr/>
 +
    <div class="row">
 +
    <div class="col-md-12">
 +
            <img alt="Sample Image 3" src="http://237086123396332840.weebly.com/uploads/4/0/0/3/40031137/6296439_orig.png"/>
 +
            <p>Of course, you can still use the traditional one-column format.</p>
 +
        </div>
 +
    </div>
 +
</div>
  
−
</p>
 
−
 
−
</div></div>
 
 
</html>
 
</html>
 +
 +
{{Santa_Clara/Tail}}

Revision as of 05:51, 14 September 2015

Santa Clara Template for iGEM wiki site

This is an example of a two-column using the convenient Bootstrap grid system (you can read about it on w3schools).
You can add multiple rows for displaying diffent content (or we can use an accordion system that you see on the Notebook page).
Note that the columns can be of equal width (as seen in the first row) or of different widths (as seen in the second row).
Also, no styling has been applied yet (text/image centering, background colors, etc). This will be added soon.

Sample Image 1

Some text can go below the image (like a caption).

Header for second column

The second column is a great place for more text!

Header for first column

You can also alternate the images and text between the columns to create a pleasant visual effect.
Here, the text is in the first column and the image is in the second column.

Sample Image 2

Text below second image.

Sample Image 3

Of course, you can still use the traditional one-column format.