Difference between revisions of "Team:Dalhousie/test5"

Line 6: Line 6:
 
   <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/fonts?action=raw&ctype=text/css" />
 
   <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/fonts?action=raw&ctype=text/css" />
 
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" />
 
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/javascript?action=raw&ctype=text/javascript" />
  
 
<!-------------------------------------need this--------------------------->
 
<!-------------------------------------need this--------------------------->
Line 57: Line 58:
 
   
 
   
 
<body>
 
<body>
 +
<!--------------------------------------------------------------test------------------------------------------------------------------------------>
 +
<body>
 +
<header class="header">
 +
<div id="logo">Logo</div>
 +
<nav class="main-nav">
 +
<ul>
 +
<li>Login</li>
 +
<li>Sign Up</li>
 +
</ul>
 +
</nav>
 +
</header>
 +
<section id="page-intro">
 +
<div id="page-intro_text">
 +
<h1>Alternating Fixed Navigation</h1>
 +
<h3>Click A Menu Item Below<h3>
 +
<h3>Scroll Up / Down</h3>
 +
<h4>Totally Inspired By <a href='https://codyhouse.co/gem/secondary-fixed-navigation/'>This</a><br /><br />
 +
        Altered & Customized By <a href='https://codepen.io/tmrDevelops/'>Me</a>
 +
</div>
 +
</section>
 +
 +
<div class="alt-nav">
 +
<a href="#0" class="alt-nav-trigger"><span></span></a>
 +
<nav>
 +
<ul>
 +
<li>
 +
<a href="#nav-icon-1">
 +
<b>Home</b>
 +
<span class='fontawesome-home'></span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#nav-icon-2">
 +
<b>About Us</b>
 +
<span class='fontawesome-group'></span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#nav-icon-3">
 +
<b>Our Blog</b>
 +
<span class='fontawesome-comments-alt'></span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#nav-icon-4">
 +
<b>Photo Album</b>
 +
<span class='fontawesome-camera-retro'></span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#nav-icon-5">
 +
<b>Contact Us</b>
 +
<span class='fontawesome-edit'></span>
 +
</a>
 +
</li>
 +
</ul>
 +
</nav>
 +
</div>
 +
<div class="main">
 +
<section id="nav-icon-1" class="section container">
 +
<h2>Welcome!</h2>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos, accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam.</p><br/>
 +
<p> Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis tempore, harum consequatur optio laboriosam nihil sint voluptatem ducimus porro quae expedita alias consectetur explicabo cumque maxime facere praesentium! Ad illo quibusdam omnis suscipit qui eos autem est laborum ducimus! Tenetur?
 +
</p>
 +
</section>
 +
 +
<section id="nav-icon-2" class="section container">
 +
<h2>About Us</h2>
 +
<p>
 +
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam. Earum enim sed dolorum, exercitationem temporibus quaerat eos, accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam.</p><br/>
 +
<p>Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. </p><br/>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat omnis quia maiores, et. Aut facilis ducimus, labore culpa, nemo eum qui quae, rem libero aspernatur, inventore quos modi a ex sit.</p><br/>
 +
<p>Nulla iure odio at quo corporis assumenda ea fugiat adipisci aspernatur incidunt sapiente consequatur, ullam cumque dolorem facilis laboriosam a dolore similique velit esse. Eveniet omnis voluptas, nobis dicta cupiditate odit, similique mollitia eos dignissimos provident voluptatem adipisci ullam facilis alias! Reprehenderit voluptatem provident ut veniam aliquid, labore culpa.
 +
</p>
 +
</section>
 +
 +
<section id="nav-icon-3" class="section container">
 +
<h2>Our Blog</h2>
 +
<article>
 +
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.<br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/john-jane-doe">Jane & John Doe</a></address>
 +
</article>
 +
<article>Earum enim sed dolorum, exercitationem temporibus quaerat eos, accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam. Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur dolores velit eligendi dolorem quae.<br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/jane-doe">Jane Doe</a></address>
 +
</article>
 +
<article>Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 +
<br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/john-doe">John Doe</a></address>
 +
</article>
 +
<article>Alias sunt mollitia atque tempore ea cum exercitationem, quisquam est consectetur tempora ipsam, obcaecati voluptate a. Autem minus cumque voluptatem eaque fugit nostrum reprehenderit incidunt officia. <br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/jane-doe">Jane Doe</a></address>
 +
</article>
 +
<article>Nesciunt reiciendis delectus officiis fugit sint at totam nisi commodi repellendus iusto dolorum molestias dignissimos natus, impedit quam atque ex voluptas ut facere assumenda iure incidunt rerum vitae accusamus? <br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/john-doe">John Doe</a></address>
 +
</article>
 +
<article>Et voluptatibus unde, fugiat tenetur sed dolore, praesentium magni illo nobis incidunt, possimus doloremque dolorem sunt. Aliquid ducimus delectus esse voluptatem officia perferendis, a voluptate omnis adipisci expedita distinctio praesentium natus veniam accusamus iure, quasi, inventore reiciendis.<br><button class='more'></button><address class="author">By <a rel="author" class="#" href="/author/jane-doe">Jane Doe</a></address>
 +
</article>
 +
</section>
 +
<section id="nav-icon-4" class="section container">
 +
<h2>Photo Album</h2>
 +
<div class='pics'>
 +
<ul>
 +
<li><img src="http://lorempixel.com/400/400/people" /></li>
 +
<li><img src="http://lorempixel.com/400/400/animals" /></li>
 +
<li><img src="http://lorempixel.com/400/400/sports" /></li>
 +
<li><img src="http://lorempixel.com/400/400/people" /></li>
 +
<li><img src="http://lorempixel.com/400/400/animals" /></li>
 +
<li><img src="http://lorempixel.com/400/400/sports" /></li>
 +
<li><img src="http://lorempixel.com/400/400/people" /></li>
 +
<li><img src="http://lorempixel.com/400/400/animals" /></li>
 +
      <li><img src="http://lorempixel.com/400/400/sports" /></li>
 +
</ul>
 +
</div>
 +
</section>
 +
<section id="nav-icon-5" class="section container" >
 +
<h2>Contact Us</h2>
 +
<div id="form-main">
 +
<div id="form-div">
 +
<form class="form" id="form1">
 +
      <p class="name">
 +
        <input name="name" type="text" placeholder="Name" id="name" />
 +
      </p>
 +
     
 +
      <p class="email">
 +
        <input name="email" type="text" id="email" placeholder="Email" />
 +
      </p>
 +
     
 +
      <p class="text">
 +
        <textarea name="text" id="comment" placeholder="Comment"></textarea>
 +
      </p>
 +
      <div class="submit">
 +
        <input type="submit" value="SEND" id="button-blue"/>
 +
        <div class="ease"></div>
 +
      </div>
 +
    </form>
 +
  </div>
 +
</div>
 +
</section>
 +
  
 +
<!--------------------------------------------------------------endtest------------------------------------------------------------------------------>
  
 
<!--------------------------------------------------------------video------------------------------------------------------------------------------>
 
<!--------------------------------------------------------------video------------------------------------------------------------------------------>

Revision as of 16:48, 10 September 2017

Alternating Fixed Navigation

Click A Menu Item Below

Scroll Up / Down

Totally Inspired By This

Altered & Customized By Me

Welcome to Dalhousie's 2017 iGEM wiki

Sponsor area