Line 3: | Line 3: | ||
<html> | <html> | ||
<head> | <head> | ||
− | <style> | + | <style> /* this one is tricky, translate(15em) is the distance from centre */ |
− | .deg170 { transform: rotate(170deg) translate( | + | .deg170 { transform: rotate(170deg) translate(15em) rotate(-170deg); } |
− | .deg150 { transform: rotate(150deg) translate( | + | .deg150 { transform: rotate(150deg) translate(15em) rotate(-150deg); } |
− | .deg130 { transform: rotate(130deg) translate( | + | .deg130 { transform: rotate(130deg) translate(15em) rotate(-130deg); } |
− | .deg110 { transform: rotate(110deg) translate( | + | .deg110 { transform: rotate(110deg) translate(15em) rotate(-110deg); } |
− | .deg90 { transform: rotate(90deg) translate( | + | .deg90 { transform: rotate(90deg) translate(16em) rotate(-90deg); } |
− | .deg70 { transform: rotate(70deg) translate( | + | .deg70 { transform: rotate(70deg) translate(15em) rotate(-70deg); } |
− | .deg50 { transform: rotate(50deg) translate( | + | .deg50 { transform: rotate(50deg) translate(15em) rotate(-50deg); } |
− | .deg30 { transform: rotate(30deg) translate( | + | .deg30 { transform: rotate(30deg) translate(15em) rotate(-30deg); } |
− | .deg10 { transform: rotate(10deg) translate( | + | .deg10 { transform: rotate(10deg) translate(15em) rotate(-10deg); } |
.circle-container { | .circle-container { | ||
position: relative; | position: relative; | ||
− | width: | + | width: 24em; |
− | padding: 2.8em; /* | + | height: 24em; |
+ | padding: 2.8em; /* half the width of an img * 1.4 */ | ||
border-radius: 50%; | border-radius: 50%; | ||
margin: 1.75em auto 0; | margin: 1.75em auto 0; | ||
Line 27: | Line 28: | ||
position: absolute; | position: absolute; | ||
top: 50%; left: 50%; | top: 50%; left: 50%; | ||
− | width: | + | width: 8em; height: 4em; |
− | margin: - | + | margin: -4em; /* half the width */ |
} | } | ||
</style> | </style> | ||
Line 37: | Line 38: | ||
<div class="column full_size" > | <div class="column full_size" > | ||
− | <h1 class="Raleway" style="text-align:center;"> | + | <h1 class="Raleway" style="text-align:center;">Project</h1> |
<span class="line" style="margin:0 auto;"> </span> | <span class="line" style="margin:0 auto;"> </span> | ||
Revision as of 02:11, 18 October 2016