New here. Wanted to share something i made. there is something weird i made. i dont know if you would like it,

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image:url("https://i.pinimg.com/736x/87/cd/5b/87cd5b5a5a89d6f1b1d82c19ac97a3c9.jpg") ;

 background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  opacity:1.5
}

h1 {
  color: #a03241;
  text-align: center;
background-color:#f7e7eb;
}

p {
  Font-family: Verdana; Font-size: 20px;
}
.menu a {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #cb658d;
  Color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-style:hidden;
  border-radius: 10px;
  Cursor:pointer;
  display: block;
  text-decoration: none;
  Font-family: Verdana;
  display:none;
  
}
.menu{
  z-index: 1;
}
.menu a:hover {
font-family: Cursive;
color:#db5787;
  background-color: #f9e8ee;
}
.dropdown{
  position: relative;
  
}
.dropdown-menu li:hover{
  background-color: white;
}
.dropdown:hover .dropdown-menu a{
  display:block;
}
.dropdownbutton{
  padding: 8px;
  margin-bottom: 7px;
  background-color: #cb658d;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  width: 100%;
  text-align: left;
  Font-family: Verdana; Font-size: 20px;
  border-style:hidden;
  border-radius: 10px;
  Cursor:pointer;
}
.dropdownbutton:hover{
  font-family: Cursive;
color:#db5787;
  background-color: #f9e8ee;
}

.dropdown-menu a{
  display:none;
}

.dropdown:hover .dropdown-menu{display:block;}
.dropdown:hover .dropdownbutton{background-color:aquamarine ;}
</style>
</head>
<body>
<div class="header">
  <h1>SHINITS PET CARE</h1>
</div>
<div class="row">
  <div class="row-3 row-s-3 menu">
    <div class = "dropdown">
      <button class = "dropdownbutton">Day in the life of Tamse</button>
      <div class = "dropdown-menu">
    
      <a href="#">food</a>
      <a href="#">bathing</a>
      <a href="#">medicine</a>
      <a href = "#">day care</a>
    </ul>
  </div>
  </div>
</div>
  



</body>
</html>

1 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )