|
|
| Line 8: |
Line 8: |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
| | | | |
| − | <style>
| |
| − | /*************STYLING FOR HEADER*************/
| |
| − | /* Bye-Bye iGEM Defaults */
| |
| − | #sideMenu,
| |
| − | #top_title {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #content {
| |
| − | padding: 0px;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | background-color: white;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | #bodyContent h1,
| |
| − | #bodyContent h2,
| |
| − | #bodyContent h3,
| |
| − | #bodyContent h4,
| |
| − | #bodyContent h5 {
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent {
| |
| − | padding-right: 0px;
| |
| − | }
| |
| − |
| |
| − | #globalWrapper {
| |
| − | font-size: 100%;
| |
| − | padding: 0px;
| |
| − | margin: -10px -20px -20px -20px;
| |
| − | }
| |
| − |
| |
| − | .navbar-collapse {
| |
| − | padding-right: 0px;
| |
| − | }
| |
| − |
| |
| − | #banner {
| |
| − | margin-top: 50px;
| |
| − | }
| |
| − |
| |
| − | #sideMenu {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − |
| |
| − | .dropdown-menu li:hover .sub-menu {
| |
| − | visibility: visible;
| |
| − | }
| |
| − |
| |
| − | .dropdown:hover .dropdown-menu {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .navbar-nav .dropdown-menu,
| |
| − | .navbar .dropdown-menu {
| |
| − | margin-top: 15px;
| |
| − | float: right;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
| |
| − | body, html {
| |
| − | height: 100%;
| |
| − | color: #777;
| |
| − | line-height: 1.8;
| |
| − | }
| |
| − |
| |
| − | /******** Links n' such (NavBar)********/
| |
| − |
| |
| − | a.nav-link:link
| |
| − | {
| |
| − | color: #787d87;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | a.nav-link:visited
| |
| − | {
| |
| − | color: #787d87;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | a.nav-link:hover
| |
| − | {
| |
| − | color: #000000;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | a.nav-link:active
| |
| − | {
| |
| − | color: #7842ff;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | /******* w3 Syle editing *******/
| |
| − |
| |
| − | /* Create a Parallax Effect */
| |
| − | .bgimg-1, .bgimg-2, .bgimg-3 {
| |
| − | background-attachment: fixed;
| |
| − | background-position: center;
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − | .w3-top {
| |
| − | margin-top: 10px;
| |
| − | }
| |
| − |
| |
| − | /* First image (Logo Full height) */
| |
| − | .bgimg-1 {
| |
| − | background-image: url("https://unsplash.it/1920/1080?image=1049");
| |
| − | min-height: 100vh;
| |
| − | }
| |
| − |
| |
| − | /* Second image (Portfolio) */
| |
| − | .bgimg-2 {
| |
| − | background-image: url("https://unsplash.it/1920/1080?image=1050");
| |
| − | min-height: 400px;
| |
| − | }
| |
| − |
| |
| − | /* Third image (Contact) */
| |
| − | .bgimg-3 {
| |
| − | background-image: url("https://unsplash.it/g/1920/1080?image=1051");
| |
| − | min-height: 400px;
| |
| − | }
| |
| − |
| |
| − | .w3-wide {letter-spacing: 10px;}
| |
| − | .w3-hover-opacity {cursor: pointer;}
| |
| − |
| |
| − | /* Turn off parallax scrolling for tablets and phones */
| |
| − | @media only screen and (max-device-width: 1024px) {
| |
| − | .bgimg-1, .bgimg-2, .bgimg-3 {
| |
| − | background-attachment: scroll;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| | | | |
| | <body> | | <body> |
| − |
| |
| − | <!-- Navbar code (sits on top) -->
| |
| − |
| |
| − | <!--
| |
| − | <div class="w3-top">
| |
| − | <div class="w3-bar w3-purple w3-wide w3-padding">
| |
| − | <div class="w3-right w3-hide-small">
| |
| − | <a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-left" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
| |
| − | <i class="fa fa-bars"></i>
| |
| − | </a>
| |
| − | <a href="#projects" class="w3-bar-item w3-button">Projects</a>
| |
| − | <a href="#about" class="w3-bar-item w3-button">About</a>
| |
| − | <a href="#contact" class="w3-bar-item w3-button">Contact</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | -->
| |
| − |
| |
| − | <div class="w3-top">
| |
| − | <div class="w3-bar" "w3-right" "w3-hide-small" id="myNavbar">
| |
| − | <a class="w3-bar-item w3-button w3-hover-purple w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
| |
| − | <i class="fa fa-bars"></i>
| |
| − | </a>
| |
| − | <a href="#contact" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Human Practices </a>
| |
| − | <a href="#parts" class= "w3-bar-item w3-button w3-hide-small w3-right nav-link"> Parts </a>
| |
| − | <a href="#lab" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Lab </a>
| |
| − | <a href="#portfolio" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Project </a>
| |
| − | <a href="#about" class="w3-bar-item w3-button w3-hide-small w3-right nav-link"> Team </a>
| |
| − | <a href="#home" class="w3-bar-item w3-button w3-hide-small w3-right nav-link">HOME</a>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <!-- Navbar on small screens -->
| |
| − | <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
| |
| − | <a href="#home" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Home</a>
| |
| − | <a href="#about" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Team</a>
| |
| − | <a href="#portfolio" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Project</a>
| |
| − | <a href="#lab" class="w3-bar-item w3-button w3-hide-small nav-link"> Lab </a>
| |
| − | <a href="#parts" class= "w3-bar-item w3-button w3-hide-small nav-link"> Parts </a>
| |
| − | <a href="#contact" class="w3-bar-item w3-button nav-link" onclick="toggleFunction()">Human Practices</a>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| | <!-- First Parallax Image with Logo Text --> | | <!-- First Parallax Image with Logo Text --> |
| Line 349: |
Line 172: |
| | </div> | | </div> |
| | </div> | | </div> |
| − |
| |
| − | <!-- Footer -->
| |
| − | <footer class="w3-center w3-purple w3-padding-64 w3-opacity w3-hover-opacity-off">
| |
| − | <div class="w3-xlarge w3-section">
| |
| − | <i class="fa fa-twitter w3-hover-opacity"> Check us out on Twitter! </i>
| |
| − | <div> </div>
| |
| − | <div> </div>
| |
| − | <i class="fa fa-envelope w3-hover-opacity"> Contact us at nuigem2017@gmail.com </i>
| |
| − | </div>
| |
| − | </footer>
| |
| − | </footer>
| |
| − |
| |
| − | <!-- Add Google Maps -->
| |
| − | <script>
| |
| − | function myMap()
| |
| − | {
| |
| − | myCenter=new google.maps.LatLng(42.057879, -87.676537);
| |
| − | var mapOptions= {
| |
| − | center:myCenter,
| |
| − | zoom:12, scrollwheel: false, draggable: false,
| |
| − | mapTypeId:google.maps.MapTypeId.ROADMAP
| |
| − | };
| |
| − | var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
| |
| − |
| |
| − | var marker = new google.maps.Marker({
| |
| − | position: myCenter,
| |
| − | });
| |
| − | marker.setMap(map);
| |
| − | }
| |
| − |
| |
| − | // Modal Image Gallery
| |
| − | function onClick(element) {
| |
| − | document.getElementById("img01").src = element.src;
| |
| − | document.getElementById("modal01").style.display = "block";
| |
| − | var captionText = document.getElementById("caption");
| |
| − | captionText.innerHTML = element.alt;
| |
| − | }
| |
| − |
| |
| − | // Change style of navbar on scroll
| |
| − | window.onscroll = function() {myFunction()};
| |
| − | function myFunction() {
| |
| − | var navbar = document.getElementById("myNavbar");
| |
| − | if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
| |
| − | navbar.className = "w3-bar" + " w3-card-2" + " w3-animate-top" + " w3-white";
| |
| − | } else {
| |
| − | navbar.className = navbar.className.replace(" w3-card-2 w3-animate-top w3-white", "");
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Used to toggle the menu on small screens when clicking on the menu button
| |
| − | function toggleFunction() {
| |
| − | var x = document.getElementById("navDemo");
| |
| − | if (x.className.indexOf("w3-show") == -1) {
| |
| − | x.className += " w3-show";
| |
| − | } else {
| |
| − | x.className = x.className.replace(" w3-show", "");
| |
| − | }
| |
| − | }
| |
| − | </script>
| |
| − | <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5bk1K4OZq4w-CHBYP1_NFd1259WfHOro&callback=myMap"></script>
| |
| | | | |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
ABOUT ME
I love photography
We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 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.
My Name
Welcome to my website. I am lorem ipsum 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 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.
Im really good at:
Photography
Web Design
Photoshop
Our Team
Get to know the brains behind the brawn.
Click on the images to make them bigger and learn more about 2017 NU iGEM team !
