(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
+ | <title>TPHS IGEM Wiki</title> | ||
+ | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> | ||
+ | </head> | ||
+ | <body> | ||
+ | <style> | ||
+ | /* remove IGEM formatting */ | ||
− | + | #home_logo, #sideMenu { display:none; } | |
+ | #sideMenu, #top_title, .patrollink {display:none;} | ||
+ | body{background: white} | ||
+ | #content { margin-left:0px; margin-top:-7px; padding:0px; margin:0px; width:100%;} | ||
− | + | /* actual CSS */ | |
− | + | ||
+ | header{ | ||
+ | width: 100vw; | ||
+ | height: 20vh; | ||
− | + | font-size: 3em; | |
− | + | font-weight: bold; | |
− | + | font-family: Arial; | |
− | + | text-align: center; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
+ | .card{ | ||
+ | width: 300px; | ||
+ | height: 400px; | ||
+ | perspective: 1000px; | ||
+ | -moz-perspective: 1000px; | ||
+ | -webkit-perspective: 1000px; | ||
+ | -ms-perspective: 1000px; | ||
+ | } | ||
− | <div class=" | + | .card_content_wrapper{ |
− | <div class=" | + | position: absolute; |
− | < | + | width: 100%; |
− | < | + | height: 100%; |
− | + | transition: all 0.5s; | |
− | < | + | -moz-transition: all 0.5s; |
− | < | + | -o-transition: all 0.5s; |
− | < | + | -webkit-transition: all 0.5s; |
− | < | + | transform-style: preserve-3d; |
− | < | + | -webkit-transform-style: preserve-3d; |
− | </ | + | |
− | </div> | + | border-radius: 10px; |
− | </div> | + | box-shadow: 0 0px 20px rgb(230, 230, 230); |
+ | } | ||
+ | |||
+ | .card:hover .card_content_wrapper{ | ||
+ | transform: rotateY(180deg); | ||
+ | -moz-transform: rotateY(180deg); | ||
+ | -ms-transform: rotateY(180deg); | ||
+ | -o-transform: rotateY(180deg); | ||
+ | -webkit-transform: rotateY(180deg); | ||
+ | |||
+ | box-shadow: 0 0px 20px rgb(230, 230, 230); | ||
+ | } | ||
+ | |||
+ | .front, .back{ | ||
+ | position: absolute; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .back{ | ||
+ | transform: rotateY(180deg); | ||
+ | -moz-transform: rotateY(180deg); | ||
+ | -ms-transform: rotateY(180deg); | ||
+ | -o-transform: rotateY(180deg); | ||
+ | -webkit-transform: rotateY(180deg); | ||
+ | } | ||
+ | |||
+ | .back_wrapper{ | ||
+ | margin: 30px; | ||
+ | |||
+ | font-family: Arial; | ||
+ | } | ||
+ | |||
+ | .front_wrapper{ | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | |||
+ | font-family: Arial; | ||
+ | display: inline-block; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .back, .back_wrapper, .front, .front_wrapper{ | ||
+ | backface-visibility: hidden; | ||
+ | -moz-backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .card img{ | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border-radius: 100px; | ||
+ | } | ||
+ | |||
+ | .card .name{ | ||
+ | font-weight: 600; | ||
+ | font-size: 2em; | ||
+ | margin: 30px; | ||
+ | } | ||
+ | |||
+ | .card .desc_title{ | ||
+ | color: black; | ||
+ | font-size: 1.2em; | ||
+ | margin: 20px 0 20px 0; | ||
+ | } | ||
+ | |||
+ | .card .desc{ | ||
+ | color: rgb(105, 105, 105); | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | |||
+ | .card .tag{ | ||
+ | margin: 15px; | ||
+ | color: rgb(100, 100, 100); | ||
+ | font-family: Arial; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | </style> | ||
+ | <header> | ||
+ | Meet the team! | ||
+ | </header> | ||
+ | <section> | ||
+ | <div class = "card"> | ||
+ | <div class = "card_content_wrapper"> | ||
+ | <div class = "front"> | ||
+ | <div class = "tag"><i class="fas fa-code"></i> Website Designer</div> | ||
+ | <div class = "front_wrapper"> | ||
+ | <img src = "https://cdn.shopify.com/s/files/1/1078/0310/products/fruit-banana-dole-1_1024x1024.jpg?v=1500709708"></img> | ||
+ | <div class = "name">Banana Boi</div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class = "back"> | ||
+ | <div class = "back_wrapper"> | ||
+ | <div class = "desc"> | ||
+ | <div class = "desc_title">Likes:</div> | ||
+ | Bananas, coding, ur fav. | ||
+ | <div class = "desc_title">Project Contributions:</div> | ||
+ | Team mascot, important component of website designs. | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 00:53, 16 September 2018
Website Designer
Banana Boi
Likes:
Bananas, coding, ur fav.
Project Contributions:
Team mascot, important component of website designs.