diff --git a/dmp-frontend/src/assets/splash/contact.html b/dmp-frontend/src/assets/splash/contact.html new file mode 100644 index 000000000..dda08f836 --- /dev/null +++ b/dmp-frontend/src/assets/splash/contact.html @@ -0,0 +1,127 @@ + + + + + + Argos + + + + + + + + + + + + + + + + + + +
+
+
+
Contact
+
+
+
Contact us to learn more
+
* Required fields
+
+ +
Full name
 
*
+
+ +
E-mail
 
*
+
+ +
Affiliation
 
*
+
+ +
Message
 
*
+
+ +
+
+
+ + + + + + + + + + diff --git a/dmp-frontend/src/assets/splash/css/contact.css b/dmp-frontend/src/assets/splash/css/contact.css new file mode 100644 index 000000000..224c1e49e --- /dev/null +++ b/dmp-frontend/src/assets/splash/css/contact.css @@ -0,0 +1,42 @@ +.contact-title { + text-align: center; + font-weight: 700; + font-size: 2.375rem; + font-family: 'Roboto', sans-serif; + letter-spacing: -0.95px; + color: #212121; + opacity: 1; +} + +.contact-subtitle { + text-align: left; + font-weight: 300; + font-size: 2.375rem; + font-family: 'Roboto', sans-serif; + letter-spacing: 0px; + color: #212121; + opacity: 1; +} + +.main-contact { + padding: 3rem 16.5rem; +} + +.required { + color: #E54242; + font-weight: 400; + font-family: 'Roboto', sans-serif; + font-size: 1rem; +} + +.form { + padding-top: 3.5rem; +} + +.form-title { + text-align: left; + font-weight: 700; + font-family: 'Roboto', sans-serif; + font-size: 1.12rem; + color: #212121; +} \ No newline at end of file diff --git a/dmp-frontend/src/assets/splash/css/navbar.css b/dmp-frontend/src/assets/splash/css/navbar.css index 71bcb053f..a3513aa0b 100644 --- a/dmp-frontend/src/assets/splash/css/navbar.css +++ b/dmp-frontend/src/assets/splash/css/navbar.css @@ -49,6 +49,7 @@ flex-basis: 100%; flex-grow: 1; align-items: center; + padding-top: 0.5rem; } .navbar-toggler { @@ -104,16 +105,31 @@ cursor: default; } +.active-nav-link { + border-bottom: 4px solid #23BCBA !important; + border-left: 0 !important; + border-right: 0 !important; + border-radius: 0px !important; +} + .nav-item { margin-bottom: -1px; } .nav-link { + width: fit-content; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } +/* .nav-link:hover { + border-bottom: 4px solid #23BCBA !important; + border-left: 0 !important; + border-right: 0 !important; + border-radius: 0px !important; +} */ + .nav-link.disabled { color: #6c757d; background-color: transparent; @@ -182,11 +198,77 @@ display: none; } +.dropdown-top { + width: 0px; + border-bottom: 10px solid #23BCBA ; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + margin: 0 20%; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + z-index: 2; +} + +.dropdown-options { + background-color: #23BCBA; + border-radius: 5px; + min-width: 160px; + width: 214px; + overflow: auto; + padding: 20px 0px; +} + +.dropdown-content a { + text-align: left; + font-weight: 700; + font-family: 'Roboto',sans-serif; + font-size: 0.87rem; + color: #FFFFFF; + text-transform: uppercase; + opacity: 1; + padding: 8px 28px; + text-decoration: none; + display: block; +} + +.dropdown-options a:hover { + background-color: rgba(255, 255, 255, 0.609) !important; +} + +.show { + display: block; +} + @media (max-width: 991.98px) { .navbar-expand-lg>.container { padding-right: 0; padding-left: 0; } + #nav.navbar-shrink { + padding-top: 1rem; + padding-bottom: 1rem; + background-color: #212529; + } + #nav.navbar-shrink .navbar-brand { + font-size: 1.25em; + } + #nav.navbar-shrink .navbar-brand svg { + height: 1.5rem; + } + #nav.navbar-shrink .nav-link, #nav.navbar-shrink button { + color: white; + } + #nav.navbar-shrink .nav-link:hover { + color: #23BCBA; + } } @media (min-width: 992px) { @@ -229,7 +311,7 @@ transition: font-size 0.3s ease-in-out; } #nav .navbar-brand img { - height: 2rem; + /* height: 2rem; */ transition: height 0.3s ease-in-out; } #nav.navbar-shrink { @@ -243,12 +325,12 @@ #nav.navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img { height: 1.5rem; } - #nav.navbar-shrink .nav-link { + #nav.navbar-shrink .nav-link, #nav.navbar-shrink button { color: white; - } + } #nav.navbar-shrink .nav-link:hover { color: #23BCBA; - } + } #nav .navbar-nav .nav-item { margin-right: 1rem; } diff --git a/dmp-frontend/src/assets/splash/css/section.css b/dmp-frontend/src/assets/splash/css/section.css index 5c78e417f..18a52a474 100644 --- a/dmp-frontend/src/assets/splash/css/section.css +++ b/dmp-frontend/src/assets/splash/css/section.css @@ -195,8 +195,12 @@ section.benefits { padding-top: 3.8rem; padding-bottom: 5.4rem; } + section.contact { + padding-top: 2.8rem; + padding-bottom: 0.5rem; + } .footer { padding-top: 4.8rem; padding-bottom: 2rem; } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/splash/css/styles.css b/dmp-frontend/src/assets/splash/css/styles.css index 82e2a4365..bbf388733 100644 --- a/dmp-frontend/src/assets/splash/css/styles.css +++ b/dmp-frontend/src/assets/splash/css/styles.css @@ -17,6 +17,40 @@ body { color: #212529; } +button:focus { + outline: none !important; +} + +input[type=text], select { + width: 100%; + height: 56px; + padding: 16px; + background: #FAFAFA 0% 0% no-repeat padding-box; + border: 1px solid #D1D1D1; + border-radius: 4px; + opacity: 1; +} + +input[type=email], select { + width: 100%; + height: 56px; + padding: 16px; + background: #FAFAFA 0% 0% no-repeat padding-box; + border: 1px solid #D1D1D1; + border-radius: 4px; + opacity: 1; +} + +textarea { + width: 100%; + height: 142px; + padding: 16px; + background: #FAFAFA 0% 0% no-repeat padding-box; + border: 1px solid #D1D1D1; + border-radius: 4px; + opacity: 1; +} + .bootstrap-overrides a { text-decoration: none; background-color: transparent; @@ -136,6 +170,7 @@ hr { padding-left: 0.75rem; margin-right: auto; margin-left: auto; + z-index: 1; } .normal-btn { @@ -150,15 +185,15 @@ hr { opacity: 1; } -.margin-right-6 { - margin-left: 5.8rem; -} - .mirror { -webkit-transform: scaleX(-1); transform: scaleX(-1); } +.collapse:not(.show) { + display: none; +} + @media (min-width: 576px) { .container { max-width: 540px; @@ -175,10 +210,14 @@ hr { .container { max-width: 960px; } + + .margin-right-6 { + margin-left: 5.8rem; + } } @media (min-width: 1244px) { .container { max-width: 1204px !important; } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/splash/index.html b/dmp-frontend/src/assets/splash/index.html index 895bc7cc6..bb74976e8 100644 --- a/dmp-frontend/src/assets/splash/index.html +++ b/dmp-frontend/src/assets/splash/index.html @@ -23,12 +23,32 @@