-
Notifications
You must be signed in to change notification settings - Fork 0
/
signup.html
131 lines (128 loc) · 8.81 KB
/
signup.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144817975-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-144817975-3');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fourpointfive</title>
<link rel="stylesheet" href="style.css">
<!-- Set favicon -->
<link rel="shortcut icon" href="images/folkstore_favicon.jpg"/>
<!-- Load Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<!-- Google -->
<script data-ad-client="ca-pub-8595333601352383" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Load Vue.js - Dev Version -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- fourpointfive is a product built by Jesse Cooke of Pixl Haus. Learn more about Pixl Haus at www.pixlhaus.design -->
</head>
<body>
<div id="app">
<header>
<div id="header_container">
<div id="header_nav_container">
<a href="index.html">
<svg version="1.1" id="fpf_logo_main" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 269.1 269.1" style="enable-background:new 0 0 269.1 269.1;" xml:space="preserve">
<g>
<path d="M241.5,32.6V13.9H13.9v227.7h18.7v13.7h222.7V32.6H241.5z M236.5,236.5H18.9V18.9h217.7V236.5z"/>
<polygon points="50.9,82.3 66.2,82.3 66.2,76.1 50.9,76.1 50.9,68.2 66.4,68.2 66.4,62 44.4,62 44.4,96.4 50.9,96.4 "/>
<path d="M91.1,97.1c4,0,7.1-1.2,9.3-3.6c2.2-2.4,3.4-5.9,3.4-10.5v-7.7c0-4.5-1.1-7.9-3.4-10.4c-2.2-2.5-5.3-3.7-9.3-3.7
c-4,0-7.1,1.2-9.3,3.7c-2.2,2.5-3.4,5.9-3.4,10.4v7.7c0,4.6,1.1,8.1,3.4,10.5C84,95.9,87.1,97.1,91.1,97.1z M84.9,75
c0-1.1,0.1-2.1,0.3-3c0.2-0.9,0.6-1.8,1.1-2.5c0.5-0.7,1.1-1.2,1.9-1.6c0.8-0.4,1.7-0.6,2.8-0.6c1.1,0,2.1,0.2,2.9,0.6
c0.8,0.4,1.4,1,1.9,1.6c0.5,0.7,0.9,1.5,1.1,2.5c0.2,1,0.3,2,0.3,3v8.5c0,1.1-0.1,2.2-0.3,3.1c-0.2,1-0.5,1.8-1,2.5
c-0.5,0.7-1.1,1.2-1.9,1.6s-1.8,0.6-2.9,0.6c-1.2,0-2.2-0.2-2.9-0.6c-0.8-0.4-1.4-0.9-1.9-1.6c-0.5-0.7-0.8-1.5-1-2.5
c-0.2-0.9-0.3-2-0.3-3.1V75z"/>
<path d="M127.1,97.1c4.1,0,7.2-1.1,9.3-3.3c2.1-2.2,3.1-5.3,3.1-9.2V62H133v22.5c0,2-0.5,3.6-1.4,4.8c-1,1.1-2.4,1.7-4.5,1.7
c-2,0-3.5-0.6-4.5-1.7c-1-1.1-1.4-2.7-1.4-4.8V62h-6.5v22.5c0,3.9,1,7,3.1,9.2C119.9,96,123,97.1,127.1,97.1z"/>
<path d="M158.1,83.5h7.5c0.9,0,1.6,0.2,2,0.7c0.4,0.5,0.6,1.1,0.6,1.9v10.3h6.5V84.5c0-1.1-0.3-2.1-1-2.9c-0.7-0.8-1.6-1.2-2.7-1.3
v-0.9c1.6-0.7,2.7-1.6,3.5-2.8c0.8-1.2,1.1-2.5,1.1-4v-1.2c0-1.3-0.2-2.5-0.7-3.7c-0.5-1.1-1.2-2.2-2.1-3c-0.9-0.9-2-1.5-3.4-2
c-1.3-0.5-2.9-0.7-4.7-0.7h-13.2v34.4h6.5V83.5z M158.1,68.2h6.2c1.6,0,2.8,0.4,3.6,1.3c0.8,0.8,1.2,1.8,1.2,3v0.6
c0,1.3-0.4,2.4-1.2,3.1c-0.8,0.7-2,1.1-3.6,1.1h-6.2V68.2z"/>
<path d="M50.1,132.4h7c1.8,0,3.3-0.3,4.6-0.9c1.3-0.6,2.4-1.4,3.3-2.3c0.9-1,1.5-2.1,2-3.3c0.4-1.2,0.7-2.5,0.7-3.8V121
c0-1.2-0.2-2.5-0.7-3.7c-0.4-1.2-1.1-2.3-2-3.2c-0.9-0.9-2-1.7-3.3-2.3c-1.3-0.6-2.9-0.9-4.6-0.9H43.6v34.4h6.5V132.4z M50.1,117.2
h6.3c1.4,0,2.6,0.4,3.4,1.2c0.8,0.8,1.3,1.8,1.3,3v0.6c0,1.2-0.4,2.3-1.3,3c-0.8,0.8-2,1.2-3.4,1.2h-6.3V117.2z"/>
<path d="M91.1,146.1c4,0,7.1-1.2,9.3-3.6c2.2-2.4,3.4-5.9,3.4-10.5v-7.7c0-4.5-1.1-7.9-3.4-10.4c-2.2-2.5-5.3-3.7-9.3-3.7
c-4,0-7.1,1.2-9.3,3.7c-2.2,2.5-3.4,5.9-3.4,10.4v7.7c0,4.6,1.1,8.1,3.4,10.5C84,144.9,87.1,146.1,91.1,146.1z M84.9,124
c0-1.1,0.1-2.1,0.3-3c0.2-0.9,0.6-1.8,1.1-2.5c0.5-0.7,1.1-1.2,1.9-1.6c0.8-0.4,1.7-0.6,2.8-0.6c1.1,0,2.1,0.2,2.9,0.6
c0.8,0.4,1.4,1,1.9,1.6c0.5,0.7,0.9,1.5,1.1,2.5c0.2,1,0.3,2,0.3,3v8.5c0,1.1-0.1,2.2-0.3,3.1c-0.2,0.9-0.5,1.8-1,2.5
c-0.5,0.7-1.1,1.2-1.9,1.6s-1.8,0.6-2.9,0.6c-1.2,0-2.2-0.2-2.9-0.6c-0.8-0.4-1.4-0.9-1.9-1.6c-0.5-0.7-0.8-1.5-1-2.5
c-0.2-1-0.3-2-0.3-3.1V124z"/>
<polygon points="138.6,117.2 138.6,111 115.6,111 115.6,117.2 123.8,117.2 123.8,139.2 115.6,139.2 115.6,145.4 138.6,145.4
138.6,139.2 130.3,139.2 130.3,117.2 "/>
<polygon points="157.5,114.3 158.4,114.3 162.4,145.4 175.1,145.4 175.1,111 168.6,111 168.6,142.2 167.7,142.2 163.7,111 151,111
151,145.4 157.5,145.4 "/>
<polygon points="195.8,145.4 202.3,145.4 202.3,117.2 211.4,117.2 211.4,111 186.6,111 186.6,117.2 195.8,117.2 "/>
<polygon points="44.4,194.4 50.9,194.4 50.9,180.2 66.2,180.2 66.2,174.1 50.9,174.1 50.9,166.2 66.4,166.2 66.4,160 44.4,160 "/>
<polygon points="79.6,166.2 87.9,166.2 87.9,188.2 79.6,188.2 79.6,194.4 102.6,194.4 102.6,188.2 94.4,188.2 94.4,166.2
102.6,166.2 102.6,160 79.6,160 "/>
<polygon points="133.2,194.4 140.9,160 134.3,160 127.5,191.2 126.6,191.2 119.9,160 113.2,160 121,194.4 "/>
<polygon points="158.5,180.2 173.2,180.2 173.2,174.1 158.5,174.1 158.5,166.2 173.8,166.2 173.8,160 152,160 152,194.4
174.3,194.4 174.3,188.2 158.5,188.2 "/>
</g>
</svg>
</a>
<nav>
<a href="signup.html">SUBMIT A DESIGN</a>
</nav>
</div>
<div id="header_content_container">
<div>
<h1 id="header_h1">SUBMIT A DESIGN</h1>
<h2 id="header_h2">that meets or exceeds WCAG 2.1 guidelines on color contrast.</h2>
</div>
</div>
</div>
</header>
<div id="signup_page_container">
<div id="signup_container">
<h2>Submit your design!</h2>
<form id="signup_form" action="https://getform.io/f/6ead8bf8-b7af-443b-85bf-4da7456ccf10" method="POST" enctype="multipart/form-data">
<!-- Name -->
<label for="name">Your name<span class="signup_required">*</span></label>
<input type="text" name="name" placeholder="Gon Freecss" required>
<!-- Logo or Photo -->
<label for="upload">Screenshot<span class="signup_required">*</span><br><span class="signup_label_tip">Please crop to 600x336. Feel free to zoom in on a specific section of the website for better context.</span></label>
<input id="signupfile" type="file" name="upload" required>
<!-- Source -->
<label for="source">Source<br><span class="signup_label_tip">Where did you find this?</span></label>
<input type="text" name="website" placeholder="www.netlify.com">
<div id="personalproject_container">
<input type="checkbox" name="personalproject" id="personalproject_checkbox">
<label for="personalproject" id="personalproject_text"><span class="signup_label_tip">This is a personal project with no source</span></label>
</div>
<!-- Email -->
<label for="email">Email address<span class="signup_required">*</span></label>
<input type="text" name="email" placeholder="[email protected]" required>
<!-- Color 1 -->
<label for="color1">Color #1<span class="signup_required">*</span></label>
<input type="text" name="color1" placeholder="#000000" required>
<!-- Color 2 -->
<label for="color2">Color #2<span class="signup_required">*</span></label>
<input type="text" name="color2" placeholder="#ffffff" required>
<!-- Color 3 -->
<label for="color3">Color #3<br><span class="signup_label_tip">If a 3rd color was used in the design..</span></label>
<input type="text" name="color3" placeholder="#000fff">
<!-- Email signup -->
<div id="signup_email_container">
<input type="checkbox" name="emailsignup" id="signup_email_checkbox">
<label for="emailsignup" id="signup_email_text"><span class="signup_label_tip">I want to receive emails from four point five</span></label>
</div>
<!-- SUBMIT -->
<input type="submit">
</form>
</div>
</div>
<!-- Load Vue files -->
<script src="./main.js"></script>
</div>
</body>
</html>