Difference between revisions of "Team:Penn/Overview"

Line 1: Line 1:
 
{{Team:Penn/CSS}}
 
{{Team:Penn/CSS}}
 
<html>
 
<html>
−
 
 
<style type="text/css">
 
<style type="text/css">
−
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900);
+
lato = 'Lato', sans-serif
 +
slab = 'Roboto Slab', sans-serif
  
−
body{
+
html
−
   background:url("http://i.imgur.com/cZKghHG.png") repeat #000;
+
   font-family sans-serif
−
}
+
  -ms-text-size-adjust 100%
 +
  -webkit-text-size-adjust 100%
 +
  box-sizing border-box
  
−
.titulo{
+
html
−
   position: relative;
+
   *
−
  margin:5% auto 0;
+
    -webkit-font-smoothing antialiased
−
  text-align: center;
+
    -moz-osx-font-smoothing grayscale
−
  color: transparent;
+
   
−
  font-family: 'Titillium Web';
+
*,
−
  font-size:130px; 
+
*:before,
−
  background: url("http://i.imgur.com/LIx0y7a.jpg") repeat left top;
+
*:after
−
  -webkit-background-clip: text;
+
   box-sizing inherit
−
  animation: waves 5s infinite;
+
−
   animation-direction: alternate;
+
−
}
+
  
−
.titulo:before{
+
html,
−
  content:"COOL WAVES";
+
body,
−
  text-shadow: 5px 5px 15px #282828;
+
section,
−
   position:absolute;
+
.container
−
   top:0;
+
   margin 0
−
   z-index:-1;
+
   padding 0
−
}
+
   min-height 100%
 +
  height 100%
 +
  width 100%
  
−
svg{
+
.island
−
   height: 200px;
+
   max-width 40em
−
   width: 750px;
+
   margin auto
−
}
+
  
−
@keyframes waves {
+
  position relative
−
   0%  { background-position: left; }
+
   padding 10% 0
−
   100% { background-position: right; }
+
   z-index 10
−
}
+
  
−
</style>
+
  display flex
 +
  flex-direction column
 +
  align-items center
 +
  justify-content center
 +
 
 +
 
 +
.splash
 +
  position relative
 +
 
 +
  background-position top center
 +
  background-repeat no-repeat
 +
  background-size cover
 +
  background-image url('http://i.imgur.com/cZKghHG.png')
 +
 
 +
  text-align center
 +
  color #fff
 +
 
 +
  &--title
 +
    text-transform uppercase
 +
    letter-spacing 3px
 +
    font-size 2em
 +
    border 2px solid #fff
 +
    border-left 0
 +
    border-right 0
 +
 
 +
    font-family lato
 +
    font-weight 300
 +
 
 +
  &--subtitle
 +
    font-family slab
 +
    font-weight 300
 +
    font-size 1.25em
 +
    line-height 1.875rem
 +
 
 +
  &:before
 +
    content ""
 +
    display block
 +
    position absolute
 +
    top 0
 +
    right 0
 +
    bottom 0
 +
    left 0
 +
    pointer-events none
 +
    background rgba(0,0,0,0.35)
 +
 
 +
 
 +
a
 +
  display inline-block
 +
 
 +
  padding 20px 0 3px 0
 +
  position relative
 +
 
 +
  color #fff
 +
  text-transform uppercase
 +
  text-decoration none
 +
  letter-spacing 1px
 +
  font-family lato
 +
 
 +
 
 +
  &:after
 +
    content ''
 +
    display block
 +
    margin auto
 +
    height 3px
 +
    width 0px
 +
    background transparent
 +
    transition: width .5s ease, background-color .5s ease
 +
 
 +
 
 +
  &:hover:after
 +
    width 100%
 +
    background #fff
 +
 
  
−
h1.titulo COOL WAVES
 
−
<style type="text/javascript">
 
−
// Only works on webkit based browsers :/
 
−
// For all browser use https://github.com/TimPietrusky/background-clip-text-polyfill
 
−
var element = document.querySelector('.titulo');
 
  
−
/*
 
−
* Call the polyfill
 
−
*
 
−
* patternID : the unique ID of the SVG pattern
 
−
* patternURL : the URL to the background-image
 
−
* class : the css-class applied to the SVG
 
−
*/
 
−
element.backgroundClipPolyfill({
 
−
  'patternID' : 'mypattern',
 
−
  'patternURL' : 'http://i.imgur.com/LIx0y7a.jpg',
 
−
  'class' : 'titulo'
 
−
});
 
 
</style>
 
</style>
 +
.container
 +
  section.splash
 +
    .island
 +
      h1.splash--title underwater #[strong conf]
 +
      h2.splash--subtitle An underwater conference, with some lightning talks to set the scene, all about the next generation of web technologies.
 +
     
 +
      a(href="#") register
 +
 
</html>
 
</html>

Revision as of 02:09, 29 August 2015

.container section.splash .island h1.splash--title underwater #[strong conf] h2.splash--subtitle An underwater conference, with some lightning talks to set the scene, all about the next generation of web technologies. a(href="#") register