Difference between revisions of "Team:UFlorida"

 
(214 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{UFlorida/Menu2}}
 
{{UFlorida/Menu2}}
  
<html lang="en">
 
<head>
 
  <title>Bootstrap Theme Company Page</title>
 
  <meta charset="utf-8">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
  
 +
<html>
  
 +
<head>
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 +
 
 
<style>
 
<style>
 
 
#sideMenu, #top_title {display:none;}
 
#content { padding:0px; width:90%; margin-top:-7px; margin-left:5%;, margin-right: 5%}
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
 
 
#page {
 
width : 80%;
 
height : 1000px;
 
                    margin-left : 10%;
 
                     
 
 
                     
 
 
}
 
 
nav li a {
 
display: block; padding: 15px 25px;
 
color: #e6b800 !important; text-decoration: none;
 
     
 
}
 
nav ul li:hover > ul {
 
display: block;
 
 
}
 
             
 
             
 
 
 
.layout {
 
display : inline-block;
 
width : 100%;
 
height : 100%;
 
z-index : 90;
 
vertical-align : middle;
 
line-height : 300px;
 
text-align : center;
 
display: flex;
 
justify-content: center;
 
align-items: center;
 
-webkit-display: flex;
 
-webkit-justify-content: center;
 
-webkit-align-items: center;
 
                        vertical-align : middle;
 
}
 
 
.leadingQuestions { /* Projects */
 
                     
 
                        width : 100%;
 
height : 300px;
 
                        background-color: yellow;
 
                        float:left;
 
 
 
}
 
 
.boxAll {
 
clear: both;
 
width: 100%
 
 
 
height: 10px;
 
}
 
 
 
.headerbox { /* Main */
 
                        float:right;
 
                        width : 100%;
 
                        height : 300px;
 
                        border-radius: 8px;
 
                 
 
                        margin-top: 5px;
 
                        background-color: red;
 
                    background-size:contain;
 
                        background-position:center;
 
                      background-position: 50% 50%;
 
display: inline
 
 
clear: both;
 
                 
 
 
 
}
 
 
 
 
.box2 { /* Projects */
 
                     
 
                        width : 50%;
 
height : 360px;
 
                      /* background-color: red;*/
 
                        float:left;
 
 
 
}
 
 
 
 
.infobox {
 
width : 50px;
 
height : 100%
 
                        background-color: yellow;
 
                     
 
 
                     
 
 
}
 
 
 
.subpanel2 { /* Projects */
 
 
 
    background-image : url("https://static.igem.org/mediawiki/2016/1/1d/T--Sydney_Australia--5.png");
 
 
    background-position: center top;
 
    background-repeat: no-repeat;
 
    background-size: 100% 120px;
 
    float:left;
 
  width:26%;
 
    height:150px;
 
border-radius: 8px;
 
      font-size:22px;
 
    text-align:center;
 
  margin-left: 3.53%;
 
      margin-right: 3.53%;
 
    overflow:hidden;
 
    line-height:10px;
 
    left-margin: 2000px
 
}
 
.subpanel2:hover{
 
 
                        background-image : url("https://static.igem.org/mediawiki/2016/a/aa/T--Sydney_Australia--6.png");
 
background-position: center top;
 
    background-size: 100% 120px;
 
    font-weight:bold;
 
}
 
 
 
.subpanel2:hover .narrowimg {
 
    opacity:0.8;
 
    filter: alpha(opacity=80);
 
}
 
 
.subpanel22 { /* Projects */
 
 
 
    background-image : url("https://static.igem.org/mediawiki/2016/2/27/T--Sydney_Australia--1.png");
 
 
    background-position: center top;
 
    background-size: 100% 120px ;
 
  background-repeat: no-repeat;
 
    float:left;
 
    width:26%;
 
border-radius: 8px;
 
    height:150px;
 
      font-size:22px;
 
    text-align:center;
 
  margin-left: 3.53%;
 
      margin-right: 3.53%;
 
    overflow:hidden;
 
    line-height:10px;
 
    left-margin: 2000px
 
}
 
.subpanel22:hover{
 
 
                        background-image : url("https://static.igem.org/mediawiki/2016/5/5b/T--Sydney_Australia--2.png");
 
background-position: center top;
 
    background-size: 100% 120px ;
 
    font-weight:bold;
 
}
 
.subpanel22:hover .narrowimg {
 
    opacity:0.8;
 
    filter: alpha(opacity=80);
 
}
 
 
.subpanel23 { /* Projects */
 
 
 
    background-image : url("https://static.igem.org/mediawiki/2016/3/3b/T--Sydney_Australia--3.png");
 
 
    background-position: center top;
 
    background-size: 100% 120px ;
 
  background-repeat: no-repeat;
 
    float:left;
 
  width:26%;
 
    height:150px;;
 
      font-size:22px;
 
border-radius: 8px;
 
    text-align:center;
 
  margin-left: 3.53%;
 
      margin-right: 3.53%;
 
    margin-top:0;
 
    margin-right:11px;
 
    border-radius:7px;
 
    overflow:hidden;
 
    line-height:10px;
 
    left-margin: 2000px
 
 
}
 
