skribble85
New Coder
Code:
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
rel="stylesheet"
/>
<style>
* {
padding: 0px;
margin: 0px;
font-family: "Poppins", sans-serif;
}
/* Style The Dropdown Button */
.dropbtn {
background-color: #ffffff;
color: #3d3d3d;
padding: 14px 50px 28px 60px;
font-size: 17px;
border: none;
font-weight: 600;
cursor: pointer;
text-align: justify;
}
.nodropbtn {
background-color: #ffffff;
color: #3d3d3d;
padding: 13px 50px 28px 60px;
font-size: 17px;
border: none;
font-weight: 600;
cursor: pointer;
text-align: justify;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
background-color: #ffffff;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
padding: 0px 0px 0px 0px;
position: absolute;
background-color: #34cc99;
min-width: 275px;
z-index: 1;
text-align: justify;
}
/* Links inside the dropdown */
.dropdown-content a {
text-decoration: none;
color: white;
padding: 15px 5px;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #019966;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
background-color: #34cc99;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #019966;
}
.nodropbtn:hover {
background-color: #019966;
}
body {
background-color: white;
max-width: 100%;
float: right;
border-bottom: solid 5px #34cc99;
background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg)
no-repeat left top;
background-size: cover;
}
h2 {
float: left;
background-color: #ffffff;
padding: 15px 225px 15px 252px;
}
</style>
</head>
Code:
<body>
<span>
<h2>HITHEREPPL</h2>
<div class="dropdown">
<button class="dropbtn">ABOUT</button>
<div class="dropdown-content">
<a href="#">OUR STORY</a>
<a href="#">OUR COMMITMENT</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">LOCATIONS</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">PRODUCTS</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="nodropbtn">BLOG</button>
<button class="nodropbtn">CONTACT</button>
</div>
</span>
</body>
</html>
