Difference between revisions of "Team:Warwick"

Line 1,396: Line 1,396:
 
/* Basic */
 
/* Basic */
  
−
+
body {
  
 +
             
 +
 +
background-repeat: repeat, no-repeat;
 +
background-size: auto, cover;
 +
background-position: top left, center 0;
 +
background-attachment: fixed, fixed;
 +
font-size: 18pt;
 +
line-height: 1.75em;
 +
letter-spacing: 1px;
 +
color: #3a3939;
 +
text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
 +
-webkit-text-stroke: 0.25px;
 +
}
  
 +
body.is-scroll {
 +
background-attachment: scroll, scroll;
 +
background-size: auto, 100% auto;
 +
}
 +
 +
body.is-loading * {
 +
-moz-transition: none !important;
 +
-webkit-transition: none !important;
 +
-ms-transition: none !important;
 +
transition: none !important;
 +
-moz-animation: none !important;
 +
-webkit-animation: none !important;
 +
-ms-animation: none !important;
 +
animation: none !important;
 +
}
 +
 +
input, textarea, select {
 +
 +
font-size: 18pt;
 +
line-height: 1.75em;
 +
letter-spacing: 1px;
 +
color: #3a3939;
 +
text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
 +
-webkit-text-stroke: 0.25px;
 +
}
 +
 +
h1, h2, h3, h4, h5, h6 {
 +
 +
text-transform: uppercase;
 +
line-height: 1.75em;
 +
}
 +
 +
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 +
color: inherit;
 +
text-decoration: none;
 +
}
 +
 +
h2 {
 +
font-size: 1.25em;
 +
letter-spacing: 8px;
 +
}
 +
 +
h3 {
 +
font-size: 1em;
 +
letter-spacing: 5px;
 +
}
 +
 +
strong, b {
 +
 +
}
 +
 +
em, i {
 +
font-style: italic;
 +
}
 +
 +
a {
 +
-moz-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
-webkit-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
-ms-transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
color: #35b88f;
 +
text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25);
 +
text-decoration: none;
 +
border-bottom: dotted 1px rgba(53, 184, 143, 0.5);
 +
}
 +
 +
a:hover {
 +
border-bottom-color: rgba(53, 184, 143, 0);
 +
}
 +
 +
sub {
 +
position: relative;
 +
top: 0.5em;
 +
font-size: 0.8em;
 +
}
 +
 +
sup {
 +
position: relative;
 +
top: -0.5em;
 +
font-size: 0.8em;
 +
}
 +
 +
hr {
 +
border: 0;
 +
border-top: solid 1px #dad9d9;
 +
margin: 2em 0 2em 0;
 +
}
 +
 +
blockquote {
 +
border-left: solid 0.5em #eae9e9;
 +
padding: 1em 0 1em 2em;
 +
font-style: italic;
 +
}
 +
 +
p, ul, ol, dl, table {
 +
margin-bottom: 1em;
 +
}
 +
 +
header {
 +
margin-bottom: 1em;
 +
}
 +
 +
header p {
 +
display: block;
 +
margin: 0.5em 0 0 0;
 +
padding: 0 0 1.5em 0;
 +
}
 +
 +
footer {
 +
margin-top: 1em;
 +
}
 +
 +
br.clear {
 +
clear: both;
 +
}
 +
 +
/* Sections/Article */
 +
 +
section, article {
 +
margin-bottom: 3em;
 +
}
 +
 +
section > :last-child,
 +
article > :last-child,
 +
section:last-child,
 +
article:last-child {
 +
margin-bottom: 0;
 +
}
 +
 +
.row > section, .row > article {
 +
margin-bottom: 0;
 +
}
 +
 +
/* Image */
 +
 +
.image {
 +
display: inline-block;
 +
border: 0;
 +
}
 +
 +