.subpanel23:hover{
 
 
                        background-image : url("https://static.igem.org/mediawiki/2016/8/8b/T--Sydney_Australia--4.png");
 
background-position: center top;
 
    background-size: 100% 120px;
 
    font-weight:bold;
 
}
 
.subpanel23:hover .narrowimg {
 
    opacity:0.8;
 
    filter: alpha(opacity=80);
 
}
 
 
.subpanel6 { /* Collaboration, SensiGEM */
 
    height:240.5px;
 
    margin:0;
 
    margin-bottom:11px;
 
    border-radius:7px;
 
    overflow:hidden;
 
    background:rgb(255,255,255);
 
    color:Black;
 
    text-align:center;
 
}
 
.subpanel6:hover{
 
    font-weight:bold;
 
}
 
.subpanel6:hover .narrowimg {
 
    opacity:0.8;
 
    filter: alpha(opacity=80);
 
}
 
.separationFine {
 
width: 100%;
 
height:20px;
 
}
 
 
 
 
 
 
.mainLinks { /* Main */
 
                        float:left;
 
                        width : 30%;
 
height : 150px;
 
                        border-radius: 8px;
 
                        margin-left: 1.53%;
 
                        margin-right: 1.53%;
 
                        margin-top: 20px;
 
                       
 
opacity:0.65;
 
                        float:left;
 
                            text-align:center;
 
                          font-size:26px;
 
                    background-size:contain;
 
                        background-position:center;
 
                      background-position: 50% 50%;
 
background-repeat: no-repeat;
 
}
 
 
.mainLinks:hover{
 
 
opacity:1.0;
 
 
    filter: alpha(opacity=80);
 
 
}
 
 
.subLinks { /* Main */
 
                        float:left;
 
                        width : 40%;
 
height : 150px;
 
                        border-radius: 8px;
 
                        margin-left: 4.5%;
 
                        margin-right: 5%;
 
                        margin-top: 20px;
 
                       
 
                        float:left;
 
                            text-align:center;
 
                          font-size:26px;
 
                        background-repeat: no-repeat;
 
                      background-color: red;
 
                 
 
           
 
display: flex;
 
justify-content: center;
 
                        vertical-align : center;
 
align-items: center;
 
-webkit-display: flex;
 
-webkit-justify-content: center;
 
-webkit-align-items: center;
 
 
 
}
 
 
.subLinks:hover{
 
 
 
opacity:0.8;
 
    filter: alpha(opacity=80);
 
 
 
 
 
 
 
 
 
 
 
 
                 
 
 
 
 
 
}
 
 
 
 
 
 
<--Mah code-->
 
 
  
 
   body {
 
   body {
 
       font: 400 15px Lato, sans-serif;
 
       font: 400 15px Lato, sans-serif;
      line-height: 1.8;
+
       background-color: rgb(192,192,192);
      color: #818181;
+
}
+
  h2 {
+
      font-size: 24px;
+
      text-transform: uppercase;
+
      color: #303030;
+
      font-weight: 600;
+
      margin-bottom: 30px;
+
  }
+
  h4 {
+
      font-size: 19px;
+
      line-height: 1.375em;
+
      color: #303030;
+
      font-weight: 400;
+
      margin-bottom: 30px;
+
  } 
+
  .jumbotron {
+
    background-image: url("https://static.igem.org/mediawiki/2017/d/de/UF_Century_Tower.jpeg");
+
padding: 200px 25px;
+
      font-family: Montserrat, sans-serif;
+
 
+
  }
+
  .container-fluid {
+
      padding: 60px 50px;
+
  }
+
  .bg-grey {
+
       background-color: #f6f6f6;
+
  }
+
  .logo-small {
+
      color: #f4511e;
+
      font-size: 50px;
+
  }
+
  .logo {
+
      color: #f4511e;
+
      font-size: 200px;
+
  }
+
  .thumbnail {
+
      padding: 0 0 15px 0;
+
      border: none;
+
      border-radius: 0;
+
  }
+
  .thumbnail img {
+
      width: 100%;
+
      height: 100%;
+
      margin-bottom: 10px;
+
  }
+
  .carousel-control.right, .carousel-control.left {
+
      background-image: none;
+
      color: #f4511e;
+
  }
+
  .carousel-indicators li {
+
      border-color: #f4511e;
+
  }
+
  .carousel-indicators li.active {
+
      background-color: #f4511e;
+
  }
+
  .item h4 {
+
      font-size: 19px;
+
      line-height: 1.375em;
+
      font-weight: 400;
+
      font-style: italic;
+
      margin: 70px 0;
+
  }
+
  .item span {
+
      font-style: normal;
+
  }
+
  .panel {
+
      border: 1px solid #f4511e;
+
      border-radius:0 !important;
+
      transition: box-shadow 0.5s;
+
  }
+
  .panel:hover {
+
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
+
  }
+
  .panel-footer .btn:hover {
+
      border: 1px solid #f4511e;
+
      background-color: #fff !important;
+
      color: #f4511e;
+
  }
+
  .panel-heading {
+
      color: #fff !important;
+
      background-color: #f4511e !important;
+
      padding: 25px;
+
      border-bottom: 1px solid transparent;
+
      border-top-left-radius: 0px;
+
      border-top-right-radius: 0px;
+
      border-bottom-left-radius: 0px;
+
      border-bottom-right-radius: 0px;
+
  }
+
  .panel-footer {
+
      background-color: white !important;
+
  }
+
  .panel-footer h3 {
+
      font-size: 32px;
+
  }
+
  .panel-footer h4 {
+
      color: #aaa;
+
      font-size: 14px;
+
  }
+
  .panel-footer .btn {
+
      margin: 15px 0;
+
      background-color: #f4511e;
+
      color: #fff;
+
  }
+
  .navbar {
+
      margin-bottom: 0;
+
      background-color: #f4511e;
+
      z-index: 9999;
+
      border: 0;
+
      font-size: 12px !important;
+
      line-height: 1.42857143 !important;
+
      letter-spacing: 4px;
+
      border-radius: 0;
+
      font-family: Montserrat, sans-serif;
+
  }
+
  .navbar li a, .navbar .navbar-brand {
+
      color: #fff !important;
+
  }
+
  .navbar-nav li a:hover, .navbar-nav li.active a {
+
      color: #f4511e !important;
+
      background-color: #fff !important;
+
  }
+
  .navbar-default .navbar-toggle {
+
      border-color: transparent;
+
      color: #fff !important;
+
 
   }
 
   }
 
   footer .glyphicon {
 
   footer .glyphicon {
Line 465: Line 21:
 
       color: #f4511e;
 
       color: #f4511e;
 
   }
 
   }
  .slideanim {visibility:hidden;}
