-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (78 loc) · 8.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zinc.world - Everything that happens in Zinc's world: CSS3, JavaScript, A/B testing, Conversion optimization and more</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Exo:400,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="hero">
<div class="hello">
<div class="hello__intro title">👋 Hello! I'm</div>
<div class="hello__name">Zinc</div>
</div>
<div class="portrait">
<img src="img/zinc-big.jpg" />
</div>
<div class="ecsspert">
<p class="ecsspert__intro title">The guy that made <span class="arrow-down-emoji">⤵️</span></p>
<a class="ecsspert__preview" href="http://ecsspert.com" target="_blank">
<img src="img/ecsspert-logos-preview.jpg" alt="Preview of the eCSSpert.com logos" />
</a>
<div class="ecsspert__info">
<a class="ecsspert__title title" href="http://ecsspert.com" target="_blank">Pure CSS3 Logos</a>
<p class="ecsspert__subtitle">Provoke people to think differently about CSS</p>
<!-- <p>One of the enthusiastic projects celebrating the move away from Flash and to a more open, fast and accessible web.</p> -->
</div>
<p class="ecsspert__featured">
<a href="https://news.ycombinator.com/item?id=3159660" target="_blank">#1 on Hacker News</a> for 2 days.
Mentioned in <a href="https://www.theguardian.com/technology/2011/nov/14/flash-death-bad-windows-phone" target="_blank">The
Guardian</a> as the example that Flash is dead.
Offered an original contribution to <a href="https://css-tricks.com/examples/ShapesOfCSS/" target="_blank">CSS-Tricks</a> for the landmark article The Shapes of CSS.
</p>
</div>
<div class="world__intro title">I also do these other things <span class="arrow-down-emoji">⤵️</span></div>
<!-- Icons from https://simpleicons.org/ -->
<div class="world">
<a class="world__link github" href="https://github.com/zoreet" target="_blank"><svg aria-labelledby="simpleicons-github-icon"
role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title id="simpleicons-github-icon">GitHub
icon</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
</a>
<a class="world__link dribbble" href="https://dribbble.com/ecsspert" target="_blank"><svg aria-labelledby="simpleicons-dribbble-icon"
role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title id="simpleicons-dribbble-icon">Dribbble
icon</title>
<path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z" />
</svg>
</a>
<a class="world__link instagram" href="https://www.instagram.com/zincpic/" target="_blank"><svg aria-labelledby="simpleicons-instagram-icon"
role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title id="simpleicons-instagram-icon">Instagram
icon</title>
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
</svg>
</a>
<a class="world__link youtube" href="https://www.youtube.com/watch?v=DpapogYWp0A" target="_blank"><svg aria-labelledby="simpleicons-youtube-icon"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title id="simpleicons-youtube-icon">YouTube
icon</title>
<path class="a" d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" />
</svg>
</a>
<a class="world__link medium" href="https://medium.com/@vladzinculescu" target="_blank"><svg aria-labelledby="simpleicons-medium-icon"
role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title id="simpleicons-medium-icon">Medium
icon</title>
<path d="M2.846 6.36c.03-.295-.083-.586-.303-.784l-2.24-2.7v-.403H7.26l5.378 11.795 4.728-11.795H24v.403l-1.917 1.837c-.165.126-.247.333-.213.538v13.5c-.034.204.048.41.213.537l1.87 1.837v.403h-9.41v-.403l1.937-1.882c.19-.19.19-.246.19-.538V7.794l-5.39 13.688h-.727L4.278 7.794v9.174c-.052.386.076.774.347 1.053l2.52 3.06v.402H0v-.403l2.52-3.06c.27-.278.39-.67.326-1.052V6.36z" />
</svg>
</a>
</div>
</div>
</body>
</html>