.image img {
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.image.featured {
 +
display: block;
 +
width: 100%;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image.fit {
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.image.left {
 +
float: left;
 +
margin: 0 2em 2em 0;
 +
}
 +
 +
.image.centered {
 +
display: block;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image.centered img {
 +
margin: 0 auto;
 +
width: auto;
 +
}
 +
 +
/* List */
 +
 +
ul.default {
 +
list-style: disc;
 +
padding-left: 1em;
 +
}
 +
 +
ul.default li {
 +
padding-left: 1.5em;
 +
margin-top: 1.5em;
 +
}
 +
 +
ul.default li:first-child {
 +
margin-top: 0;
 +
}
 +
 +
ul.icons {
 +
cursor: default;
 +
}
 +
 +
ul.icons li {
 +
display: inline-block;
 +
}
 +
 +
ul.icons a {
 +
display: inline-block;
 +
width: 2.5em;
 +
height: 2.5em;
 +
line-height: 2.5em;
 +
text-align: center;
 +
border: 0;
 +
}
 +
 +
ul.menu {
 +
cursor: default;
 +
}
 +
 +
ul.menu li {
 +
display: inline-block;
 +
line-height: 1em;
 +
border-left: solid 1px #dad9d9;
 +
padding: 0 0 0 0.5em;
 +
margin: 0 0 0 0.5em;
 +
}
 +
 +
ul.menu li:first-child {
 +
border-left: 0;
 +
padding-left: 0;
 +
margin-left: 0;
 +
}
 +
 +
ul.actions {
 +
cursor: default;
 +
}
 +
 +
ul.actions li {
 +
display: inline-block;
 +
margin: 0 0 0 0.5em;
 +
}
 +
 +
ul.actions li:first-child {
 +
margin-left: 0;
 +
}
 +
 +
ol.default {
 +
list-style: decimal;
 +
padding-left: 1.25em;
 +
}
 +
 +
ol.default li {
 +
padding-left: 1.25em;
 +
margin-top: 1.5em;
 +
}
 +
 +
/* Form */
 +
 +
form label {
 +
display: block;
 +
margin: 0 0 0.5em 0;
 +
}
 +
 +
form input[type="text"],
 +
form input[type="email"],
 +
form input[type="password"],
 +
form select,
 +
form textarea {
 +
-moz-transition: background-color 0.35s ease-in-out;
 +
-webkit-transition: background-color 0.35s ease-in-out;
 +
-ms-transition: background-color 0.35s ease-in-out;
 +
transition: background-color 0.35s ease-in-out;
 +
-webkit-appearance: none;
 +
display: block;
 +
border: 0;
 +
background: #f1f1f1;
 +
width: 100%;
 +
padding: 0.75em;
 +
}
 +
 +
form input[type="text"]:focus,
 +
form input[type="email"]:focus,
 +
form input[type="password"]:focus,
 +
form select:focus,
 +
form textarea:focus {
 +
background: #f8f8f8;
 +
}
 +
 +
form input[type="text"],
 +
form input[type="email"],
 +
form input[type="password"],
 +
form select {
 +
line-height: 1em;
 +
}
 +
 +
form textarea {
 +
min-height: 12em;
 +
}
 +
 +
form .formerize-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form ::-webkit-input-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form :-moz-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form ::-moz-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form :-ms-input-placeholder {
 +
color: #5a5959 !important;
 +
}
 +
 +
form ::-moz-focus-inner {
 +
border: 0;
 +
}
 +
 +
form ul.actions {
 +
margin-bottom: 0;
 +
text-align: center;
 +
}
 +
 +
/* Table */
 +
 +
.table-wrapper {
 +
width: 100%;
 +
overflow-x: auto;
 +
-webkit-overflow-scrolling: touch;
 +
}
 +
 +
table {
 +
width: 100%;
 +
}
 +
 +
table.default {
 +
width: 100%;
 +
}
 +
 +
table.default tbody tr {
 +
border-top: solid 1px #eae9e9;
 +
}
 +
 +
table.default tbody tr:first-child {
 +
border-top: 0;
 +
}
 +
 +
table.default td {
 +
padding: 0.75em 1.25em 0.75em 1.25em;
 +
}
 +
 +
table.default th {
 +
text-align: left;
 +
padding: 0.75em 1.25em 0.75em 1.25em;
 +
}
 +
 +
table.default thead {
 +
background: #f5f5f5;
 +
}
 +
 +
/* Button */
 +
 +
input[type="button"],
 +
input[type="submit"],
 +
input[type="reset"],
 +
button,
 +
.button {
 +
-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 +
-webkit-appearance: none;
 +
position: relative;
 +
display: inline-block;
 +
border: 0;
 +
background: #35b88f;
 +
color: #fff;
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
 +
cursor: pointer;
 +
text-decoration: none;
 +
outline: 0;
 +
padding: 1em 3em 1em 3em;
 +
text-align: center;
 +
border-radius: 3em;
 +
 +
}
 +
 +
input[type="button"]:hover,
 +
input[type="submit"]:hover,
 +
input[type="reset"]:hover,
 +
button:hover,
 +
.button:hover {
 +
background: #45c89f;
 +
}
 +
 +
input[type="button"].style2,
 +
input[type="submit"].style2,
 +
input[type="reset"].style2,
 +
button.style2,
 +
.button.style2 {
 +
color: #3a3939;
 +
background: #fff;
 +
box-shadow: inset 0 0 0 1px #fff;
 +
}
 +
 +
input[type="button"].style2:hover,
 +
input[type="submit"].style2:hover,
 +
input[type="reset"].style2:hover,
 +
button.style2:hover,
 +
.button.style2:hover {
 +
background: rgba(255, 255, 255, 0.1);
 +
color: #fff !important;
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25) !important;
 +
}
 +
 +
input[type="button"].style3,
 +
input[type="submit"].style3,
 +
input[type="reset"].style3,
 +
button.style3,
 +
.button.style3 {
 +
background: none;
 +
color: #3a3939;
 +
box-shadow: inset 0 0 0 1px #dad9d9;
 +
}
 +
 +
input[type="button"].style3:hover,
 +
input[type="submit"].style3:hover,
 +
input[type="reset"].style3:hover,
 +
button.style3:hover,
 +
.button.style3:hover {
 +
background: rgba(58, 57, 57, 0.025);
 +
}
 +
 +
/* Box */
 +
 +
.box {
 +
position: relative;
 +
margin-top: 9em;
 +
margin-bottom: 0;
 +
}
 +
 +
.box:after {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
top: -9em;
 +
left: 50%;
 +
height: 9em;
 +
border-left: solid 1px #fff;
 +
}
 +
 +
.box:before {
 +
content: '';
 +
display: block;
 +
width: 90px;
 +
height: 66px;
 +
position: absolute;
 +
left: 50%;
 +
top: -4.5em;
 +
margin-left: -45px;
 +
margin-top: -33px;
 +
background: url("images/arrow.svg") no-repeat;
 +
}
 +
 +
.box :last-child {
 +
margin-bottom: 0;
 +
}
 +
 +
.box.style1 {
 +
background: #fff;
 +
padding: 3em;
 +
}
 +
 +
.box.style1 .image {
 +
display: block;
 +
position: absolute;
 +
top: 0;
 +
width: 50%;
 +
height: 100%;
 +
background: #152E33;
 +
overflow: hidden;
 +
}
 +
 +
.box.style1 .image img {
 +
position: absolute;
 +
top: 0;
 +
height: 100%;
 +
width: auto;
 +
}
 +
 +
.box.style1 .inner > :last-child {
 +
margin: 0;
 +
}
 +
 +
.box.style1.right .image {
 +
left: 0;
 +
}
 +
 +
.box.style1.right .image img {
 +
right: 0;
 +
}
 +
 +
.box.style1.right .inner {
 +
margin-left: 50%;
 +
padding-left: 3em;
 +
}
 +
 +
.box.style1.left .image {
 +
right: 0;
 +
}
 +
 +
.box.style1.left .image img {
 +
left: 0;
 +
}
 +
 +
.box.style1.left .inner {
 +
margin-right: 50%;
 +
padding-right: 3em;
 +
}
 +
 +
.box.style2 {
 +
text-align: center;
 +
}
 +
 +
.box.style2 header {
 +
display: inline-block;
 +
background: #fff;
 +
padding: 2em 3em 2em 3em;
 +
margin: 0;
 +
}
 +
 +
.box.style2 header p {
 +
padding: 0;
 +
}
 +
 +
.box.style2 .inner {
 +
position: relative;
 +
padding: 40px 0 0px 0;
 +
}
 +
 +
.box.style2 .inner:after {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
top: 0;
 +
left: 50%;
 +
height: 100%;
 +
border-left: solid 1px #fff;
 +
}
 +
 +
.box.style2 .inner .row {
 +
position: relative;
 +
}
 +
 +
.box.style2 .inner .row:before {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
top: 50%;
 +
left: 20px;
 +
width: calc(100% - 40px);
 +
border-bottom: solid 1px #fff;
 +
}
 +
 +
.box.style2 .inner .image {
 +
position: relative;
 +
z-index: 1;
 +
padding: 20px;
 +
}
 +
 +
.box.style3 {
 +
background: #fff;
 +
padding: 3em;
 +
}
 +
 +
.box.style3 header {
 +
text-align: center;
 +
}
 +
 +
/* Icons */
 +
 +
.icon {
 +
text-decoration: none;
 +
}
 +
 +
.icon:before {
 +
display: inline-block;
 +
 +
font-size: 1.25em;
 +
text-decoration: none;
 +
font-style: normal;
 +
font-weight: normal;
 +
line-height: 1;
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: grayscale;
 +
}
 +
 +
.icon > .label {
 +
display: none;
 +
}
 +
 +
/* Header */
 +
 +
#header {
 +
position: relative;
 +
color: #fff;
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
 +
text-align: center;
 +
margin: 0;
 +
padding: 14em 0 14em 0;
 +
cursor: default;
 +
}
 +
 +
#header header {
 +
display: inline-block;
 +
padding: 0 0 4.5em 0;
 +
}
 +
 +
#header header h1 {
 +
font-size: 2em;
 +
letter-spacing: 10px;
 +
}
 +
 +
