diff --git a/css/stylesheet.css b/css/stylesheet.css new file mode 100644 index 0000000..a1734ec --- /dev/null +++ b/css/stylesheet.css @@ -0,0 +1,303 @@ +body { + padding: 0; + font-family: 'Lato', sans-serif; + background: #000; + margin: 8em 0; +} + +body a { + transition: 0.5s all; + -webkit-transition: 0.5s all; + -moz-transition: 0.5s all; + -o-transition: 0.5s all; +} + +input[type="button"], input[type="button"] { + transition: 0.5s all; + -webkit-transition: 0.5s all; + -moz-transition: 0.5s all; + -o-transition: 0.5s all; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +p { + margin: 0; +} + +label { + margin: 0; +} + +.header h1 { + color: #fff; + font-size: 3em; + font-weight: 700; + border: 4px solid #fff; + width: 33%; + margin: 0 auto; + padding: 10px; + font-family: 'Montserrat', sans-serif; +} + +.header h1 a { + color: #fff; + text-decoration: none; + display: block; +} + +.header p { + color: #fff; + font-size: 1.5em; + letter-spacing: 2px; + font-weight: 400; + font-family: 'Montserrat', sans-serif; + margin-top: 1em; +} + +.header { + margin-bottom: 8em; +} + +.panel { + padding: 1.5em 3em; + background: #191919; + margin-top: 3em; + color: #fff; + font-weight: 400; +} + +.form input[type="text"] { + width: 100%; + color: #fff; + background: #191919; + outline: none; + font-size: 1.3em; + padding: 1em 0; + border: none; + -webkit-appearance: none; +} + +.form input[type="button"] { + border: none; + outline: none; + color: #FFF; + padding: 0.6em; + font-size: 1.3em; + font-weight: 500; + margin: 1.3em 0 0 0; + -webkit-appearance: none; + background: #198a88; + width: 100%; + transition: 0.5s all; + -webkit-transition: 0.5s all; + -o-transition: 0.5s all; + -moz-transition: 0.5s all; +} + +.form input[type="button"]:hover { + background: #d78716; +} + +.check { + margin: .5em 0; +} + +.checkbox { + margin-bottom: 4px; + padding-left: 30px; + font-size: 1.1em; + line-height: 27px; + cursor: pointer; +} + +.checkbox { + position: relative; + font-size: 1.2em; + color: #fff; + font-weight: 400; +} + +.checkbox:last-child { + margin-bottom: 0; +} + +.checkbox i { + position: absolute; + bottom: 4px; + left: 17.5em; + display: block; + width: 19px; + height: 19px; + outline: none; + border: 1px solid #97A2A8; +} + +.checkbox i.left { + position: absolute; + bottom: 4px; + left: 0; + display: block; + width: 19px; + height: 19px; + outline: none; + border: 1px solid #97A2A8; +} + +.checkbox input + i:after { + content: ''; + background: url("../images/tick-mark.png") no-repeat 1px 2px; + top: 4px; + left: 2px; + width: 15px; + height: 15px; + font: normal 12px/16px FontAwesome; + text-align: center; +} + +.checkbox input + i:after { + position: absolute; + opacity: 0; + transition: opacity 0.1s; + -o-transition: opacity 0.1s; + -moz-transition: opacity 0.1s; + -webkit-transition: opacity 0.1s; +} + +.checkbox input { + position: absolute; + left: -9999px; +} + +.checkbox input:checked + i:after { + opacity: 1; +} + +.statistics { + padding-bottom: 3.2em; +} + +.statistics > div { + margin-bottom: 15px; +} + +.statistics > div:not(.percentage) { + clear: both; +} + +.probability { + width: 85%; + margin: 5px 0; + height: 18px; + background: #191919; + float: left; +} + +.probability-bar { + height: 100%; + display: block; + background-color: #d78716; +} + +.percentage { + float: right; + width: 15%; +} + +.percentage h5 { + color: #fff; + margin: 2px 0 0 14px; + font-weight: 500; + /* float: right; */ +} + +#address, #private-key { + font-family: monospace; + font-size: 1.2em; + color: #969696; + margin-left: 15px; +} + +/*-- Responsive design --*/ + +@media screen and (max-width: 1280px) { + .header h1 { + font-size: 2.8em; + width: 32%; + } +} + +@media screen and (max-width: 1024px) { + .header h1 { + font-size: 2.5em; + border: 3px solid #fff; + width: 34%; + } + + .header p { + font-size: 1.4em; + margin-top: 0.8em; + } + + body { + margin: 7em 0 5em 0; + } + + .header { + margin-bottom: 4em; + } +} + +@media screen and (max-width: 768px) { + .header h1 { + width: 43%; + } +} + +@media screen and (max-width: 640px) { + .header h1 { + width: 46%; + font-size: 2.2em; + padding: 8px; + } + + .header p { + font-size: 1.3em; + margin-top: 0.7em; + } + + body { + margin: 5em 0 4em 0; + } + + .header { + margin-bottom: 4em; + } +} + +@media screen and (max-width: 480px) { + .header h1 { + width: 57%; + font-size: 2em; + padding: 7px; + border: 2px solid #fff; + } + + .header p { + font-size: 1.2em; + } +} + +@media screen and (max-width: 320px) { + .header h1 { + width: 73%; + font-size: 1.6em; + padding: 6px; + } + + .header p { + font-size: 1em; + } +} diff --git a/images/tick-mark.png b/images/tick-mark.png new file mode 100644 index 0000000..42807f4 Binary files /dev/null and b/images/tick-mark.png differ diff --git a/index.html b/index.html index 1b3ec51..8f3724d 100644 --- a/index.html +++ b/index.html @@ -6,27 +6,72 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Vanity ETH address generator
+