|
|
(7 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
− | <html>
| + | body { |
− | <style>
| + | |
− | .row::after {
| + | |
− | content: "";
| + | |
− | clear: both;
| + | |
− | display: table;
| + | |
− | }
| + | |
− | [class*="col-"] {
| + | |
− | float: left;
| + | |
− | padding: 15px;
| + | |
− | }
| + | |
− | @media only screen and (max-width: 768px) {
| + | |
− | /* For mobile phones: */
| + | |
− | [class*="col-"] {
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | }
| + | |
− | @media only screen and (min-width: 600px) {
| + | |
− | /* For tablets: */
| + | |
− | .col-s-1 {width: 8.33%;}
| + | |
− | .col-s-2 {width: 16.66%;}
| + | |
− | .col-s-3 {width: 25%;}
| + | |
− | .col-s-4 {width: 33.33%;}
| + | |
− | .col-s-5 {width: 41.66%;}
| + | |
− | .col-s-6 {width: 50%;}
| + | |
− | .col-s-7 {width: 58.33%;}
| + | |
− | .col-s-8 {width: 66.66%;}
| + | |
− | .col-s-9 {width: 75%;}
| + | |
− | .col-s-10 {width: 83.33%;}
| + | |
− | .col-s-11 {width: 91.66%;}
| + | |
− | .col-s-12 {width: 100%;}
| + | |
− | }
| + | |
− | @media only screen and (min-width: 768px) {
| + | |
− | /* For desktop: */
| + | |
− | .col-1 {width: 8.33%;}
| + | |
− | .col-2 {width: 16.66%;}
| + | |
− | .col-3 {width: 25%;}
| + | |
− | .col-4 {width: 33.33%;}
| + | |
− | .col-5 {width: 41.66%;}
| + | |
− | .col-6 {width: 50%;}
| + | |
− | .col-7 {width: 58.33%;}
| + | |
− | .col-8 {width: 66.66%;}
| + | |
− | .col-9 {width: 75%;}
| + | |
− | /*.col-10 {width: 83.33%;}*/
| + | |
− | .col-10 {width: 76%;}
| + | |
− | .col-11 {width: 91.66%;}
| + | |
− | .col-12 {width: 100%;}
| + | |
− | }
| + | |
− | html {
| + | |
− | font-family: "Lucida Sans", sans-serif;
| + | |
− | }
| + | |
− | img {
| + | |
− | width: 100%;
| + | |
− | height: auto;
| + | |
− | }
| + | |
− | #headerimg {
| + | |
− | width: 80%;
| + | |
− | height: auto;
| + | |
− | filter: opacity(60%);
| + | |
− | transform: rotate(180deg);
| + | |
− | }
| + | |
− | .gototop {
| + | |
− | bottom: 55px;
| + | |
− | right: 10px;
| + | |
− | position: fixed;
| + | |
− | width: 60px;
| + | |
− | height: 30px;
| + | |
− | cursor: pointer;
| + | |
− | color: #FFE6D5;
| + | |
− | background-color: rgba(0,0,0,0);
| + | |
− | }
| + | |
− | .gototop img {
| + | |
− | background-color: rgba(0,0,0,0);
| + | |
− | }
| + | |
− | .topbar{
| + | |
− | overflow: hidden;
| + | |
| background-color: #272625; | | background-color: #272625; |
− | position: fixed;
| + | } |
− | top: 0;
| + | h4, h1, p { |
− | width: 100%;
| + | |
− | z-index: 1;
| + | |
− | margin-top: 18px;
| + | |
− | } | + | |
− | .topbar a {
| + | |
− | float: left;
| + | |
− | color: #f2f2f2;
| + | |
− | text-align: center;
| + | |
− | padding: 25px 16px;
| + | |
− | text-decoration: none;
| + | |
− | font-size: 17px;
| + | |
− | }
| + | |
− | .topbar a:hover {
| + | |
− | background-color: #ddd;
| + | |
− | color: black;
| + | |
− | }
| + | |
− | .barclass {
| + | |
− | text-decoration-line: none;
| + | |
− | font-size: 30px;
| + | |
− | background-color: #272625;
| + | |
− | color: #f2f2f2;
| + | |
− | }
| + | |
− | .barclass:hover {
| + | |
− | color:white;
| + | |
− | }
| + | |
− | #bartitle {
| + | |
− | background-color: #272625;
| + | |
− | color: #f2f2f2;
| + | |
− | font-size: 35px;
| + | |
− | padding-top : 25px;
| + | |
− | padding-bottom: 25px;
| + | |
− | }
| + | |
− | .topbar .active {
| + | |
− | background-color: #C8BCC7;
| + | |
| color: white; | | color: white; |
− | } | + | } |
− | .headertitle{
| + | p { |
− | letter-spacing: 2px;
| + | font-size: 18px; |
− | margin-left: 10px;
| + | } |
− | margin-top: 100px;
| + | .container.content { |
− | height: 50px;
| + | margin-top: 80px; |
− | padding: 20px 0;
| + | } |
− | color: #CE1441;
| + | |
− | }
| + | /*folded-corner*/ |
− | .row h1 {
| + | .post { |
− | background-color: #272625;
| + | |
− | padding: 30px;
| + | |
− | padding-top: 40px;
| + | |
− | font-size: 50px; | + | |
− | letter-spacing: 2px;
| + | |
− | margin-top: 10px;
| + | |
− | text-align: center;
| + | |
− | font-family: Patua One;
| + | |
− | color: #FFE6D5;
| + | |
− | } | + | |
− | .menu { | + | |
− | padding: 10px;
| + | |
− | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
| + | |
− | margin-top: 100px; | + | |
− | position: absolute;
| + | |
− | background-color: #C8BCC7;
| + | |
− | font-family: Patua One;
| + | |
− | font-size: 20px;
| + | |
− | } | + | |
− | .menu ul {
| + | |
− | list-style-type: none;
| + | |
− | list-style-image: none;
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | background-color: #C8BCC7;
| + | |
− | }
| + | |
− | .menu li {
| + | |
− | padding: 10px;
| + | |
− | margin-bottom: 7px;
| + | |
− | background-color: #434343;
| + | |
− | color: #FFE6D5;
| + | |
− | box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 2px 2px 2px rgba(0,0,0,0.24);
| + | |
− | cursor: pointer;
| + | |
− | }
| + | |
− | .menu li:hover {
| + | |
− | background-color: #585757;
| + | |
− | }
| + | |
− | .menu li.active {
| + | |
− | background-color: #585757;
| + | |
− | color: white;
| + | |
− | }
| + | |
− | @media screen and (max-width: 930px) {
| + | |
− | div.menu {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | }
| + | |
− | /*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 #FFEEEE transparent 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 { |
− | .member {
| + | background: hsla(260,5%,75%,0.5); |
− | padding: 10px;
| + | } |
− | margin: 20px;
| + | |
− | margin-top: 1px;
| + | |
− | background-color: #272625;
| + | |
− | }
| + | |
− | .principle {
| + | |
− | margin: 20px;
| + | |
− | border-style: none none double none;
| + | |
− | border-bottom-width: 7px;
| + | |
− | border-color: #F88EAE;
| + | |
− | }
| + | |
− | .advisor {
| + | |
− | margin: 20px;
| + | |
− | border-style: none none double none;
| + | |
− | border-bottom-width: 7px;
| + | |
− | border-color: #EA931F;
| + | |
− | }
| + | |
− | .wet {
| + | |
− | margin: 20px;
| + | |
− | border-style: none none double none;
| + | |
− | border-bottom-width: 7px;
| + | |
− | border-color: #28BD55;
| + | |
− | }
| + | |
− | .dry {
| + | |
− | margin: 20px;
| + | |
− | border-style: none none double none;
| + | |
− | border-bottom-width: 7px;
| + | |
− | border-color: #FFE049;
| + | |
− | }
| + | |
− | .hp {
| + | |
− | margin: 20px;
| + | |
− | border-style: none none double none;
| + | |
− | border-bottom-width: 10px;
| + | |
− | border-color: #8BBDE7;
| + | |
− | }
| + | |
− | .person {
| + | |
− | margin: 20px 13px;
| + | |
− | box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 2px 2px 2px rgba(0,0,0,0.24);
| + | |
− | background-color: #FFEEEE;
| + | |
− | }
| + | |
− | .person h3 {
| + | |
− | padding: 10px;
| + | |
− | font-size: 25px;
| + | |
− | font-style: italic;
| + | |
− | font-weight: 600;
| + | |
− | color: #2F3632;
| + | |
− | height: 65px;
| + | |
− | letter-spacing: 2px;
| + | |
− | margin-top: 20px;
| + | |
− | text-align: center;
| + | |
− | background-color: #FFEEEE;
| + | |
− | }
| + | |
− | /*set people center*/
| + | |
− | .person.flip.none{
| + | |
− | background: #272625;
| + | |
− | box-shadow: 0px 0px 0px;
| + | |
− | }
| + | |
− | .person.flip.none2{
| + | |
− | background: #272625;
| + | |
− | box-shadow: 0px 0px 0px;
| + | |
− | }
| + | |
− | .person.flip.none3{
| + | |
− | background: #272625;
| + | |
− | box-shadow: 0px 0px 0px;
| + | |
− | }
| + | |
− | .person.flip.none4{
| + | |
− | background: #272625;
| + | |
− | box-shadow: 0px 0px 0px;
| + | |
− | }
| + | |
− | .person.flip.none5{
| + | |
− | background: #272625;
| + | |
− | box-shadow: 0px 0px 0px;
| + | |
− | }
| + | |
− | @media only screen and (max-width: 1700px) {
| + | |
− | /* 3 */
| + | |
− | .col-1.col-s-1.person.flip.none.principlenone{
| + | |
− | width: 12%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.advisornone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none3.wetnone{
| + | |
− | width: 12%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none4.wetnone{
| + | |
− | width: 12%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none2.wetnone{
| + | |
− | width: 12%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none5.wetnone{
| + | |
− | width: 12%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.drynone{
| + | |
− | width: 12%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none2.drynone{
| + | |
− | width: 12%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none3.drynone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-3.col-s-6.person.flip.none.hpnone{
| + | |
− | width: 29%;
| + | |
− | }
| + | |
− | .header h1 {font-size: 60px;}
| + | |
− | }
| + | |
− | @media only screen and (max-width: 1544px) {
| + | |
− | .col-1.col-s-1.person.flip.none5.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | }
| + | |
− | @media only screen and (max-width: 1350px) {
| + | |
− | .col-1.col-s-1.person.flip.none2.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none3.drynone{
| + | |
− | display: inline;
| + | |
− | width: 12%;
| + | |
− | }
| + | |
− | }
| + | |
− | @media only screen and (min-width: 1700px) {
| + | |
− | /* 4 */
| + | |
− | .col-1.col-s-1.person.flip.none.principlenone{
| + | |
− | width: 20%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.advisornone{
| + | |
− | width: 10%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none3.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none4.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none2.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none5.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.drynone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none2.drynone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none3.drynone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-3.col-s-6.person.flip.none.hpnone{
| + | |
− | width: 33.33%;
| + | |
− | }
| + | |
− | .header h1 {font-size: 60px;}
| + | |
− | }
| + | |
− | @media only screen and (min-width: 2100px) {
| + | |
− | /* 5 */
| + | |
− | .col-1.col-s-1.person.flip.none.principlenone{
| + | |
− | width: 28%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.advisornone{
| + | |
− | width: 16.5%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none2.wetnone{
| + | |
− | display: inline;
| + | |
− | width: 28%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none5.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.drynone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-3.col-s-6.person.flip.none.hpnone{
| + | |
− | width: 37%;
| + | |
− | }
| + | |
− | .header h1 {font-size: 60px;}
| + | |
− | }
| + | |
− | @media only screen and (min-width: 2470px) {
| + | |
− | /* 6 */
| + | |
− | .col-1.col-s-1.person.flip.none.principlenone{
| + | |
− | width: 31%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.advisornone{
| + | |
− | width: 25%;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none2.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none5.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.drynone{
| + | |
− | display: inline;
| + | |
− | width: 7%;
| + | |
− | }
| + | |
− | .col-3.col-s-6.person.flip.none.hpnone{
| + | |
− | width: 40%;
| + | |
− | }
| + | |
− | .header h1 {font-size: 60px;}
| + | |
− | } | + | |
| | | |
− | @media only screen and (max-width: 1330px) {
| + | [class*="col-"] { |
− | /* For mobile phones: */
| + | float: left; |
− | .col-1.col-s-1.person.flip.none.principlenone{
| + | padding: 15px; |
− | display: none;
| + | } |
− | } | + | .flip { |
− | .col-1.col-s-1.person.flip.none.advisornone{
| + | |
− | display: none;
| + | |
− | } | + | |
− | .col-1.col-s-1.person.flip.none.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none2.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none5.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none3.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none4.wetnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none.drynone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-1.col-s-1.person.flip.none2.drynone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | .col-3.col-s-6.person.flip.none.hpnone{
| + | |
− | display: none;
| + | |
− | }
| + | |
− | }
| + | |
− | .flip {
| + | |
− | perspective: 800;
| + | |
| 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: #FFEEEE; | + | 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: #FFEEEE; | + | background-color: #B9DEBB; |
| letter-spacing: 1px; | | letter-spacing: 1px; |
− | color: rgb(8, 7, 1);
| |
| 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; |
− | padding: 15px; | + | margin: 15px; |
| text-align: left; | | text-align: left; |
− | background-color: #272625; | + | background-color: #B9DEBB; |
− | }
| + | } |
− | .card .back h2 {
| + | .flipped { |
− | font-size: 23px;
| + | |
− | letter-spacing: 1px;
| + | |
− | margin-top: 1px;
| + | |
− | margin-bottom: 3px;
| + | |
− | background-color: #272625;
| + | |
− | }
| + | |
− | .card .back .quote {
| + | |
− | font-family: 'Courgette', cursive;
| + | |
− | letter-spacing: 0px;
| + | |
− | font-size: 20px;
| + | |
− | font-weight: normal;
| + | |
− | }
| + | |
− | .card .back p {
| + | |
− | color: #fff1b9;
| + | |
− | font-size: 13px;
| + | |
− | letter-spacing: 0px;
| + | |
− | margin-top: 1px;
| + | |
− | margin-bottom: 1px;
| + | |
− | background-color: #272625;
| + | |
− | line-height: 15px;
| + | |
− | }
| + | |
− | .card .back h5 {
| + | |
− | color: #fff1b9;
| + | |
− | font-size: 15px;
| + | |
− | letter-spacing: 1px;
| + | |
− | margin-top: 1px;
| + | |
− | margin-bottom: 1px;
| + | |
− | background-color: #272625;
| + | |
− | font-weight: normal;
| + | |
− | }
| + | |
− | .card .back h3 {
| + | |
− | background-color: #272625;
| + | |
− | color: #fff1b9;
| + | |
− | margin-top: 5px;
| + | |
− | margin-bottom: 1px;
| + | |
− | height: 40px;
| + | |
− | padding: 1px;
| + | |
− | }
| + | |
− | .principle .card .back h2 {
| + | |
− | color: #F88EAE;
| + | |
− | }
| + | |
− | .advisor .card .back h2 {
| + | |
− | color: #EA931F;
| + | |
− | }
| + | |
− | .advisor .card .back .quote {
| + | |
− | color: rgb(241, 196, 137);
| + | |
− | }
| + | |
− | .wet .card .back h2 {
| + | |
− | color: #28BD55;
| + | |
− | }
| + | |
− | .wet .card .back .quote {
| + | |
− | color: #C5F0A4;
| + | |
− | }
| + | |
− | .dry .card .back h2 {
| + | |
− | color: #FFE049;
| + | |
− | }
| + | |
− | .dry .card .back .quote {
| + | |
− | color: rgb(253, 233, 135);
| + | |
− | }
| + | |
− | .hp .card .back h2 {
| + | |
− | color: #8BBDE7;
| + | |
− | }
| + | |
− | .hp .card .back .quote {
| + | |
− | color: rgb(193, 214, 231);
| + | |
− | } | + | |
− | .flipped { | + | |
| transform: rotatey(-180deg); | | transform: rotatey(-180deg); |
− | } | + | } |
− | </style>
| + | .card h3 { |
− | </html>
| + | margin-top: 10px; |
| + | } |