Difference between revisions of "Team:Warwick"

Line 1: Line 1:
 +
<!DOCTYPE HTML>
 +
<!--
 +
Theory by TEMPLATED
 +
templated.co @templatedco
 +
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 +
-->
 +
<html>
 +
<head>
 +
<title>Theory by TEMPLATED</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
<link rel="stylesheet" href="assets/css/main.css" />
 +
</head>
 +
<body>
  
−
<!DOCTYPE html>
+
<!-- Header -->
−
<html lang="en" dir="ltr" class="client-nojs">
+
<header id="header">
−
<head>
+
<div class="inner">
−
  <meta charset="UTF-8" />
+
<a href="index.html" class="logo">Theory</a>
−
  <title>Team:Warwick-2016.igem.org</title>
+
<nav id="nav">
−
  <style type="text/css">
+
<a href="index.html">Home</a>
 +
<a href="generic.html">Generic</a>
 +
<a href="elements.html">Elements</a>
 +
</nav>
 +
<a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars"></span></a>
 +
</div>
 +
</header>
  
−
  #text {margin-top: 50px; z-index: 9999;}
+
<!-- Banner -->
−
  #text h2 {font-size: 25px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 15px; opacity: 0.5; }
+
<section id="banner">
 +
<h1>Welcome to Theory</h1>
 +
<p>A free responsive HTML5 website template by TEMPLATED.</p>
 +
</section>
  
−
  .blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity;
+
<!-- One -->
−
      transition-duration: 1s;
+
<section id="one" class="wrapper">
−
      transition-timing-function: ease; }
+
<div class="inner">
 +
<div class="flex flex-3">
 +
<article>
 +
<header>
 +
<h3>Magna tempus sed amet<br /> aliquam veroeros</h3>
 +
</header>
 +
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p>
 +
<footer>
 +
<a href="#" class="button special">More</a>
 +
</footer>
 +
</article>
 +
<article>
 +
<header>
 +
<h3>Interdum lorem pulvinar<br /> adipiscing vitae</h3>
 +
</header>
 +
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p>
 +
<footer>
 +
<a href="#" class="button special">More</a>
 +
</footer>
 +
</article>
 +
<article>
 +
<header>
 +
<h3>Libero purus magna sapien<br /> sed ullamcorper</h3>
 +
</header>
 +
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p>
 +
<footer>
 +
<a href="#" class="button special">More</a>
 +
</footer>
 +
</article>
 +
</div>
 +
</div>
 +
</section>
  
−
  #text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block;  padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}
+
<!-- Two -->
 +
<section id="two" class="wrapper style1 special">
 +
<div class="inner">
 +
<header>
 +
<h2>Ipsum Feugiat</h2>
 +
<p>Semper suscipit posuere apede</p>
 +
</header>
 +
<div class="flex flex-4">
 +
<div class="box person">
 +
<div class="image round">
 +
<img src="images/pic03.jpg" alt="Person 1" />
 +
</div>
 +
<h3>Magna</h3>
 +
<p>Cipdum dolor</p>
 +
</div>
 +
<div class="box person">
 +
<div class="image round">
 +
<img src="images/pic04.jpg" alt="Person 2" />
 +
</div>
 +
<h3>Ipsum</h3>
 +
<p>Vestibulum comm</p>
 +
</div>
 +
<div class="box person">
 +
<div class="image round">
 +
<img src="images/pic05.jpg" alt="Person 3" />
 +
</div>
 +
<h3>Tempus</h3>
 +
<p>Fusce pellentes</p>
 +
</div>
 +
<div class="box person">
 +
<div class="image round">
 +
<img src="images/pic06.jpg" alt="Person 4" />
 +
</div>
 +
<h3>Dolore</h3>
 +
<p>Praesent placer</p>
 +
</div>
 +
</div>
 +
</div>
 +
</section>
  
−
   
+
<!-- Three -->
−
   
+
<section id="three" class="wrapper special">
 +
<div class="inner">
 +
