Difference between revisions of "Team:Edinburgh UG/Software"

(Replaced content with "{{EdigemUG16_Home}}")
Line 1: Line 1:
 
{{EdigemUG16_Home}}
 
{{EdigemUG16_Home}}
 
<html lang="en">
 
 
<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="">
 
 
    <title>Business Casual - Start Bootstrap Theme</title>
 
 
    <!-- Bootstrap Core CSS -->
 
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
 
    <!-- Custom CSS -->
 
    <link href="css/business-casual.css" rel="stylesheet">
 
 
    <!-- Fonts -->
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
 
    <link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
 
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
    <!--[if lt IE 9]>
 
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 
    <![endif]-->
 
 
</head>
 
 
<body>
 
 
 
<style>
 
/*!
 
* Start Bootstrap - Business Casual (http://startbootstrap.com/)
 
* Copyright 2013-2016 Start Bootstrap
 
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 
*/
 
 
body {
 
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 
    background: url('https://static.igem.org/mediawiki/2016/c/c6/Edinburgh_frontPage.jpg') no-repeat center center fixed;
 
    -webkit-background-size: cover;
 
    -moz-background-size: cover;
 
    background-size: cover;
 
    -o-background-size: cover;
 
}
 
 
h1,
 
h2,
 
h3,
 
h4,
 
h5,
 
h6 {
 
    text-transform: uppercase;
 
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
 
    font-weight: 700;
 
    letter-spacing: 1px;
 
}
 
 
p {
 
    font-size: 1.25em;
 
    line-height: 1.6;
 
    color: #000;
 
}
 
 
hr {
 
    max-width: 400px;
 
    border-color: #999999;
 
}
 
 
.brand,
 
.address-bar {
 
    display: none;
 
}
 
 
.navbar-brand {
 
    text-transform: uppercase;
 
    font-weight: 900;
 
    letter-spacing: 2px;
 
}
 
 
.navbar-nav {
 
    text-transform: uppercase;
 
    font-weight: 400;
 
    letter-spacing: 3px;
 
}
 
 
.img-full {
 
    min-width: 100%;
 
}
 
 
.brand-before,
 
