Difference between revisions of "Template:Edigem15 Design"

 
(44 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
 
+
gh
 
<!-- Start of CSS-->
 
<!-- Start of CSS-->
 
<style type="text/css">
 
<style type="text/css">
Line 27: Line 27:
 
height: 100%;
 
height: 100%;
 
border: 0px;
 
border: 0px;
−
background-color: transparent;
+
background-color: #fff;
 
margin: 0px;
 
margin: 0px;
 
padding: 0px;
 
padding: 0px;
Line 37: Line 37:
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
−
margin-left: auto;
+
margin-left: none;
−
margin-right: auto;
+
margin-right: none;
−
background-color: transparent;
+
background-color: #fff;
 +
                        border: none;
 
padding: 0px;
 
padding: 0px;
 
font-size: 100%;
 
font-size: 100%;
Line 52: Line 53:
 
         margin: 0px;
 
         margin: 0px;
 
         padding: 0px;
 
         padding: 0px;
−
         background-color: #000;
+
         background-color: #fff;
 
         -webkit-background-size: cover;
 
         -webkit-background-size: cover;
 
         -moz-background-size: cover;
 
         -moz-background-size: cover;
Line 59: Line 60:
 
}
 
}
  
 +
p {
 +
    margin: 0 0 25px;
 +
    font-size: 18px;
 +
    line-height: 1.5;
 +
}
 +
 +
 +
 +
 +
.intro {
 +
    display: table;
 +
    width: 100%;
 +
    height: 100;
 +
    text-align: center;
 +
    color: #fff;
 +
    background-color: #fff;
 +
    background: url("https://static.igem.org/mediawiki/2015/7/78/Edigem15_Design_tower.jpeg") no-repeat bottom center scroll;
 +
    -webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
    -o-background-size: cover;
 +
}
 +
 +
.intro .intro-body {
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    margin-left: auto;
 +
}
 +
 +
.intro .intro-body .brand-heading {
 +
color: #000;
 +
    margin-top: 15%;
 +
    font-size: 40px;
 +
border-bottom: none;
 +
}
 +
 +
.intro .intro-body .intro-text {
 +
    display: block;
 +
    width: 100%;
 +
    font-size: 18px;
 +
}
 +
 +
@media(min-width:768px) {
 +
    .intro {
 +
        height: 100%;
 +
        padding: 0;
 +
        box-shadow: 0 -100px 100px #fff inset;
 +
    }
 +
 +
    .intro .intro-body .brand-heading {
 +
        font-size: 100px;
 +
    }
 +
 +
    .intro .intro-body .intro-text {
 +
        font-size: 26px;
 +
    }
 +
}
  
 
body {
 
body {
−
padding-top:60px;
 
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 
     font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
 
     font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
 
     color: #fff;
 
     color: #fff;
−
     background-color: black;;
+
     background-color: #000;
 
}
 
}
  
Line 88: Line 145:
  
  
 +
}
 +
.arrowtext
 +
{
 +
    width: 100%;
 +
    display: block;
 
}
 
}
  
−
.featurettes
+
.arrow
 
{
 
{
−
  padding-top: 100px;
+
    height: 50px;
−
     background:top no-repeat fixed url('https://static.igem.org/mediawiki/2015/a/a8/Edigem15_design_first.png');
+
     width: 100px;
−
     height:100%;
+
     opacity: 0.7;
 
}
 
}
−
.featurette-divider {
+
 
−
  padding: 40px 0; /* Space out the Bootstrap <hr> more */
+
 
 +
/*COMPONENTS*/
 +
 
 +
*,
 +
*:after,
 +
*::before {
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 
}
 
}
  
