Additional styling for dropdown menu

This commit is contained in:
Thomas Smith 2022-09-09 11:04:36 -04:00 committed by Jacob Heider
parent 0d4646ee8d
commit e23b42b903
No known key found for this signature in database
GPG key ID: A98011B5713535BF

View file

@ -72,28 +72,59 @@
</div> </div>
<div class="row"> <div class="row">
<hr> <hr>
<div class="col"> <div class="col mb-4 mt-3">
<h4>Our white paper is available in multiple languages</h4> <h4>Our white paper is available in multiple languages</h4>
<p>Thanks to the tea community's generosity and time, our white paper is available in several world languages.</p> <p>Thanks to the tea community's generosity and time, our white paper is available in several world languages.</p>
</div> <div class="dropdown">
<div class="col"> <button class="btn btn-secondary dropdown-toggle languages" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<div class="dropdown"> Choose a Language
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> </button>
Choose a Language <ul class="dropdown-menu">
</button> <li><a class="dropdown-item" href="#">English</a></li>
<ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Belarusian</a></li>
<li><a class="dropdown-item" href="#">English</a></li> <li><a class="dropdown-item" href="#">German</a></li>
<li><a class="dropdown-item" href="#">Belarusian</a></li> <li><a class="dropdown-item" href="#">Indonesian</a></li>
<li><a class="dropdown-item" href="#">German</a></li> <li><a class="dropdown-item" href="#">Korean</a></li>
<li><a class="dropdown-item" href="#">Indonesian</a></li> <li><a class="dropdown-item" href="#">Spanish</a></li>
<li><a class="dropdown-item" href="#">Korean</a></li> </ul>
<li><a class="dropdown-item" href="#">Spanish</a></li> </div>
</ul>
</div> </div>
</div>
</div> </div>
</div> </div>
<style>
.languages{
border: 2px solid white;
border-radius: 30px;
width:240px;
background-color:#1C1E21;
}
.languages:hover{
background-color:#23282c;
}
.languages:focus{
background-color:#1C1E21;
}
.dropdown-menu{
width:240px;
background-color:#23282c;
color:white;
}
.dropdown-item{
color:white;
}
.dropdown-item:hover{
background-color: #54BAAB;
}
</style>
<!-- Start PDF --> <!-- Start PDF -->
<div class="container pdf-iframe" <div class="container pdf-iframe"