diff --git a/Form/Register-Login Form.png b/Form/Register-Login Form.png new file mode 100644 index 0000000..f9e6035 Binary files /dev/null and b/Form/Register-Login Form.png differ diff --git a/Form/index.html b/Form/index.html index e9a7057..8428ff6 100644 --- a/Form/index.html +++ b/Form/index.html @@ -1,73 +1,88 @@ - - - - - Membership Query - - - -
-
- esrilogo - - - -
-
-
-
-
    -
  • Add Member
    • -
  • Remove Member
    • -
-
-
-
- - - - - - - -
-
-
-
-
-
    -
  • Role -
  • Organization Publisher -
  • Organization Viewer -
  • Organization Admin - -
-
- - - -
-
-
-
-
- - -
-
-
- - - - + + + + + Membership Query + + + + + +
+
+ esrilogo + +
+
+
+
+
    +
  • Add Member
    • +
  • Remove Member
    • +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+ +
+ + + +
+
+
+ +
+
+
+ + diff --git a/Form/styles.css b/Form/styles.css index 2ed330c..2131d1e 100644 --- a/Form/styles.css +++ b/Form/styles.css @@ -1,308 +1,356 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - outline: none; - font-family: 'Avenir Next W00', 'Avenir Next LT Pro', 'Century Gothic', sans-serif; -} - -/* body{ - background: url('bg.jpg') no-repeat top center; - background-size: cover; - height: 100vh; -*/ -.header { - overflow: hidden; - background-color: #f1f1f1; - padding: 7px 10px; -} - -.header a { - float: left; - color: black; - text-align: center; - padding: 5px; - text-decoration: none; - font-size: 18px; - line-height: 15px; -} - -.header img { - font-size: 25px; - font-weight: bold; - margin-left: 30px; - margin-top: 10px; -} - -.header a:hover { - background-color: none; - color: #39b7dd; -} - -/*.header a.active { - background-color: none; - border-bottom: 3px solid #39b7dd; - padding-bottom: 15px; -}*/ - -.header ul { - float: right; -} - -.header ul { - list-style-type: none; - margin: 0 3rem; - padding: 1rem 0; - overflow: hidden; - display: flex; - position: relative; - letter-spacing: 2px; -} - -.header li{ - padding: 0px 10px; -} - -.content { - width: 1000px; - border: 1px solid #ff0000; - margin: 0 auto; - height: 100%; - min-height: 100%; -} - -.wrapper{ - display: flex; - position: absolute; - top: 55%; - transform: translateY(-50%); - width: 100%; - padding: 0 20px; -} - -.wrapper .tabs ul{ - float:left; - text-align: center; - padding: 1rem 0; -} - -.wrapper .tabs ul li{ - list-style: none; - display: inline-block; - margin: 5px; - padding: 5px 70px; - font-size: 14px; - color: #fff; - text-transform: uppercase; - letter-spacing: 3px; - cursor: pointer; -} - -.wrapper .tabs ul li.active{ - border-bottom: 2px solid #39b7dd; -} - -.wrapper .add, .wrapper .remove{ - margin-top: 20px; -} - -.contact-form{ - display: flex; - max-width: 550px; - margin: 0 auto; - background: rgba(0,0,0,0.8); - padding: 30px; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0,0,0,0.3); -} - -.input-fields{ - display: flex; - flex-direction: column; - margin-right: 4%; -} - -.input-fields .input { - font-size: 0.8em; -} - -.input-fields, -.msg{ - width: 100%; -} - -.input-fields .input, .msg textarea{ - margin: 10px 0; - background: transparent; - border: 0px; - border-bottom: 2px solid #c5ecfd; - padding: 10px; - color: #c5ecfd; - width: 100%; -} - -.msg textarea{ - height: 212px; -} - -::-webkit-input-placeholder { - /* Chrome/Opera/Safari */ - color: #c5ecfd; - font-size: 1.25em; -} -::-moz-placeholder { - /* Firefox 19+ */ - color: #c5ecfd; - font-size: 1.25em; -} -:-ms-input-placeholder { - /* IE 10+ */ - color: #c5ecfd; - font-size: 1.25em; -} - -.button { - background: #39b7dd; - text-align: center; - padding: 15px; - border-radius: 15px; - border: none; - color: #fff; - cursor: pointer; - text-transform: uppercase; - width: 150px; - font-size: 15px; -} - -.button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.5s; -} - -.button span:after { - content: '\00bb'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; -} - -.button:hover span { - padding-right: 15px; -} - -.button:hover span:after { - opacity: 1; - right: 0; -} - -.select{ - cursor: pointer; - position: relative; - margin: 50px auto; - width: 250px; -} - -.select .input:after, .select .input:before{ - content:''; - position: absolute; - left: calc(100% - 20px); - transform: translateY(-50%); - width: 0; - height: 0; -} - -.select .input:before{ - border-top: 5px solid #999; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - top: 50%; -} - -.select .input:after{ - border-top: 5px solid #fff; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - top: calc(50% - 1px); -} - -.select-options{ - border: 1px solid orange; - position: absolute; - width: 100%; - border-radius: 3px; - z-index: 100; - top: 0; - left: 0; - padding-top: 30px; - display: none; -} - -.select-options.visible { - display: block; -} - -.select-options ul li { - padding: 8px 50px 8px 6px; - border-bottom: 1px solid #ddd; - font-size: 13px; - color: #999; - font-weight: 300; - position: relative; - overflow: hidden; -} - -.select-options ul li:last-child{ - border-bottom: 0; -} - -.select-options ul li.selected > span:first-child { - color: orange; -} - -.select-options ul li.selected:after { - content: ''; - width: 5px; - height: 10px; - border: 1px solid orange; - border-right: 0; - border-bottom: 0; - left: calc(100% - 20px); - top: 50%; - transform: translateY(-50%) rotate(-135deg); - position: absolute; -} -/*.select select{ - width: 100%; - height: 100%; - background: none; - border: none; - -webkit-appearance: none; - padding: 0 50px 0 20px; - cursor: pointer; - text-indent: 5px; -} - -.select .select{ - position: relative; - background: #fff; - border: 1px solid #f1f1f1; - height: 50px; - cursor: pointer; -/ - -@media screen and (max-width: 600px){ - .contact-form{ - flex-direction: column; - } - .msg textarea{ - height: 80px; - } - .input-fields, - .msg{ - width: 100%; - } -} +@import url('https://fonts.googleapis.com/css?family=Nunito'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + outline: none; + text-decoration: none; + list-style: none; + font-family: 'Nunito', sans-serif; +} + +body{ + background: #dfdfdf; +} + +.header { + overflow: hidden; + background-color: #f1f1f1; + padding: 7px 10px; +} + +.header a { + float: left; + color: black; + text-align: center; + padding: 5px; + text-decoration: none; + font-size: 18px; + line-height: 15px; +} + +.header img { + font-size: 25px; + font-weight: bold; + margin-left: 30px; + margin-top: 10px; +} + +.header a:hover { + background-color: none; + color: #39b7dd; +} + +/*.header a.active { + background-color: none; + border-bottom: 3px solid #39b7dd; + padding-bottom: 15px; +}*/ + +.header ul { + float: right; +} + +.header ul { + list-style-type: none; + margin: 0 3rem; + padding: 1rem 0; + overflow: hidden; + display: flex; + position: relative; + letter-spacing: 2px; +} + +.header li{ + padding: 0px 10px; +} + +.wrapper{ + display: flex; + max-width: 560px; + width: 100%; + height: 550px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); +} + +.wrapper .right{ + width: 50%; + height: 100%; + padding: 30px; +} + +.wrapper .container{ + background: #fff; + width: 100%; + height: 650px; + border-radius: 10px; +} + +.wrapper .container .tabs ul{ + text-align: center; +} + +.wrapper .container .tabs ul li{ + display: inline-block; + margin: 5px; + padding: 5px 10px; + font-size: 14px; + color: #494f57; + text-transform: uppercase; + letter-spacing: 2px; + cursor: pointer; + margin-top: 60px; + margin-left: 30px; + margin-bottom: 10px; +} + +.wrapper .container .tabs ul li.active{ + border-bottom: 2px solid #39b7dd; + color: #39b7dd; +} + +.wrapper .container .add{ + margin-top: 20px; +} + +.wrapper .container .remove{ + margin-top: 20px; +} + +.wrapper .container .input_field{ + margin-bottom: 15px; + margin-left: 100px; + padding: 5px 5px; +} + +.wrapper .container .input_field .input{ + width: 80%; + padding: 10px 20px; + border: 0; + font-size: 12px; + background: #ecebeb; + border-radius: 25px; +} + +/*.wrapper .container .btn{ + margin-top: 20px; + background: #494f57; + padding: 10px; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; + font-weight: bold; +} + +.wrapper .container .btn a{ + color: #fff; + display: block; + font-size: 14px; +} + +.wrapper .container .custom-select{ + width: 80%; + padding: 10px 20px; + border: 0; + font-size: 12px; + background: #ecebeb; + border-radius: 25px; +} + +.wrapper .container .custom-select select{ +color: #494f57; +}*/ + +.select-field { + display: inline-block; + width: 500px; + max-width: 600px; + height: 37px; + margin: 0px 106px; + margin-bottom: 10px; + + padding: 0px; + background-color: #ecebeb; + border-radius: 30px; + position: relative; + z-index: 1; +} + +.select-field select { + float: left; + margin-left: 50px; + width: 100%; + height: 100%; + font-size: 12px; + margin: 0px 6px; + padding: 0px 45px 0px 15px; + border: 0px; + background-color: transparent; + color: #757575; + position: relative; + z-index: 3; + + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; + + background-image: + linear-gradient(45deg, transparent 50%, gray 50%), + linear-gradient(135deg, gray 50%, transparent 50%), + linear-gradient(to right, #ccc, #ccc); + + background-position: + calc(100% - 25px) calc(1em + 4px), + calc(100% - 20px) calc(1em + 4px), + calc(100% - 3.2em) 0.7em; + + background-size: + 5px 5px, + 5px 5px, + 1px 1.5em; +background-repeat: no-repeat; +} + +.select-field select option { + padding: 10px; +} + +.dropdown-el { + margin-top:20vh; + + min-width: 12em; + position: relative; + display: inline-block; + margin-right: 1em; + min-height: 2em; + max-height:2em; + overflow:hidden; + top: .5em; + cursor: pointer; + text-align: left; + white-space: nowrap; + color: #444; + + outline: none; + border: .06em solid transparent; + border-radius: 1em; + background-color: mix($color,#fff,25%); + + transition: $timing all ease-in-out; + input:focus + label { + background-color: #def; + } + input { + width: 1px; + height: 1px; + display: inline-block; + position: absolute; + opacity: 0.01; + } + label { + border-top: .06em solid #d9d9d9; + display:block; + height: 2em; + line-height: 2em; + padding-left: 1em; + padding-right: 3em; + cursor: pointer; + position: relative; + transition: $timing color ease-in-out; + &:nth-child(2) { + margin-top: 2em; + border-top: .06em solid #d9d9d9; + } + } + input:checked + label { + display:block; + border-top: none; + position: absolute; + top: 0; + width: 100%; + + &:nth-child(2) { + margin-top: 0; + position: relative; + } + } + + &::after { + content:""; + position: absolute; + right: 0.8em; + top: 0.9em; + border: .3em solid $color; + border-color: $color transparent transparent transparent; + transition: .4s all ease-in-out; + } + &.expanded { + border: .06em solid $color; + background: #fff; + border-radius: .25em; + padding: 0; + box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; + max-height:15em; + + label { + border-top: .06em solid #d9d9d9; + &:hover { + color:$color; + } + } + input:checked + label { + color:$color; + } + + &::after { + transform: rotate(-180deg); + top:.55em; + } + } +} + +.button { + background: #39b7dd; + margin-left: 200px; + margin-top: 15px; + text-align: center; + padding: 15px; + border-radius: 15px; + border: none; + color: #fff; + cursor: pointer; + text-transform: uppercase; + width: 150px; + font-size: 15px; +} + +.button span { + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; +} + +.button span:after { + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} + +.button:hover span { + padding-right: 15px; +} + +.button:hover span:after { + opacity: 1; + right: 0; +}