+
    img {
  .slide {
+
    width: 100%;
      animation-name: slide;
+
    height:auto;
      -webkit-animation-name: slide;
+
}
      animation-duration: 1s;
+
p {
      -webkit-animation-duration: 1s;
+
     margin: .4em 0 .5em 0;
      visibility: visible;
+
    line-height: 0em;
  }
+
}
  @keyframes slide {
+
p {
     0% {
+
    margin: 0 0 0px;
      opacity: 0;
+
}
      transform: translateY(70%);
+
.navbar {
    }  
+
     position: relative;
    100% {
+
    min-height: 50px;
      opacity: 1;
+
     margin-bottom: 0px;
      transform: translateY(0%);
+
     border: 1px solid transparent;
    }
+
}
  }
+
.img-fluid {
  @-webkit-keyframes slide {
+
  max-width: 100%;  
     0% {
+
  height: auto;
      opacity: 0;
+
}
      -webkit-transform: translateY(70%);
+
</style>
     }
+
    100% {
+
      opacity: 1;
+
      -webkit-transform: translateY(0%);
+
     }
+
  }
+
  @media screen and (max-width: 768px) {
+
    .col-sm-4 {
+
      text-align: center;
+
      margin: 25px 0;
+
    }
+
    .btn-lg {
+
        width: 100%;
+
        margin-bottom: 35px;
+
    }
+
  }
+
  @media screen and (max-width: 480px) {
+
    .logo {
+
        font-size: 150px;
+
    }
+
  }
+
  </style>
+
 
</head>
 
</head>
 
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
 
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
  
<div class="jumbotron text-center">
+
<div class="img-fluid">
  <h1>Tryptofrog</h1>  
+
  <img src="https://static.igem.org/mediawiki/2017/2/2f/UFlorida_Home_Pic.jpg"  width="600" height="300"/>
 
</div>
 
</div>
  
<!-- Container (About Section) -->
+
<br>
<div id="about" class="container-fluid">
+
<div class="img-fluid">
  <div class="row">
+
<img src="https://static.igem.org/mediawiki/2017/6/61/IGEM_Home_Design_2.jpg" class="img-fluid" alt="Responsive image">
    <div class="col-sm-8">
+
      <h2>About UFlorida</h2><br>
+
      <h4>We only speak latin obvi. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br>
+
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
      <br><button class="btn btn-default btn-lg">Get in Touch</button>
+
    </div>
+
    <div class="col-sm-4">
+
      <span class="glyphicon glyphicon-signal logo"></span>
+
    </div>
+
  </div>
