Team:UNIK Copenhagen

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* https://2014.igem.org/Team:UNIK_Copenhagen/css/main.css */
+
<!-- https://2014.igem.org/Team:UNIK_Copenhagen -->
 +
{{:Team:UNIK_Copenhagen/blocks/header.html |}}
 +
<html>
 +
<head>
 +
<meta charset="utf-8">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<meta name="description" content="">
 +
<meta name="author" content="">
-
/* REMOVE IGEM STYLE */
+
<title>iGEM CPH</title>
-
#search-controls {
+
-
  margin-top:30px;
+
-
}
+
-
#footer-box, #siteSub, #search-controls, .firstHeading, #contentSub, #catlinks,  #p-logo {
+
-
  display:none;
+
-
}
+
-
#bodyContent a[href ^="mailto:"],
+
-
.link-mailto {
+
-
    background: none;
+
-
    padding-right: 0;
+
-
}
+
-
#bodyContent a[href ^="https://"], .link-https {
+
-
    background: none;
+
-
    padding-right: 0;
+
-
}
+
-
#menubar {
+
-
margin-left: 10px;
+
-
background-color: transparent;
+
-
color: black;
+
-
}
+
-
.right-menu li a, .left-menu li a {
+
<!-- Bootstrap core CSS -->
-
color: black;
+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
-
background-color: transparent;
+
-
font-size: 10px;
+
-
font-weight: bold;
+
-
}
+
-
#top-section {
+
<!-- Custom CSS -->
-
    height: 15px;
+
<link rel="stylesheet" href="https://2014.igem.org/Team:UNIK_Copenhagen/css/main.css?action=raw&ctype=text/css" type="text/css" />
-
    border: none !important;
+
-
}
+
-
#content {
+
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
-
width: 100%;
+
<!--[if lt IE 9]>
-
background-color: #000 !important;
+
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-
color: white !important;
+
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-
}
+
<![endif]-->
 +
</head>
 +
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
-
html {
+
     <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
-
     height:100%;
+
        <div class="container">
-
}
+
            <div class="navbar-header page-scroll">
-
body {
+
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
-
    overflow-x: hidden;
+
                    <i class="fa fa-bars"></i>
-
    height:100%;
+
                </button>
-
    overflow-y: scroll;
+
                <a class="navbar-brand" href="#page-top">
-
}
+
                    <i class="fa fa-play-circle"></i>  <span class="light">iGEM</span> Copenhagen University
 +
                </a>
 +
            </div>
-
/* Custom theme */
+
            <!-- Collect the nav links, forms, and other content for toggling -->
-
body {
+
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
-
    width: 100%;
+
                <ul class="nav navbar-nav">
-
    height: 100%;
+
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
-
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
+
                    <li class="hidden">
-
    color: #fff;
+
                        <a href="#page-top"></a>
-
    background-color: #000;
+
                    </li>
-
}
+
                    <li class="page-scroll">
 +
                        <a href="#about">About</a>
 +
                    </li>
 +
                    <li class="page-scroll">
 +
                        <a href="#download">Download</a>
 +
                    </li>
 +
                    <li class="page-scroll">
 +
                        <a href="#contact">Contact</a>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
            <!-- /.navbar-collapse -->
 +
        </div>
 +
        <!-- /.container -->
 +
    </nav>
-
html {
+
     <section class="intro">
-
     width: 100%;
+
        <div class="intro-body">
-
    height: 100%;
+
            <div class="container">
-
}
+
                <div class="row">
 +
                    <div class="col-md-8 col-md-offset-2">
 +
                        <h1 class="brand-heading">Grayscale</h1>
 +
                        <p class="intro-text">A free, premium quality, responsive one page Bootstrap theme created by Start Bootstrap.</p>
 +
                        <div class="page-scroll">
 +
                            <a href="#about" class="btn btn-circle">
 +
                                <i class="fa fa-angle-double-down animated"></i>
 +
                            </a>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
-
h1,
+
    <section id="about" class="container content-section text-center">
-
h2,
+
        <div class="row">
-
h3,
+
            <div class="col-lg-8 col-lg-offset-2">
-
h4,
+
                <h2>About Grayscale</h2>
-
h5,
+
                <p>Grayscale is a premium quality, free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, all you need to do is download the template on the preview page. You can use this template for any purpose, personal or commercial.</p>
