|
|
| (24 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <div class="row">
| | {{#css: |
| <div class="medium-12 columns"> | | div.plainlinks a.external img { |
| <div class="panel"> | | max-width: 100%; |
| | height: auto; |
| | margin-bottom: 10px; |
| | } |
| | }} |
| | <p style="display: block; margin-left: auto; margin-right: auto; font-weight: bold; text-align: center;">Welcome to the Zd10 Wiki.</p> |
| | <br> |
| <div style="display: flex; justify-content: center;" class="plainlinks">[https://wiki.zd10.net/Trigate https://www.zd10.net/images/trigate-logo.png]</div> | | <div style="display: flex; justify-content: center;" class="plainlinks">[https://wiki.zd10.net/Trigate https://www.zd10.net/images/trigate-logo.png]</div> |
| <p style="display: block; margin-left: auto; margin-right: auto; font-weight: bold; text-align: center;">Welcome to the Zd10 Wiki.</p> | | <div style="display: flex; justify-content: center;" class="plainlinks">[https://wiki.zd10.net/Main_Page https://www.zd10.net/images/gats-logo.png]</div> |
| </div> <!--class="panel"-->
| | <div style="display: flex; justify-content: center;" class="plainlinks">[https://wiki.zd10.net/Main_Page https://www.zd10.net/images/westfallen-logo.png]</div> |
| </div> <!--class="medium-12 columns"-->
| | <br> |
| </div> <!--class="row"-->
| | <hr> |
| | | <br> |
| <style>
| | < small><div style=" display: table; margin- left: auto; margin- right: auto;">< em> Recent Changes</ em>< br> |
| @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
| | {{Special:SimpleChanges/limit=5}}</div></small> |
| html, body {
| |
| height: 100%;
| |
| }
| |
| | |
| body {
| |
| align-items: center;
| |
| background: #642B73;
| |
| background: linear-gradient(to bottom, #C6426E, #642B73);
| |
| display: flex;
| |
| font-family: "Open Sans", sans;
| |
| justify-content: center;
| |
| overflow: hidden;
| |
| perspective: 1800px;
| |
| text-align: center;
| |
| margin: 0 20px;
| |
| }
| |
| | |
| h1 {
| |
| color: #3e3e42;
| |
| font-size: 32px;
| |
| font-weight: 800;
| |
| letter-spacing: -1px;
| |
| margin-bottom: 30px;
| |
| transform: translateZ(35px);
| |
| }
| |
| | |
| h3 {
| |
| color: #eb285d;
| |
| font-size: 16px;
| |
| margin-bottom: 6px;
| |
| transform: translateZ(25px);
| |
| }
| |
| | |
| .cards {
| |
| background: #fff;
| |
| border-radius: 15px;
| |
| box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
| |
| display: inline-block;
| |
| padding: 30px 35px;
| |
| perspective: 1800px;
| |
| text-align: left;
| |
| transform-origin: 50% 50%;
| |
| transform-style: preserve-3d;
| |
| transform: rotateX(11deg) rotateY(16.5deg);
| |
| min-width: 595px;
| |
| }
| |
| | |
| .card {
| |
| border-radius: 15px;
| |
| box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6);
| |
| display: inline-block;
| |
| height: 250px;
| |
| width: 400px;
| |
| overflow: hidden;
| |
| perspective: 1200px;
| |
| position: relative;
| |
| transform-style: preserve-3d;
| |
| transform: translatez(35px);
| |
| transition: transform 200ms ease-out;
| |
| text-align: center;
| |
| }
| |
| .card:not(:last-child) {
| |
| margin-right: 30px;
| |
| }
| |
| | |
| .card__img {
| |
| position: relative;
| |
| height: 100%;
| |
| }
| |
| | |
| .card__bg {
| |
| bottom: -50px;
| |
| left: -50px;
| |
| position: absolute;
| |
| right: -50px;
| |
| top: -50px;
| |
| transform-origin: 50% 50%;
| |
| transform: translateZ(-50px);
| |
| z-index: 0;
| |
| }
| |
| | |
| .card__one .card__img {
| |
| height: 75%;
| |
| top: 18%;
| |
| right: 2%;
| |
| }
| |
| .card__one .card__bg {
| |
| background: url("https://www.zd10.net/images/trigate-parallax-bg.png") center/cover no-repeat;
| |
| }
| |
| .card__two .card__img {
| |
| top: 25px;
| |
| }
| |
| .card__two .card__bg {
| |
| background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_spirited.jpg") center/cover no-repeat;
| |
| }
| |
| .card__three .card__img {
| |
| top: 5px;
| |
| left: -4px;
| |
| height: 110%;
| |
| }
| |
| .card__three .card__bg {
| |
| background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_howlbg.jpg") center/cover no-repeat;
| |
| }
| |
| .card__text {
| |
| align-items: center;
| |
| background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
| |
| bottom: 0;
| |
| display: flex;
| |
| flex-direction: column;
| |
| height: 70px;
| |
| justify-content: center;
| |
| position: absolute;
| |
| width: 100%;
| |
| z-index: 2;
| |
| }
| |
| | |
| .card__title {
| |
| color: #fff;
| |
| font-size: 18px;
| |
| font-weight: 700;
| |
| padding: 0 10px;
| |
| margin-bottom: 3px;
| |
| }
| |
| | |
| .notice {
| |
| background: gold;
| |
| border-top-left-radius: 6px;
| |
| bottom: 0;
| |
| font-family: monospace;
| |
| font-size: 14px;
| |
| padding: 8px 10px;
| |
| position: absolute;
| |
| right: -20px;
| |
| }
| |
| </style>
| |
| | |
| <div class="cards">
| |
| <h3>Movies</h3>
| |
| <h1>Popular</h1>
| |
| <div class="card card__one">
| |
| <div class="card__bg"></div>
| |
| <img align="center" class="card__img" src="https://www.zd10.net/images/trigate-parallax-fg.png" />
| |
| <div class="card__text">
| |
| <!-- <p class="card__title">Princess Mononoke</p> -->
| |
| </div>
| |
| </div>
| |
| <div class="card card__two">
| |
| <div class="card__bg"></div>
| |
| <img class="card__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_chihiro.png" />
| |
| <div class="card__text">
| |
| <p class="card__title">Spirited Away</p>
| |
| </div>
| |
| </div>
| |
| <div class="card card__three">
| |
| <div class="card__bg"></div>
| |
| <img class="card__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_howlcastle.png" />
| |
| <div class="card__text">
| |
| <p class="card__title">Howl's Moving Castle</p>
| |
| </div>
| |
| </div>
| |
| </div> | |
