Difference between revisions of "Team:IIT Delhi/main2"

(Created page with "<html> <head> <style> html{ height: 100%; background-color: #fff; } --- User Select Disable ---: .LogoBox, .SideBar, .Header{ -webkit-touch-callout: none; -webkit-u...")
 
(Blanked the page)
 
(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>
 

Latest revision as of 16:58, 7 September 2015