−
/* Thin out the marketing headings */
+
/* General styles and layout */
−
.featurette-heading {
+
 
−
  font-weight: 300;
+
 
−
  line-height: 1;
+
 
−
   letter-spacing: -1px;
+
.container {
 +
overflow: hidden;
 +
/* we don't want the pseudo-elements sticking out */
 +
}
 +
 
 +
.container svg {
 +
display: block;
 +
}
 +
 
 +
section {
 +
        width: 100%;
 +
position: relative;
 +
padding: 10em 10%;
 +
background: #fff;
 +
color: #740404;
 +
text-align: center;
 +
}
 +
 
 +
section h2 {
 +
        color: #740404;
 +
margin: 0;
 +
padding: 0;
 +
font-size: 2.8em;
 +
font-weight: 400;
 +
}
 +
 
 +
section p {
 +
color: #740404;
 +
font-size: 1.3em;
 +
line-height: 1.5;
 +
        text-align: justify;
 +
}
 +
 
 +
.text:first-child {
 +
text-align: right;
 +
}
 +
 
 +
.text:nth-child(2) {
 +
text-align: left;
 +
}
 +
 
 +
.col-2 .column {
 +
width: 49%;
 +
}
 +
 
 +
.col-3 .column {
 +
padding: 0 1%;
 +
width: 33%;
 +
text-align: center;
 +
}
 +
 
 +
.col-3 .column p {
 +
padding: 1.4em;
 +
}
 +
 
 +
.column {
 +
display: inline-block;
 +
vertical-align: top;
 +
}
 +
 
 +
.icon {
 +
display: block;
 +
width: 2em;
 +
height: 2em;
 +
border-radius: 50%;
 +
background: rgba(0,0,0,0.1);
 +
color: #fff;
 +
text-align: center;
 +
font-size: 8em;
 +
line-height: 2em;
 +
margin: 0 auto;
 +
}
 +
 
 +
section.color h2 {
 +
color: #fff;
 +
}
 +
 
 +
section.color p {
 +
color: #fff;
 +
}
 +
 
 +
.color {
 +
background: #000;
 +
}
 +
 
 +
/*** Individual section styles and separators ***/
 +
 
 +
/* Common style for pseudo-elements */
 +
section::before,
 +
section::after {
 +
position: absolute;
 +
content: '';
 +
pointer-events: none;
 +
}
 +
 
 +
/* Triangles */
 +
.ss-style-triangles::before,
 +
.ss-style-triangles::after {
 +
left: 50%;
 +
width: 100px;
 +
height: 100px;
 +
-webkit-transform: translateX(-50%) rotate(45deg);
 +
transform: translateX(-50%) rotate(45deg);
 +
}
 +
 
 +
.ss-style-triangles::before {
 +
top: -50px;
 +
background: #2980b9;
 +
}
 +
 
 +
.ss-style-triangles::after {
 +
bottom: -50px;
 +
z-index: 10;
 +
background: inherit;
 +
}
 +
 
 +
/* Double Diagonal line */
 +
 
 +
.ss-style-doublediagonal {
 +
z-index: 1;
 +
padding-top: 6em;
 +
/*background: #391919;*/
 +
}
 +
 
 +
.ss-style-doublediagonal::before,
 +
.ss-style-doublediagonal::after {
 +
top: 0;
 +
left: -25%;
 +
z-index: -1;
 +
width: 100%;
 +
height: 75%;
 +
background: inherit;
 +
-webkit-transform: rotate(-2deg);
 +
transform: rotate(-2deg);
 +
-webkit-transform-origin: 0 0;
 +
transform-origin: 0 0;
 +
}
 +
 
 +
.ss-style-doublediagonal::before {
 +
height: 50%;
 +
/*background: #391919;*/
 +
-webkit-transform: rotate(-3deg);
 +
transform: rotate(-3deg);
 +
-webkit-transform-origin: 3% 0;
 +
transform-origin: 3% 0;
 +
}
 +
 
 +
/* Half Circle */
 +
.ss-style-halfcircle::before,
 +
.ss-style-halfcircle::after {
 +
left: 50%;
 +
z-index: 10;
 +
width: 100px;
 +
height: 100px;
 +
border-radius: 50%;
 +
background: inherit;
 +
-webkit-transform: translateX(-50%);
 +
transform: translateX(-50%);
 +
}
 +
 
 +
.ss-style-halfcircle::before {
 +
top: -50px;
 +
}
 +
 
 +
.ss-style-halfcircle::after {
 +
bottom: -50px;
 +
}
 +
 
 +
/* Big Triangle */
 +
svg#bigTriangleColor {
 +
pointer-events: none;
 +
}
 +
 
 +
#bigTriangleColor path {
 +