-
h6 {
+
                <p>This striking, black and white theme features stock photographs by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Map skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p>
-
    margin: 0 0 35px;
+
                <p>With this template, just the slightest splash of color can make a huge impact on the overall presentation and design.</p>
-
    text-transform: uppercase;
+
            </div>
-
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+
        </div>
-
    font-weight: 700;
+
     </section>
-
     letter-spacing: 1px;
+
-
}
+
-
p {
+
     <section id="download" class="content-section text-center">
-
     margin: 0 0 25px;
+
        <div class="download-section">
-
    font-size: 18px;
+
            <div class="container">
-
    line-height: 1.5;
+
                <div class="col-lg-8 col-lg-offset-2">
-
}
+
                    <h2>Download Grayscale</h2>
 +
                    <p>You can download Grayscale for free on the download page at Start Bootstrap. You can also get the source code directly from GitHub if you prefer. Additionally, Grayscale is the first Start Bootstrap theme to come with a LESS file for easy color customization!</p>
 +
                    <a href="http://startbootstrap.com/grayscale" class="btn btn-default btn-lg">Visit Download Page</a>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
-
@media(min-width:767px) {
+
    <section id="contact" class="container content-section text-center">
-
    p {
+
        <div class="row">
-
        margin: 0 0 35px;
+
            <div class="col-lg-8 col-lg-offset-2">
-
        font-size: 20px;
+
                <h2>Contact Start Bootstrap</h2>
-
        line-height: 1.6;
+
                <p>Feel free to email us to provide some feedback on our templates, give us suggestions for new templates and themes, or to just say hello!</p>
-
    }
+
                <p>feedback@startbootstrap.com</p>
-
}
+
                <ul class="list-inline banner-social-buttons">
 +
                    <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
 +
                    </li>
 +
                    <li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
 +
                    </li>
 +
                    <li><a href="https://plus.google.com/+Startbootstrap/posts" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span class="network-name">Google+</span></a>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
    </section>
-
a {
+
     <div id="map"></div>
-
     color: #28c3ab;
+
-
    -webkit-transition: all .2s ease-in-out;
+
-
    -moz-transition: all .2s ease-in-out;
+
-
    transition: all .2s ease-in-out;
+
-
}
+
-
a:hover,
+
     <!-- Core JavaScript Files -->
-
a:focus {
+
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-
     text-decoration: none;
+
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
-
    color: #176e61;
+
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
-
}
+
</body>
-
 
+
-
.light {
+
</html>
-
    font-weight: 400;
+
{{:Team:UNIK_Copenhagen/blocks/footer.html |}}
-
}
+
-
 
+
-
.navbar {
+
-
    margin-bottom: 0;
+
-
    border-bottom: 1px solid rgba(255,255,255,.3);
+
-
     text-transform: uppercase;
+
-
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+
-
    background-color: #000;
+
-
}
+
-
 
+
-
.navbar-brand {
+
-
    font-weight: 700;
+
-
}
+
-
 
+
-
.navbar-brand:focus {
+
-
    outline: 0;
+
-
}
+
-
 
+
-
.navbar-custom a {
+
-
    color: #fff;
+
-
}
+
-
 
+
-
.navbar-custom .nav li a {
+
-
    -webkit-transition: background .3s ease-in-out;
+
-
    -moz-transition: background .3s ease-in-out;
+
-
    transition: background .3s ease-in-out;
+
-
}
+
-
 
+
-
.navbar-custom .nav li a:hover,
+
-
.navbar-custom .nav li a:focus,
+
-
.navbar-custom .nav li.active {
+
-
    outline: 0;
+
-
    background-color: rgba(255,255,255,.2);
+
-
}
+
-
 
+
-
.navbar-toggle {
+
-
    padding: 4px 6px;
+
-
    font-size: 16px;
+
-
    color: #fff;
+
-
}
+
-
 
+
-
.navbar-toggle:focus,
+
-
.navbar-toggle:active {
+
-
    outline: 0;
+
-
}
+
-
 