#header header p {
 +
border-top: solid 1px rgba(255, 255, 255, 0.5);
 +
color: rgba(255, 255, 255, 0.75);
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875);
 +
font-size: 1em;
 +
text-transform: uppercase;
 +
letter-spacing: 3px;
 +
padding: 0;
 +
margin-top: 0.35em;
 +
}
 +
 +
#header header p:before {
 +
content: '';
 +
display: block;
 +
border-top: solid 1px rgba(255, 255, 255, 0.5);
 +
margin: 4px 0 0.8em 0;
 +
}
 +
 +
#header footer {
 +
position: absolute;
 +
bottom: 9em;
 +
margin: 0;
 +
width: 100%;
 +
}
 +
 +
#header footer:after {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
bottom: -9em;
 +
left: 50%;
 +
height: 9em;
 +
border-left: solid 1px #fff;
 +
}
 +
 +
#header footer:before {
 +
content: '';
 +
display: block;
 +
width: 90px;
 +
height: 66px;
 +
position: absolute;
 +
left: 50%;
 +
bottom: -4.5em;
 +
margin-left: -45px;
 +
margin-bottom: -33px;
 +
background: url("images/arrow.svg") no-repeat;
 +
}
 +
 +
/* Banner */
 +
 +
#banner {
 +
position: relative;
 +
