Difference between revisions of "Team:SZU China/Introductions"

Line 4: Line 4:
 
<head>
 
<head>
 
<style>
 
<style>
 +
 +
body {
 +
    font-family: 'Lato', Calibri, Arial, sans-serif;
 +
    color: #47a3da;
 +
}
 +
 +
a {
 +
color: #f0f0f0;
 +
text-decoration: none;
 +
outline: none;
 +
}
 +
 +
a:hover {
 +
color: #000;
 +
}
 +
 +
.container > header {
 +
width: 90%;
 +
max-width: 69em;
 +
margin: 0 auto;
 +
padding: 2.875em 1.875em 1.875em;
 +
}
 +
 +
.container > header h1 {
 +
font-size: 2.125em;
 +
line-height: 1.3;
 +
margin: 0 0 0.6em 0;
 +
float: left;
 +
font-weight: 400;
 +
}
 +
 +
.container > header > span {
 +
display: block;
 +
position: relative;
 +
z-index: 200;
 +
font-weight: 700;
 +
text-transform: uppercase;
 +
letter-spacing: 0.5em;
 +
padding: 0 0 0.6em 0.1em;
 +
}
 +
 +
.container > header > span span:after {
 +
width: 30px;
 +
height: 30px;
 +
left: -12px;
 +
font-size: 50%;
 +
top: -8px;
 +
font-size: 75%;
 +
position: relative;
 +
}
 +
 +
.container > header > span span:hover:before {
 +
content: attr(data-content);
 +
text-transform: none;
 +
text-indent: 0;
 +
letter-spacing: 0;
 +
font-weight: 300;
 +
font-size: 110%;
 +
padding: 0.8em 1em;
 +
line-height: 1.2;
 +
text-align: left;
 +
left: auto;
 +
margin-left: 4px;
 +
position: absolute;
 +
color: #fff;
 +
background: #47a3da;
 +
}
 +
 +
.container > header nav {
 +
float: right;
 +
text-align: center;
 +
}
 +
 +
.container > header nav a {
 +
display: inline-block;
 +
position: relative;
 +
text-align: left;
 +
width: 2.5em;
 +
height: 2.5em;
 +
background: #fff;
 +
border-radius: 50%;
 +
margin: 0 0.1em;
 +
border: 4px solid #47a3da;
 +
}
 +
 +
.container > header nav a > span {
 +
display: none;
 +
}
 +
 +
.container > header nav a:hover:before {
 +
content: attr(data-info);
 +
color: #47a3da;
 +
position: absolute;
 +
width: 600%;
 +
top: 120%;
 +
text-align: right;
 +
right: 0;
 +
pointer-events: none;
 +
}
 +
 +
.container > header nav a:hover {
 +
background: #47a3da;
 +
}
 +
 +
.bp-icon:after {
 +
font-family: 'bpicons';
 +
speak: none;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
text-align: center;
 +
color: #47a3da;
 +
-webkit-font-smoothing: antialiased;
 +
}
 +
 +
.container > header nav .bp-icon:after {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
line-height: 2;
 +
text-indent: 0;
 +
}
 +
 +
.container > header nav a:hover:after {
 +
color: #fff;
 +
}
 +
 +
.bp-icon-next:after {
 +
content: "\e000";
 +
}
 +
.bp-icon-drop:after {
 +
content: "\e001";
 +
}
 +
.bp-icon-archive:after {
 +
content: "\e002";
 +
}
 +
.bp-icon-about:after {
 +
content: "\e003";
 +
}
 +
.bp-icon-prev:after {
 +
content: "\e004";
 +
}
 +
 +
@media screen and (max-width: 55em) {
 +
 +
.container > header h1,
 +
.container > header nav {
 +
float: none;
 +
}
 +
 +
.container > header > span,
 +
.container > header h1 {
 +
text-align: center;
 +
}
 +
 +
.container > header nav {
 +
margin: 0 auto;
 +
}
 +
 +
.container > header > span {
 +
text-indent: 30px;
 +
}
 +
}
 
/* General style */
 
/* General style */
 
.grid-gallery ul {
 
.grid-gallery ul {

Revision as of 15:26, 16 September 2015