.brand-name {
 
    text-transform: capitalize;
 
}
 
 
.brand-before {
 
    margin: 15px 0;
 
}
 
 
.brand-name {
 
    margin: 0;
 
    font-size: 4em;
 
}
 
 
.tagline-divider {
 
    margin: 15px auto 3px;
 
    max-width: 250px;
 
    border-color: #999999;
 
}
 
 
.box {
 
    margin-bottom: 20px;
 
    padding: 30px 15px;
 
    background: #fff;
 
    background: rgba(255,255,255,0.9);
 
}
 
 
.intro-text {
 
    text-transform: uppercase;
 
    font-size: 1.25em;
 
    font-weight: 400;
 
    letter-spacing: 1px;
 
}
 
 
.img-border {
 
    float: none;
 
    margin: 0 auto 0;
 
    border: #999999 solid 1px;
 
}
 
 
.img-left {
 
    float: none;
 
    margin: 0 auto 0;
 
}
 
 
footer {
 
    background: #fff;
 
    background: rgba(255,255,255,0.9);
 
}
 
 
footer p {
 
    margin: 0;
 
    padding: 50px 0;
 
}
 
 
@media screen and (min-width:768px) {
 
    .brand {
 
        display: inherit;
 
        margin: 0;
 
        padding: 30px 0 10px;
 
        text-align: center;
 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
 
        font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
 
        font-size: 5em;
 
        font-weight: 700;
 
        line-height: normal;
 
        color: #fff;
 
    }
 
 
    .top-divider {
 
        margin-top: 0;
 
    }
 
 
    .img-left {
 
        float: left;
 
        margin-right: 25px;
 
    }
 
 
    .address-bar {
 
        display: inherit;
 
        margin: 0;
 
        padding: 0 0 40px;
 
        text-align: center;
 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
 
        text-transform: uppercase;
 
        font-size: 1.25em;
 
        font-weight: 400;
 
        letter-spacing: 3px;
 
        color: #fff;
 
    }
 
 
    .navbar {
 
        border-radius: 0;
 
    }
 
 
    .navbar-header {
 
        display: none;
 
    }
 
 
    .navbar {
 
        min-height: 0;
 
    }
 
 
    .navbar-default {
 
        border: none;
 
        background: #fff;
 
        background: rgba(255,255,255,0.9);
 
    }
 
 
    .nav>li>a {
 
        padding: 35px;
 
    }
 
 
    .navbar-nav>li>a {
 
        line-height: normal;
 
    }
 
 
    .navbar-nav {
 
        display: table;
 
        float: none;
 
        margin: 0 auto;
 
        table-layout: fixed;
 
        font-size: 1.25em;
 
    }
 
}
 
 
@media screen and (min-width:1200px) {
 
    .box:after {
 
        content: '';
 
        display: table;
 
        clear: both;
 
    }
 
}
 
 
</style>
 
 
    <div class="brand">Business Casual</div>
 
   
 
 
    <!-- Navigation -->
 
   
 
 
    <div class="container">
 
 
        <div class="row">
 
            <div class="box">
 
                <div class="col-lg-12 text-center">
 
                    <div id="carousel-example-generic" class="carousel slide">
 
                        <!-- Indicators -->
 
                        <ol class="carousel-indicators hidden-xs">
 
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 
                        </ol>
 
 
                        <!-- Wrapper for slides -->
 
                        <div class="carousel-inner">
 
                            <div class="item active">
 
                                <img class="img-responsive img-full" src="img/slide-1.jpg" alt="">
 
                            </div>
 
                            <div class="item">
 
                                <img class="img-responsive img-full" src="img/slide-2.jpg" alt="">
 
                            </div>
 
                            <div class="item">
 
                                <img class="img-responsive img-full" src="img/slide-3.jpg" alt="">
 
                            </div>
 
                        </div>
 
 
                        <!-- Controls -->
 
                        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
 
                            <span class="icon-prev"></span>
 
                        </a>
 
                        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
 
                            <span class="icon-next"></span>
 
                        </a>
 
                    </div>
 
                    <h2 class="brand-before">
 
                        <small>Welcome to</small>
 
                    </h2>
 
                    <h1 class="brand-name">Business Casual</h1>
 
                    <hr class="tagline-divider">
 
                    <h2>
 
                        <small>By
 
                            <strong>Start Bootstrap</strong>
 
                        </small>
 
                    </h2>
 
                </div>
 
            </div>
 
        </div>
 
 
        <div class="row">
 
            <div class="box">
 
                <div class="col-lg-12">
 
                    <hr>
 
                    <h2 class="intro-text text-center">Build a website
 
                        <strong>worth visiting</strong>
 
                    </h2>
 
                    <hr>
 
                    <img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt="">
 
                    <hr class="visible-xs">
 
                    <p>The boxes used in this template are nested inbetween a normal Bootstrap row and the start of your column layout. The boxes will be full-width boxes, so if you want to make them smaller then you will need to customize.</p>
 
                    <p>A huge thanks to <a href="http://join.deathtothestockphoto.com/" target="_blank">Death to the Stock Photo</a> for allowing us to use the beautiful photos that make this template really come to life. When using this template, make sure your photos are decent. Also make sure that the file size on your photos is kept to a minumum to keep load times to a minimum.</p>
 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
 
                </div>
 
            </div>
 
        </div>
 
 
        <div class="row">
 
            <div class="box">
 
                <div class="col-lg-12">
 
                    <hr>
 
                    <h2 class="intro-text text-center">Beautiful boxes
 
                        <strong>to showcase your content</strong>
 
                    </h2>
 
                    <hr>
 
                    <p>Use as many boxes as you like, and put anything you want in them! They are great for just about anything, the sky's the limit!</p>
 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat diam quis nisl vestibulum dignissim. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
 
                </div>
 
            </div>
 
        </div>
 
 
    </div>
 
    <!-- /.container -->
 
 
 
 
 
 
 
 
</body>
 
 
</html>
 

Revision as of 16:40, 12 October 2016