This commit is contained in:
Norm Rasmussen
2022-05-03 06:40:00 -04:00
parent 70eb982586
commit 4acfdb6c63
12 changed files with 201 additions and 5 deletions

View File

@ -5,10 +5,27 @@
<div class="np-homepage-headline np-header-font-color" style="color: #fff">
{{ homepage.headline }}
</div>
{% assign role = current_person.properties.role %}
{% case role %}
{% when 'developer', 'architect' %}
<div class="np-homepage-subheadline np-header-font-color">
Hi {{ current_person.display_name }}, how is the weather in {{ current_person.properties.location }}?
Here is the training you are eligible for in your role as {{ current_person.properties.role }}.
</div>
{% else %}
<div class="np-homepage-subheadline np-header-font-color">
Hi {{ current_person.display_name }}, how is the weather in {{ current_person.properties.location }}?
Here is the training you are eligible for in your role as
<div class="dropdown">
<button class="dropbtn">Select Role ▼ </button>
<div class="dropdown-content">
<a href="#">Developer</a>
<a href="#">Architect</a>
<a href="#">Partner</a>
</div>
</div>
</div>
{% endcase %}
</div>
</div>
{% comment %} <svg class="homepage-waves__wave-1-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
@ -120,4 +137,43 @@ main {
background-position: 0% 79%;
}
}
.dropbtn {
background-color: transparent;
color: #1B2759;
border: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #635bff60;
min-width: 100%;
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #635bffc6;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #635bff;}
</style>