Difference between revisions of "Team:Stony Brook/Attributions"

Line 1: Line 1:
 
{{Stony_Brook}}
 
{{Stony_Brook}}
 
<html>
 
<html>
−
 
−
<div class= bulbasaur>
 
−
<img id=kidney src= 'https://static.igem.org/mediawiki/2015/1/19/Attributions2.png'>
 
−
<h2> Attributions</h2>
 
−
</div>
 
  
 
<style>
 
<style>
−
#mainContainer {
+
 
−
      width: 100%;}
+
                     
−
   .bulbasaur {
+
   .top {
 +
    position: absolute;
 +
    top: 10vh;
 
     margin-left: 40%;
 
     margin-left: 40%;
 
     margin-right: 40%;
 
     margin-right: 40%;
 
     width: 20%;
 
     width: 20%;
−
    padding-top: 20px;
 
 
     text-align: center;}
 
     text-align: center;}
 
   #kidney {
 
   #kidney {
 
     width: 100%;}
 
     width: 100%;}
 +
        .contentText{
 +
                                box-sizing: border-box;
 +
                                width: 57%;
 +
                                margin-right: 10%;
 +
                                font-size: 1.4em;
 +
                                display: inline-block;
 +
                                background: transparent;
 +
                                float: right;
 +
                                text-align: justify;
 +
                                padding-top: 30px;
 +
                        }
 +
 +
                        .contentText h1, h2, h3, h4, h5, h6 {
 +
                                text-align: center;
 +
                                font-weight: bold;
 +
                        }
 +
 +
                        .contentText ul li h3 {
 +
                                text-align: left;
 +
                                padding-top: 10px;
 +
                        }
 +
 +
                        .contentText ul li {
 +
                                padding-bottom: 25px;
 +
                        }
 +
 +
                        .contentText ul li ul {
 +
                                list-style: disc;
 +
                        }
 +
                        .contentImage {
 +
                                box-sizing: border-box;
 +
                                width: 30%;
 +
                                margin-left: 3%;
 +
                                clear: both;
 +
                                display: inline-block;
 +
                                background: transparent;
 +
                                height: 100vh;
 +
                        }
 +
 +
                        .section {
 +
                                height: 1%;
 +
                                overflow: hidden;
 +
                                background: transparent;
 +
                                padding-top: 25px;
 +
                                padding-bottom: 25px;
 +
                        }
 +
 +
                        .contentImage img {
 +
                                width: 100%;
 +
                                float: left;
 +
                                margin-top: 50%;
 +
                        }
 +
#t49 {
 +
                                width: 100%;
 +
                                float: left;
 +
                                text-align: center;
 +
                        }
 +
 +
                        #colMask {
 +
                                clear: both;
 +
                                float: left;
 +
                                width: 100%;
 +
                                overflow: hidden;
 +
                                background: transparent;
 +
                        }
 +
 +
                        #colLeft {
 +
                                float: left;
 +
                                width: 100%;
 +
                                position: relative;
 +
                                background: transparent;
 +
                        }
 +
 +
                        #splash {
 +
                                position: relative;
 +
                                opacity: 0.4;
 +
                                width: 100%;
 +
                               
 +
                        }
 +
 +
                        #contentContainer {
 +
                                height: 1%;
 +
                                overflow: hidden;
 +
                                background: white;
 +
                                width: 100%;
 +
                        }
 +
 +
                        #mainContainer, body, html, content {
 +
                                width: 100%; //was acting super weird without this suddenly, everything kept shrinking in width as you scrolled down
 +
                        }
 +
 +
                        #footer {
 +
                                float: left;
 +
                        }
 +
 +
                        .fix-image {
 +
                            position: fixed;
 +
                            top: 10px;
 +
                        }
 +
                        .image-after-fix {
 +
                            position: absolute;
 +
                            top: 0px;
 +
                        }
 +
                        .image-after-fix-2 {
 +
                            position: absolute;
 +
                            top: 0px;
 +
                        }
 +
                        .image-after-fix-3 {
 +
                            position: absolute;
 +
                            top: 0px;
 +
                        }
 +
                        .image-after-fix-4 {
 +
                            position: absolute;
 +
                            top: 0px;
 +
                        }
 +
 +
                        #cow {
 +
                            text-align: center;}
 +
 +
                        #leftscroll{
 +
                            position: absolute;
 +
                            top: 70vh;
 +
                            text-align: center;
 +
                            width: 15%;
 +
                            float: left;
 +
                            border: 1px solid black;
 +
                            border-radius: 10px;
 +
                            margin-left: 15%;
 +
                            background-color: #99C1FF;
 +
                            color: black;
 +
                            z-index: 2;}
 +
                        #middlescroll{
 +
                            position: absolute;
 +
                            top: 70vh;
 +
                            text-align: center;
 +
                            width: 15%;
 +
                            border: 1px solid black;
 +
                            border-radius: 10px;
 +
                            float: left;
 +
                            margin-left: 42%;
 +
                            background-color: #BFFFD4;}
 +
                        #rightscroll{
 +
                            position: absolute;
 +
                            top: 70vh;
 +
                            text-align: center;
 +
                            width: 15%;
 +
                            border: 1px solid black;
 +
                            border-radius: 10px;
 +
                            float: left;
 +
                            margin-left: 69%;
 +
                            margin-right: 15%;
 +
                            background-color: #FF8383;}
 +
 +
                       
 
