I'm trying to figure out on how to give a space in between my top navigation menu and the dropdown list (when hovered). Here is the screenshot of it.
there is no space so it looks kind of crowded
I've tried adding a margin-top: 10px; to the css of the dropdown, but it made the hover not working anymore.
Here is my code:
.header {
position: relative;
top: 0; left: 0; right: 0;
width: 100%;
height: 140px;
line-height: 140px;
background-color: #060930;
}
.header .btn {
display: inline-block;
vertical-align: middle;
line-height: normal;
margin-left: 2%;
}
.ad, .arch, .abt {
font-family: 'product_sansbold';
font-weight: normal;
font-style: normal;
background-color: transparent;
border: transparent;
cursor: pointer;
margin: 0 4px;
}
.ad {
color: #FBF3FF;
font-size: 32px;
}
.arch, .abt {
color: #a1a6e6;
font-size: 18px;
}
.arch:hover, .abt:hover {
transition-duration: 0.3s;
color: #d7daff;
}
.arch:active, .abt:active {
color: #d7daff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-cont {
display: none;
position: absolute;
background-color: #a1a6e6;
min-width: 160px;
border-radius: 6px;
z-index: 1;
}
.dropdown-cont a {
font-family: 'product_sansbold';
color: #060930;
padding: 14px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-cont {
display: block;
background-color: #a1a6e6;
}
.dropdown-cont a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<div class="header">
<div class="btn">
<button class="ad" type="button" onclick="window.location.href='index.html'"><b>AD.</b></button>
<div class="dropdown">
<button class="arch" type="button" onclick="window.location.href='archive.html'"><b>Archive</b></button>
<div class="dropdown-cont">
Stories
Photos
</div>
</div>
<button class="abt" type="button" onclick="window.location.href='about.html'"><b>About</b></button>
</div>
</div>
</html>
What you want to do is give it a border rather than a margin. Margin will shift that entire element down so once you stop hovering, it wont appear. I have given it a border of 10px but you can tweak it however you like.
.header {
position: relative;
top: 0; left: 0; right: 0;
width: 100%;
height: 140px;
line-height: 140px;
background-color: #060930;
}
.header .btn {
display: inline-block;
vertical-align: middle;
line-height: normal;
margin-left: 2%;
}
.ad, .arch, .abt {
font-family: 'product_sansbold';
font-weight: normal;
font-style: normal;
background-color: transparent;
border: transparent;
cursor: pointer;
margin: 0 4px;
}
.ad {
color: #FBF3FF;
font-size: 32px;
}
.arch, .abt {
color: #a1a6e6;
font-size: 18px;
}
.arch:hover, .abt:hover {
transition-duration: 0.3s;
color: #d7daff;
}
.arch:active, .abt:active {
color: #d7daff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-cont {
display: none;
position: absolute;
background-color: #a1a6e6;
min-width: 160px;
border-radius: 6px;
z-index: 1;
border-top: 10px solid #060930;
}
.dropdown-cont a {
font-family: 'product_sansbold';
color: #060930;
padding: 14px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-cont {
display: block;
background-color: #a1a6e6;
}
.dropdown-cont a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<div class="header">
<div class="btn">
<button class="ad" type="button" onclick="window.location.href='index.html'"><b>AD.</b></button>
<div class="dropdown">
<button class="arch" type="button" onclick="window.location.href='archive.html'"><b>Archive</b></button>
<div class="dropdown-cont">
Stories
Photos
</div>
</div>
<button class="abt" type="button" onclick="window.location.href='about.html'"><b>About</b></button>
</div>
</div>
</html>
Related
i am curios on how i would get a logo above the Navbar
Like this:
I am not really sure how i can achieve this, i basically want the navbar to not be at the very top, but have the logo-top at the top of the site, then have the Navbar centered on the Logo, while the Logo is above the Navbar, so basically a part of the Navbar should be hidden behind it, and then align the buttons left and right of it
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: grey;
}
.navbar a {
display: inline-block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
}
.dropdown .dropbtn {
display: inline-block;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.logo {
width: 10% !important;
height: 10% !important;
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<div class="navbar" align="center">
Home
News
<img src="https://via.placeholder.com/50" width="5%; height=5%; z-index: 10">
<div class="dropdown">
<button class="dropbtn">Server
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" align="center">
Server 2
Server 1
</div>
</div>
Discord
</div>
You could use flex box model and play around with the negative margin on the logo (I use .middle-logo class in here as an example):
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
background-color: grey;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.navbar a {
display: inline-block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
}
.dropdown .dropbtn {
display: inline-block;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.logo {
width: 10% !important;
height: 10% !important;
position: absolute;
left: 50%;
margin-left: -50px !important;
/* 50% of your logo width */
display: block;
}
.middle-logo {
height: 66px;
margin-top: -10px;
margin-bottom: -10px;
display: inline-block;
width: 66px;
}
<div class="navbar" align="center">
Home
News
<img src="https://w7.pngwing.com/pngs/107/759/png-transparent-circle-white-circle-white-monochrome-black-thumbnail.png" width="5%; height=5%; z-index: 10" class="middle-logo">
<div class="dropdown">
<button class="dropbtn">Server
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" align="center">
Server 2
Server 1
</div>
</div>
Discord
</div>
I used a random width/height here though, but the important part here is to use that negative margin, you could just adjust it according to your need
You can change the layer of your image/logo with z-index in css
I have a drop-down cart button in my application with the following html, in which I control the fact that it is displayed by a class variable in javascript. I'd like it to also display when the mouse passes the button, and looking for information I've only found a couple of examples that do it in css as I show below.
<div class="action-wrapper">
<button class='cart d-flex justify-content-center align-items-center p-0 m-0' (click)='toggleCart()'>
<i class='icon-addcart'></i>
<p *ngIf='itemsQuantity !== 0'>{{itemsQuantity}}</p>
</button>
<div class="dropdown" [ngClass]="{'disable': toggle}">
<div class='empty' *ngIf='itemsQuantity === 0'>
<a class='empty-title p-0 m-0'>No items</a>
</div>
<div class='group' *ngFor='let item of cart'>
<div class='first-row' *ngIf='itemsQuantity !== 0'>
<a class='title-group'>{{item.title}</a>
<i class='icon-trash-o' (click)='deleteItem(item)'></i>
</div>
<div class='last-row' *ngIf='itemsQuantity !== 0'>
<a class='quantity'>{{item.quantity | digitsFormat}}</a>
<span class='price-group' [innerHTML]='item.price | currencyFormat'></span>
</div>
</div>
<div class='action' *ngIf='itemsQuantity !== 0'>
<ciev-button label='shop' (click)='viewDetails()'></ciev-button>
</div>
</div>
</div>
on my css I'm trying to access the dropdown with the button class but I don't see a way to do it
.cart {
background-color: $quinaryColor;
border: none;
border-radius: 5px;
color: $primaryColor;
font-size: 16px;
width: 233px;
height: 53px;
line-height: 0px;
cursor: pointer;
margin-left: 10px;
.icon-addcart {
color: $primaryColor;
font-size: 30px;
}
p {
display: flex;
justify-content: center;
align-items: center;
font-size: 9px;
// font-weight: 600;
background-color: $duodenaryColor;
width: 17px;
height: 17px;
border-radius: 10px;
border: 1px solid $primaryColor;
margin-top: -4px;
margin-left: -14px;
}
span {
margin-left: 10px;
}
&:hover{
background-color: $duodenaryColor;
cursor: pointer;
.dropdown {
display: block;
}
}
&:focus {
outline: none;
}
&:disabled {
background: $secondaryColor;
cursor: not-allowed;
}
}
.dropdown {
list-style: none;
position: absolute;
background-color: $primaryColor;
border: 1px solid $secondaryColor;
box-sizing: border-box;
box-shadow: 1px 1px 4px rgba(35, 50, 64, 0.2);
border-radius: 5px;
padding: 20px;
width: 281px;
max-height: 450px;
overflow: auto;
margin: 0.6% 0 0 -2%;
&::-webkit-scrollbar {
width: 1px;
}
&.disable {
display: none;
}
.group {
border-bottom: 1px solid $uiFooterColor;
padding: 8px;
}
.empty {
display: flex;
justify-content: center;
.empty-title {
font-weight: 600;
font-size: 12px;
line-height: 19px;
color: $quaternaryColor;
margin-bottom: 10px;
}
}
.first-row {
display: flex;
justify-content: space-between;
margin: 0 0 5px 0;
}
.last-row {
display: flex;
justify-content: space-between;
margin-bottom: -20px;
}
.title-group {
font-weight: 600;
font-size: 13px;
line-height: 19px;
color: $quaternaryColor;
}
.name {
font-weight: 600;
font-size: 13px;
line-height: 19px;
color: $quaternaryColor;
}
.quantity {
font-size: 13px;
line-height: 19px;
color: $octonaryColor;
border: none;
margin-left: -60px;
}
.price-group {
font-size: 12px;
line-height: 19px;
text-align: right;
color: $octonaryColor;
.ordinal {
color: $octonaryColor !important;
}
}
.icon-trash-o {
color: $quinaryColor;
cursor: pointer;
}
.action {
margin-top: 5px;
// position: sticky;
// bottom: 0;
}
}
is it possible to make it deploy with the css having it already controlled with javascript?
HTML
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
CSS
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 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: #ddd;}
/* 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: #3e8e41;}
I am having trouble trying to remove a gap between a navigation bar and a div that is supposed to show under the navigation bar.
Here's my code:
<%-- Nav Bar --%>
<ul>
<li> <a class="welcometitle"> Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li class="dropdown">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"> <i class="fa fa-bars"></i> </button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</li>
</ul>
<%-- Iframe --%>
<div class="h_iframe">
<iframe src="inicio.aspx" name="ventana" ></iframe>
</div>
This is the CSS I'm using:
body
{
font: 14px 'Segoe UI', 'Helvetica Neue', 'Droid Sans', Arial, Tahoma, Geneva, Sans-serif;
overflow-y: hidden;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.h_iframe iframe {
width: 100%;
height: 100%;
margin-top: 0;
}
.h_iframe {
height: 100%;
width: 100%;
margin-top: 0;
top: 0;
z-index: -1;
padding-left: 159px;
position: fixed absolute
}
.welcometitle {
float: left;
display: block;
color: white;
text-align: center;
padding: 1px 16px;
padding-top: 12px;
text-decoration: none;
font-size: 20px;
font-weight: 500;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #006cb4;
padding-left: 163px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
img {
width: 92%;
padding-left: 8px;
margin: 0;
top: 0;
}
.dropbtn {
background-color: #111;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #d4d4d4;
color: #111;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
/*display: block;*/
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;
position: fixed;
}
.active {
background-color: #4CAF50;
}
I have tried different things but it just doesn't seem to work. Can you find where I'm messing it up?
You can add some little CSS to the iframe class.
Here is the code:
.h_iframe {
margin-top: -20px;
}
https://jsfiddle.net/0q5s98sL/
Below is attached a jsfiddle, currently the drop down menu doesn't work and I want it to be position in the top right corner instead of the left,
If possible id like the drop down menu to fill up the entire navbar when selected as this web app is solely for mobile devices,
does anyone have any ideas of how I can solve these issues?
Thanks in advance
body {
background-color: black;
}
#icon {
max-width: 200px;
margin: 1% auto;
}
#navlogo {
position: absolute;
right: 3rem;
height: 4rem;
top: 2rem;
line-height: 100px;
}
footer {
width: 100%;
background: black;
color: white;
}
.fa {
padding: 20px;
font-size: 30px;
color: white;
}
.fa:hover {
color: lightgrey;
text-decoration: none;
}
#logo
/*main logo*/
{
position: absolute;
left: 0px;
right: 0px;
bottom: 0;
margin-left: auto;
margin-right: auto;
z-index: -1;
line-height: 100px;
}
h1 {
font-family: "Josefin Sans";
font-size: 2.5em;
right: 3rem;
}
#media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
#icon {
max-width: 150px;
}
h4 {
font-size: 1.9em;
}
img {
max-height: 100px;
}
p {
padding-bottom: 5rem;
}
p#h6 {
font-family: "Josefin Sans";
color: white;
font-size: 3.5rem;
float: left;
line-height: 150px;
padding-top: 0;
z-index: -1;
margin-left: 1rem;
}
#h7 {
font-family: "Josefin Sans";
color: white;
float: left;
font-size: 2.5rem;
line-height: 150px;
}
#h8 {
font-family: "Josefin Sans";
color: white;
float: left;
font-size: 2.5rem;
line-height: 150px;
}
h4 {
font-family: "Josefin Sans";
color: white;
font-size: 3rem;
width: 100px;
text-align: left;
position: fixed;
top: 0rem;
left: 1rem;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="js/java.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<div class="dropdown">
<button class="dropbtn"> <img src="http://konpakuto.com/logo.jpg">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h4 style="padding-bottom:-40rem;">health</h4>
by adding the following CSS you will get a working drop down
.navbar {
overflow: visible;
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown:hover .dropdown-content {
display: block;
}
I am making dropdown menu for my main menu, there is username where user clicks and then it shows the content (dropdown menu), This was made by checkbox type input for the button.
Unfortunately, menu doesn't seem to show at all, and disappears at the end of the menu.
Menu:
HTML:
<div class="profilebar">
<div class="dropdown" style="cursor: pointer;">
<input type="checkbox" id="droptoggle" class="toggled">
<label for="droptoggle" class="profilename" style="cursor: pointer;">{{ username }}<span class="caret">▾</span></label>
<ul class="dropdown-menu" role="menu">
<li class="sub-menu">
Link1
Link2
Link3
<a href-"/">Link4t</a>
</li>
</ul>
</div>
<img class="profilepicture" src="url here"></img>
<p class="balance" style="text-decoration:none">${{ balance }}</p>
</div>
</div>
CSS:
.profilebar {
float: right;
width: 150px;
height: 7%;
margin-top: 0.5%;
margin-right: 1.5%;
min-width: 70px;
}
.profilename {
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 400;
width: 0.5%;
font-size: 11pt;
color: white;
text-decoration: none;
}
.caret {
margin-left: 3.5%;
font-size: 8pt;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 4%;
}
.dropdown-menu {
display: none;
position: absolute;
margin: 2px;
width: 10px;
min-width: 10px;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-menu + a:hover {
background-color: #C90205
}
.toggled {
visibility: hidden;
display: none;
}
.profilepicture {
position: absolute;
margin-left: 1.2%;
border-style: groove;
border-width: 1.5px;
}
.balance {
position: relative;
margin-top: 2.3%;
color: red;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 12pt;
color: #C90205;
margin-left: 44.5%;
}
.toggled:checked ~ .dropdown-menu {
display: block;
z-index: 99;
}
Fiddle ( Don't look at image, it is placeholder anyway ).
So what can the problem be? i have tried z-index on positioned elements which didn't seem to work out, how can i make dropdown menu overlay every other element so it can be fully seen?
The menu has overflow: hidden, so it will hide when going beyond the content, removing the overflow: hidden from the menu class shows the dropdown menu.
Fiddle
<style>
.profilebar {
/* float: right;
width: 150px;
height: 7%;
margin-top: 0.5%;
margin-right: 1.5%;
min-width: 70px; */
position: absolute;
top: 0.5%;
right: 1.5%;
width: 150px;
height: 7%;
border: 1px solid #777;
}
.profilename {
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 400;
width: 0.5%;
font-size: 11pt;
color: white;
text-decoration: none;
}
.caret {
margin-left: 3.5%;
font-size: 8pt;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 4%;
}
.dropdown label {
color: #333;
}
.dropdown-menu {
display: none;
position: absolute;
margin: 2px;
width: 100px;
min-width: 10px;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-menu a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-menu + a:hover {
background-color: #C90205
}
.toggled {
visibility: hidden;
display: none;
}
.profilepicture {
position: absolute;
margin-left: 1.2%;
border-style: groove;
border-width: 1.5px;
}
.balance {
position: relative;
margin-top: 2.3%;
color: red;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 12pt;
color: #C90205;
margin-left: 44.5%;
}
.toggled:checked ~ .dropdown-menu {
display: block;
z-index: 99;
}
</style>
<body>
<div class="profilebar">
<div class="dropdown" style="cursor: pointer;">
<input type="checkbox" id="droptoggle" class="toggled">
<label for="droptoggle" class="profilename" style="cursor: pointer;">USERNAME<span class="caret">▾</span></label>
<ul class="dropdown-menu" role="menu">
<li class="sub-menu">
Link1
Link2
Link3
Link4
</li>
</ul>
</div>
<img class="profilepicture" src="url here"></img>
<p class="balance" style="text-decoration:none">BALANCE</p>
</div>
</div>