Difference between revisions of "Team:Hong Kong UCCKE/2"

Line 119: Line 119:
 
     display:none;
 
     display:none;
 
}
 
}
 
.navigation {
 
display:block !important;
 
}
 
 
 
.navigation {
 
  /* critical sizing and position styles */
 
  width: 100%;
 
  height: 100%;
 
  position: fixed;
 
  top: 0;
 
  right: 0;
 
  bottom: 0;
 
  left: 0;
 
  z-index: 0;
 
 
 
  /* non-critical appearance styles */
 
  list-style: none;
 
  background: #111;
 
}
 
 
/* Navigation Menu - List items */
 
.nav-item {
 
  /* non-critical appearance styles */
 
  width: 200px;
 
  border-top: 1px solid #111;
 
  border-bottom: 1px solid #000;
 
}
 
 
.nav-item a {
 
  /* non-critical appearance styles */
 
  display: block;
 
  padding: 1em;
 
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
 
  color: white;
 
  font-size: 1.2em;
 
  text-decoration: none;
 
  transition: color 0.2s, background 0.5s;
 
}
 
 
.nav-item a:hover {
 
  color: #c74438;
 
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
 
}
 
 
/* Site Wrapper - Everything that isn't navigation */
 
.site-wrap {
 
  /* Critical position and size styles */
 
  min-height: 100%;
 
  min-width: 100%;
 
  background-color: white; /* Needs a background or else the nav will show through */
 
  position: relative;
 
  top: 0;
 
  bottom: 100%;
 
  left: 0;
 
  z-index: 1;
 
 
 
  /* non-critical apperance styles */
 
  padding: 4em;
 
  background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
 
  background-size: 200%;
 
}
 
 
/* Nav Trigger */
 
.nav-trigger {
 
  /* critical styles - hide the checkbox input */
 
  position: absolute;
 
  clip: rect(0, 0, 0, 0);
 
}
 
 
label[for="nav-trigger"] {
 
  /* critical positioning styles */
 
  position: fixed;
 
  left: 15px; top: 15px;
 
  z-index: 2;
 
 
 
  /* non-critical apperance styles */
 
  height: 30px;
 
  width: 30px;
 
  cursor: pointer;
 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
 
  background-size: contain;
 
}
 
 
/* Make the Magic Happen */
 
.nav-trigger + label, .site-wrap {
 
  transition: left 0.2s;
 
}
 
 
.nav-trigger:checked + label {
 
  left: 215px;
 
}
 
 
.nav-trigger:checked ~ .site-wrap {
 
  left: 200px;
 
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
 
}
 
 
body {
 
/* Without this, the body has excess horizontal scroll when the menu is open */
 
  overflow-x: hidden;
 
}
 
 
/* Additional non-critical styles */
 
 
h1, h3, p {
 
  max-width: 600px;
 
  margin: 0 auto 1em;
 
}
 
 
code {
 
padding: 2px;
 
background: #ddd;
 
}
 
 
/* Micro reset */
 
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
 
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }
 
 
}
 
}
  
Line 333: Line 214:
 
             <div class="specialmargin menuwrap">
 
             <div class="specialmargin menuwrap">
 
                 <div class="teamlogo">LOGO HERE</div>
 
                 <div class="teamlogo">LOGO HERE</div>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
 
<label for="nav-trigger"></label>
 
 
                 <nav class="nav">
 
                 <nav class="nav">
 
                     <ul>
 
                     <ul>
Line 370: Line 249:
 
                     </ul>
 
                     </ul>
 
                 </nav>
 
                 </nav>
 
 
<ul class="navigation">
 
<li class="nav-item"><a href="#">Home</a></li>
 
<li class="nav-item"><a href="#">Portfolio</a></li>
 
<li class="nav-item"><a href="#">About</a></li>
 
<li class="nav-item"><a href="#">Blog</a></li>
 
<li class="nav-item"><a href="#">Contact</a></li>
 
</ul>
 
  
  

Revision as of 00:52, 1 July 2016


× This website is not done yet. Nothing posted here is finalized.

Welcome to Hong Kong UCCKE

This place is for brief project and team description. Please send me the content to place here, thank you bla bla bla bla bla bla bla some more text blablabla bla ba some mmmmore more

Team Logo (placeholder)
.

BRIEF OF OUR PROJECT

Hannah is in charge of this poart. Following is just some random text, ignore it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt lacinia tempor. Cras finibus luctus tellus, at sollicitudin mauris faucibus at. Sed et euismod enim. Suspendisse mauris augue, mattis at augue tempus, ornare rhoncus ligula. Nulla pulvinar iaculis ligula, et lobortis ipsum mattis quis. Praesent vehicula aliquam purus, et sollicitudin. Cras finibus luctus tellus, at sollicitudin mauris faucibus at. Sed et euismod enim. Suspendisse mauris augue, mattis at augue tempus, ornare rhoncus ligula.

Learn about our team

Text extract from our team page random text random spelling mistake try find it. Some more random text using the space.

Details of the project

Text extract from our team page random text random spelling mistake try find it. Some more random text using the space.

Know the parts

Text extract from our team page ramdom text random spelling mistake try find it. Some more random text using the space. Hello, good afternoon.

WE WOULD LIKE TO THANK