</style>
 
</style>
  
 +
<div id=splash>
 +
            <img width=100% src="https://static.igem.org/mediawiki/2015/c/c4/SB_Campus_arial_view.jpg"></img>
 +
</div>
 +
 +
<div class= top>
 +
  <img id=kidney src= 'https://static.igem.org/mediawiki/2015/1/19/Attributions2.png'>
 +
<h2> Attributions</h2>
 +
</div>
 +
 +
 +
<div id= leftscroll> <h1><b><a href= #text1> Topic 1 </a></b></h1> </div>
 +
<div id= middlescroll> <h1><b><a href= #text2>Topic 2</a></b></h1> </div>
 +
<div id= rightscroll> <h1><b><a href= #text3> Topic 3</a></b></h1> </div>
 +
 +
 +
<div id=colMask>
 +
<div id=colLeft>
 +
                          <div class=section id=section1>
 +
                          <div class=contentImage id=pic1>
 +
                            <img src="https://static.igem.org/mediawiki/2015/8/8f/SBU_CircuitDesign2.png">
 +
<h3 id= t49> Subheading </h3>
 +
 +
                          </div>
 +
                          <div class=contentText id=text1>
 +
                            <h1>Template Heading</h1>
 +
                              <ul>
 +
                                <h5 id=cow>Topic 1</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                               
 +
                                <h5 id=cow>Topic 2</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                           
 +
                              <h5 id=cow>Topic 3</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                             
 +
                                <h5 id=cow>Topic 4</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                             
 +
                              <h5 id=cow>Topic 5</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                           
 +
                              <h5 id=cow>Topic 6</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                </ul>
 +
                       
 +
                          </div>
 +
                          </div>
 +
 +
                          <div class=section id=section2>
 +
                          <div class=contentImage id=pic2>
 +
                            <img src="https://static.igem.org/mediawiki/2015/c/c0/SBU_PeopleDesign2.png">
 +
<h3 id= t49> Subheading </h3>
 +
 +
                          </div>
 +
                          <div class=contentText id=text2>
 +
                         
 +
                            <h1>Template Heading</h1>
 +
                              <ul>
 +
                                <h5 id=cow>Topic 1</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                               
 +
                                <h5 id=cow>Topic 2</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                           
 +
                              <h5 id=cow>Topic 3</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                             
 +
                                <h5 id=cow>Topic 4</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                             
 +
                              <h5 id=cow>Topic 5</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                           
 +
                              <h5 id=cow>Topic 6</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                </ul>
 +
                          </div>
 +
                          </div>
 +
 +
                          <div class=section id=section3>
 +
                          <div class=contentImage id=pic3>
 +
                            <img src="https://static.igem.org/mediawiki/2015/b/bd/SBU_Gearsicon.png">
 +
<h3 id= t49> Subheading </h3>
 +
 +
                          </div>
 +
                          <div class=contentText id=text3>
 +
                          <h1>Template Heading</h1>
 +
                              <ul>
 +
                                <h5 id=cow>Topic 1</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                               
 +
                                <h5 id=cow>Topic 2</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                           
 +
                              <h5 id=cow>Topic 3</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                             
 +
                                <h5 id=cow>Topic 4</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                             
 +
                              <h5 id=cow>Topic 5</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                           
 +
                              <h5 id=cow>Topic 6</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                </ul>
 +
                          </div>
 +
                          </div>
 +
 +
 +
                          <div class=section id=section4>
 +
                          <div class=contentImage id=pic4>
 +
                            <img src="https://static.igem.org/mediawiki/2015/a/a2/SBU_Kidneygear2.png">
 +
<h3 id= t49> Subheading </h3>
 +
 +
                          </div>
 +
                          <div class=contentText id=text4>
 +
                          <h1>Template Heading</h1>
 +
                              <ul>
 +
                                <h5 id=cow>Topic 1</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                               
 +
                                <h5 id=cow>Topic 2</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                           
 +
                              <h5 id=cow>Topic 3</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                             
 +
                                <h5 id=cow>Topic 4</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                             
 +
                              <h5 id=cow>Topic 5</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                  </ul>
 +
                           
 +
                              <h5 id=cow>Topic 6</h5>
 +
                                  <ul>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.
 +
