Subscribe page html css lesson

Subscribe Me Demo

• input type submit mean this will be a submit button value="Submit" will show up on the button

    <form action="">
      <input type="text">
      <input type="submit" value="Submit">
    </form>

See the Pen html submit button by Heggyhere (@heggy231) on CodePen.

• Pop the image, add 3-d effect using filter's drop-shadow

img {
  filter: drop-shadow(1px 5px 3px rgb(11, 82, 11));
}

<!-- just blue outline around your image -->
img {
  filter: drop-shadow(1px 1px 1px blue);
}

• fit img into your container

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

• make ul, li into nav bar that is static, horizontal

  <!-- Navbar section -->
  <nav class="navbar">
    <ul>
      <li><a href="http://">Gritt-ify</a></li>
      <li><a href="http://">Gritty Landing Banner</a></li>
      <li><a href="http://">Gritter</a></li>
    </ul>
  </nav>

.navbar {
  /* stay on top page */
  position: fixed;
  top: 0;
  /* take up entire width of pg */
  width: 100%;
}

.navbar li {
  /* horizontal positioning of li */
  display: inline-block;
  padding: 7px 10px;
}

.navbar a {
  text-decoration: none;
  color: black;
}

• To delete default style for ul:

#greets ul {
  list-style-type: none;
}

• To add special avatar to my unordered list ul:

  <ul>
    <li><div class="avatar"></div><span>Hello Gritty Bear!</span></li>
    <li><div class="avatar"></div><span>What is for lunch?</span></li>
    <li><div class="avatar"></div><span>Salmon!</span></li>
  </ul>

.avatar {
  background-image: url("../images/cookie.png");
  background-size: cover;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: inline-block;
  /* keeps the avatar vertically aligned */
  vertical-align: middle;
  margin-right: 7px;
}