diff --git a/src/static/styles/polaroidStyle.css b/src/static/styles/polaroidStyle.css new file mode 100644 index 0000000..21e6c45 --- /dev/null +++ b/src/static/styles/polaroidStyle.css @@ -0,0 +1,207 @@ + + +a.polaroid { + display: block; + text-decoration: none; + color: #333; + padding: 10px 10px 20px 10px; + width: 150px; + border: 1px solid #BFBFBF; + background-color: white; + z-index: 2; + font-size: 0.7em; + -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); + -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); + box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); + -webkit-transition: all 0.5s ease-in; +} +a.polaroid:hover, +a.polaroid:focus, +a.polaroid:active { + z-index: 999; + border-color: #6A6A6A; + -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); + -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); + box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); + -webkit-transform: rotate(0deg) scale(1.05); + -moz-transform: rotate(0deg) scale(1.05); + transform: rotate(0deg) scale(1.05); +} +.polaroid img { + margin: 0 0 15px; + width: 150px; + height: 150px; +} + +a img { + border: none; + display: block; +} + +.photo-album { + position: relative; + width: 80%; + margin: 0 auto; + max-width: 70em; + height: 450px; + margin-top: 5em; + min-width: 800px; + max-width: 900px; +} +.photo-album .polaroid { + position: absolute; +} +.photo-album h1 { + position: absolute; + z-index: 5; + top: 150px; + text-align: center; + width: 100%; + line-height: 1.9; +} +.photo-album h1 span { + background-color: white; + font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; + padding: 0.4em 0.8em 0.3em 0.8em; + -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); + -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); + box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); + border: 1px solid #6A6A6A; +} +.photo-album .small { + width: 75px; + padding: 6px 6px 12px 6px; + font-size: 0.6em; +} +.photo-album .small img { + width: 75px; + height: 75px; +} +.photo-album .medium { + width: 200px; + padding: 13px 13px 26px 13px; + font-size: 0.8em; +} +.photo-album .medium img { + width: 200px; + height: 200px; +} +.photo-album .large { + width: 300px; + padding: 20px 20px 30px 20px; + font-size: 1em; +} +.photo-album .large img { + width: 300px; + height: 300px; +} +.photo-album .img1 { + bottom: 10px; + right: 365px; + -webkit-transform: rotate(10deg); + -moz-transform: rotate(10deg); + transform: rotate(10deg); +} +.photo-album .img2 { + top: 50px; + right: 20px; + -webkit-transform: rotate(-4deg); + -moz-transform: rotate(-4deg); + transform: rotate(-4deg); +} +.photo-album .img3 { + left: 400px; + top: 0; + -webkit-transform: rotate(-5deg); + -moz-transform: rotate(-5deg); + transform: rotate(-5deg); +} +.photo-album .img4 { + top: 10px; + left: 495px; + -webkit-transform: rotate(-20deg); + -moz-transform: rotate(-20deg); + transform: rotate(-20deg); +} +.photo-album .img5 { + bottom: 0; + right: 0; + -webkit-transform: rotate(1deg); + -moz-transform: rotate(1deg); + transform: rotate(1deg); +} +.photo-album .img6 { + bottom: 10px; + right: 156px; + -webkit-transform: rotate(6deg); + -moz-transform: rotate(6deg); + transform: rotate(6deg); +} +.photo-album .img7 { + bottom:0; + left:400px; + -webkit-transform: rotate(-10deg); + -moz-transform: rotate(-10deg); + transform: rotate(-10deg); +} +.photo-album .img8 { + bottom: -20px; + left: 700px; + -webkit-transform: rotate(-8deg); + -moz-transform: rotate(-8deg); + transform: rotate(-8deg); +} +.photo-album .img9 { + bottom: 0; + left: 0; + -webkit-transform: rotate(-8deg); + -moz-transform: rotate(-8deg); + transform: rotate(-8deg); +} +.photo-album .img10 { + top: 0; + left: 20px; + -webkit-transform: rotate(8deg); + -moz-transform: rotate(8deg); + transform: rotate(8deg); +} +.photo-album .img11 { + top: 0; + right: 0; + -webkit-transform: rotate(-8deg); + -moz-transform: rotate(-8deg); + transform: rotate(-8deg); +} +.photo-album .img12 { + top: 0; + left: 680px; + -webkit-transform: rotate(18deg); + -moz-transform: rotate(18deg); + transform: rotate(18deg); +} +.photo-album .img13 { + bottom: -20px; + right: 630px; + -webkit-transform: rotate(4deg); + -moz-transform: rotate(4deg); + transform: rotate(4deg); +} +.photo-album .img14 { + top: 90px; + left: 430px; + -webkit-transform: rotate(15deg); + -moz-transform: rotate(15deg); + transform: rotate(15deg); +} +.photo-album .img15 { + left:176px; + top:20px; + -webkit-transform: rotate(-8deg); + -moz-transform: rotate(-8deg); + transform: rotate(-8deg); +} + +a:hover, +a:focus { + z-index: 5; +} \ No newline at end of file