noggle/index.html at master · aaronfullerton/noggle · GitHub

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
<!doctype html>
<html>
  <head>
    <title>Noggle</title>
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
    <style>

	    html, body {
	    	font-family: "Oxygen"
	    }

    	div.grid, div.center {
    		text-align: center;
    		display: block;
    		margin: 0 auto;
    	}

    	h2 {
    		font-family: "KG When Oceans Rise";
    		display: inline-block;
    		padding: 10px;
    		margin: 0;
    		width: 80px;
    		height: 80px;
    		line-height: 78px;
    		font-size: 48px;
    		text-align: center;
    		position: relative;
    	}

		h2:before {
			font-family: "KG Flavor and Frames Three";
			content: 'b';
			font-size: 140px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #1D9AB2;
			font-weight: 300;
		};

    	h1 {
    		text-align: center;
    	}

    	div.row {
    		margin: 0;
    	}

    	button {
    		margin-top: 15px;
    		padding: 5px;
    	}

		.row1 h2.box2:before {
			color: #c20018;
		}

		.row1 h2.box3:before {
			color: #5DB12F;
		}

		.row1 h2.box4:before{
			color:#F04888;
		}

		.row2 h2.box1:before{
			color:#F04888;
		}

		.row2 h2.box2:before{
			color: #5DB12F;
		}

		.row2 h2.box4:before{
			color:#c20018;
		}

		.row3 h2.box1:before{
			color:#c20018;
		}

		.row3 h2.box3:before{
			color:#F04888;
		}

		.row3 h2.box4:before{
			color:#5DB12F;
		}

		.row4 h2.box1:before{
			color:#5DB12F;
		}

		.row4 h2.box2:before{
			color:#F04888;
		}

		.row4 h2.box3:before{
			color:#c20018;
		}

    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="/static/bundle.js"></script>
  </body>
</html>