Difference between revisions of "Template:Team:NUS Singapore/CSS"

Line 4,968: Line 4,968:
 
     -webkit-transform: rotate(180deg);
 
     -webkit-transform: rotate(180deg);
 
     transform: rotate(180deg);
 
     transform: rotate(180deg);
 +
}
 +
 +
/*log_style.css*/
 +
h2.ss-subtitle{
 +
    padding: 60px 10px 90px;
 +
    font-size: 52px;
 +
    bottom: -5px;
 +
    left: 1px;
 +
    text-transform: uppercase;
 +
    color: rgb(182, 175, 175);
 +
position: relative;
 +
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 +
}
 +
h2.ss-subtitle:before{
 +
width: 4px;
 +
height: 40px;
 +
background: rgba(17,17,22,0.8);
 +
content: '';
 +
position: absolute;
 +
right: 75%;
 +
margin-right: -4px;
 +
bottom: -4px;
 +
-moz-border-radius: 2px 2px 0px 0px;
 +
-webkit-border-radius: 2px 2px 0px 0px;
 +
border-radius: 2px 2px 0px 0px;
 +
}
 +
h2.ss-subtitle:after{
 +
width: 25%;
 +
height: 0px;
 +
border-bottom: 4px dotted rgba(17,17,22,0.8);
 +
content: '';
 +
position: absolute;
 +
right: 50%;
 +
margin-right: -1px;
 +
bottom: -4px;
 +
}
 +
.ss-links{
 +
position: fixed;
 +
left: 10px;
 +
top: 220px;
 +
width: 25%;
 +
z-index: 100;
 +
}
 +
.ss-links a{
 +
background-color: rgb(182, 175, 175);
 +
    opacity: 0.7;
 +
font-size: 16px;
 +
    color: black;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
margin: 5px;
 +
float: left;
 +
border-radius: 50%;
 +
display: block;
 +
text-align: center;
 +
-webkit-transition: background 0.2s linear;
 +
-moz-transition: background 0.2s linear;
 +
-o-transition: background 0.2s linear;
 +
-ms-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 +
}
 +
.ss-links a:hover{
 +
opacity: 1;
 +
}
 +
.ss-container{
 +
    width: 100%;
 +
    position: relative;
 +
    text-align: left;
 +
    float: left;
 +
overflow: hidden;
 +
padding-bottom: 500px;
 +
}
 +
.ss-container h2{
 +
    font-size: 40px;
 +
    text-transform: uppercase;
 +
    color: rgba(78,84,123,0.2);
 +
text-shadow: 0px 1px 1px #fff;
 +
padding: 20px 0px;
 +
}
 +
.ss-container:before{
 +
    position: absolute;
 +
    width: 4px;
 +
    background: rgba(17,17,22,0.8);
 +
    top: 0px;
 +
    left: 50%;
 +
margin-left: -2px;
 +
    content: '';
 +
    height: 100%;
 +
}
 +
.ss-row{
 +
    width: 100%;
 +
    clear: both;
 +
    float: left;
 +
    position: relative;
 +
    padding: 30px 0;
 +
    right: -2%;
 +
}
 +
.ss-left, .ss-right{
 +
    float: left;
 +
    width: 48%;
 +
    position: relative;
 +
}
 +
.ss-right{
 +
    padding-left: 2%;
 +
}
 +
.ss-left{
 +
    text-align: right;
 +
    float: left;
 +
    padding-right: 2%;
 +
}
 +
.ss-circle{
 +
    /*border-radius: 50%;*/
 +
    overflow: hidden;
 +
    display: block;
 +
    text-indent: -9000px;
 +
    text-align: left;
 +
    -webkit-box-shadow:
 +
0px 2px 5px rgba(0,0,0,0.7) inset,
 +
0px 0px 0px 12px rgba(61,64,85,0.3);
 +
    -moz-box-shadow:
 +
0px 2px 5px rgba(0,0,0,0.7) inset,
 +
0px 0px 0px 12px rgba(61,64,85,0.3);
 +
    box-shadow:
 +
0px 2px 5px rgba(0,0,0,0.7) inset,
 +
0px 0px 0px 12px rgba(61,64,85,0.3);
 +
background-size: cover;
 +
background-color: #f0f0f0;
 +
background-repeat: no-repeat;
 +
background-position: center center;
 +
position: static;
 +
}
 +
.ss-small .ss-circle{
 +
width: 100px;
 +
height: 100px;
 +
}
 +
.ss-medium .ss-circle{
 +
width: 200px;
 +
height: 200px;
 +
}
 +
.ss-large .ss-circle{
 +
width: 300px;
 +
height: 300px;
 +
}
 +
.ss-circle-deco:before{
 +
width: 29%;
 +
height: 0px;
 +
border-bottom: 5px dotted #ddd;
 +
border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
 +
-webkit-box-shadow: 0px 1px 1px #fff;
 +
-moz-box-shadow: 0px 1px 1px #fff;
 +
box-shadow: 0px 1px 1px #fff;
 +
position: absolute;
 +
top: 50%;
 +
content: '';
 +
margin-top: -3px;
 +
}
 +
