|
|
| (12 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| − | <style>
| |
| − | #content { /*-- changes default wiki settings --*/
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | border: 0px;
| |
| − | background-color: #EBADFF;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | background-image: url('https://static.igem.org/mediawiki/2015/7/76/Back.jpg');
| |
| − | background-repeat: repeat;
| |
| − | }
| |
| | | | |
| − | html{
| |
| − | height: 100%;
| |
| − | background-color: green;
| |
| − | }
| |
| − |
| |
| − | /* --- User Select Disable --- */
| |
| − | .LogoBox, .SideBar, .Header{
| |
| − | -webkit-touch-callout: none;
| |
| − | -webkit-user-select: none;
| |
| − | -khtml-user-select: none;
| |
| − | -moz-user-select: none;
| |
| − | -ms-user-select: none;
| |
| − | user-select: none;
| |
| − | }
| |
| − |
| |
| − | /* --- Header --- */
| |
| − | .LogoBox{
| |
| − | position: absolute;
| |
| − | top: 0; left: 0;
| |
| − | height: 140px; width: 140px;
| |
| − | }
| |
| − | .Logo {
| |
| − | position: relative;
| |
| − | margin: 12px 18px;
| |
| − | width: 110px;
| |
| − | height: 104px;
| |
| − | background-color: #ff4044;
| |
| − | border-radius: 20px 20px 80px 80px;
| |
| − | display: inline-block;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − | .Logo:before, .Logo:after {
| |
| − | position: absolute;
| |
| − | margin-top: 44px;
| |
| − | content:"";
| |
| − | left: 56px;
| |
| − | top: 0;
| |
| − | width: 50px;
| |
| − | height: 70px;
| |
| − | background: #ff4044;
| |
| − | border-radius: 50px 50px 8px 8px;
| |
| − | -webkit-transform: rotate(-54deg);
| |
| − | -moz-transform: rotate(-54deg);
| |
| − | -ms-transform: rotate(-54deg);
| |
| − | -o-transform: rotate(-54deg);
| |
| − | transform: rotate(-58deg);
| |
| − | -webkit-transform-origin: 0 100%;
| |
| − | -moz-transform-origin: 0 100%;
| |
| − | -ms-transform-origin: 0 100%;
| |
| − | -o-transform-origin: 0 100%;
| |
| − | transform-origin: 0 100%;
| |
| − | }
| |
| − | .Logo:after {
| |
| − | background-color: #ff4044;
| |
| − | left: 5px;
| |
| − | -webkit-transform: rotate(54deg);
| |
| − | -moz-transform: rotate(54deg);
| |
| − | -ms-transform: rotate(54deg);
| |
| − | -o-transform: rotate(54deg);
| |
| − | transform: rotate(58deg);
| |
| − | -webkit-transform-origin: 100% 100%;
| |
| − | -moz-transform-origin: 100% 100%;
| |
| − | -ms-transform-origin: 100% 100%;
| |
| − | -o-transform-origin: 100% 100%;
| |
| − | transform-origin :100% 100%;
| |
| − | }
| |
| − | .Logo:hover, .Logo:hover:before, .Logo:hover:after{
| |
| − | background-color: #ff5050;
| |
| − | }
| |
| − | .LogoText{
| |
| − | position: absolute;
| |
| − | top: 28px; left: 28px;
| |
| − | font: 27px 'Jura', sans-serif;
| |
| − | color: #fff;
| |
| − | cursor: pointer
| |
| − | }
| |
| − |
| |
| − | /* --- Header --- */
| |
| − | .Header{
| |
| − | position: absolute;
| |
| − | top: 0; left: 140px; right: 0;
| |
| − | height: 40px;
| |
| − | background-color: #ff4044;
| |
| − | }
| |
| − | .HeadBar{
| |
| − | float: right;
| |
| − | padding: 5px;
| |
| − | }
| |
| − | .Top{
| |
| − | display: inline-block;
| |
| − | font: 14px sans-serif;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | /* --- SIDEBAR --- */
| |
| − | .SideBar{
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | width: 150px;
| |
| − | padding-top: 150px;
| |
| − | background-color: green;
| |
| − | }
| |
| − | .Nav{
| |
| − | color: #fff;
| |
| − | font: 22px 'Jura', sans-serif;
| |
| − | padding: 11px;
| |
| − | }
| |
| − | .Nav:hover{
| |
| − | background-color: rgba(0,0,0,0.3);
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | /* --- CONTENT --- */
| |
| − | .Content{
| |
| − | position: absolute;
| |
| − | top: 60px; bottom: 30px; left: 170px; right: 30px;
| |
| − | padding: 30px 40px;
| |
| − | }
| |
| − | h3{
| |
| − | margin: 0 0 30px;
| |
| − | font: 42px sans-serif;
| |
| − | color: #ff4044;
| |
| − | }
| |
| − | p{
| |
| − | font: 15px sans-serif;
| |
| − | line-height: 20px;
| |
| − | margin: 0 0 24px;
| |
| − | color: #222;
| |
| − | }
| |
| − |
| |
| − | /* --- BUTTONS --- */
| |
| − | .btn{
| |
| − | background-color: #fff;
| |
| − | color: #ccc;
| |
| − | font: 600 16px 'Jura', sans-serif;
| |
| − | border-radius: 1px;
| |
| − | text-align: center;
| |
| − | height: 30px; line-height: 30px;
| |
| − | width: 120px;
| |
| − | }
| |
| − | .btn:hover{
| |
| − | color: #ff4044;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | <!-- Latest compiled and minified CSS -->
| |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
| |
| − |
| |
| − | <!-- Optional theme -->
| |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
| |
| − |
| |
| − | <!-- Latest compiled and minified JavaScript -->
| |
| − | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div class="Wrapper">
| |
| − |
| |
| − | <div class="Header">
| |
| − | <div class="HeadBar">
| |
| − | <div class="Top"><div class="btn">SIGN IN</div></div>
| |
| − | <div class="Top"><div class="btn">NEW USER</div></div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="SideBar">
| |
| − | <div class="Nav">Home Page</div>
| |
| − | <div class="Nav">Showcase</div>
| |
| − | <div class="Nav">Create New</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="LogoBox">
| |
| − | <div class="Logo"></div>
| |
| − | <div class="LogoText">SHIELD</div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="Content">
| |
| − | <h3>WELCOME</h3>
| |
| − | <p>
| |
| − | Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content.
| |
| − | </p>
| |
| − | <p>
| |
| − | Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content.
| |
| − | </p>
| |
| − | <p>
| |
| − | Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content. Content content content, content content content content.
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </body>
| |
| − | </html>
| |