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 150: Line 179:
 
.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) {
 +
    .hero .carousel-caption h1 {
 +
        font-size: 35px;
 +
    }
 
}
 
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
#Tour-section {
 
#Tour-section {
 
   padding-top: 30px;
 
   padding-top: 30px;

Revision as of 09:46, 16 September 2015

EPFL 2015 iGEM bioLogic Logic Orthogonal gRNA Implemented Circuits