fill: #000;
 +
stroke: #000;
 +
stroke-width: 2;
 +
}
 +
 
 +
/* Curves */
 +
#curveUpColor path,
 +
#curveDownColor path {
 +
fill: #000;
 +
stroke: #000;
 +
        background-color: #8C001A;
 +
}
 +
 
 +
/* Multiple Triangles */
 +
.ss-style-multitriangles::before,
 +
.ss-style-multitriangles::after {
 +
left: 50%;
 +
width: 50px;
 +
height: 50px;
 +
-webkit-transform: translateX(-50%) rotate(45deg);
 +
transform: translateX(-50%) rotate(45deg);
 +
}
 +
 
 +
.ss-style-multitriangles::before {
 +
top: -25px;
 +
background: inherit;
 +
box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
 +
}
 +
 
 +
.ss-style-multitriangles::after {
 +
bottom: -25px;
 +
z-index: 10;
 +
background: inherit;
 +
box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
 +
}
 +
 
 +
/* Rounded corners */
 +
.ss-style-roundedcorners::before {
 +
top: 100%;
 +
left: 0;
 +
z-index: 10;
 +
width: 100%;
 +
height: 60px;
 +
border-radius: 0 0 60px 60px;
 +
background: inherit;
 +
}
 +
 
 +
/* Rounded center split and bottom rounded */
 +
.ss-style-roundedsplit {
 +
padding-top: 7em;
 +
border-radius: 0 0 80px 80px;
 +
}
 +
 
 +
.ss-style-roundedsplit::before,
 +
.ss-style-roundedsplit::after {
 +
top: -70px;
 +
left: 0;
 +
z-index: 10;
 +
width: 50%;
 +
height: 70px;
 +
background: inherit;
 +
}
 +
 
 +
.ss-style-roundedsplit::before {
 +
border-radius: 0 80px 0 0;
 +
}
 +
 
 +
.ss-style-roundedsplit::after {
 +
left: 50%;
 +
border-radius: 80px 0 0 0;
 +
}
 +
 
 +
/* Inverted rounded corners */
 +
.ss-style-invertedrounded {
 +
margin-bottom: 90px;
 +
padding: 13em 10% 10em;
 +
border-radius: 0 0 0 90px;
 +
}
 +
 
 +
.ss-style-invertedrounded::before,
 +
.ss-style-invertedrounded::after {
 +
left: 0;
 +
z-index: -1;
 +
height: 90px;
 +
background: #3498db;
 +
}
 +
 
 +
.ss-style-invertedrounded::before {
 +
top: 100%;
 +
width: 100%;
 +
border-radius: 0 90px 0 0;
 +
}
 +
 
 +
.ss-style-invertedrounded::after {
 +
bottom: 0;
 +
z-index: -1;
 +
width: 50%;
 +
}
 +
 
 +
/* Boxes */
 +
.ss-style-boxes {
 +
padding-top: 4em;
 +
padding-bottom: 13em;
 +
}
 +
 
 +
.ss-style-boxes::before {
 +
bottom: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 50px;
 +
background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9));
 +
background-image: linear-gradient(to right, #3498db 50%, #2980b9 50%);
 +
-webkit-background-size: 130px 100%;
 +
background-size: 130px 100%;
 +
}
 +
 
 +
/* Zig Zag (3d up and simple down) */
 +
.ss-style-zigzag::before,
 +
.ss-style-zigzag::after {
 +
    right: 0;
 +
    left: 0;
 +
    z-index: 10;
 +
    display: block;
 +
    height: 90px;
 +
    background-size: 50px 100%;
 +
   }
 +
 
 +