color: #fff;
 +
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
 +
text-align: center;
 +
background: #35b88f url("images/banner.svg") bottom center no-repeat;
 +
padding: 5em 0 5em 0;
 +
margin: 0;
 +
background-size: 125% auto;
 +
}
 +
 +
#banner .button {
 +
color: #35b882;
 +
text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25);
 +
}
 +
 +
#banner header {
 +
margin: 0 0 2em 0;
 +
}
 +
 +
#banner header h2 {
 +
font-size: 1.75em;
 +
letter-spacing: 8px;
 +
}
 +
 +
#banner p {
 +
margin: 0;
 +
}
 +
 +
#banner footer {
 +
margin: 2em 0 0 0;
 +
}
 +
 +
#banner a {
 +
color: inherit;
 +
border-bottom-color: rgba(255, 255, 255, 0.5);
 +
}
 +
 +
#banner a:hover {
 +
border-bottom-color: rgba(255, 255, 255, 0);
 +
}
  
 
/* Footer */
 
/* Footer */
Line 1,586: Line 2,307:
 
/* Basic */
 
/* Basic */
  
−
+
body, input, textarea, select {
−
 
+
font-size: 16pt;
 +
}
  
 +
}
  
 
/* Normal */
 
/* Normal */
Line 1,631: Line 2,354:
 
}
 
}
  
−
+
/* Box */
 +
 
 +
.box {
 +
position: relative;
 +
}
 +
 
 +
.box section {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
.box.style1 {
 +
padding: 2.5em 2em 2.5em 2em;
 +
}
 +
 
 +
.box.style1.right .inner {
 +
padding-left: 2em;
 +
}
 +
 
 +
.box.style1.left .inner {
 +
padding-right: 2em;
 +
}
 +
 
 +
.box.style2 header {
 +
padding: 2em;
 +
}
 +
 
 +
.box.style2 .inner {
 +
position: relative;
 +
padding: 30px 0 0 0;
 +
}
 +
 
 +
.box.style3 {
 +
padding: 2.5em 2em 2.5em 2em;
 +
}
  
 
/* Banner */
 
/* Banner */

Revision as of 11:39, 14 September 2015

Our Results
...a brief overview

Click on the image to the left to see what we made for the competition or click on the button below for a broader look at our project.


Our Submitted Parts
...the G-Block Collection

Click on the image to the right to see what parts we submitted for the competition or continue scrolling.


Our Project

Click on the images below to explore our different sections.

Team

Please Contact Us

We will respond as quickly as possible.