</p>
 +
                                </ul>
 +
                           
 +
                          </div>
 +
                          </div>
 +
                          </div>
 +
                          </div>
 +
 +
<script>
 +
$(document).ready(function () {
 +
  //Start of scroll and fix
 +
 +
    //Declare variables and set on window load
 +
    var pic = $("#pic1");
 +
    var picTop = pic.offset().top;
 +
    var picStop = picTop + $("#text1").height();
 +
    var picHeight = pic.height();
 +
    var pic2 = $("#pic2");
 +
    var picTop2 = pic2.offset().top;
 +
    var picStop2 = picTop2 + $("#text2").height();
 +
    var picHeight2 = pic2.height();
 +
    var pic3 = $("#pic3");
 +
    var picTop3 = pic3.offset().top;
 +
    var picStop3 = picTop3 + $("#text3").height();
 +
    var picHeight3 = pic3.height();
 +
    var pic4 = $("#pic4");
 +
    var picTop4 = pic4.offset().top;
 +
    var picStop4 = picTop4 + $("#text4").height();
 +
    var picHeight4 = pic4.height();
 +
    //Define function used to change CSS classes
 +
    var changeCss = function (className, classValue) {
 +
        // we need invisible container to store additional css definitions
 +
        var cssMainContainer = $('#css-modifier-container');
 +
        if (cssMainContainer.length == 0) {
 +
            var cssMainContainer = $('<div id="css-modifier-container"></div>');
 +
            cssMainContainer.hide();
 +
            cssMainContainer.appendTo($('body'));
 +
        }
 +
 +
        // and we need one div for each class
 +
        classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
 +
        if (classContainer.length == 0) {
 +
            classContainer = $('<div data-class="' + className + '"></div>');
 +
            classContainer.appendTo(cssMainContainer);
 +
        }
 +
 +
        // append additional style
 +
        classContainer.html('<style>' + className + ' {' + classValue + '}</style>');
 +
    }
 +
    //Assign stop location on widnow load
 +
    changeCss(".image-after-fix", "top: " + (picStop - picHeight - picTop) + "px");
 +
    changeCss(".image-after-fix-2", "top: " + (picStop2 - picHeight2 - picTop) + "px");
 +
    changeCss(".image-after-fix-3", "top: " + (picStop3 - picHeight3 - picTop) + "px");
 +
    changeCss(".image-after-fix-4", "top: " + (picStop4 - picHeight4 - picTop) + "px");
 +
    //Start resize function
 +
    $(window).on("resize", function () {
 +
        //Get padding of sections to add it into the calculations
 +
        var x = $(".section").css("padding-top");
 +
        x = parseFloat(x);
 +
       
 +
        //reassign variable values based on new heights after resize
 +
        pic = $("#pic1");
 +
        picTop = $("#splash").height() + $("#splash").offset().top + x;
 +
        picStop = picTop + $("#text1").height();
 +
        picHeight = pic.height();
 +
        //change CSS image after fix class again
 +
        changeCss(".image-after-fix", "top:" + (picStop - picHeight - picTop) + "px");
 +
       
 +
        //Pic2
 +
        //reassign variable values based on new heights after resize
 +
        pic2 = $("#pic2");
 +
        picTop2 = $("#splash").height() + $("#splash").offset().top + $("#section1").height() + 3*x;
 +
        picStop2 = picTop2 + $("#text2").height();
 +
        picHeight2 = pic2.height();
 +
        //change CSS image after fix class again
 +
        changeCss(".image-after-fix-2", "top:" + (picStop2 - picHeight2 - picTop) + "px");
 +
       
 +
        //Pic3
 +
        //reassign variable values based on new heights after resize
 +
        pic3 = $("#pic3");
 +
        picTop3 = $("#splash").height() + $("#splash").offset().top + $("#section1").height() + $("#section2").height() + 5*x;
 +
        picStop3 = picTop3 + $("#text3").height();
 +
        picHeight3 = pic3.height();
 +
        //change CSS image after fix class again
 +
        changeCss(".image-after-fix-3", "top:" + (picStop3 - picHeight3 - picTop) + "px");
 +
       
 +
        //Pic4
 +
        //reassign variable values based on new heights after resize
 +
        pic4 = $("#pic4");
 +
        picTop4 = $("#splash").height() + $("#splash").offset().top + $("#section1").height() + $("#section2").height() + $("#section3").height() + 7*x;
 +
        picStop4 = picTop4 + $("#text4").height();
 +
        picHeight4 = pic4.height();
 +
        //change CSS image after fix class again
 +
        changeCss(".image-after-fix-4", "top:" + (picStop4 - picHeight4 - picTop) + "px");
 +
    });
 +
    //Start scroll function
 +
    $(document).on("scroll", function (e) {
 +
        //If scrolled below start position
 +
        if ($(document).scrollTop() > picTop) {
 +
            //If scrolled below stop position
 +
            if ($(document).scrollTop() > (picStop - picHeight)) {
 +
                //unfix and stick to bottom
 +
                pic.removeClass("fix-image");
 +
                pic.addClass("image-after-fix");
 +
            } else {
 +
                //otherwise, fix
 +
                pic.removeClass("image-after-fix");
 +
                pic.addClass("fix-image");
 +
            }
 +
        } else {
 +
            //otherside, unfix and allow to sit on top (start position)
 +
            pic.removeClass("fix-image");
 +
            pic.removeClass("image-after-fix");
 +
        }
 +
        //Pic2
 +
        if ($(document).scrollTop() > picTop2) {
 +
            //If scrolled below stop position
 +
            if ($(document).scrollTop() > (picStop2 - picHeight2)) {
 +
                //unfix and stick to bottom
 +
                pic2.removeClass("fix-image");
 +
                pic2.addClass("image-after-fix-2");
 +
            } else {
 +
                //otherwise, fix
 +
                pic2.removeClass("image-after-fix-2");
 +
                pic2.addClass("fix-image");
 +
            }
 +
        } else {
 +
            //otherside, unfix and allow to sit on top (start position)
 +
            pic2.removeClass("fix-image");
 +
            pic2.removeClass("image-after-fix-2");
 +
        }
 +
        //Pic3
 +
        if ($(document).scrollTop() > picTop3) {
 +
            //If scrolled below stop position
 +
            if ($(document).scrollTop() > (picStop3 - picHeight3)) {
 +
                //unfix and stick to bottom
 +
                pic3.removeClass("fix-image");
 +
                pic3.addClass("image-after-fix-3");
 +
            } else {
 +
                //otherwise, fix
 +
                pic3.removeClass("image-after-fix-3");
 +
                pic3.addClass("fix-image");
 +
            }
 +
        } else {
 +
            //otherside, unfix and allow to sit on top (start position)
 +
            pic3.removeClass("fix-image");
 +
            pic3.removeClass("image-after-fix-3");
 +
        }
 +
        //Pic4
 +
        if ($(document).scrollTop() > picTop4) {
 +
            //If scrolled below stop position
 +
            if ($(document).scrollTop() > (picStop4 - picHeight4)) {
 +
                //unfix and stick to bottom
 +
                pic4.removeClass("fix-image");
 +
                pic4.addClass("image-after-fix-4");
 +
            } else {
 +
                //otherwise, fix
 +
                pic4.removeClass("image-after-fix-4");
 +
                pic4.addClass("fix-image");
 +
            }
 +
        } else {
 +
            //otherside, unfix and allow to sit on top (start position)
 +
            pic4.removeClass("fix-image");
 +
            pic4.removeClass("image-after-fix-4");
 +
        }
 +
    });
 +
 +
    // Smooth scrolling function
 +
    $('a[href*=#]:not([href=#])').click(function() {
 +
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 +
        || location.hostname == this.hostname) {
 +
 +
        var target = $(this.hash);
 +
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
 +
          if (target.length) {
 +
            $('html,body').animate({
 +
                scrollTop: target.offset().top
 +
            }, 1000);
 +
            return false;
 +
        }
 +
    }
 +
});
 +
});
 +
</script>
 
</html>
 
</html>

Revision as of 02:28, 16 September 2015

Attributions

Subheading

Template Heading

    Topic 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 3

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 4

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 5

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

Subheading

Template Heading

    Topic 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 3

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 4

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 5

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

Subheading

Template Heading

    Topic 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 3

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 4

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 5

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

Subheading

Template Heading

    Topic 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 3

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 4

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 5

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.

    Topic 6

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec iaculis nisl. Integer vitae euismod tellus. Donec auctor lacus mauris, at iaculis tellus faucibus a. Maecenas id vestibulum ex. Nunc vestibulum molestie molestie. Integer nec metus id augue vehicula pharetra. Ut quis malesuada velit. Nullam urna dui, feugiat ut neque sit amet, aliquam efficitur nisi. Fusce fringilla rhoncus pulvinar. Duis nec orci eget orci accumsan consectetur. In nec justo maximus ipsum commodo imperdiet. Cras quis erat a sem semper posuere vel non tellus. Proin a dignissim est. Sed suscipit dolor eu pharetra tincidunt.