Skip to content

Instantly share code, notes, and snippets.

@puzzeljp
Last active May 27, 2016 09:02
Show Gist options
  • Save puzzeljp/92fcfa3cce1fabf754a25fdba0b647bf to your computer and use it in GitHub Desktop.
Save puzzeljp/92fcfa3cce1fabf754a25fdba0b647bf to your computer and use it in GitHub Desktop.
body {
width: 80vw;
margin: 15vh auto;
font-family: Avenir Next, AXIS Std, 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;;
}
a {
color: #0288D1;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header {
position: relative;
}
h1 {
font-size: 15vw;
letter-spacing: -20px;
margin-bottom: 0;
line-height: .6;
font-weight: 100;
}
h2 {
color: #ccc;
font-weight: 100;
font-size: 10vw;
line-height: .1;
margin-top: 0px;
position: relative;
z-index: -1;
}
h2 + img {
border-radius: 50%;
border: 2px solid skyblue;
position: absolute;
right: 0px;
top: -80px;
width: 250px;
}
h3 {
font-weight: 100;
font-size: 7vw;
margin: 0;
}
p {
font-size: 20px;
}
ul, ol {
margin: 10px 0;
}
li {
background: #BBDEFB;
padding-left: 20px;
margin: 20px 0;
}
strong {
color: red;
}
.contact {
border: 0;
display: flex;
flex-direction: row;
}
.contact li {
list-style-type: none;
padding: 0;
margin: 0 20px;
flex: 1;
text-align: center;
background-color: transparent;
transition: all 1s linear 0;
}
.contact li a {
display: block;
padding: 20px;
color: #fff;
background-color: #2196F3;
border-radius: 40px;
transition: all 1s linear 0;
}
.contact li a:hover {
background-color: #03A9F4;
text-decoration: none;
border-radius: 40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment