Friday, 1 August 2014

index.css

.wrapper {
    max-width: 2000px;
    height: auto;

}
body {
    margin: 0;
    padding: 0;
margin-left:20px;
}

.box {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 250px;
    background: #003399;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
text-align: center;
    margin-top: 0px;
    margin-left: 0px;
    line-height: 200px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);

}

.box:hover {
    background: #FFFFFF;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box2 {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 250px;
    background: #1E90FF;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
text-align: center;
    margin-top: 20px;
    margin-left: 0px;
    line-height: 200px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}


.box2:hover {
    background: #1E90FG;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box3 {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 250px;
    background: #FF3300;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
text-align: center;
    margin-top: 20px;
    margin-left: 0px;
    line-height: 200px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box3:hover {
    background: #FFFFFF;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box4 {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 250px;
    background: #33CC66;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
text-align: center;
    margin-top: 20px;
    margin-left: 0px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
    line-height: 200px;

}

.box4:hover {
    background: #FFFFFF;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box5 {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 250px;
    background: #336666;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
line-height: 200px;
text-align: center;
color: #FFFFFF;box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box5:hover {
    background: #FFFFFF;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box6 {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 250px;
    background: #0099FF  ;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
line-height: 200px;
color: #FFFFFF;
text-align: center;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box6:hover {
    background: #FFFFFF;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box7 {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 250px;
    background:#FF3333 ;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
text-align: center;
line-height: 200px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box7:hover {
    background: #FFFFFF;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box8 {
    display: inline-block;
    position: relative;
width: 300px;
    height: 250px;
    background: #FFFF66;
    z-index: 0;
text-align: center;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
color: #FFFFFF;
line-height: 200px
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);

}

.box8:hover {
    background: #FFFFFF;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box9 {
    display: inline-block;
    position: relative;
width: 300px;
    height: 250px;
    background: #FFFF66;
    z-index: 0;
text-align: center;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
color: #FFFFFF;
line-height: 200px
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);

}

.box9:hover {
    background: #FFFFFF;
    z-index: 100;
    transform: scale(1.2,1.2);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

No comments:

Post a Comment

Twitter Bird Gadget