.ss-style-zigzag::before {
 +
top: -90px;
 +
background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, #3498db));
 +
background-image:
 +
linear-gradient(315deg, #3093d5 25%, transparent 25%),
 +
linear-gradient( 45deg, #3498db 25%, transparent 25%);
 +
background-position: 50%;
 +
}
 +
 
 +
.ss-style-zigzag::after {
 +
top: 100%;
 +
background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, #3498db), color-stop(0.25, #2980b9));
 +
background-image:
 +
linear-gradient(135deg, #3498db 25%, transparent 25%),
 +
linear-gradient(225deg, #3498db 25%, transparent 25%);
 +
background-position: 50%;
 +
}
 +
 
 +
/* Edges */
 +
.ss-style-roundedges {
 +
padding-bottom: 16em;
 +
}
 +
 
 +
.ss-style-roundedges::before,
 +
.ss-style-roundedges::after {
 +
width: 200px;
 +
height: 200px;
 +
border-radius: 50%;
 +
background: #2980b9;
 +
top: -100px;
 +
-webkit-transform: rotate(45deg);
 +
transform: rotate(45deg);
 +
}
 +
 
 +
.ss-style-roundedges::before {
 +
left: -100px;
 +
}
 +
 
 +
.ss-style-roundedges::after {
 +
right: -100px;
 +
}
 +
 
 +
/* Slit */
 +
.ss-style-slit {
 +
padding-top: 5em;
 +
}
 +
 
 +
.ss-style-slit::before,
 +
.ss-style-slit::after {
 +
width: 50.5%;
 +
width: -webkit-calc(50% + 10px);
 +
width: -moz-calc(50% + 10px);
 +
width: calc(50% + 10px);
 +
height: 160px;
 +
background: #2980b9;
 +
top: -160px;
 +
}
 +
 
 +
.ss-style-slit::before {
 +
left: -20px;
 +
-webkit-transform: skewX(10deg);
 +
transform: skewX(10deg);
 +
box-shadow: -10px -20px #3192d3;
 +
}
 +
 
 +
.ss-style-slit::after {
 +
right: -20px;
 +
-webkit-transform: skewX(-10deg);
 +
transform: skewX(-10deg);
 +
box-shadow: 10px -20px #3192d3;
 +
}
 +
 
 +
/* Big half circle */
 +
#bigHalfCircle path {
 +
fill: #000;
 +
stroke: #000;
 +
}
 +
 
 +
/* Big triangle with shadow */
 +
 
 +
#trianglePath1 {
 +
fill: #000;
 +
stroke: #000;
 +
}
 +
 
 +
#trianglePath2 {
 +
fill: #777;
 +
stroke: #777;
 +
}
 +
 
 +
/* Inclined Zig Zag */
 +
.ss-style-inczigzag::before,
 +
.ss-style-inczigzag::after {
 +
left: 0;
 +
width: 100%;
 +
height: 50px;
 +
background-size: 100px 100%;
 +
}
 +
 
 +
.ss-style-inczigzag::before {
 +
top: 0;
 +
background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #2980b9), color-stop(0.5, #3498db));
 +
background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%);
 +
}
 +
 
 +
.ss-style-inczigzag::after {
 +
bottom: 0;
 +
background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9));
 +
background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%);
 +
}
 +
 
 +
/* Castle */
 +
.ss-style-castle::before {
 +
left: 0;
 +
width: 100%;
 +
height: 50px;
 +
background-size: 200px 100%;
 +
top: 0;
 +
background-image: -webkit-linear-gradient(40deg, #3498db 50%, #2980b9 50%);
 +
background-image: linear-gradient(40deg, #3498db 50%, #2980b9 50%);
 +
}
 +
 
 +
/* Alternative slit with inner shadow */
 +
#slitPath1 {
 +
fill: #3498db;
 +
stroke: red;
 +
stroke-width: 0;
 +
}
 +
 
 +
#slitPath2, #slitPath3 {
 +
fill: #2072a7;
 +
}
 +
 
 +
/* Folded corner */
 +
.ss-style-foldedcorner::before,
 +
.ss-style-foldedcorner::after {
 +
bottom: 0;
 +
width: 100px;
 +
height: 100px;
 +
}
 +
 
 +