+
-
@media(min-width:767px) {
+
-
    .navbar {
+
-
        padding: 20px 0;
+
-
        border-bottom: 0;
+
-
        letter-spacing: 1px;
+
-
        background: 0 0;
+
-
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
+
-
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
+
-
        transition: background .5s ease-in-out,padding .5s ease-in-out;
+
-
    }
+
-
 
+
-
    .top-nav-collapse {
+
-
        padding: 0;
+
-
        background-color: #000;
+
-
    }
+
-
 
+
-
    .navbar-custom.top-nav-collapse {
+
-
        border-bottom: 1px solid rgba(255,255,255,.3);
+
-
    }
+
-
}
+
-
 
+
-
.intro {
+
-
    display: table;
+
-
    width: 100%;
+
-
    height: auto;
+
-
    padding: 100px 0;
+
-
    text-align: center;
+
-
    color: #fff;
+
-
    background: url(https://static.igem.org/mediawiki/2014/2/2d/Intro-bg.jpg) no-repeat bottom center scroll;
+
-
    background-color: #000;
+
-
    -webkit-background-size: cover;
+
-
    -moz-background-size: cover;
+
-
    background-size: cover;
+
-
    -o-background-size: cover;
+
-
}
+
-
 
+
-
.intro-body {
+
-
    display: table-cell;
+
-
    vertical-align: middle;
+
-
}
+
-
 
+
-
.brand-heading {
+
-
    font-size: 40px;
+
-
}
+
-
 
+
-
.intro-text {
+
-
    font-size: 18px;
+
-
}
+
-
 
+
-
@media(min-width:767px) {
+
-
    .intro {
+
-
        height: 100%;
+
-
        padding: 0;
+
-
    }
+
-
 
+
-
    .brand-heading {
+
-
        font-size: 100px;
+
-
    }
+
-
 
+
-
    .intro-text {
+
-
        font-size: 25px;
+
-
    }
+
-
}
+
-
 
+
-
.btn-circle {
+
-
    width: 70px;
+
-
    height: 70px;
+
-
    margin-top: 15px;
+
-
    padding: 7px 16px;
+
-
    border: 2px solid #fff;
+
-
    border-radius: 35px;
+
-
    font-size: 40px;
+
-
    color: #fff;
+
-
    background: 0 0;
+
-
    -webkit-transition: background .3s ease-in-out;
+
-
    -moz-transition: background .3s ease-in-out;
+
-
    transition: background .3s ease-in-out;
+
-
}
+
-
 
+
-
.btn-circle:hover,
+
-
.btn-circle:focus {
+
-
    outline: 0;
+
-
    color: #fff;
+
-
    background: rgba(255,255,255,.1);
+
-
}
+
-
 
+
-
.page-scroll .btn-circle i.animated {
+
-
    -webkit-transition-property: -webkit-transform;
+
-
    -webkit-transition-duration: 1s;
+
-
    -moz-transition-property: -moz-transform;
+
-
    -moz-transition-duration: 1s;
+
-
}
+
-
 
+
-
.page-scroll .btn-circle:hover i.animated {
+
-
    -webkit-animation-name: pulse;
+
-
    -moz-animation-name: pulse;
+
-
    -webkit-animation-duration: 1.5s;
+
-
    -moz-animation-duration: 1.5s;
+
-
    -webkit-animation-iteration-count: infinite;
+
-
    -moz-animation-iteration-count: infinite;
+
-
    -webkit-animation-timing-function: linear;
+
-
    -moz-animation-timing-function: linear;
+
-
}
+
-
 
+
-
@-webkit-keyframes pulse {   
+
-
    0 {
+
-
        -webkit-transform: scale(1);
+
-
        transform: scale(1);
+
-
    }
+
-
 
+
-
    50% {
+
-
        -webkit-transform: scale(1.2);
+
-
        transform: scale(1.2);
+
-
    }
+
-
 
+
-
    100% {
+
-
        -webkit-transform: scale(1);
+
-
        transform: scale(1);
+
-
    }
+
-
}
+
-
 
+
-
@-moz-keyframes pulse {   
+
-
    0 {
+
-
        -moz-transform: scale(1);
+
-
        transform: scale(1);
+
-
    }
+
-
 
+
-
    50% {
+
-
        -moz-transform: scale(1.2);
+
-
        transform: scale(1.2);
+
-
     }
+
-
 
+
-
    100% {
+
-
        -moz-transform: scale(1);
+
-
        transform: scale(1);
+
-
    }
+
-
}
+
-
 
+
-
.content-section {
+
-
    padding-top: 100px;
+
-
}
+
-
 
+
-
.download-section {
+
-
    width: 100%;
+
-
    padding: 50px 0;
+
-
    color: #fff;
+
-
    background: url(https://static.igem.org/mediawiki/2014/0/00/Downloads-bg.jpg) no-repeat center center scroll;
+
-
    background-color: #000;
+
-
    -webkit-background-size: cover;
+
-
    -moz-background-size: cover;
+
-
    background-size: cover;
+
-
    -o-background-size: cover;
+
-
}
+
-
 
+
-
#map {
+
-
    width: 100%;
+
-
    height: 200px;
+
-
    margin-top: 100px;
+
-
}
+
-
 
+
-
@media(min-width:767px) {
+
-
    .content-section {
+
-
        padding-top: 250px;
+
-
     }
+
-
 
+
-
    .download-section {
+
-
        padding: 100px 0;
+
-
    }
+
-
 
+
-
    #map {
+
-
        height: 400px;
+
-
        margin-top: 250px;
+
-
    }
+
-
}
+
-
 