<header class="align-center">
 +
<h2>Nunc Dignissim</h2>
 +
<p>Aliquam erat volutpat nam dui </p>
 +
</header>
 +
<div class="flex flex-2">
 +
<article>
 +
<div class="image fit">
 +
<img src="images/pic01.jpg" alt="Pic 01" />
 +
</div>
 +
<header>
 +
<h3>Praesent placerat magna</h3>
 +
</header>
 +
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p>
 +
<footer>
 +
<a href="#" class="button special">More</a>
 +
</footer>
 +
</article>
 +
<article>
 +
<div class="image fit">
 +
<img src="images/pic02.jpg" alt="Pic 02" />
 +
</div>
 +
<header>
 +
<h3>Fusce pellentesque tempus</h3>
 +
</header>
 +
<p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna non comodo sodales tempus.</p>
 +
<footer>
 +
<a href="#" class="button special">More</a>
 +
</footer>
 +
</article>
 +
</div>
 +
</div>
 +
</section>
  
−
  /*references*/
+
<!-- Footer -->
−
  .content .tooltip {
+
<footer id="footer">
−
    background-color: #fff;
+
<div class="inner">
−
    border: 1px #22343C solid;
+
<div class="flex">
−
    border-radius: 4px;
+
<div class="copyright">
−
    padding: 3px;
+
&copy; Untitled. Design: <a href="https://templated.co">TEMPLATED</a>. Images: <a href="https://unsplash.com">Unsplash</a>.
−
    position: absolute;
+
</div>
−
    width: 300px;
+
<ul class="icons">
−
    z-Index: 99999;
+
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
−
    display: none;
+
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
−
    letter-spacing: 1px;
+
<li><a href="#" class="icon fa-linkedin"><span class="label">linkedIn</span></a></li>
−
    line-height: 1;
+
<li><a href="#" class="icon fa-pinterest-p"><span class="label">Pinterest</span></a></li>
−
    font-size: 11px;
+
<li><a href="#" class="icon fa-vimeo"><span class="label">Vimeo</span></a></li>
−
  }
+
</ul>
 +
</div>
 +
</div>
 +
</footer>
  
−
  .tooltip a {color: #22343C;}
+
<!-- Scripts -->
−
  .tooltip {color: #22343C;}
+
<script src="assets/js/jquery.min.js"></script>
 +
<script src="assets/js/skel.min.js"></script>
 +
<script src="assets/js/util.js"></script>
 +
<script src="assets/js/main.js"></script>
  
−
  .content {
+
</body>
−
    position: relative;
+
−
  }
+
−
 
+
−
  .content {color: #d67166;}
+
−
 
+
−
  /* end-of-references */
+
−
 
+
−
  .bigtitle {width: 42%; margin-top: 100px; margin: 0 auto; font-size: 16px; background-image:none /*url('https://static.igem.org/mediawiki/2015/4/43/Warwick_headercircle.png')*/; text-align: center; line-height: 2;
+
−
      background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;}
+
−
 
+
−
  .bigtitle a {color: #22343C; text-decoration: none;}
+
−
 
+
−
  .title2 {font-family: Satisfy; font-size: 380%; text-align:center;}
+
−
 
+
−
  .titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}
+
−
 
+
−
  .arrow {font-size: 50px;}
+
−
 
+
−
 
+
−
  #text h2 {
+
−
  font-size: 25px !important;
+
−
  text-decoration: none;
+
−
  border-bottom: 0px;
+
−
  display: block;
+
−
  background-color: #c97062;
+
−
  color: #fff;
+
−
  font-weight: bold;
+
−
  border-radius: 4px;
+
−
  padding: 10px;
+
−
  opacity: 0.5;
+
−
    line-height: 1.4;
+
−
  }
+
−
 
+
−
  a {
+
−
  color:#473E4F;
+
−
  -webkit-transition: color ease-in-out 300ms;
+
−
  }
+
−
 
+
−
  a:hover
+
−
  {color: #70C4BB;
+
−
  text-decoration:none;
+
−
  -webkit-transition: color ease-in-out 300ms;
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
  a:visited {
+
−
  color:#473E4F;
+
−
  text-decoration:none;
+
−
  -webkit-transition: color ease-in-out 300ms;
+
−
  }
+
−
 
+
−
  #bodyContent {
+
−
  background-color:#F8FFFF;
+
−
  }
+
−
 
+
−
  @media (max-width:400px){
+
−
  p {text-align:justify;};
+
−
  h3 {font-size:10px;};
+
−
  }
+
−
 
+
−
  /* wiki width fixing */
+
−
  #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
−
      display:none;}
+
−
  #top-section {
+
−
      border: none;
+
−
      height: 0px;}
