From 8b07e8848efdb9cff78228504aa31de10f7948bd Mon Sep 17 00:00:00 2001 From: johan Date: Tue, 20 Dec 2022 22:52:02 +0100 Subject: [PATCH 1/2] form designed --- static/css/main.css | 74 ++++++++++++++++++++++++++++++++++++--------- static/index.html | 16 +++++++--- static/js/anim.js | 4 +-- 3 files changed, 73 insertions(+), 21 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 6ffc3a5..04c93f7 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -50,18 +50,6 @@ h1 { background-position-x: right; } -@media screen and (max-width: 800px) { - .container { - margin: 0px; - width: 100%; - border-radius: 0px; - box-shadow: none; - } - body { - margin: 0px; - } -} - .logo>img { height: 220px; margin-left: 3vw; @@ -88,8 +76,9 @@ hr::before { content: url('../img/divider.svg'); } + p { - font-size: 1.5vw; + font-weight: 300; } @@ -176,7 +165,56 @@ img { text-align: center; } -@media screen and (max-width: 600px) { + +form { + margin-top: 25vh; + margin-bottom: 10vh; + padding: 0px; + width: 50vw; + display: flex; + align-items: center; + flex-direction: column; +} + +.form-group { + margin: 10px; + width: 100%; +} + +input { + width: 100%; + border: none; + border-bottom: 1px solid #d75b00; + height: 40px; + background: none; + padding: 5px; +} + +input:focus { + outline: none; + border-bottom: 2px solid #923e01; +} + +button[type="submit"] { + padding: 5px 10px; + height: 30px; + outline: 1px solid #d75b00; + background: none; + border: none; + font-family: inherit; + color: #d75b00; + transition-property: all; + transition-duration: 0.3s; + transition-timing-function: ease-out; +} + +button[type="submit"]:hover { + cursor: pointer; + background-color: #d75b00; + color: #ffffff; +} + +@media screen and (max-width: 800px) { .bg-full { display: none; } @@ -195,6 +233,8 @@ img { } .row { flex-direction: column; + width: 100%; + align-items: center; } .col { @@ -209,4 +249,8 @@ img { h1 { font-size: 40px; } -} + + form { + width: 85vw; + } +} \ No newline at end of file diff --git a/static/index.html b/static/index.html index 9dbbb1a..5e1a80f 100644 --- a/static/index.html +++ b/static/index.html @@ -33,7 +33,7 @@
-
+
diff --git a/static/js/anim.js b/static/js/anim.js index 66166b6..5744db3 100644 --- a/static/js/anim.js +++ b/static/js/anim.js @@ -17,10 +17,15 @@ function check_if_in_view() { (element_top_position <= window_bottom_position) && $element.is(':visible')) { if(!$element.hasClass('animated')) { $element.addClass('animated'); - new TypeIt('#' + $element.attr('id'), { + var a = new TypeIt('#' + $element.attr('id'), { speed: 30, + lifeLike: true, }) .go(); + $element.click(function () { + a. + a.options({speed: 20, lifeLike: false}); + }); } } });