Difference between revisions of "Team:Warwick/test"

 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html lang="en-US">
+
<style>
 +
div.floating-menu {position:fixed; left:0px; top:42px; padding:0px;;width:140px;z-index:10;}
 +
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.1em;}
 +
</style>
 +
<div class="floating-menu">
 +
<h3><a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Open Menu</a></p></h3>
 +
</div>
  
−
<head>
 
−
<link rel="stylesheet" href="main.css" type="text/css" />
 
−
<title>Static Navigation</title>
 
−
</head>
 
−
<style>body {
 
−
padding: 0; /* Gets rid of the automatic padding */
 
−
margin: 0; /* on HTML documents */
 
−
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
 
−
font-size: 12px;
 
−
}
 
  
−
#navigation {
 
−
  position: fixed;
 
−
  top: 0;
 
−
  width: 100%;
 
−
  color: #ffffff;
 
−
  height: 35px;
 
−
  text-align: center;
 
−
  padding-top: 15px;
 
−
  /* Adds shadow to the bottom of the bar */
 
−
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
 
−
  -moz-box-shadow: 0px 0px 8px 0px #000000;
 
−
  box-shadow: 0px 0px 8px 0px #000000;
 
−
  /* Adds the transparent background */
 
−
  background-color: rgba(1, 1, 1, 0.8);
 
−
  color: rgba(1, 1, 1, 0.8);
 
−
}
 
  
−
#navigation a {
 
−
font-size: 14px;
 
−
padding-left: 15px;
 
−
padding-right: 15px;
 
−
color: white;
 
−
text-decoration: none;
 
−
}
 
  
−
#navigation a:hover {
 
−
color: grey;
 
−
}
 
  
−
/* This just adds some style to the placeholder text */
 
  
−
#content {
+
<script>$("#menu-toggle").click(function(e) {
−
width: 600px;
+
        e.preventDefault();
−
padding-top: 70px;
+
        $("#wrapper").toggleClass("toggled");
−
padding-bottom: 30px;
+
    });</script>
−
margin-left: auto;
+
−
margin-right: auto;
+
−
}
+
−
 
+
−
#content img {
+
−
padding-top: 20px;
+
−
padding-bottom: 30px;
+
−
}
+
−
</style>
+
−
<body>
+
−
<div id="navigation">
+
−
<a href="#">Home</a>
+
−
<a href="#">Portfolio</a>
+
−
<a href="#">Our Apps</a>
+
−
<a href="#">Support</a>
+
−
<a href="#">Press</a>
+
−
<a href="#">About</a>
+
−
</div>
+
−
+
−
<div id="content">
+
−
<p> Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+
−
<p>Donec sed odio dui. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+
−
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.</p>
+
−
<p> Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+
−
<p>Donec sed odio dui. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+
−
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.</p>
+
−
<p> Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+
−
<p>Donec sed odio dui. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+
−
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.</p>
+
−
<p> Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+
−
<p>Donec sed odio dui. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+
−
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.</p>
+
−
<img src="image.jpg" alt="Eiffel Tower">
+
−
</div>
+
−
</body>
+

Latest revision as of 14:18, 9 September 2015

<style> div.floating-menu {position:fixed; left:0px; top:42px; padding:0px;;width:140px;z-index:10;} div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.1em;} </style>

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Open Menu</a></p>




<script>$("#menu-toggle").click(function(e) { 

       e.preventDefault();
       $("#wrapper").toggleClass("toggled");
   });</script>