blog3.css

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: #eecda3; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ef629f,
    #eecda3
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ef629f,
    #eecda3
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  overflow-x: hidden;
}

nav.navbar {
  border-bottom: 4px solid rgb(155, 155, 255);
}

nav.navbar a.navbar-brand {
  font-weight: 700;
  font-family: "Times New Roman", Times, serif;
}

h1 {
  margin-top: 80px;
  font-size: 2.6em;
  font-weight: 800;
  font-family: "Times New Roman", Times, serifs;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

h3 {
  margin: 10px 140px;
  font-size: 1.5em;
  font-weight: 500;
  text-align: center;
  text-transform: capitalize;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  color: rgb(102, 102, 102);
  animation: 1s ease-out 0s 1 slideInFromRight;
}

h5 {
  font-weight: 400;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

div.container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

div.container img#one {
  animation: 1s ease-out 0s 1 slideInFromBottom;
}

div.container img {
  width: 60%;
  height: 50%;
  margin: 10px 0;
}

div.container p {
  margin: 10px 100px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.2em;
  text-transform: capitalize;
}

@media (min-width: 320px) and (max-width: 420px) {
  h1 {
    margin-top: 120px;
  }
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}