Difference between revisions of "Team:William and Mary/OutreachDatabase"

(Replaced content with "{{Team:William_and_Mary/CSS_RESET}} {{Team:William_and_Mary/CSS_FIX}} {{Team:William_and_Mary/HEADER4}} </html>")
Line 2: Line 2:
 
{{Team:William_and_Mary/CSS_FIX}}
 
{{Team:William_and_Mary/CSS_FIX}}
 
{{Team:William_and_Mary/HEADER4}}
 
{{Team:William_and_Mary/HEADER4}}
 +
 +
 +
<html>
 +
<style>
 +
 +
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,600,700,900);
 +
 +
@rhino: #323b40;
 +
@rhinoMid: #4f585e;
 +
@teal: #0096a1;
 +
@tealMid: #0ebac7;
 +
@red: #fc625c;
 +
@amber: #fdbc40;
 +
@green: #34c748;
 +
@offWhite: #e9eaea;
 +
 +
html {
 +
  background: @rhinoMid;
 +
}
 +
 +
div.browser {
 +
  background: #fff url(http://www.s4c.cymru/temp/unsplash-kitsune-4.jpg) no-repeat;
 +
  background-size: cover;
 +
  border-bottom-right-radius: 4px;
 +
  border-bottom-left-radius: 4px;
 +
  box-shadow: 0 4px 8px -4px rgba(0,0,0,0.4), 0 12px 24px -6px rgba(0,0,0,0.4), 0 24px 64px 12px rgba(0,0,0,0.25);
 +
  color: @rhino;
 +
  font-family: 'Source Sans Pro', helvetica;
 +
  overflow: hidden;
 +
  letter-spacing: -0.05em;
 +
  margin: 5% auto;
 +
  max-width: 1200px;
 +
  min-width: 320px;
 +
  min-height: 600px;
 +
  padding-bottom: 10%;
 +
  position: relative;
 +
  width: 90%;
 +
  div.chrome {
 +
    background: @rhinoMid;
 +
    height: 40px;
 +
    left: 0;
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
    > a {
 +
      border-radius: 12px;
 +
      display: block;
 +
      float: left;
 +
      height: 12px;
 +
      margin: 13px 4px;
 +
      width: 12px;
 +
      &:first-child {
 +
        margin-left: 13px;
 +
      }
 +
      &.red {
 +
        background: @red;
 +
      }
 +
      &.amber {
 +
        background: @amber;
 +
      }
 +
      &.green {
 +
        background: @green;
 +
      }
 +
    }
 +
    div.url {
 +
      background: #5f676d;
 +
      border-radius: 4px;
 +
      height: 24px;
 +
      left: 50%;
 +
      position: absolute;
 +
      transform: translateX(-50%);
 +
      top: 8px;
 +
      width: 70%;
 +
    }
 +
  }
 +
  h1 {
 +
    font-size: 24px;
 +
    font-weight: 200;
 +
    margin: 0;
 +
    padding: 80px 40px 10px;
 +
  }
 +
  h2 {
 +
    font-size: 48px;
 +
    line-height: 1em;
 +
    max-width: 16em;
 +
    margin: 0;
 +
    padding: 0 40px;
 +
  }
 +
}
 +
 +
footer {
 +
  bottom: 0;
 +
  left: 0;
 +
  position: absolute;
 +
  right: 0;
 +
  div.social-media-links {
 +
background: @rhino;
 +
overflow: hidden;
 +
padding-bottom: 4px;
 +
text-align: center;
 +
ul {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
li {
 +
display: inline;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
a {
 +
border-bottom: 0px solid rgba(0,0,0,0.95);
 +
border-radius: 4px;
 +
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0), 0 6px 8px rgba(0,0,0,0), 0 24px 24px rgba(0,0,0,0), 0 36px 36px rgba(0,0,0,0), 0 64px 64px rgba(0,0,0,0), 0 64px 128px rgba(0,0,0,0), 0 120px 0 rgba(0,0,0,0), 0 86px 8px 6px rgba(0,0,0,0),;
 +
display: inline-block;
 +
      height: 30px;
 +
padding: 20px;
 +
position: relative;
 +
transition: .2s ease-in;
 +
      width: 30px;
 +
svg {
 +
        left: 20px;
 +
        position: absolute;
 +
        top: 20px;
 +
height: 30px;
 +
width: 30px;
 +
        &.glow {
 +
          path, circle {
 +
            fill: rgba(0,0,0,0);
 +
          }
 +
        }
 +
path, circle {
 +
fill: @teal;
 +
transition: .2s ease-in;
 +
}
 +
}
 +
}
 +
a:hover {
 +
transform: translateY(-4px);
 +
box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.1), 0 6px 8px rgba(0,0,0,0.05), 0 24px 24px rgba(0,0,0,0.05), 0 36px 36px rgba(0,0,0,0.05), 0 64px 64px rgba(0,0,0,0.15), 0 64px 128px rgba(0,0,0,0.15), 0 86px 8px 6px fadeout(@tealMid, 75), 0 83px 4px 0px fadeout(@tealMid, 5);
 +
svg {
 +
        &.glow {
 +
          filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><f…ter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
 +
          filter: blur(2px);
 +
          path, circle {
 +
            fill: fadeout(@tealMid, 40);
 +
          }
 +
        }
 +
path, circle {
 +
fill: @tealMid;
 +
}
 +
}
 +
}
 +
}
 +
}
 +
 +
 +
</style>
 +
 +
  <footer>
 +
    <div class="social-media-links">
 +
      <ul>
 +
        <li>
 +
          <!-- twitter -->
 +
          <a href="#">
 +
            <svg class="glow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
 +
              <path class="st0" d="M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1"/>
 +
            </svg>
 +
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
 +
              <path class="st0" d="M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1"/>
 +
            </svg>
 +
          </a>
 +
        </li>
 +
        <li>
 +
          <!-- facebook -->
 +
          <a href="#">
 +
            <svg class="glow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
 +
              <path class="st0" d="M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z"/>
 +
            </svg>
 +
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
 +
              <path class="st0" d="M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z"/>
 +
            </svg>
 +
          </a>
 +
        </li>
 +
        <li>
 +
          <!-- youtube -->
 +
          <a href="#">
 +
            <svg class="glow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
 +
              <path class="st0" d="M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z"/>
 +
            </svg>
 +
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
 +
              <path class="st0" d="M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z"/>
 +
            </svg>
 +
          </a>
 +
        </li>
 +
        <li>
 +
          <!-- instagram -->
 +
          <a href="#">
 +
            <svg class="glow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
 +
              <path class="st0" d="M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z"/>
 +
              <path class="st0" d="M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z"/>
 +
              <circle class="st0" cx="22.9" cy="7.1" r="1.8"/>
 +
            </svg>
 +
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
 +
              <path class="st0" d="M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z"/>
 +
              <path class="st0" d="M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z"/>
 +
              <circle class="st0" cx="22.9" cy="7.1" r="1.8"/>
 +
            </svg>
 +
          </a>
 +
        </li>
 +
      </ul>
 +
    </div>
 +
  </footer>
 +
 +
 +
 +
  
  
 
</html>
 
</html>

Revision as of 02:10, 18 August 2017