(11 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | body { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
background-color: #272625; | background-color: #272625; | ||
− | + | } | |
− | + | h4, h1, p { | |
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
color: white; | color: white; | ||
− | } | + | } |
− | + | p { | |
− | + | font-size: 18px; | |
− | + | } | |
− | + | .container.content { | |
− | + | margin-top: 80px; | |
− | + | } | |
− | + | ||
− | + | /*folded-corner*/ | |
− | + | .post { | |
− | + | ||
− | + | ||
− | + | ||
− | font-size: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | . | + | |
− | + | ||
− | + | ||
− | margin-top: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | /*folded-corner*/ | + | |
− | .post { | + | |
position: relative; | position: relative; | ||
− | + | } | |
− | .folded-corner { | + | .folded-corner { |
position: absolute; | position: absolute; | ||
bottom: 0px; | bottom: 0px; | ||
Line 182: | Line 25: | ||
box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1); | box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1); | ||
border-radius: 15px 0 0 0; | border-radius: 15px 0 0 0; | ||
− | border-color: transparent # | + | border-color: transparent #B9DEBB transparent transparent; |
transition: border-width 0.2s ease-out; | transition: border-width 0.2s ease-out; | ||
− | + | } | |
− | .post:hover .folded-corner { | + | .post:hover .folded-corner { |
border-width: 40px 40px 0 0; | border-width: 40px 40px 0 0; | ||
− | } | + | } |
− | .photo .folded-corner {background: hsla(260,5%,75%,0.5); | + | .photo .folded-corner { |
− | + | background: hsla(260,5%,75%,0.5); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | [class*="col-"] { | |
− | + | float: left; | |
− | + | padding: 15px; | |
− | + | } | |
− | + | .flip { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width: 240px; | width: 240px; | ||
height: 370px; | height: 370px; | ||
− | } | + | } |
− | .flip .card { | + | .flip .card { |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
+ | text-align: center; | ||
transform-style: preserve-3d; | transform-style: preserve-3d; | ||
− | background-color: # | + | background-color: #B9DEBB; |
− | } | + | } |
− | .flip .card .namecard { | + | .flip .card .namecard { |
backface-visibility: hidden; | backface-visibility: hidden; | ||
z-index: 2; | z-index: 2; | ||
font-size: 3em; | font-size: 3em; | ||
line-height: 26px; | line-height: 26px; | ||
− | } | + | } |
− | .flip .card .front { | + | .flip .card .front { |
+ | margin: 15px; | ||
position: absolute; | position: absolute; | ||
z-index: 1; | z-index: 1; | ||
letter-spacing: 1px; | letter-spacing: 1px; | ||
− | background-color: # | + | background-color: #B9DEBB; |
letter-spacing: 1px; | letter-spacing: 1px; | ||
− | |||
overflow: hidden; | overflow: hidden; | ||
cursor: pointer; | cursor: pointer; | ||
− | } | + | } |
− | .flip .card .back { | + | .flip .card .back { |
transform: rotatey(-180deg); | transform: rotatey(-180deg); | ||
cursor: pointer; | cursor: pointer; | ||
letter-spacing: 1px; | letter-spacing: 1px; | ||
overflow: hidden; | overflow: hidden; | ||
− | + | margin: 15px; | |
text-align: left; | text-align: left; | ||
− | background-color: # | + | background-color: #B9DEBB; |
− | + | } | |
− | + | .flipped { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | .flipped { | + | |
transform: rotatey(-180deg); | transform: rotatey(-180deg); | ||
− | } | + | } |
− | + | .card h3 { | |
− | + | margin-top: 10px; | |
+ | } |
Latest revision as of 08:48, 10 July 2018
body { background-color: #272625; } h4, h1, p { color: white; } p { font-size: 18px; } .container.content { margin-top: 80px; }
/*folded-corner*/ .post { position: relative; } .folded-corner { position: absolute; bottom: 0px; right: 0px; border-width: 0; border-style: solid; background: hsla(260,100%,100%,0.2); box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1); border-radius: 15px 0 0 0; border-color: transparent #B9DEBB transparent transparent; transition: border-width 0.2s ease-out; } .post:hover .folded-corner { border-width: 40px 40px 0 0; } .photo .folded-corner { background: hsla(260,5%,75%,0.5); }
[class*="col-"] { float: left; padding: 15px; } .flip { width: 240px; height: 370px; } .flip .card { width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; background-color: #B9DEBB; } .flip .card .namecard { backface-visibility: hidden; z-index: 2; font-size: 3em; line-height: 26px; } .flip .card .front { margin: 15px; position: absolute; z-index: 1; letter-spacing: 1px; background-color: #B9DEBB; letter-spacing: 1px; overflow: hidden; cursor: pointer; } .flip .card .back { transform: rotatey(-180deg); cursor: pointer; letter-spacing: 1px; overflow: hidden; margin: 15px; text-align: left; background-color: #B9DEBB; } .flipped { transform: rotatey(-180deg); } .card h3 { margin-top: 10px; }