Logo Hover In Contact Section and Styling Footer-CodePudding

The contact section of my website has the same menu, however the logo still hovers in red although the class you mentioned before is applied, it's also applied in the right image with social media.

Also, I have a footer created which has no style, how can I align it to the center and have them ordered including the icons? (which cannot be seen)

* {
  padding: 0;
  margin: 0;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: rgb(151, 37, 37);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #9E1B2F;
}

.testform {
  border-radius: 5px;
  background-color: black;
  padding: 10px;
  font-family: calibri;
  color: white;
  width: 25%;
  margin-top: 200px;
  margin-left: 700px;
  margin-bottom: 300px;
}

.logo {
  display: flex;
  padding: 6px;
  border: 0;
  margin-left: 350px;
  margin-bottom: 0px;
  justify-content: center;
}

.bbicons {
  padding: 6px;
  border: 0;
  margin-left: 1650px;
  margin-bottom: 5px;
  margin-top: -60px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  border-style: dashed;
  border-color: black;
  border-radius: 20px;
  height: 80px;
  width: 1900px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: none;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: #9E1B2F;
}

logo:hover {
  background-color: transparent;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./img/favicon.png">
  <link rel="stylesheet" href="./css/style.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Contact</title>

  <body>

    <div >
      <ul>
        <li><a href="./tours.html">Tours</a></li>
        <li><a href="https://greenday.lnk.to/fatherofall">Listen to Music</a></li>
        <li><a href="./contact.html">Contact</a></li>
        <li><a href="#about">About</a></li>
        <li>
          <a href="./index.html"><img  src="./img/logo.jpg" alt="logo"></a>
        </li>
        <li>
          <a ><img src="./img/bbicons.jpg"></a>
        </li>
      </ul>
    </div>

    <div >
      <form action="/action_page.php">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">

        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">

        <label for="country">Country</label>
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>

        <input type="submit" value="Submit">
      </form>
    </div>


    <footer >
      <div >
        <div >
          <div >
            <h4><a  href="./terms.html">Terms and Conditions</a></h4>
            <h4><a  href="./privacy.html">Privacy
                        and Policy</a></h4>
            <h4>Follow Us</h4>
          </div>
          <div >
            <img src="./img/face4.png"></a>
            <img src="./img/ig3.png"></a>
            <img src="./img/tw2.png"></a>
            <img src="./img/yt2.png"></a>
          </div>
        </div>
      </div>
    </footer>

  </body>

</html>

CodePudding user response：

Treat the logo button and the logo image separately and use different classes to define each. You can still use the same technique with the :hover, we'll just be applying it to a different element this time. Also, make sure your <a> tags have an open and a close, you were missing the open on your links but I took care of that

For the footer, a flex box with some basic properties is all you need

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: rgb(151, 37, 37);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #9E1B2F;
}

.testform {
  border-radius: 5px;
  background-color: black;
  padding: 10px;
  font-family: calibri;
  color: white;
  width: 25%;
  margin-top: 200px;
  margin-left: 700px;
  margin-bottom: 300px;
}

.logoBtn {
  display: block;
  height: auto;
  width: 115px;
  padding: 8px;
  margin: 0 auto 0 150px;
}

.logoBtn:hover {
  background-color: transparent;
}

.logo {
  display: block;
  border: 0;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.bbicons {
  padding: 6px;
  border: 0;
  margin-left: 1650px;
  margin-bottom: 5px;
  margin-top: -60px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  border-style: dashed;
  border-color: black;
  border-radius: 20px;
  height: 80px;
  width: 1900px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: none;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: #9E1B2F;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./img/favicon.png">
  <link rel="stylesheet" href="./css/style.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<title>Contact</title>

<body>

  <div >
    <ul>
      <li><a href="./tours.html">Tours</a></li>
      <li><a href="https://greenday.lnk.to/fatherofall">Listen to Music</a></li>
      <li><a href="./contact.html">Contact</a></li>
      <li><a href="#about">About</a></li>
      <li>
        <a href="./index.html" ><img  src="https://i.pinimg.com/564x/41/a0/12/41a01205a632c4dd65504c7fb811305a.jpg" alt="logo"></a>
      </li>
      <li>
        <a ><img src="./img/bbicons.jpg"></a>
      </li>
    </ul>
  </div>

  <div >
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="country">Country</label>
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>

      <input type="submit" value="Submit">
    </form>
  </div>


  <footer >
    <div >
      <div >
        <div >
          <h4><a  href="./terms.html">Terms and Conditions</a></h4>
          <h4><a  href="./privacy.html">Privacy
                and Policy</a></h4>
          <h4>Follow Us</h4>
        </div>
        <div >
          <a><img src="./img/face4.png"></a>
          <a><img src="./img/ig3.png"></a>
          <a><img src="./img/tw2.png"></a>
          <a><img src="./img/yt2.png"></a>
        </div>
      </div>
    </div>
  </footer>

</body>

</html>

CodePudding user response：

I personally would use it this way, just implement it... If you need anything, just ask me!

.logo img {

transition: transform 1s ease;
}
.logo:hover img {
transform: scale(1.2,1.2);
}