.ss-style-foldedcorner::before {
 +
right: 0;
 +
background-image: -webkit-linear-gradient(top left, #37a2ea 50%, #3498db 50%);
 +
background-image: linear-gradient(315deg, #3498db 50%, #37a2ea 50%);
 +
}
 +
 
 +
.ss-style-foldedcorner::after {
 +
right: 100px;
 +
background-image: -webkit-linear-gradient(top left, transparent 50%, #236fa1 50%);
 +
background-image: linear-gradient(315deg, #236fa1 50%, transparent 50%);
 +
}
 +
 
 +
/* Dots */
 +
.ss-style-dots::before {
 +
bottom: 20px;
 +
width: 14px;
 +
height: 14px;
 +
border-radius: 50%;
 +
left: 50%;
 +
-webkit-transform: translateX(-50%);
 +
transform: translateX(-50%);
 +
background: #2072a7;
 +
box-shadow: 30px 0 #2072a7, -30px 0 #2072a7;
 +
}
 +
 
 +
/* Double Line */
 +
.ss-style-doubleline::before {
 +
bottom: 30px;
 +
width: 140px;
 +
height: 2px;
 +
left: 50%;
 +
-webkit-transform: translateX(-50%);
 +
transform: translateX(-50%);
 +
background: #2072a7;
 +
box-shadow: 0 30px 0 #2072a7;
 +
}
 +
 
 +
/* Cross */
 +
.ss-style-cross {
 +
padding-bottom: 15em;
 +
}
 +
 
 +
.ss-style-cross::before,
 +
.ss-style-cross::after {
 +
background: #2072a7;
 +
bottom: 70px;
 +
width: 200px;
 +
height: 2px;
 +
left: 50%;
 +
-webkit-transform-origin: 50% 50%;
 +
transform-origin: 50% 50%;
 +
}
 +
 
 +
.ss-style-cross::before {
 +
-webkit-transform: translateX(-50%) rotate(45deg);
 +
transform: translateX(-50%) rotate(45deg);
 +
}
 +
 
 +
.ss-style-cross::after {
 +
-webkit-transform: translateX(-50%) rotate(-45deg);
 +
transform: translateX(-50%) rotate(-45deg);
 +
}
 +
 
 +
/* Stamp */
 +
#stamp path {
 +
fill: #3498db;
 +
stroke: #3498db; /* avoid gap in FF */
 +
}
 +
 
 +
/* Clouds */
 +
#clouds path {
 +
fill: #ecf0f1;
 +
stroke: #ecf0f1;
 +
}
 +
 
 +
/* Media Queries for the layout */
 +
@media screen and (max-width: 68em) {
 +
section {
 +
font-size: 80%;
 +
}
 +
}
 +
 
 +
@media screen and (max-width: 54em) {
 +
.column {
 +
display: block;
 +
width: 100% !important;
 +
}
 +
 
 +
.text:first-child,
 +
.text:nth-child(2) {
 +
text-align: center;
 +
}
 +
 
 +
.icon {
 +
margin: 0 auto;
 +
}
 +
 
 +
.col-2 .column:first-child .icon {
 +
margin: 0 auto 50px;
 +
}
 +
 
 +
.col-2 .column:nth-child(2) .icon {
 +
margin: 50px auto 0;
 +
}
 +
}
 +
 
 +
/*menu*/
 +
 
 +
#custom-bootstrap-menu.navbar-default .navbar-brand {
 +
    color: rgba(255, 255, 255, 1);
 +
}
 +
#custom-bootstrap-menu.navbar-default {
 +
    font-size: 18px;
 +
    background-color: rgba(34, 34, 34, 1);
 +
    border-bottom-width: 0px;
 +
}
 +
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
 +
    color: rgba(255, 255, 255, 1);
 +
    background-color: rgba(34, 34, 34, 1);
 +
    padding-left:5px;
 +
    padding-right:5px;
 +
    padding-top: 10px;
 +
}
 +
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
 +
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
 +
    color: rgba(255, 255, 255, 1);
 +
    background-color: rgba(87, 86, 86, 1);
 +
}
 +
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
 +
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
 +
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
 +
    color: rgba(255, 255, 255, 1);
 +
    background-color: rgba(87, 86, 86, 1);
 +
}
 +
#custom-bootstrap-menu.navbar-default .navbar-toggle {
 +
    border-color: #575656;
 +
}
 +
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
 +
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
 +
    background-color: #575656;
 +
}
 +
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
 +
    background-color: #575656;
 +
}
 +
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
 +
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
 +
    background-color: #222222;
 
}
 
}
  
 +
/*end menu*/
  
  

Latest revision as of 19:12, 20 November 2015

gh