+
-
.btn {
+
-
    text-transform: uppercase;
+
-
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+
-
    font-weight: 400;
+
-
    -webkit-transition: all .3s ease-in-out;
+
-
    -moz-transition: all .3s ease-in-out;
+
-
    transition: all .3s ease-in-out;
+
-
}
+
-
 
+
-
.btn-default {
+
-
    border: 1px solid #28c3ab;
+
-
    color: #28c3ab;
+
-
    background-color: transparent;
+
-
}
+
-
 
+
-
.btn-default:hover,
+
-
.btn-default:focus {
+
-
    border: 1px solid #28c3ab;
+
-
    outline: 0;
+
-
    color: #000;
+
-
    background-color: #28c3ab;
+
-
}
+
-
 
+
-
.btn-huge {
+
-
    padding: 25px;
+
-
    font-size: 26px;
+
-
}
+
-
 
+
-
.banner-social-buttons {
+
-
    margin-top: 0;
+
-
}
+
-
 
+
-
@media(max-width:1199px) {
+
-
    ul.banner-social-buttons {
+
-
        margin-top: 15px;
+
-
    }
+
-
}
+
-
 
+
-
@media(max-width:767px) {
+
-
    ul.banner-social-buttons>li {
+
-
        display: block;
+
-
        margin-bottom: 20px;
+
-
        padding: 0;
+
-
    }
+
-
 
+
-
    ul.banner-social-buttons>li:last-child {
+
-
        margin-bottom: 0;
+
-
    }
+
-
}
+
-
 
+
-
::-moz-selection {
+
-
    text-shadow: none;
+
-
    background: #fcfcfc;
+
-
    background: rgba(255,255,255,.2);
+
-
}
+
-
 
+
-
::selection {
+
-
    text-shadow: none;
+
-
    background: #fcfcfc;
+
-
    background: rgba(255,255,255,.2);
+
-
}
+
-
 
+
-
img::selection {
+
-
    background: 0 0;
+
-
}
+
-
 
+
-
img::-moz-selection {
+
-
    background: 0 0;
+
-
}
+
-
 
+
-
body {
+
-
    webkit-tap-highlight-color: rgba(255,255,255,.2);
+
-
}
+

Revision as of 14:43, 10 July 2014


iGEM CPH '14 iGEM CPH

Grayscale

A free, premium quality, responsive one page Bootstrap theme created by Start Bootstrap.

About Grayscale

Grayscale is a premium quality, free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, all you need to do is download the template on the preview page. You can use this template for any purpose, personal or commercial.

This striking, black and white theme features stock photographs by Gratisography along with a custom Google Map skin courtesy of Snazzy Maps.

With this template, just the slightest splash of color can make a huge impact on the overall presentation and design.

Download Grayscale

You can download Grayscale for free on the download page at Start Bootstrap. You can also get the source code directly from GitHub if you prefer. Additionally, Grayscale is the first Start Bootstrap theme to come with a LESS file for easy color customization!

Visit Download Page

Contact Start Bootstrap

Feel free to email us to provide some feedback on our templates, give us suggestions for new templates and themes, or to just say hello!

feedback@startbootstrap.com

TEST

Retrieved from "http://2014.igem.org/Team:UNIK_Copenhagen"