Difference between revisions of "Team:EPF Lausanne/Test/css"

Line 145: Line 145:
 
     Home-page
 
     Home-page
 
   ========================================================================== */
 
   ========================================================================== */
.hero .carousel-indicators {
 
    bottom: -10px;
 
    left: 0;
 
    margin-left: 0;
 
    width: 100%;
 
}
 
    .hero .carousel-indicators li {
 
        border: none;
 
        border-radius: inherit;
 
        cursor: pointer;
 
        display: inline-block;
 
        height: 80px;
 
        margin: 0px;
 
        padding: 25px 0;
 
        opacity: .9;
 
        text-indent: 0;
 
    }
 
        .hero .carousel-indicators li .caption {
 
            font-size: 20px;
 
            font-weight: bold;
 
            height: 100%;
 
            text-transform: uppercase;
 
            width: 100%;
 
        }
 
.hero .carousel-indicators .col-sm-4 {
 
        width: 33.33333333333333%;
 
    }
 
 
 
 
#carousel-home {
 
#carousel-home {
 
   padding-top: 30px;
 
   padding-top: 30px;
Line 179: Line 150:
 
.carousel-inner {
 
.carousel-inner {
 
   text-align: center;
 
   text-align: center;
@media (max-width: 767px) {
 
    .hero .carousel-indicators .col-sm-3 {
 
        width: 10px;
 
    }
 
    .hero .carousel-indicators {
 
        bottom: 250px;
 
    }
 
        /* no change from bootstrap code */
 
        .hero .carousel-indicators li {
 
            background-color: #000 \9;
 
            background-color: rgba(0, 0, 0, 0);
 
            border: 1px solid #fff;
 
            border-radius: 10px;
 
            cursor: pointer;
 
            display: inline-block;
 
            height: 10px;
 
            margin: 1px;
 
            padding: 0;
 
            text-indent: -999px;
 
            width: 10px;
 
        }
 
        .hero .carousel-indicators .active {
 
            background-color: #fff;
 
            height: 12px;
 
            margin: 0;
 
            width: 12px;
 
        }
 
        .hero .carousel-indicators li .caption {
 
            display: none;
 
        }
 
}
 
.hero .carousel-inner .item .carousel-card {
 
    height: 500px;
 
    width: 100%;
 
}
 
.hero.container-fluid {
 
    padding: 0;
 
}
 
.hero .message-1 {
 
    background: #356DBF;
 
    color: #333;
 
}
 
.hero .message-2 {
 
    background: #3BBF6A;
 
    color: #333;
 
}
 
.hero .message-3 {
 
    background: #BF4042;
 
    color: #333;
 
}
 
.hero .message-4 {
 
    background: #BF2012;
 
    color: #333;
 
}
 
    .hero .message-1:hover,
 
    .hero .message-2:hover,
 
    .hero .message-3:hover,
 
    .hero .message-4:hover {
 
        color: #fff;
 
    }
 
    .hero .message-1:active,
 
    .hero .message-2:active,
 
    .hero .message-3:active,
 
    .hero .message-4:active {
 
        color: #fff;
 
        opacity: 1;
 
    }
 
.hero .btn.message-1,
 
.hero .btn.message-2,
 
.hero .btn.message-3,
 
.hero .btn.message-4 {
 
    color: #fff;
 
    font-size: 16px;
 
    font-weight: bold;
 
}
 
    .hero .btn.message-1:hover {
 
        background: #23497F;
 
    }
 
    .hero .btn.message-2:hover {
 
        background: #277F46;
 
    }
 
    .hero .btn.message-3:hover {
 
        background: #7F2B2C;
 
    }
 
    .hero .btn.message-4:hover {
 
        background: #BF2012;
 
    }
 
.hero h1.message-1,
 
.hero h1.message-1:hover,
 
.hero h1.message-2,
 
.hero h1.message-2:hover,
 
.hero h1.message-3,
 
.hero h1.message-3:hover
 
.hero h1.message-4,
 
.hero h1.message-4:hover {
 
    background: none;
 
    color: #fff;
 
}
 
.hero .carousel-indicators {
 
    bottom: -10px;
 
    left: 0;
 
    margin-left: 0;
 
    width: 100%;
 
}
 
    .hero .carousel-indicators li {
 
        border: none;
 
        border-radius: inherit;
 
        cursor: pointer;
 
        display: inline-block;
 
        height: 80px;
 
        margin: 0px;
 
        padding: 25px 0;
 
        opacity: .9;
 
        text-indent: 0;
 
    }
 
    .hero .carousel-indicators .col-sm-4 {
 
        width: 33.33333333333333%;
 
    }
 
    .hero .carousel-indicators .col-sm-3 {
 
        width: 25%;
 
    }
 
    .hero .carousel-indicators .active {
 
        height: 80px;
 
        opacity: 1;
 
    }
 
    .hero .carousel-indicators li .caption {
 
        font-size: 20px;
 
        font-weight: bold;
 
        height: 100%;
 
        text-transform: uppercase;
 
        width: 100%;
 
    }
 
    .hero .carousel-indicators li.active .caption {
 
        background: inherit;
 
        box-shadow: 0.157px 2.996px 4px 0px #5a5a5a;
 
        color: #fff;
 
        height: 110px;
 
        padding: 40px 20px;
 
        position: absolute;
 
        opacity: 1;
 
        top: -15px;
 
        z-index: 100;
 
    }
 
.hero .carousel-inner .item {
 
    height: 500px;
 
}
 
    .hero .carousel-inner .item .carousel-card {
 
        height: 500px;
 
        width: 100%;
 
    }
 
.hero .carousel-caption {
 
    bottom: 100px;
 
}
 
    .hero .carousel-caption h1 {
 
        font-size: 45px;
 
        margin-bottom: 30px;
 
    }
 
@media (max-width: 991px) {
 
    .hero .carousel-indicators li .caption {
 
        font-size: 17px;
 
    }
 
}
 
@media (max-width: 767px) {
 
    .hero .carousel-indicators .col-sm-4 {
 
        width: 10px;
 
    }
 
    .hero .carousel-indicators .col-sm-3 {
 
        width: 10px;
 
    }
 
    .hero .carousel-indicators {
 
        bottom: 250px;
 
    }
 
        /* no change from bootstrap code */
 
        .hero .carousel-indicators li {
 
            background-color: #000 \9;
 
            background-color: rgba(0, 0, 0, 0);
 
            border: 1px solid #fff;
 
            border-radius: 10px;
 
            cursor: pointer;
 
            display: inline-block;
 
            height: 10px;
 
            margin: 1px;
 
            padding: 0;
 
            text-indent: -999px;
 
            width: 10px;
 
        }
 
        .hero .carousel-indicators .active {
 
            background-color: #fff;
 
            height: 12px;
 
            margin: 0;
 
            width: 12px;
 
        }
 
        .hero .carousel-indicators li .caption {
 
            display: none;
 
        }
 
    .hero .carousel-inner .item {
 
        height: 600px;
 
    }
 
        .hero .carousel-inner .item .carousel-card {
 
            background-position: 50% 0;
 
            height: 400px;
 
            width: 100%;
 
        }
 
    .hero .carousel-caption {
 
        bottom: 0px;
 
    }
 
    .hero h1.message-1,
 
    .hero h1.message-1:hover {
 
        background: none;
 
        color: #23497F;
 
    }
 
    .hero h1.message-2,
 
    .hero h1.message-2:hover {
 
        background: none;
 
        color: #277F46;
 
    }
 
    .hero h1.message-3,
 
    .hero h1.message-3:hover {
 
        background: none;
 
        color: #7F2B2C;
 
    }
 
 
}
 
}
@media (max-width: 500px) {
+
.carousel-control {
    .hero .carousel-caption h1 {
+
  background-color: none;
        font-size: 35px;
+
    }
+
 
}
 
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
#Tour-section {
 
#Tour-section {
 
   padding-top: 30px;
 
   padding-top: 30px;

Revision as of 09:52, 16 September 2015

EPFL 2015 iGEM bioLogic Logic Orthogonal gRNA Implemented Circuits