+
−
 
+
−
  #p-logo, h1.firstHeading,#search-controls,#catlinks {display:none;}
+
−
    #footer #f-list {margin-top:0;}
+
−
    #top-section,#footer-box{margin:0;padding:0;width:100%;height:0;}
+
−
    #contentSub {margin: 0;}
+
−
 
+
−
  #globalWrapper, #content {
+
−
  width: 100% !important;
+
−
  height: 100%;
+
−
  border: 0;
+
−
  background-color: F8FFFF;
+
−
  margin: 0;
+
−
  padding: 0 !important;
+
−
  padding-bottom: 0 !important;
+
−
  top:0;
+
−
  line-height: 1;
+
−
  position: absolute;
+
−
  }
+
−
 
+
−
  #bodyContent {top: 0px;
+
−
  position: absolute;
+
−
  height: auto;
+
−
  min-height: 100%;
+
−
  margin: 0 auto;
+
−
  padding: 0;
+
−
  overflow-y: scroll;
+
−
  overflow-x: hidden;
+
−
  margin-left:-500px ;}
+
−
 
+
−
  html, body, #container {
+
−
  top: 0px;
+
−
  width:100%;
+
−
  height: auto;
+
−
  overflow-x: hidden;
+
−
    background: none !important;
+
−
  }
+
−
 
+
−
  .buttonblack {
+
−
 
+
−
    margin-bottom: 10px;
+
−
    margin-top: 10px;
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
  .intro-buttons {
+
−
  padding-top: 20px;  color: #FFFFFF;
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
  .intro-buttons a {  color: #FFFFFF; text-decoration: none;}
+
−
 
+
−
 
+
−
   
+
−
   
+
−
    #header2:before
+
−
  {
+
−
  content: "";
+
−
 
+
−
 
+
−
      position: fixed;
+
−
      top: 0;
+
−
      left: 0;
+
−
    bottom: 0;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
      width: 100%;
+
−
      height: 100%;
+
−
  overflow: hidden;
+
−
  display: block;
+
−
  border: none;
+
−
 
+
−
  }
+
−
   
+
−
   
+
−
   
+
−
 
+
−
 
+
−
  .back {text-align: center; top: 15%; position: relative;}
+
−
  .back img {padding-left: 10px; padding-right: 10px; padding-bottom: 7px;}
+
−
  .back a {color: #2a2133; font-size: 16px; font-family: Raleway; letter-spacing: 1.5px; }
+
−
  .back a:hover {color: #493c54;  -webkit-transition: color ease-in-out 400ms;}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  @media screen and (max-width: 960px) {
+
−
  #abstracttext p {    line-height: 2; font-size: 13px; text-indent: 50px;
+
−
  }
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
  #abstract h2 {font-size: 20px;}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  .mailus {background: #F0F0F5; padding: 5px;}
+
−
 
+
−
  /*menu*/
+
−
 
+
−
  .mainmenu {
+
−
    position: fixed;
+
−
    top: 0;
+
−
    left: 0;
+
−
    z-index: 99999;
+
−
    width: 100%;
+
−
    height: 100px;
+
−
  font-size: 20px;
+
−
  background-color: #fff;
+
−
  box-shadow: 0px -6px 22px;
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
  #hidden-menu {
+
−
  margin-left:85%;
+
−
  display: none;}
+
−
 
+
−
  #hidden-menu:hover ul{
+
−
  height:auto;
+
−
  width:auto;
+
−
  z-index:99999999;
+
−
  display: block;
+
−
  }
+
−
 
+
−
  #hidden-menu ul li {
+
−
  background-color: #70C4BB;
+
−
  text-align: center;
+
−
  display: block;
+
−
  margin:none;
+
−
  padding-left:20px;
+
−
  padding-right:20px;
+
−
  padding-top:8px;
+
−
  padding-bottom:8px;
+
−
  box-shadow:1.5px 1.5px lightgrey;
+
−
  border-radius:4px;
+
−
  opacity:0.9;
+
−
  z-index:99999999;
+
−
  }
+
−
 
+
−
  #hidden-menu ul {
+
−
  position:fixed;
+
−
  padding-top:60px;
+
−
  right: 0px;
+
−
  padding-right: 50px;
+
−
  display: none;
+
−
  }
+
−
 
+
−
  #hidden-menu ul li a {
+
−
  color: #fff; font-size: 23px;
+
−
  }
