|
|
| (17 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| − | <style>
| |
| − | html{
| |
| − | height: 100%;
| |
| − | background-color: #fff;
| |
| − | }
| |
| | | | |
| − | /* --- 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: #383636;
| |
| − | }
| |
| − | .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;
| |
| − | }
| |
| − | </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>
| |