Бабич Людмила

index.css

@@ -0,0 +1,320 @@
+.cat-details
+{
+    display: inline-block;
+    position: relative;
+    width: inherit;
+    vertical-align: bottom;
+    text-align: center;
+}
+
+.output-switch
+{
+    float: left;
+}
+
+.cat
+{
+    padding-right: 20px;
+    padding-bottom: 15px;
+    padding-left: 20px;
+    width: 250px;
+    display: inline-block;
+    vertical-align: top;
+    overflow: hidden;
+    margin-left: 2%;
+    -webkit-transition-duration: .3s;
+    transition-duration: .3s;
+    -webkit-transition-property: box-shadow;
+    transition-property: box-shadow;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+
+.output-switch:checked ~ .cat
+{
+    width: 1200px;
+    overflow: hidden;
+    margin: 20px 10px 20px 30px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    -webkit-transition-duration: .3s;
+    transition-duration: .3s;
+    -webkit-transition-property: box-shadow;
+    transition-property: box-shadow;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+
+.output-switch:checked ~ .cat .cat-details
+{
+    display: inline-block;
+    vertical-align: top;
+    width: 30%;
+    position: relative;
+}
+
+.output-switch:checked ~ .cat .cat-photo
+{
+    vertical-align: top;
+    position: relative;
+    width: 25%;
+    display: inline-block;
+    box-sizing: border-box;
+}
+
+.output-switch:checked ~ .cat .cat-photo img
+{
+    vertical-align: top;
+    right: 10%;
+    width: 80%;
+    top: 0;
+    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,.2);
+    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,.2);
+    box-shadow: 4px 4px 4px rgba(0,0,0,.2);
+    -webkit-transition: all .5s ease-out;
+    -moz-transition: all .5s ease;
+    -o-transition: all .5s ease;
+}
+
+.output-switch:checked ~ .cat .description
+{
+    width: 400px;
+    display: inline-block;
+    text-align: left;
+    font-size: 100%;
+    color: #696969;
+}
+
+.output-switch:checked ~ .cat .cat-details .cat-stars
+{
+    padding-right: 20%;
+    display: inline-block;
+    *zoom: 1;
+    position: static;
+    padding-bottom: 15px;
+}
+
+.output-switch:checked ~ .cat .cat-details .price
+{
+    display: block;
+    position: relative;
+    text-align: left;
+}
+
+.cat:hover,
+.cat:focus,
+.cat:active
+{
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, .6);
+}
+
+.cat-photo
+{
+    width: inherit;
+    min-height: 300px;
+    position: relative;
+    box-sizing: border-box;
+}
+
+img
+{
+    width: inherit;
+    position: absolute;
+    bottom: 0;
+    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,.2);
+    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,.2);
+    box-shadow: 4px 4px 4px rgba(0,0,0,.2);
+    -webkit-transition: all .5s ease-out;
+    -moz-transition: all .5s ease;
+    -o-transition: all .5s ease;
+}
+
+img:hover
+{
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+}
+
+.description
+{
+    text-align: left;
+    font-size: 100%;
+    color: #696969;
+}
+
+p
+{
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: dimgrey;
+}
+
+.price
+{
+    text-align: left;
+}
+
+.current-price
+{
+    font-weight: bold;
+    display: inline-block;
+    font-size: 150%;
+    color: #e84a5f;
+}
+
+.old-price
+{
+    font-size: 120%;
+    display: inline-block;
+    color: #88304e;
+    font-weight: bold;
+    text-decoration: line-through;
+}
+
+.name-effect
+{
+    display: inline;
+    text-align: left;
+}
+
+.name-effect a
+{
+    width: 100%;
+    color: #00b8a9;
+    font-size: 150%;
+    font-weight: bold;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+a
+{
+    text-align: left;
+    width: inherit;
+}
+
+.name-effect a::after
+{
+    position: absolute;
+    top: 25%;
+    left: 0;
+    width: inherit;
+    height: 1px;
+    background: #00b8a9;
+    content: '';
+    opacity: 0;
+    -webkit-transition: height .3s, opacity .3s, -webkit-transform .3s;
+    -moz-transition: height .3s, opacity .3s, -moz-transform .3s;
+    transition: height .3s, opacity .3s, transform .3s;
+    -webkit-transform: translateY(-10px);
+    -moz-transform: translateY(-10px);
+    transform: translateY(-10px);
+}
+
+.name-effect a:hover::after,
+.name-effect a:focus::after
+{
+    height: 5px;
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    transform: translateY(0);
+}
+
+a.category
+{
+    font-size: 90%;
+    -moz-transition: color .2s .02s ease;
+    -o-transition: color .2s .02s ease;
+    -webkit-transition: color .2s .02s ease;
+    color: #222;
+}
+
+a.category :hover
+{
+    color: #1fa2e1;
+}
+
+.cat-stars input :checked ~ label,
+.cat-stars label,
+.cat-stars label :hover,
+.cat-stars label :hover ~ label
+{
+    background: url('images/cat-star.png') no-repeat;
+}
+
+.cat-stars
+{
+    overflow: hidden;
+    *zoom: 1;
+    position: static;
+    float: left;
+    padding-bottom: 15px;
+}
+
+.cat-stars input
+{
+    opacity: 0;
+    width: 19px;
+    height: 160px;
+    position: absolute;
+    z-index: 0;
+}
+
+.cat-stars input:checked ~ label.left-star
+{
+    background-position: 0 -40px;
+    height: 37px;
+    width: 19px;
+}
+
+.cat-stars input:checked ~ label.right-star
+{
+    background-position: 0 -120px;
+    height: 37px;
+    width: 19px;
+}
+
+.cat-stars label.left-star
+{
+    background-position: 0 0;
+    height: 37px;
+    width: 19px;
+    float: right;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+    padding-top: 3px;
+}
+
+.cat-stars label.right-star
+{
+    background-position: 0 -80px;
+    height: 37px;
+    width: 19px;
+    float: right;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+    padding-top: 3px;
+    padding-right: 5px;
+}
+
+.cat-stars label.left-star:hover,
+.cat-stars label:hover ~ label.left-star
+{
+    background-position: 0 -40px;
+    height: 37px;
+    width: 19px;
+}
+
+.cat-stars label:hover,
+.cat-stars label:hover ~ label.right-star
+{
+    background-position: 0 -120px;
+    height: 37px;
+    width: 19px;
+}