+
</div>
+
 
+
<div class="container-fluid bg-grey">
+
  <div class="row">
+
    <div class="col-sm-4">
+
      <span class="glyphicon glyphicon-globe logo slideanim"></span>
+
    </div>
+
    <div class="col-sm-8">
+
      <h2>Our Goal</h2><br>
+
      <h4><strong>MISSION:</strong> Our mission lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br>
+
      <p><strong>VISION:</strong> Our vision Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
    </div>
+
  </div>
+
</div>
+
 
+
<!-- Container (Services Section) -->
+
<div id="What we gonna do" class="container-fluid text-center">
+
  <h2>SERVICES</h2>
+
  <h4>What we offer</h4>
+
  <br>
+
  <div class="row slideanim">
+
    <div class="col-sm-4">
+
      <span class="glyphicon glyphicon-off logo-small"></span>
+
      <h4>POWER</h4>
+
      <p>Lorem ipsum dolor sit amet..</p>
+
    </div>
+
    <div class="col-sm-4">
+
      <span class="glyphicon glyphicon-heart logo-small"></span>
+
      <h4>LOVE</h4>
+
      <p>Lorem ipsum dolor sit amet..</p>
+
    </div>
+
    <div class="col-sm-4">
+
      <span class="glyphicon glyphicon-lock logo-small"></span>
+
      <h4>JOB DONE</h4>
+
      <p>Lorem ipsum dolor sit amet..</p>
+
    </div>
+
  </div>
+
  <br><br>
+
  <div class="row slideanim">
+
    <div class="col-sm-4">
+
      <span class="glyphicon glyphicon-leaf logo-small"></span>
+
      <h4>GREEN</h4>
+
      <p>Lorem ipsum dolor sit amet..</p>
+
    </div>
+
    <div class="col-sm-4">
+
      <span class="glyphicon glyphicon-certificate logo-small"></span>
+
      <h4>CERTIFIED</h4>
+
      <p>Lorem ipsum dolor sit amet..</p>
+
    </div>
+
    <div class="col-sm-4">
+
      <span class="glyphicon glyphicon-wrench logo-small"></span>
+
      <h4 style="color:#303030;">HARD WORK</h4>
+
      <p>Lorem ipsum dolor sit amet..</p>
+
    </div>
+
  </div>
+
</div>
+
 
+
<!-- Container (Portfolio Section) -->
+
<div id="portfolio" class="container-fluid text-center bg-grey">
+
  <h2>Portfolio</h2><br>
+
  <h4>What we have created</h4>
+
  <div class="row text-center slideanim">
+
    <div class="col-sm-4">
+
      <div class="thumbnail">
+
        <img src="paris.jpg" alt="Paris" width="400" height="300">
+
        <p><strong>Paris</strong></p>
+
        <p>Yes, we built Paris</p>
+
      </div>
+
    </div>
+
    <div class="col-sm-4">
+
      <div class="thumbnail">
+
        <img src="newyork.jpg" alt="New York" width="400" height="300">
+
        <p><strong>New York</strong></p>
+
        <p>We built New York</p>
+
      </div>
+
    </div>
+
    <div class="col-sm-4">
+
      <div class="thumbnail">
+
        <img src="sanfran.jpg" alt="San Francisco" width="400" height="300">
+
        <p><strong>San Francisco</strong></p>
+
        <p>Yes, San Fran is ours</p>
+
      </div>
+
    </div>
+
  </div><br>
+
 
+
<!-- Container (Contact Section) -->
+
<div id="contact" class="container-fluid bg-grey">
+
  <h2 class="text-center">CONTACT</h2>
+
  <div class="row">
+
    <div class="col-sm-5">
+
      <p>Contact us and we'll get back to you when we feel like it.</p>
+
      <p><span class="glyphicon glyphicon-map-marker"></span> Gainesville, FL</p>
+
      <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
+
      <p><span class="glyphicon glyphicon-envelope"></span> nope@ufl.edu</p>
+
    </div>
+
    <div class="col-sm-7 slideanim">
+
      <div class="row">
+
        <div class="col-sm-6 form-group">
+
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
+
        </div>
+
        <div class="col-sm-6 form-group">
+
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
+
        </div>
+
      </div>
+
      <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
+
      <div class="row">
+
        <div class="col-sm-12 form-group">
+
          <button class="btn btn-default pull-right" type="submit">Send</button>
+
        </div>
+
      </div>
+
    </div>
+
  </div>
+
 
</div>
 
</div>
  
Line 648: Line 59:
 
     <span class="glyphicon glyphicon-chevron-up"></span>
 
     <span class="glyphicon glyphicon-chevron-up"></span>
 
   </a>
 
   </a>
  <p>Return to Top</p>
 
 
</footer>
 
</footer>
  

Latest revision as of 01:58, 2 November 2017



Responsive image