Adds menu popups

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;
     }

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;
     }
-}
+}

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;
     }
-}
+}

dmp-frontend/src/assets/splash/index.html

@@ -23,12 +23,32 @@
         <nav class="navbar navbar-expand-lg" id="nav">
             <div class="container">
                 <a class="navbar-brand" href="#page-top"><img src="assets/img/argos-logo.svg"></a>
-                <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars ml-1"></i></button> -->
+                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars ml-1"></i></button>
-                <div class="navbar-collapse" id="navbarResponsive">
+                <div class="collapse navbar-collapse" id="navbarResponsive">
                     <ul class="navbar-nav text-uppercase ml-auto">
-                        <li class="nav-item"><a class="nav-link" href="#about">ABOUT</a></li>
+                        <li class="nav-item">
-                        <li class="nav-item"><a class="nav-link" href="#resources">RESOURCES</a></li>
+                            <a class="nav-link dropbtn" onclick="dropdownToggle('aboutDropdown')" href="#about">ABOUT</a>
-                        <li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
+                            <div id="aboutDropdown" class="dropdown-content">
+                                <div class="dropdown-top"></div>
+                                <div class="dropdown-options">
+                                    <a href="#howItWorks">How it works</a>
+                                    <a href="#roadmap">Roadmap</a>
+                                    <a href="#faqs">faqs</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link dropbtn" onclick="dropdownToggle('resourcesDropdown')" href="#resources">RESOURCES</a>
+                            <div id="resourcesDropdown" class="dropdown-content">
+                                <div class="dropdown-top"></div>
+                                <div class="dropdown-options">
+                                    <a href="#mediaKit">Media kit</a>
+                                    <a href="#userGuide">User Guide</a>
+                                    <a href="#coBranding">Co-branding</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item"><a class="nav-link" href="contact.html">CONTACT</a></li>
                         <li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
                     </ul>
                 </div>
@@ -333,8 +353,8 @@
                     </div>
                 </div>
                 <div class="row justify-content-center pt-5">
-                    <div class="col d-flex justify-content-end conditions-policy">Terms and conditions</div>
+                    <a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
-                    <div class="col conditions-policy">Cookies policy</div>
+                    <a class="col conditions-policy" href="#!">Cookies policy</a>
                 </div>
                 <div class="row justify-content-center pt-5">
                     <div class="col-auto"><img src="assets/img/Cc.logo.circle.png" width="24" height="24"></div>
@@ -346,5 +366,9 @@
         </footer>
         <!-- Core theme JS-->
         <script src="js/scripts.js"></script>
+        <!-- Bootstrap -->
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
     </body>
 </html>

dmp-frontend/src/assets/splash/js/scripts.js

@@ -1,7 +1,7 @@
 function toggleClass(ids, option) {
     ids.forEach(id => {
         var element = document.getElementById(id);
-        var className = element.getAttribute("class").replace(/ .*/,'');
+        var className = element.getAttribute("class").replace(/ .*/, '');
         console.log(className);
         if (id === option) {
             element.classList.replace(className, "selected");
@@ -23,4 +23,27 @@ function navbarCollapse() {
     }
 };
 navbarCollapse();
-window.onscroll = function() { navbarCollapse() };
+window.onscroll = function () { navbarCollapse() };
+
+function dropdownToggle(dropdownId) {
+    this.closeOpenDropdowns();
+    document.getElementById(dropdownId).classList.toggle("show");
+}
+
+function closeOpenDropdowns() {
+    var dropdowns = document.getElementsByClassName("dropdown-content");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+        var openDropdown = dropdowns[i];
+        if (openDropdown.classList.contains('show')) {
+            openDropdown.classList.remove('show');
+        }
+    }
+}
+
+// Close the dropdown if the user clicks outside of it
+window.onclick = function (event) {
+    if (!event.target.matches('.dropbtn')) {
+        this.closeOpenDropdowns();
+    }
+}