/* ------------------------- all HTML--------------------------*/
body {
background-color: black;
margin: 0;
}
img{
height: 200px;
width: 200px;
margin: 5px 5px;
border: 1px;
}
img:hover{
border: solid #363636 1px;
background-color: white;
color:white;
}
/*------------------------------------------------------------*/
/* ------------------------- index.html--------------------------*/
/*------------------------------------------------------------*/
.wrapper{
margin-left: 5%;
margin-right: 5%;
}
.wrapper_header{
width:90%;
height:auto;
margin-top: 2%;
margin-left: 2%;
/*margin-right: 3%;*/
}
#filters li {
display:inline-block;
list-style-type:none;
font-size: 12pt;
font-family: 'Nunito', sans-serif;
margin: 5px 3px 5px 5px;
color:white;
}
/*----------------------------- button style -------------------------------*/
div#all{
border: solid #363636 1px;
margin-right: 4px;
width:30px;
padding:5px 10px;
}
div#all:hover{
background-color: #363636;
opacity: 75%;
transition:1s;
}
div#everyday{
border: solid #363636 1px;
margin-right: 4px;
width:125px;
padding:5px 10px;
}
div#everyday:hover{
background-color: #363636;
opacity: 75%;
transition:1s;
}
div#fancy{
border: solid #363636 1px;
margin-right: 4px;
width:100px;
padding:5px 10px;
}
div#fancy:hover{
background-color: #363636;
opacity: 75%;
transition:1s;
}
div#single{
border: solid #363636 1px;
margin-right: 4px;
width:105px;
padding:5px 10px;
}
div#single:hover{
background-color: #363636;
opacity: 75%;
transition:1s;
}
div#sporty{
border: solid #363636 1px;
margin-right: 4px;
width:105px;
padding:5px 10px;
}
div#sporty:hover{
background-color: #363636;
opacity: 75%;
transition:1s;
}
div#winter{
border: solid #363636 1px;
margin-right: 4px;
width:110px;
padding:5px 10px;
}
div#winter:hover{
background-color: #363636;
opacity: 75%;
transition:1s;
}
div#hide{
border: solid #363636 1px;
margin-right: 4px;
width:70px;
padding:5px 10px;
}
div#hide:hover{
background-color: #363636;
opacity: 75%;
transition:1s;
}
div img:hover{
transition:.5s;
transform: rotate(12deg);
}
/*--------------------------- sock style---------------------------------*/
#single_purple_mid{
height: 50px;
width:50px;
display:inline;
}
#single_purple_mid:hover{
opacity: .65;
transition:1.5s;
}
#single_black{
height: 50px;
width:50px;
display:inline;
}
#single_black:hover{
opacity: .65;
transition:1.5s;
}
#single_striped_blue{
height: 50px;
width:50px;
display:inline;
}
#single_striped_blue:hover{
opacity: .65;
transition:1.5s;
}
#single_stripe_stripe{
height: 50px;
width:50px;
display:inline;
}
#single_stripe_stripe:hover{
opacity: .65;
transition:1.5s;
}
#single_striped_orange{
height: 50px;
width:50px;
display:inline;
}
#single_striped_orange:hover{
opacity: .65;
transition:1.5s;
}
#single_green{
height: 50px;
width:50px;
display:inline;
}
#single_green:hover{
opacity: .65;
transition:1.5s;
}
#single_white_sport{
height: 50px;
width:50px;
display:inline;
}
#single_white_sport:hover{
opacity: .65;
transition:1.5s;
}
#single_black_argyle{
height: 50px;
width:50px;
display:inline;
}
#single_black_argyle:hover{
opacity: .65;
transition:1.5s;
}
#single_blue_argyle{
height: 50px;
width:50px;
display:inline;
}
#single_blue_argyle:hover{
opacity: .65;
transition:1.5s;
}
#single_black_long{
height: 50px;
width:50px;
display:inline;
}
#single_black_long:hover{
opacity: .65;
transition:1.5s;
}
#stripe1{
height: 50px;
width:50px;
display:inline;
}
#stripe1:hover{
opacity: .65;
transition:1.5s;
}
#solid1{
height: 50px;
width:50px;
display:inline;
}
#solid1:hover{
opacity: .65;
transition:1.5s;
}
#cb1{
height: 50px;
width:50px;
display:inline;
}
#cb1:hover{
opacity: .65;
transition:1.5s;
}
#polkadot{
height: 50px;
width:50px;
display:inline;
}
#polkadot:hover{
opacity: .65;
transition:1.5s;
}
#argyle1{
height: 50px;
width:50px;
display:inline;
}
#argyle1:hover{
opacity: .65;
transition:1.5s;
}
#stripe2{
height: 50px;
width:50px;
display:inline;
}
#stripe2:hover{
opacity: .65;
transition:1.5s;
}
#single_purple_high{
height: 50px;
width:50px;
display:inline;
}
#single_purple_high:hover{
opacity: .65;
transition:1.5s;
}
#solid2{
height: 50px;
width:50px;
display:inline;
}
#solid2:hover{
opacity: .65;
transition:1.5s;
}
#cb2{
height: 50px;
width:50px;
display:inline;
}
#cb2:hover{
opacity: .65;
transition:1.5s;
}
#argyle2{
height: 50px;
width:50px;
display:inline;
}
#argyle2:hover{
opacity: .65;
transition:1.5s;
}
#solid3{
height: 50px;
width:50px;
display:inline;
}
#solid3:hover{
opacity: .65;
transition:1.5s;
}
#solid4{
height: 50px;
width:50px;
display:inline;
}
#solid4:hover{
opacity: .65;
transition:1.5s;
}
#striped3{
height: 50px;
width:50px;
display:inline;
}
#striped3:hover{
opacity: .65;
transition:1.5s;
}
#solid5{
height: 50px;
width:50px;
display:inline;
}
#solid5:hover{
opacity: .65;
transition:1.5s;
}
#cb3{
height: 50px;
width:50px;
display:inline;
}
#cb3:hover{
opacity: .65;
transition:1.5s;
}
#argyle3{
height: 50px;
width:50px;
display:inline;
}
#argyle3:hover{
opacity: .65;
transition:1.5s;
}
#striped4{
height: 50px;
width:50px;
display:inline;
}
#striped4:hover{
opacity: .65;
transition:1.5s;
}
#solid6{
height: 50px;
width:50px;
display:inline;
}
#solid6:hover{
opacity: .65;
transition:1.5s;
}
#cb4{
height: 50px;
width:50px;
display:inline;
}
#cb4:hover{
opacity: .65;
transition:1.5s;
}
#argyle4{
height: 50px;
width:50px;
display:inline;
}
#argyle4:hover{
opacity: .65;
transition:1.5s;
}
#misc1{
height: 50px;
width:50px;
display:inline;
}
#misc1:hover{
opacity: .65;
transition:1.5s;
}
#solid7{
height: 50px;
width:50px;
display:inline;
}
#solid7:hover{
opacity: .65;
transition:1.5s;
}
#striped5{
height: 50px;
width:50px;
display:inline;
}
#striped5:hover{
opacity: .65;
transition:1.5s;
}
#solid8{
height: 50px;
width:50px;
display:inline;
}
#solid8:hover{
opacity: .65;
transition:1.5s;
}
#cb5{
height: 50px;
width:50px;
display:inline;
}
#cb5:hover{
opacity: .65;
transition:1.5s;
}
#solid9{
height: 50px;
width:50px;
display:inline;
}
#solid9:hover{
opacity: .65;
transition:1.5s;
}
#argyle5{
height: 50px;
width:50px;
display:inline;
}
#argyle5:hover{
opacity: .65;
transition:1.5s;
}
#solid10{
height: 50px;
width:50px;
display:inline;
}
#solid10:hover{
opacity: .65;
transition:1.5s;
}
#solid11{
height: 50px;
width:50px;
display:inline;
}
#solid11:hover{
opacity: .65;
transition:1.5s;
}
#striped6{
height: 50px;
width:50px;
display:inline;
}
#striped6:hover{
opacity: .65;
transition:1.5s;
}
#solid12{
height: 50px;
width:50px;
display:inline;
}
#solid12:hover{
opacity: .65;
transition:1.5s;
}
#cb6{
height: 50px;
width:50px;
display:inline;
}
#cb6:hover{
opacity: .65;
transition:1.5s;
}
#solid13{
height: 50px;
width:50px;
display:inline;
}
#solid13:hover{
opacity: .65;
transition:1.5s;
}
#misc2{
height: 50px;
width:50px;
display:inline;
}
#misc2:hover{
opacity: .65;
transition:1.5s;
}
#solid14{
height: 50px;
width:50px;
display:inline;
}
#solid14:hover{
opacity: .65;
transition:1.5s;
}
#striped7{
height: 50px;
width:50px;
display:inline;
}
#striped7:hover{
opacity: .65;
transition:1.5s;
}
#solid15{
height: 50px;
width:50px;
display:inline;
}
#solid15:hover{
opacity: .65;
transition:1.5s;
}
#cb7{
height: 50px;
width:50px;
display:inline;
}
#cb7:hover{
opacity: .65;
transition:1.5s;
}
#solid16{
height: 50px;
width:50px;
display:inline;
}
#solid16:hover{
opacity: .65;
transition:1.5s;
}
#solid17{
height: 50px;
width:50px;
display:inline;
}
#solid17:hover{
opacity: .65;
transition:1.5s;
}
#striped8{
height: 50px;
width:50px;
display:inline;
}
#striped8:hover{
opacity: .65;
transition:1.5s;
}
#solid18{
height: 50px;
width:50px;
display:inline;
}
#solid18:hover{
opacity: .65;
transition:1.5s;
}
#striped9{
height: 50px;
width:50px;
display:inline;
}
#striped9:hover{
opacity: .65;
transition:1.5s;
}
#solid19{
height: 50px;
width:50px;
display:inline;
}
#solid19:hover{
opacity: .65;
transition:1.5s;
}
#solid20{
height: 50px;
width:50px;
display:inline;
}
#solid20:hover{
opacity: .65;
transition:1.5s;
}
#misc3{
height: 50px;
width:50px;
display:inline;
}
#misc3:hover{
opacity: .65;
transition:1.5s;
}