Difference between revisions of "Team:Glasgow/test"

Line 15: Line 15:
 
      
 
      
 
}
 
}
−
#social-platforms {
+
@import url('http://weloveiconfonts.com/api/?family=entypo');
−
  position:relative;
+
−
  top:100px;
+
−
  top:25vh;
+
−
  font-size:1rem;
+
−
  text-align:center;
+
−
  height:175px;
+
−
  overflow:hidden;
+
−
}
+
  
−
#social-platforms a {
+
* {
−
   background:blue;
+
   margin: 0;
−
  text-align:center;
+
   padding: 0;
−
  position:relative;
+
   box-sizing: border-box;
−
  display:inline-block;
+
−
  width:30px;
+
−
  height:30px;
+
−
  font-size:1.75em;
+
−
  color:#fff;
+
−
  line-height:1.15em;
+
−
  border:0;
+
−
  cursor:pointer;
+
−
  margin:4px;
+
−
   padding:10px;
+
−
   box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
+
−
  border-radius:0 10px 10px 10px;
+
−
  -webkit-transition:all .5s;
+
−
  -moz-transition:all .5s;
+
−
  transition:all .5s;
+
 
}
 
}
  
−
#social-platforms a span {
+
body {
−
   display:none;
+
   background: #ddd;
 
}
 
}
  
−
#social-platforms a:after {
+
.wrapper {
−
   opacity:0;
+
   padding: 120px 0 0;
−
  font-size:.5em;
+
   text-align: center;
−
  font-weight:300;
+
−
  color:#FFF;
+
−
  background:#000;
+
−
  content:attr(data-title);
+
−
  white-space:nowrap;
+
−
  display:block;
+
−
  position:absolute;
+
−
  left:0;
+
−
   bottom:60px;
+
−
  z-index:-5;
+
−
  cursor:help;
+
−
  padding:3px 8px;
+
−
  -webkit-transition:all .5s;
+
−
  -moz-transition:all .5s;
+
−
  transition:all .5s;
+
 
}
 
}
  
−
#social-platforms a:before {
+
.social {
−
  opacity:0;
+
   display: inline-block;
−
   display:block;
+
   width: 50px;
−
   position:absolute;
+
   height: 50px;
−
   bottom:55px;
+
   margin: 0 10px;
−
   left:50%;
+
   line-height: 50px;
−
   margin-left:-5px;
+
   font-family: Entypo;
−
   z-index:9;
+
   font-size: 28px;
−
   cursor:help;
+
   text-align: center;
−
   content:'';
+
   color: #555;
−
   width:0;
+
   border-radius: 10px;
−
  height:0;
+
   background: #eee;
−
   border-left:5px solid transparent;
+
   overflow: hidden;
−
   border-right:5px solid transparent;
+
   cursor: pointer;
−
  border-top:5px solid #000;
+
}
−
   -webkit-transition:all .5s;
+
−
   -moz-transition:all .5s;
+
−
  transition:all .5s;
+
−
  }
+
  
−
#social-platforms a:hover {
+
.social {
−
  background:#2196f3;
+
   box-shadow: rgb(210, 210, 210) 1px 1px,
−
   box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.45);
+
    rgb(210, 210, 210) 2px 2px,
−
  }
+
    rgb(211, 211, 211) 3px 3px,
−
 
+
    rgb(211, 211, 211) 4px 4px,
−
#social-platforms a:hover:before, #social-platforms a:hover:after {
+
    rgb(211, 211, 211) 5px 5px,
−
  opacity:1;
+
    rgb(212, 212, 212) 6px 6px,
−
  z-index:50;
+
    rgb(212, 212, 212) 7px 7px,
 +
    rgb(212, 212, 212) 8px 8px,
 +
    rgb(213, 213, 213) 9px 9px,
 +
    rgb(213, 213, 213) 10px 10px,
 +
    rgb(214, 214, 214) 11px 11px,
 +
    rgb(214, 214, 214) 12px 12px,
 +
    rgb(214, 214, 214) 13px 13px,
 +
    rgb(215, 215, 215) 14px 14px,
 +
    rgb(215, 215, 215) 15px 15px,
 +
    rgb(215, 215, 215) 16px 16px,
 +
    rgb(216, 216, 216) 17px 17px,
 +
    rgb(216, 216, 216) 18px 18px,
 +
    rgb(216, 216, 216) 19px 19px,
 +
    rgb(217, 217, 217) 20px 20px,
 +
    rgb(217, 217, 217) 21px 21px,
 +
    rgb(218, 218, 218) 22px 22px,
 +
    rgb(218, 218, 218) 23px 23px,
 +
    rgb(218, 218, 218) 24px 24px,
 +
    rgb(219, 219, 219) 25px 25px,
 +
    rgb(219, 219, 219) 26px 26px,
 +
    rgb(219, 219, 219) 27px 27px,
 +
    rgb(220, 220, 220) 28px 28px,
 +
    rgb(220, 220, 220) 29px 29px,
 +
    rgb(221, 221, 221) 30px 30px;
 +
  text-shadow: rgb(226, 226, 226) 1px 1px,
 +
    rgb(227, 227, 227) 2px 2px,
 +
    rgb(227, 227, 227) 3px 3px,
 +
    rgb(228, 228, 228) 4px 4px,
 +
    rgb(229, 229, 229) 5px 5px,
 +
    rgb(229, 229, 229) 6px 6px,
 +
    rgb(230, 230, 230) 7px 7px,
 +
    rgb(230, 230, 230) 8px 8px,
 +
    rgb(231, 231, 231) 9px 9px,
 +
    rgb(232, 232, 232) 10px 10px,
 +
    rgb(232, 232, 232) 11px 11px,
 +
    rgb(233, 233, 233) 12px 12px,
 +
    rgb(233, 233, 233) 13px 13px,
 +
    rgb(234, 234, 234) 14px 14px,
 +
    rgb(235, 235, 235) 15px 15px,
 +
    rgb(235, 235, 235) 16px 16px,
 +
    rgb(236, 236, 236) 17px 17px,
 +
    rgb(236, 236, 236) 18px 18px,
 +
    rgb(237, 237, 237) 19px 19px,
 +
    rgb(238, 238, 238) 20px 20px;
 
}
 
}
 
h4{
 
h4{
Line 128: Line 129:
 
   <strong>Follow Us On</strong>
 
   <strong>Follow Us On</strong>
 
   </h4>
 
   </h4>
−
      <div id="social-platforms">
+
      <p>
−
<div>
+
<div class="wrapper">
−
<a class="tooltip" href="https://www.facebook.com/davidpottrell" data-title="Facebook"><i class="fa fa-facebook"></i><span>Facebook</span></a>
+
  <div class="social">&#62220;</div>
−
<a class="tooltip" href="https://twitter.com/davidpottrell" data-title="Twitter"><i class="fa fa-twitter"></i><span>Twitter</span></a>
+
  <div class="social">&#62217;</div>
−
  </div>
+
 
</div>
 
</div>
 +
</p>
 
</div>
 
</div>
 
<div class="col-md-4">
 
<div class="col-md-4">

Revision as of 15:07, 12 September 2015

Location

Bower Building, Wilkins Teaching Laboratory
University of Glasgow
University Avenue
G12 8QQ

Follow Us On