Difference between revisions of "Team:DUT China B/Team"

Line 133: Line 133:
 
}
 
}
 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
 +
* {
 +
  font-family: sans-serif;
 +
  font-weight: 100;
 +
  font-size: 20px;
 +
}
 +
 +
body {
 +
  background-color: #3FB;
 +
  text-align: center;
 +
  line-height: 100vh;
 +
}
 +
 +
a {
 +
  text-decoration: none;
 +
}
 +
 +
 +
.box {
 +
  position:relative;
 +
  vertical-align: middle;
 +
  color: #0b7;
 +
  display: inline-block;
 +
  height: 60px;
 +
  line-height: 60px;
 +
  text-align: center;
 +
  transition: 0.5s;
 +
  padding: 0 20px;
 +
  cursor: pointer;
 +
  border: 2px solid #0b7;
 +
  -webkit-transition:0.5s;
 +
}
 +
 +
.box:hover {
 +
  border: 2px solid rgba(0,160,80,0);
 +
  color: #FFF;
 +
}
 +
 +
.box::before, .box::after {
 +
  width: 100%;
 +
  height:100%;
 +
  z-index: 3;
 +
  content:'';
 +
  position: absolute;
 +
  top:0;
 +
  left:0;
 +
  box-sizing: border-box;
 +
  -webkit-transform: scale(0);
 +
  transition: 0.5s;
 +
}
 +
 +
.foo::before {
 +
  border-bottom: 3px solid #FFF;
 +
  border-left: 3px solid #FFF;
 +
  -webkit-transform-origin: 0 100%;
 +
}
 +
 +
.foo::after {
 +
  border-top: 3px solid #FFF;
 +
  border-right: 3px solid #FFF;
 +
  -webkit-transform-origin: 100% 0%;
 +
}
 +
 +
 +
.bar::before {
 +
  border-bottom: 3px solid #FFF;
 +
  border-left: 3px solid #FFF;
 +
  -webkit-transform-origin: 100% 0%;
 +
}
 +
 +
.bar::after {
 +
  border-top: 3px solid #FFF;
 +
  border-right: 3px solid #FFF;
 +
  -webkit-transform-origin: 0% 100%;
 +
}
 +
 +
.curmudgeon::before {
 +
  border-bottom: 3px solid #FFF;
 +
  border-left: 0;
 +
  -webkit-transform-origin: 0% 100%;
 +
}
 +
 +
.curmudgeon::after {
 +
  border-top: 0;
 +
  border-right: 0;
 +
  -webkit-transform-origin: 50% 50%;
 +
}
 +
 +
.box:hover::after, .box:hover::before {
 +
  -webkit-transform: scale(1);
 +
}
 +
 +
.link {
 +
  line-height: 1em;
 +
  position: absolute;
 +
  bottom: 0;
 +
  right: 20px;
 +
  width: 300px;
 +
  height: 50px;
 +
  font-family: "Open Sans","Roboto",Arial,sans-serif;
 +
  text-align: right;
 +
}
 +
 +
.link > a {
 +
  text-decoration: none;
 +
  color: #FF0;
 +
}
 
</style>
 
</style>
 
</head>
 
</head>
Line 160: Line 266:
 
</div>
 
</div>
 
<div id="maintest">
 
<div id="maintest">
 +
 +
<a href='https://lesmoffat.co.uk' target='_BLANK'>
 +
  <div class='box foo'>
 +
    foo
 +
  </div>
 +
</a>
 +
<a href='https://lesmoffat.co.uk' target='_BLANK'>
 +
  <div class='box bar'>
 +
    bar
 +
  </div>
 +
</a>
 +
<a href='https://lesmoffat.co.uk' target='_BLANK'>
 +
  <div class='box curmudgeon'>
 +
    curmudgeon
 +
  </div>
 +
</a>
 +
<div class='link'>
 +
  Chat to me on
 +
  <a href='https://ello.co/lesbaa'>Ello :-)</a>
 +
</div>
 
<div class="container">
 
<div class="container">
 
     <div class="block-grid">
 
     <div class="block-grid">

Revision as of 03:33, 16 October 2019

Document
parts
foo
bar
curmudgeon
Chat to me on Ello :-)

title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

Advantage

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

title 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.

title 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.orem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis

title 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.