.ss-circle-deco:after{
 +
width: 0px;
 +
height: 0px;
 +
border-top: 10px solid transparent;
 +
    border-bottom: 10px solid transparent;
 +
content: '';
 +
position: absolute;
 +
top: 50%;
 +
margin-top: -10px;
 +
}
 +
.ss-left .ss-circle-deco:before{
 +
    right: 2%; 
 +
}
 +
.ss-right .ss-circle-deco:before{
 +
    left: 2%; 
 +
}
 +
.ss-left .ss-circle-deco:after{
 +
right: 0;
 +
border-right: 10px solid rgba(17,17,22,0.8);
 +
}
 +
.ss-right .ss-circle-deco:after{
 +
left: 0;
 +
border-left: 10px solid rgba(17,17,22,0.8);
 +
}
 +
.ss-left .ss-circle{
 +
    float: right;
 +
    margin-right: 30%;
 +
}
 +
.ss-right .ss-circle{
 +
    float: left;
 +
    margin-left: 30%;
 +
}
 +
.ss-container h3{
 +
    margin-top: 34px;
 +
padding: 10px 15px;
 +
background: rgba(26, 27, 33, 0.6);
 +
text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
 +
}
 +
.ss-container .ss-medium h3{
 +
margin-top: 82px;
 +
}
 +
.ss-container .ss-large h3{
 +
margin-top: 133px;
 +
}
 +
.ss-container .ss-left h3{
 +
border-right: 5px solid rgba(164,166,181,0.8);
 +
}
 +
.ss-container .ss-right h3{
 +
border-left: 5px solid rgba(164,166,181,0.8);
 +
}
 +
.ss-container h3 span{
 +
    color: rgba(255,255,255,0.8);
 +
    font-size: 13px;
 +
    display: block;
 +
    padding-bottom: 5px;
 +
}
 +
.ss-container h3 a{
 +
    font-size: 28px;
 +
    color: rgba(255,255,255,0.9);
 +
    display: block;
 +
}
 +
.ss-container h3 a:hover{
 +
color: rgba(255,255,255,1);
 +
}
 +
.ss-circle-1{
 +
    background-image:url(../images/1.jpg);
 +
}
 +
.ss-circle-2{
 +
    background-image: url(../images/2.jpg);
 +
}
 +
.ss-circle-3{
 +
    background-image: url(../images/3.jpg);
 +
}
 +
.ss-circle-4{
 +
    background-image: url(../images/4.jpg);
 +
}
 +
.ss-circle-5{
 +
    background-image: url(../images/5.jpg);
 +
}
 +
.ss-circle-6{
 +
    background-image: url(../images/6.jpg);
 +
}
 +
.ss-circle-7{
 +
    background-image: url(../images/7.jpg);
 +
}
 +
.ss-circle-8{
 +
    background-image: url(../images/8.jpg);
 +
}
 +
.ss-circle-9{
 +
    background-image: url(../images/9.jpg);
 +
}
 +
.ss-circle-10{
 +
    background-image: url(../images/10.jpg);
 +
}
 +
.ss-circle-11{
 +
    background-image: url(../images/11.jpg);
 +
}
 +
.ss-circle-12{
 +
    background-image: url(../images/12.jpg);
 +
}
 +
.ss-circle-13{
 +
    background-image: url(../images/13.jpg);
 +
}
 +
.ss-circle-14{
 +
    background-image: url(../images/14.jpg);
 +
}
 +
.ss-circle-15{
 +
    background-image: url(../images/15.jpg);
 +
}
 +
.ss-circle-16{
 +
    background-image: url(../images/16.jpg);
 +
}
 +
.ss-circle-17{
 +
    background-image: url(../images/17.jpg);
 +
}
 +
.ss-circle-18{
 +
    background-image: url(../images/18.jpg);
 +
}
 +
.ss-circle-19{
 +
    background-image: url(../images/19.jpg);
 +
}
 +
.ss-circle-20{
 +
    background-image: url(../images/20.jpg);
 +
}
 +
.ss-circle-21{
 +
    background-image: url(../images/21.jpg);
 +
}
 +
.ss-circle-22{
 +
    background-image: url(../images/22.jpg);
 +
}
 +
.ss-circle-23{
 +
    background-image: url(../images/23.jpg);
 +
}
 +
.ss-circle-24{
 +
    background-image: url(../images/24.jpg);
 +
}
 +
.ss-circle-25{
 +
    background-image: url(../images/25.jpg);
 +
}
 +
.ss-circle-26{
 +
    background-image: url(../images/26.jpg);
 +
}
 +
.ss-circle-27{
 +
    background-image: url(../images/27.jpg);
 +
}
 +
.ss-circle-28{
 +
    background-image: url(../images/28.jpg);
 +
}
 +
.ss-circle-29{
 +
    background-image: url(../images/29.jpg);
 +
}
 +
.ss-circle-30{
 +
    background-image: url(../images/30.jpg);
 +
}
 +
 +
.offset:before {
 +
    display: block;
 +
    content: " ";
 +
    height: 50px;
 
}
 
}
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 12:14, 9 October 2016