Difference between revisions of "Team:Glasgow/test"

Line 1: Line 1:
 
<html>
 
<html>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
<meta charset="utf-8">
 
−
<head>
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
<script type="text/javascript">
 
−
$('nav').click(function(){
 
−
$('.menu').css('background-color','#ff5e1a');
 
−
$('.dropdown').slideDown("slow");
 
−
});
 
−
</script>
 
 
<style>
 
<style>
−
.firstHeading{
+
* {
−
      display:none;
+
  margin: 0;
 +
  padding: 0;
 +
  color: inherit;
 +
  box-sizing: inherit;
 
}
 
}
−
#content{
+
*:focus {
−
height:90px;
+
   outline: none;
−
   padding: 0px 0px 0px 0px;
+
−
  border-left: 0px solid #444444;
+
−
  border-right: 0px solid #444444;
+
−
  background:transparent;
+
−
  width:auto;
+
−
  height: auto;
+
−
}
+
−
body {
+
−
    background-color: #313233;
+
−
    font-family: arial, san-serif;
+
−
}
+
−
nav {
+
−
    width: 300px;
+
−
    margin:0 auto;
+
−
    margin-top:50px
+
−
}
+
−
.menu {
+
−
    /* height:70px; */
+
−
    background-color: #ff782e;
+
−
    border-radius:10px;   
+
−
    color:#fff;
+
−
    display:block;
+
−
    position: relative;
+
−
    font-size: 20px;
+
−
    padding:20px;
+
−
-webkit-transition: 300ms ease;
+
−
-moz-transition: 300ms ease;
+
−
-o-transition: 300ms ease;
+
−
-ms-transition: 300ms ease;
+
−
transition: 300ms ease;
+
−
    border-bottom: 3px solid #cc6025;
+
 
}
 
}
  
−
.dropdownIcon {      
+
html {
−
    display: block;
+
  box-sizing: border-box;
−
    width:24px;
+
−
    margin-top:2px;
+
−
    /* position: absolute;
+
−
    right:0; */
+
−
    float:right;
+
−
}
+
−
.dropdownIcon span {
+
−
    width:24px;
+
−
    height:4px;
+
−
    border-radius:3px;
+
−
    color:#fff;
+
−
    display:block;
+
−
    background: white;
+
−
    margin:2px
+
 
}
 
}
  
−
nav:hover .menu{
+
body {
−
    cursor:pointer;
+
  background-color: #ecf0f1;
−
    background: #ff853a;  
+
 
}
 
}
  
−
.menu:hover .dropdownIcon span{
+
.social-buttons {
−
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.3);
+
  height: 90px;
−
    -moz-box-shadow:   0px 3px 5px 0px rgba(50, 50, 50, 0.3);
+
  margin: auto;
−
    box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.3);
+
  font-size: 0;
 +
  text-align: center;
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 
}
 
}
  
−
.dropDown {
+
.social-button {
−
    background: #f0f0f0;
+
  display: inline-block;
−
    border-radius: 10px;
+
  background-color: #fff;
−
    text-align: center;
+
  width: 90px;
−
    margin:0;
+
  height: 90px;
−
    padding:0;
+
  line-height: 90px;
−
    list-style:none;
+
  margin: 0 10px;
−
    position: relative;
+
  text-align: center;
−
    margin-top:20px;
+
  position: relative;
−
    display:none;
+
  overflow: hidden;
−
   
+
  opacity: .99;
 +
  border-radius: 28%;
 +
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
 +
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
 +
          transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
 
}
 
}
−
 
+
.social-button:before {
−
.dropDown:before {
+
  content: '';
−
    content: "";
+
  background-color: #000;
−
    position:absolute;
+
  width: 120%;
−
    border: 15px solid #f0f0f0;
+
  height: 120%;
−
    border-top: 0 solid transparent!important;
+
  position: absolute;
−
    border-right: 15px solid transparent!important;
+
  top: 90%;
−
    border-left: 15px solid transparent!important;
+
  left: -110%;
−
    right:10px;
+
  -webkit-transform: rotate(45deg);
−
    top:-15px
+
      -ms-transform: rotate(45deg);
 +
          transform: rotate(45deg);
 +
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
 +
          transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
 
}
 
}
−
 
+
.social-button .fa {
−
.dropDown a {
+
  font-size: 38px;
−
  color: #494b4d;
+
  vertical-align: middle;
−
  text-decoration: none;
+
  -webkit-transform: scale(0.8);
−
    display:block;
+
      -ms-transform: scale(0.8);
−
    padding:20px 0;
+
          transform: scale(0.8);
−
    font-weight:700;
+
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
−
    font-size:16px
+
          transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
 
}
 
}
−
 
+
.social-button.facebook:before {
−
.dropDown li:nth-child(even) a {
+
  background-color: #3B5998;
−
    background:#ebebeb
+
 
}
 
}
−
 
+
.social-button.facebook .fa {
−
/*nav:hover .dropDown{
+
   color: #3B5998;
−
    display:block;
+
−
}*/
+
−
 
+
−
.credit {
+
−
  position:absolute;
+
−
  bottom:0;
+
−
   color:#aaa;
+
−
  font-size:12px;
+
 
}
 
}
−
 
+
.social-button.twitter:before {
−
.credit a {
+
  background-color: #3CF;
−
   color: #eee;
+
}
 +
.social-button.twitter .fa {
 +
   color: #3CF;
 +
}
 +
.social-button.google:before {
 +
  background-color: #DC4A38;
 +
}
 +
.social-button.google .fa {
 +
  color: #DC4A38;
 +
}
 +
.social-button.dribbble:before {
 +
  background-color: #F26798;
 +
}
 +
.social-button.dribbble .fa {
 +
  color: #F26798;
 +
}
 +
.social-button.skype:before {
 +
  background-color: #00AFF0;
 +
}
 +
.social-button.skype .fa {
 +
  color: #00AFF0;
 +
}
 +
.social-button:hover:before {
 +
  top: -10%;
 +
  left: -10%;
 +
}
 +
.social-button:hover .fa {
 +
  color: #fff;
 +
  -webkit-transform: scale(1);
 +
      -ms-transform: scale(1);
 +
          transform: scale(1);
 +
}
 +
.social-button:focus {
 +
  opacity: .85;
 
}
 
}
−
</style>
 
  
 +
 +
</style>
 
<body>
 
<body>
−
<nav>
 
−
    <div class="menu">
 
−
        <span>Menu</span>
 
−
        <div class="dropdownIcon">
 
−
            <span></span>
 
−
            <span></span>
 
−
            <span></span>
 
−
        </div>
 
−
    </div>
 
−
    <ul class="dropDown">
 
−
        <li><a href="#">Menu Item 1</a></li>
 
−
        <li><a href="#">Menu Item 2</a></li>
 
−
        <li><a href="#">Menu Item 3</a></li>
 
−
    </ul>
 
−
</nav>
 
−
 
  
 +
<div class="social-buttons"><a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a><a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a><a href="#" class="social-button google"><i class="fa fa-google"></i></a><a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a><a href="#" class="social-button skype"><i class="fa fa-skype"></i></a>
 +
</div>
 
</body>
 
</body>
 +
 +
 +
 +
 +
 +
 
</html>
 
</html>

Revision as of 14:07, 12 September 2015