-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtachyonsTrial.html
150 lines (147 loc) · 7.11 KB
/
tachyonsTrial.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trial running Tachyons</title>
<link rel="stylesheet" href="vendor/tachyons/tachyons.min.css">
</head>
<body>
<h1 class="f1">Starting the Trial</h1>
<h2 class="f2">Entering the Temple</h2>
<h3 class="f3">How this works</h3>
<div class="code measure fl w-third ba">
<p class="i">Here is something you have to know</p>
</div>
<div class="athelas measure fl w-third bb">
<p class="b">This needs to be followed</p>
</div>
<div class="bodoni measure-wide fl w-third br">
<p class="bg-orange">There is always some color to Add</p>
</div>
<div class="b--dashed bw1 b--light-blue fl w-100 pa2 pv4"></div>
<div class="mw9 center ph3-ns">
<div class="b--dashed bw1 b--light-blue fl w-50 pv4 center"></div>
<div class="b--dashed bw1 b--light-blue fl w-50 pv4 center"></div>
</div>
<article class="cf">
<div class="fl w-50 w-25-ns">
<a href="https://www.amazon.com/BEYONCÉ-Beyonce/dp/B00KCOMBJC/ref=sr_1_2_twi_lp__3?s=music&ie=UTF8&qid=1480422067&sr=1-2&keywords=beyonce&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Beyoncé" style="background-image:url(http://mrmrs.github.io/photos/beyonce.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
<div class="fl w-50 w-25-ns">
<a href="https://www.amazon.com/99-9-KAYTRANADA/dp/B01D9DBNX2/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480422105&sr=1-1&keywords=kaytranada+vinyl&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Kaytranada"
style="background-image:url(http://mrmrs.github.io/photos/kaytranada.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
<div class="fl w-50 w-25-ns">
<a href="https://www.amazon.com/Woman-2LP-Set-Full-Album/dp/B01LX3E0ET/ref=sr_1_1?s=music&ie=UTF8&qid=1480422119&sr=1-1&keywords=justice&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Woman - Justice"
style="background-image:url(http://mrmrs.github.io/photos/justice.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
<div class="fl w-50 w-25-ns">
<a href="https://www.amazon.com/Skin-Flume/dp/B01DD5N35W/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480422133&sr=1-1&keywords=flume&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Skin - Flume"
style="background-image:url(http://mrmrs.github.io/photos/flume.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
<div class="fl w-50">
<a href="https://www.amazon.com/Seat-at-Table-Solange/dp/B01LXP7I5N/ref=sr_tnr_p_1_195429011_1_twi_lp__3?s=music&ie=UTF8&qid=1480422087&sr=1-1&keywords=solange+seat+at+the+table&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Seat at Table Solange"
style="background-image:url(http://mrmrs.github.io/photos/solange.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
<div class="fl w-50 w-25-ns">
<a href="https://www.amazon.com/untitled-unmastered-LP-Kendrick-Lamar/dp/B01DET9BV2/ref=sr_1_3_twi_lp__3?s=music&ie=UTF8&qid=1480370912&sr=1-3&keywords=kendrick+lamar&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Untitled Unmastered - Kendrick Lamar"
style="background-image:url(http://mrmrs.github.io/photos/untitledunmastered.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
<div class="fl w-100 w-25-ns">
<a href="https://www.amazon.com/Moon-Shaped-Pool-2-LP-Download/dp/B01FDF12UI/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480370971&sr=1-1&keywords=moon+shaped+pool&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Moon Shaped Pool 2"
style="background-image:url(http://mrmrs.github.io/photos/moonshapedpool.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
<div class="fl w-50 w-25-ns">
<a href="https://www.amazon.com/Colour-Anything-2-LP/dp/B01F8674B8/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371036&sr=1-1&keywords=color+in+anything&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Colour Anything 2"
style="background-image:url(http://mrmrs.github.io/photos/colouranything.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
<div class="fl w-50 w-25-ns">
<a href="https://www.amazon.com/Good-Luck-Do-Your-Best/dp/B01C3IHINI/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371123&sr=1-1&keywords=good+luck+gold+panda&tag=mrmrs01-20"
class="db aspect-ratio aspect-ratio--1x1 dim">
<span role="img" aria-label="Good Luck Do Your Best"
style="background-image:url(http://mrmrs.github.io/photos/goldpanda.jpg);"
class="bg-center cover aspect-ratio--object"></span>
</a>
</div>
</article>
<section class="mw7 center avenir">
<h2 class="baskerville fw1 ph3 ph0-l">News</h2>
<article class="bt bb b--black-10">
<a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
<div class="flex flex-column flex-row-ns">
<div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
<img src="http://mrmrs.github.io/photos/cpu.jpg" class="db"
alt="Photo of a dimly lit room with a computer interface terminal.">
</div>
<div class="w-100 w-60-ns pl3-ns">
<h1 class="f3 fw1 baskerville mt0 lh-title">Tech Giant Invests Huge Money to Build a Computer Out of Science
Fiction</h1>
<p class="f6 f5-l lh-copy">
The tech giant says it is ready to begin planning a quantum
computer, a powerful cpu machine that relies on subatomic particles instead
of transistors.
</p>
<p class="f6 lh-copy mv0">By Robin Darnell</p>
</div>
</div>
</a>
</article>
</section>
<ul class="list pl0">
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">alignment</b>
<span class="f5 db lh-copy measure">
The positioning of text within the page margins. Alignment can be flush left, flush right, justified, or
centered. Flush left and flush right are sometimes referred to as left justified and right justified.</span>
</li>
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">
ascender
</b>
<span class="f5 db lh-copy measure">
The part of lowercase letters (such as k, b, and d) that ascends above the
x-height of the other lowercase letters in a face.
</span>
</li>
</ul>
<article class="cf">
<div class="fl w-50 bg-near-white tc">
<h1>Column One</h1>
</div>
<div class="fl w-50 bg-light-gray tc">
<h1>Column Two</h1>
</div>
</article>
</body>
</html>