|
|
| (81 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{UFlorida/Menu}} | + | {{UFlorida/Menu2}} |
| | + | |
| | | | |
| | <html> | | <html> |
| | | | |
| | <head> | | <head> |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
| − | <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> | + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
| − | <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> | + | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> |
| − | | + | |
| − | </head> | + | <style> |
| − | | + | |
| − | <style> | + | |
| | | | |
| | 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);
| + | |
| − | background-size: cover;
| + | |
| − | height: 100%;
| + | |
| − | padding: 250px 25px;
| + | |
| − | }
| + | |
| − | .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;
| + | |
| | } | | } |
| | footer .glyphicon { | | footer .glyphicon { |
| Line 125: |
Line 20: |
| | margin-bottom: 20px; | | margin-bottom: 20px; |
| | 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="img-fluid"> |
| − | <!--Jumbotron-->
| + | <img src="https://static.igem.org/mediawiki/2017/ 2/ 2f/ UFlorida_Home_Pic.jpg" width=" 600" height=" 300"/> |
| − | <div class=" jumbotron text-center"> | + | |
| − | <h1>UFlorida</h1>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <!-- Container (About Section) -->
| + | |
| − | <div id="about" class="container-fluid">
| + | |
| − | <div class="row">
| + | |
| − | <div class="col-sm-8">
| + | |
| − | <h2>Chytridiomycosis</h2>
| + | |
| − | <h4>Amphibian Endangerment</h4>
| + | |
| − | <p>Amphibian populations worldwide are threatened by the disease Chytridiomycosis, which is caused by the aquatic fungal pathogen Batrachochytrium dendrobatidis (Bd). This pathogen may be causing one of the world's greatest biodiversity losses ever recorded in history./p>
| + | |
| − | </div>
| + | |
| − | <div class="col-sm-4">
| + | |
| − | <span class= "img src"></span>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/ 7/ 7a/ Tree-frog-5.jpg" class="img-rounded" width=" 304" height=" 236" ></ img> | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | | | |
| − | <div class="container-fluid bg-grey"> | + | <br> |
| − | | + | <div class="img-fluid"> |
| − | <div class="col-sm-4">
| + | <img src="https://static.igem.org/mediawiki/2017/6/61/IGEM_Home_Design_2.jpg" class="img-fluid" alt="Responsive image"> |
| − | <span class="glyphicon glyphicon-globe logo slideanim"></span>
| + | |
| − | </div>
| + | |
| − | <div class="col-sm-8">
| + | |
| − | <h2>Our Values</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> | | </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>
| |
| − |
| |
| | | | |
| | <footer class="container-fluid text-center"> | | <footer class="container-fluid text-center"> |