+
−
 
+
−
  #hidden-menu ul li a:hover {
+
−
  color: #787172
+
−
  }
+
−
 
+
−
  #hidden-menu a {
+
−
  color: #473E4F; text-decoration: none; font-family: Raleway; 
+
−
  }
+
−
 
+
−
  #hidden-menu a:hover {color: #70C4BB;
+
−
      -webkit-transition: color ease-in-out 150ms;
+
−
  }
+
−
 
+
−
 
+
−
  #mobilebutton {
+
−
  height:50px;
+
−
  width:50px;
+
−
  top:0;
+
−
  right:0px;
+
−
  margin-top: 17px;
+
−
  position:fixed;
+
−
  opacity:0.9;
+
−
  z-index:999999999;
+
−
  }
+
−
 
+
−
 
+
−
  #igemlogo {
+
−
  position:fixed;
+
−
  top:30px;
+
−
  left: 10px; float:left;
+
−
  z-index:99999;
+
−
  }
+
−
 
+
−
  .menu-items {display: inline-block;
+
−
  width: 100%;
+
−
  text-align: right;
+
−
  position:fixed;
+
−
  top: 20px;
+
−
  z-index:99998;
+
−
  right: 0;
+
−
  padding-right: 53px;
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
  .menu-items li {
+
−
    display: inline-block;
+
−
    margin-right: 20px;
+
−
    margin-left: 10px;
+
−
  margin-top: 0px;
+
−
  letter-spacing: 3px;
+
−
  height: 30px;
+
−
  text-transform: uppercase;
+
−
  font-size: 12px;
+
−
  font-weight: bold;
+
−
    }
+
−
 
+
−
 
+
−
  .menu-items li:hover ul, .menu-items li.hover ul{
+
−
  padding-left: 0;
+
−
  visibility: visible;
+
−
    opacity: 1;
+
−
  transition:  opacity 1s ease-in 0s, visibility 0s linear 0s;
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  .menu-items li ul {
+
−
  visibility: hidden;
+
−
  opacity: 0;
+
−
  transition:  opacity 0.5s ease-in 0s, visibility 0s linear 0.5s;
+
−
  position: absolute;
+
−
  top: 10px;
+
−
    margin-right: 0px;
+
−
    margin-left: 0px;
+
−
  padding: 0;
+
−
  text-align: left;
+
−
  }
+
−
 
+
−
  .menu-items li ul a{list-style-type:none;}
+
−
 
+
−
 
+
−
  .menu-items li ul li{
+
−
  text-align: left;
+
−
  padding: 2px 0px;
+
−
  width: auto;
+
−
  display:block;
+
−
  height: 8px;
+
−
  margin: 0px;
+
−
 
+
−
  }
+
−
 
+
−
  .menu-items li ul li a {
+
−
  color: #22343C;
+
−
  font-size: 9px;
+
−
  }
+
−
 
+
−
  .menu-items li ul li a:hover {
+
−
  color: #FE6C68;
+
−
  }
+
−
 
+
−
  .menu-items a {
+
−
  color: #22343C;
+
−
  text-decoration: none;
+
−
  font-family: Raleway; 
+
−
  }
+
−
 
+
−
  .menu-items a:hover {color: #70C4BB;
+
−
      -webkit-transition: color ease-in-out 150ms;
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  .buttonblack {
+
−
    margin-bottom: 10px;
+
−
  margin-top: 10px;
+
−
  text-transform: uppercase;
+
−
    font-size: 14px;
+
−
    font-weight: normal;
+
−
    line-height: 1.428571429;
+
−
    text-align: center;
+
−
    white-space: nowrap;
+
−
    vertical-align: middle;
+
−
    border-radius: 4px;
+
−
  transition-property: background-color, color, border-color;
+
−
    transition-duration: 1s;
+
−
    transition-timing-function: ease;
+
−
              color: #FFFFFF;
+
−
    border: solid 5px #336666;
+
−
      padding: 10px 16px;
+
−
    text-decoration: none;
+
−
    width:180px; background-color: #336666;
+
−
  font-family: Raleway;
+
−
  letter-spacing: 2px;
+
−
  font-weight: bold;}
+
−
 
+
−
 
+
−
  .buttonblack:hover {border-color: #fff; color: #fff; background: none;}
+
−
  .buttongreen:hover {border-color: #019966; color: #019966; background: none;}
+
−
 
+
−
  .buttongreen {  margin-bottom: 10px;
+
−
  margin-top: 20px;
+
−
  text-transform: uppercase;
+
−
    font-size: 14px;
+
−
    font-weight: normal;
+
−
    line-height: 1.428571429;
+
−
    text-align: center;
+
−
    white-space: nowrap;
+
−
    vertical-align: middle;
+
−
    border-radius: 4px;
+
−
  transition-property: background-color, color, border-color;
+
−
    transition-duration: 1s;
+
−
    transition-timing-function: ease;
+
−
              color: #FFFFFF;
+
−
    border: solid 5px #019966;
+
−
      padding: 10px 16px;
+
−
    text-decoration: none;
+
−
    width:180px; background-color: #019966;
+
−
  font-family: Raleway;
+
−
  letter-spacing: 2px;
+
−
  font-weight: bold;}
+
−
 
+
−
  a.buttongreen  {text-decoration: none; color: #fff;}
+
−
 
+
−
  .igemlogoo {width: 65px;}
+
−
 
+
−
 
+
−
  /*media*/
+
−
 
+
−
  @media(max-width:1280px){
+
−
  .menu-items {padding-right: 53px;}
+
−
  .menu-items li {margin-right: 12px; margin-left: 12px; letter-spacing: 3px;}
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width:1152px){
+
−
  .menu-items li {margin-right: 12px; margin-left: 9px; letter-spacing: 2.8px;}
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width:1024px){
+
−
  .menu-items li {
+
−
  margin-right: 9px;
+
−
  letter-spacing: 2.4px; }
+
−
  .menu-items ul li ul a {font-size: 10px; letter-spacing: 1.9px;}
+
−
  .igemlogoo {width: 50px;}
+
−
  #bodyContent {margin-left: -60px; width: calc(100% + 32px);}
+
−
 
+
−
  }
+
−
 
+
−
  @media(max-width:960px){
+
−
  .menu-items li {
+
−
  margin-right: 9px;
+
−
  font-size: 10px;
+
−
  letter-spacing: 2.4px;
+
−
  }
+
−
 
+
−
  .menu-items ul li ul a {font-size: 9px; letter-spacing: 1.9px;}
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width:900px){
+
−
 
+
−
 
+
−
 
+
−
  .menu-items li {
+
−
  margin-right: 9px;
+
−
  margin-left: 0px;
+
−
  font-size: 10px;
+
−
  letter-spacing: 2.4px;
+
−
 
+
−
  }
+
−
 
+
−
  .menu-items ul li ul a {font-size: 9px; letter-spacing: 1.9px;}
+
−
 
+
−
  .menu-items li ul li {height: 6px;}
+
−
 
+
−
  .mainmenu {height: 90px; }
+
−
 
+
−
 
+
−
  .menu-items li ul {top: 20px;}
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  @media(max-width:830px){
+
−
 
+
−
  .igemlogoo {width: 40px; opacity: 0.7;}
+
−
 
+
−
  #igemlogo {top: 40px; z-index: -1;}
+
−
    #Warwickigemlogo {display: none;}
+
−
 
+
−
  .menu-items ul li ul a {letter-spacing: 1.4px;}
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width: 768px){
+
−
 
+
−
 
+
−
  .menu-items li {
+
−
  letter-spacing: 2px;
+
−
  font-size: 10px;
+
−
  margin-right: 3px;
+
−
  margin-left: 3px;
+
−
  margin-top: 6px;
+
−
  text-align: center;
+
−
  }
+
−
  .menu-items ul {text-align: center; padding: 0; margin: 0 2px; list-style:none;}
+
−
 
+
−
  .menu-items {text-align: center; padding-left: 0px; margin: 0 auto;}
+
−
  .menu-items li ul {position: absolute; left: 0; width: 100%; text-align: center; margin-top: 20px;  }
+
−
 
+
−
  .menu-items li ul li {display: inline-block;  margin-left: 10px; margin-right: 10px; height: 34px; }
+
−
  .menu-items ul li ul a { font-size: 10px; letter-spacing: 2px;}
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
  @media(max-width: 740px){
+
−
 
+
−
  .menu-items li {
+
−
  letter-spacing: 1.6px;
+
−
  font-size: 10px;
+
−
  margin-right: 3px;
+
−
  margin-top: 6px;
+
−
  }
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width: 680px){
+
−
 
+
−
  .menu-items li {
+
−
  letter-spacing: 1.8px;
+
−
  font-size: 9px;
+
−
  margin-right: 3px;
+
−
  margin-left: 3px;
+
−
  margin-top: 8px;
+
−
  }
+
−
 
+
−
  .menu-items li ul { margin-top: 20px;}
+
−
 
+
−
  .menu-items li ul li {margin-right: 6px;
+
−
  margin-left: 6px;}
+
−
 
+
−
  .menu-items ul li ul a { font-size: 9px; letter-spacing: 1.8px;}
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
  @media(max-width: 640px){
+
−
  .mainmenu, .mainmenu ul, .mainmenu ul li {visibility: hidden;}
+
−
  #hidden-menu {display: block; z-index: 999999;}
+
−
 
+
−
  }
+
−
 
+
−
   
+
−
 
+
−
  @media(max-width:1280px){
+
−
 
+
−
  .bigtitle {font-size: 15px;}
+
−
  .bigtitle {width: 50%;}
+
−
  .buttonblack {padding: 5px 11px;}
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width:1152px){
+
−
 
+
−
  .bigtitle {font-size: 14px;}
+
−
  .bigtitle {width: 52%;}
+
−
  .titlecircle {width: 80%;}
+
−
  a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
+
−
  .buttonblack {padding: 5px 8px;}
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width:1024px){
+
−
  .bigtitle {width: 58%;}
+
−
  .titlecircle {padding-top: 15%; width: 75%;}
+
−
  #wrapper {top: 100px;}
+
−
  a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
+
−
  #header2:before {background-image: none;}
+
−
  #mobilebackground {display: block;}
+
−
  .constructs {font-size: 15px;}
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
  @media(max-width:960px){
+
−
 
+
−
  .bigtitle {font-size: 13px; width: 65%;}
+
−
  .arrow {font-size: 40px;}
+
−
  .buttonblack {padding: 5px 5px;}
+
−
  #submenu {width: 110%; margin-left: -5%;}
+
−
  .constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
+
−
  .constructs {text-align: center;}
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width:910px){
+
−
  }
+
−
 
+
−
  @media(max-width:850px){
+
−
  a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
+
−
  .buttonblack {padding: 4px 3px;}
+
−
  #submenu {width: 112%; margin-left: -6%;}
+
−
  .constructs img {min-width: 80% !important;}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
  @media(max-width: 768px){
+
−
  .bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;}
+
−
  .bigtitle p { font-size: 13px; margin-top: 10px !important;}
+
−
  .titlecircle {width: 70%; padding-top: 8%;}
+
−
  a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
+
−
  #submenu {width: 80%; margin: 0 auto;}
+
−
  .buttonblack {line-height: 3.8;}
+
−
  a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
+
−
  .buttonblack {padding: 5px 8px;}
+
−
  .citecryan {margin-left: 50px;}
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  @media(max-width:680px){
+
−
  #wrapper {width: 100%;}
+
−
  #text {margin: 50px 25px 0 25px;}
+
−
  #text h4 {font-size: 13px;}
+
−
  .constructs {font-size: 13px;}
+
−
  .bigtitle p { font-size: 13px; }
+
−
  .titlecircle {width: 60%;}
+
−
  #submenu {width: 70%; margin: 0 auto;}
+
−
  .buttonblack {line-height: 3.8;}
+
−
  a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
+
−
  .buttonblack {padding: 5px 8px;}
+
−
 
+
−
  }
+
−
 
+
−
  @media(max-width:640px){
+
−
  .arrow {font-size: 30px;}
+
−
  .titlecircle {width: 60%;}
+
−
  #submenu {width: 80%; margin: 0 auto;}
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
  @media(max-width:530px){
+
−
  a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
+
−
  .bigtitle  {background-image:none;}
+
−
  .titlecircle {width: 60%;}
+
−
  .title2 {font-size: 320%;}
+
−
  #text h4 {line-height: 1.7;}
+
−
  .citecryan {margin-left: 10px;}
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
  @media(max-width: 480px) {
+
−
  .bigtitle p { font-size: 13px; text-align: center;}
+
−
  .titlecircle {width: 70%;}
+
−
  #submenu {width: 90%; margin: 0 auto;}
+
−
 
+
−
 
+
−
 
+
−
  }
+
−
 
+
−
  @media(max-width: 410px) {
+
−
  .titlecircle {width: 75%;}
+
−
  .title2 {font-size: 300%;}
+
−
  .bigtitle p {line-height: 1.5 !important;}
+
−
  }
+
−
 
+
−
  @media(max-width: 380px) {
+
−
  .titlecircle {width: 75%; padding-top: 10%;}
+
−
  .bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;}
+
−
  .title2 {font-size: 260%;}
+
−
 
+
−
  }
+
−
 
+
−
 
+
−
  @media(max-width: 360px) {
+
−
  .titlecircle {width: 80%;}
+
−
  .title2 {font-size: 240%;}
+
−
  .buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
+
−
  }
+
−
  </style>
+
−
</head>
+
−
<html>
+
−
  <body>
+
−
    <p>Testing Shit 1 2 3 </p>
+
−
  </body>
+
 
</html>
 
</html>

Revision as of 13:52, 5 September 2016

<!DOCTYPE HTML> Theory by TEMPLATED

Magna tempus sed amet
aliquam veroeros

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.

Interdum lorem pulvinar
adipiscing vitae

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.

Libero purus magna sapien
sed ullamcorper

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.

Ipsum Feugiat

Semper suscipit posuere apede

Person 1

Magna

Cipdum dolor

Person 2

Ipsum

Vestibulum comm

Person 3

Tempus

Fusce pellentes

Person 4

Dolore

Praesent placer

Nunc Dignissim

Aliquam erat volutpat nam dui

Pic 01

Praesent placerat magna

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.

Pic 02

Fusce pellentesque tempus

Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna non comodo sodales tempus.