-
Notifications
You must be signed in to change notification settings - Fork 0
/
cryptomonos.html
123 lines (123 loc) · 7.94 KB
/
cryptomonos.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
Cryptomonos | Roy Quilor | Designer, HTML, CSS, Javascript
</title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="/css/main.css?version=1">
</head>
<body class="project csspurge black-theme">
<header>
<div class="header-wrap">
<a href="index.html">
<svg class="logo" width="32" height="32" viewBox="0 0 32 32" xmlns="https://www.w3.org/2000/svg">
<title>q</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo">
<stop stop-color="var(--color-stop-1)" offset="0%"/>
<stop stop-color="var(--color-stop-2)" offset="100%"/>
</linearGradient>
</defs>
<path d="M15.94 27.474h15.84v4.526h-15.84c-8.734 0-15.84-7.106-15.84-15.84s7.106-15.84 15.84-15.84 15.84 7.106 15.84 15.84c0 .768-.055 1.524-.161 2.263h-4.592c.149-.731.227-1.488.227-2.263 0-6.239-5.075-11.314-11.314-11.314s-11.314 5.075-11.314 11.314 5.075 11.314 11.314 11.314zm0-6.789h15.84v4.526h-15.84c-4.991 0-9.051-4.06-9.051-9.051 0-4.991 4.06-9.051 9.051-9.051 4.991 0 9.051 4.06 9.051 9.051 0 .781-.099 1.539-.286 2.262h-4.847c.386-.666.608-1.439.608-2.263 0-2.495-2.03-4.525-4.525-4.525-2.496 0-4.526 2.03-4.526 4.525 0 2.496 2.03 4.526 4.526 4.526zm-2.263-4.526c0-1.25 1.013-2.262 2.263-2.262s2.262 1.013 2.262 2.262c0 1.25-1.013 2.263-2.262 2.263-1.25 0-2.263-1.013-2.263-2.263z" fill=""/></svg>
</a>
<nav>
<a class="" href="work.html">Work</a>
<a class="" href="about.html">About</a>
<a class="" href="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/royquilor">Github</a>
<a class="cta cta-s cta-line-white " href="mailto:[email protected]">Contact</a>
</nav>
</div>
</header>
<main class="transition-fade">
<section class="hero xhero-split xhero-elliptical">
<div class="hero-skew"></div>
<!-- <div class="flex flex-column flex-row-l mw9 center items-center justify-center"> -->
<article class="article-wrap pv3 row-l">
<figure class="animated">
<img class="br3" src="images/crypto/iphone/IMG_4002.PNG" width="320" />
</figure>
<div class="grid-unit">
<h1 class="mb4-l">Minimal top 25 <br/>Crypto currencies</h1>
<a class="cta cta-l cta-white cta-shadow mb4" href="https://www.cryptomonos.com">Website</a>
</div>
</article>
<!-- </div> -->
</section>
<section>
<article class="article-wrap">
<div class="grid-unit measure">
<h2 class="handwriting">Case study coming soon</h2>
<p class="fs4">
Lets keep it simple. A side project originally done by <a href="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/nTamura/react-crypto-charts">nTamura</a>. Api from <a href="https://coinmarketcap.com/">coinmarketcap</a> hacked the design with css and basic react knowledge.
</p>
</div>
</article>
<article class="article-wrap row-l">
<figure>
<img class="br3" src="images/crypto/iphone/IMG_4017.PNG" width="320" />
</figure>
<div class="grid-unit">
<h2>Themes</h2>
<p class="fs4">
Inspired by Google fonts, go a bit further than dark and light mode to experiment.
</p>
</div>
</article>
<article class="article-wrap">
<div class="grid-unit">
<h2>Responsive</h2>
<p class="fs4">Quick glance on the ipad, desktop or mobile? CSS media queries are awesome.</p>
</div>
<figure>
<img class="" src="images/crypto/ipad/IMG_0715.PNG" />
</figure>
</article>
<article class="article-wrap row-l">
<figure>
<img class="br3" src="images/crypto/iphone/IMG_4025.PNG" width="320" />
</figure>
<div class="grid-unit">
<h2 class="">Fonts</h2>
<p class="fs4">From monospace to system fonts. Even the classic retro Chicago font. From table data, monospace fonts align better.</p>
</div>
</article>
</section>
</main>
<div class="space-v2 bg-black tc">
<a href="work.html" class="cta cta-l ma3">More Work</a>
<a href="design-system.html" class="cta cta-line cta-l ma3">Design System</a>
</div>
<footer class="space-a1">
<div class="footer-wrap">
<p class="mb5 mb0-l">© Made with <a href="https://tachyons.io/">Tachyons</a> and love.</p>
<div class="social">
<a href="https://www.linkedin.com/in/roy-quilor-0b78559/" class="linkedin">
<svg aria-labelledby="simpleicons-linkedin-icon" role="img" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><title id="simpleicons-linkedin-icon">LinkedIn icon</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://dribbble.com/royquilor" class="dribbble">
<svg aria-labelledby="simpleicons-dribbble-icon" role="img" viewBox="0 0 24 24" xmlns="https://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 href="https://twitter.com/RoyQuilor" class="twitter">
<svg aria-labelledby="simpleicons-twitter-icon" role="img" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><title id="simpleicons-twitter-icon">Twitter icon</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
</a>
</div>
</div>
</footer>
<script src="js/tweets.js"></script>
<script src="js/header.js"></script>
<script src="js/animation.js"></script>
<script src="js/flow.js"></script>
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-4568199-5','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>